5 Replies Latest reply on Apr 26, 2010 9:02 AM by smat81

    2 problems with Slicing and changing the color of a section

    smat81

      Hi Guys,

       

      Pretty new to this Forum....

       

      Here it goes i am new to Fireworks and have a project for college to do ...this is what i am trying to achieve please help!!

       

      I am trying to create a rectangle image that i can use as the area for my main content, ie rectangle with a roundness of 20% the fill would be black, i would like to know how i can make this look like it is see through (so i can half see the background image) would this be its transparency or the opacity level ??? not sure.

       

      next i would like to export this out and import this into dreamweaver, i know you use the slice tool but when i slice a roundness image and export it, it does not crop it as it should i can still see a white bit around the corners.....hope that makes sense!

       

      then last thing how can i insert this into my main content div tag?

       

      Sorry for the million and one Q's ... i am a member of  macPro video tutorial site and they dont have a tutorial for Fireworks.. is there a place i can look for

      that has good beginner lessons for Fireworks, i know youtube is good but can be confusing at times and messy.

       

      thanks in advance for your help...

        • 1. Re: 2 problems with Slicing and changing the color of a section
          Linda Nicholls Level 4

          > I am trying to create a rectangle image that i can use as the area for my  main content, ie rectangle with a roundness of 20% the fill would be  black, i would like to know how i can make this look like it is see  through (so i can half see the background image) would this be its  transparency or the opacity level ??? not sure <

           

          Reducing the opacity of the rectangle would be one way to create the effect you want.

           

          > next i would like to export  this out and import this into dreamweaver, i know you use the slice tool  but when i slice a roundness image and export it, it does not crop it  as it should i can still see a white bit around the corners.....hope  that makes sense! <

           

          You need to make the canvas color match the bacground color of the HTML page you will be placing the sliced image on in Dreamweaver. Use Index transparency when you export.

           

          > then last thing how can i insert this into my main content  div tag? <

           

          In Dreamweaver, Clich in the document where you want to place the image, then choose Insert > Image. Browse the the folder you exported the image to. Click on the image to select it, and then on OK.

           

          You'll find lots of Fireworks tutorials on the Adobe site: http://www.adobe.com/devnet/fireworks/

          • 2. Re: 2 problems with Slicing and changing the color of a section
            Jim_Babbage Level 4

            If you want the rectangle to export out as semi-transparent for use in the web page, try setting the optimization to PNG 8, Alpha Transparency and set the canvas color to transparent. This should give you a semi transparent rectangle which will work on any background color or image.

             

            Make sure there are no objects visible above or below the rectangle.

             

            HTH

            • 3. Re: 2 problems with Slicing and changing the color of a section
              smat81 Level 1

              example 1.jpgexample 2.jpg

              myexample.jpg

               

              Hi Guys,

               

              Thanks for your help...

               

              Just to double check i have added 3 images above, image one and two are examples and results i am after, image three is were i am at.

               

              Image 1 just has the standard round edges all round, image 2 has sharp edges on the top 2 corners and then round edges on the bottom corners, they also have the transparancy / Opacity thing i am looking for. I am really on the look out to know how to achieve image 2.

               

              Image 3 is where i am at and have created in fireworks with a transparent background i have added a rectangle with a roundness of 10% the fill colour is black and the opacity is 50%, when i export this after applying the slice tool, i import it as my bg for my content div in dreamweaver but i can still see the white bits at the four corners, what am i doing wrong..

               

              I find your responses helpful but i am still a little confused,

               

              Do i create a canvas in fireworks that is the same size as my dreamweaver resolution 950 x 678 add the same background image to the fireworks as like my website, then create my rectangle box on top of that and slice that and import to dreamweaver?

               

              Is there another way??

              • 4. Re: 2 problems with Slicing and changing the color of a section
                Linda Nicholls Level 4

                " Image 1 just  has the standard round edges all round, image 2 has sharp edges on the  top 2 corners and then round edges on the bottom corners, they also have  the transparancy / Opacity thing i am looking for. I am really on the  look out to know how to achieve image 2."

                 

                OK. I see what you are trying to do. Draw the rectangle on a transparent canvas. Reduce the fill opacity as you wish. In the Optimize panel, set the export file format to PNG 8, the indexed palette to Adaptive, the colors to 256, and the matte color to transparent. Select Alpha Transparency. Export.

                 

                Note that the image transparency may not display properly in Internet Explorer 6 and earlier without some special markup. You can read about that here:

                http://www.sohtanaka.com/web-design/png-transparency-in-ie6/

                • 5. Re: 2 problems with Slicing and changing the color of a section
                  smat81 Level 1

                  Thanks a Million for all your help .....

                   

                  super quick response..

                   

                  Thanks Again.

                   

                  Jason