11 Replies Latest reply on Jul 29, 2009 5:09 AM by simonwalsworth

    Problem w/image that is 'Suppose' to have some transparency

    dan hop Level 1

      I've made a little web page for som kids in my neighborhood.

       

      Problem: PNG-8 image, w/alpha (or index) transparency, shows up fine when I preview in my browser (Firefox 3.0.10, Opera, etc.)

      - however -

      Image shows 'white' where it is supposed to be transparent when I view the web site with ANY browser...

       

      The page is at:

      http://www.hoppernet.info/our_heroes/index.htm

       

      I plan to add some eye-candy if I can get the image(s) to display properly.

       

      Any ideas on how to fix the transparency?

       

      Dan h.

        • 1. Re: Problem w/image that is 'Suppose' to have some transparency
          Linda Nicholls Level 4

          I'm seeing white background in your images. You need to re-export the images with Alpha transparency.

          • 2. Re: Problem w/image that is 'Suppose' to have some transparency
            dan hop Level 1

            I've tried it with 'Alpha Transparency' and 'Index Transparency' from Fireworks.

            Same result both times...

             

            dan

            • 3. Re: Problem w/image that is 'Suppose' to have some transparency
              Linda Nicholls Level 4

              The images are not being exported with transparency. Are they bitmaps with a white background that you are importing into Fireworks? If yes, then you will need to manually remove the backgrounds before exporting.

              • 4. Re: Problem w/image that is 'Suppose' to have some transparency
                dan hop Level 1

                The image (on the right of the page) had the background removed (made transparent) in Photoshop when I exported it.

                 

                I then imported it into Fireworks and exported it (via export wizard) to a file.png - ended up with a white background. Was trying to reduce the file size.

                 

                Then, in Fireworks, I painted the hoped-for transparent part of the image yellow and exported it again - selecting the 'yellow' color with the 'transparency eyedroper'.

                 

                You see that it is white - and NOT transparent. This leads me to think that there must be a way, in Fireworks, to manipulate the opacity of the 'web layer' or to simply delete it, but I haven't figured out how to do that.

                 

                Thank you for your interest.

                 

                Dan

                • 5. Re: Problem w/image that is 'Suppose' to have some transparency
                  Jim_Babbage Level 4

                  Set the image to Alpha transparency and EXPORT the file from 

                  Fireworks. SAVING the file will not generate the transparent background.

                   

                  Jim Babbage

                  • 6. Re: Problem w/image that is 'Suppose' to have some transparency
                    dan hop Level 1

                    Hi Jim,

                    Thx for responding.

                     

                    I ALWAYS use the 'Export Wizard' then 'Export' the file...

                     

                    If I said that I 'Save the file' I mis-spoke...

                     

                    I sorta grew up with Photoshop.

                    Fireworks is a difficult transition for me.

                     

                    I can do what I want with Photoshop, however, the resulting file is too large.

                    I haven't found a tutorial that will help me adjust to the Fireworks interface.

                    Willing to learn but just can't find the tools to learn it.

                    All of the tutorials I've found are for older versions of Fireworks.

                     

                    If Adobe plans to replace Fireworks and support that new product - I wish they'd get on with it. Seems clear that they are not that interested in perpetuating Fireworks...

                     

                    Dan H.

                    • 7. Re: Problem w/image that is 'Suppose' to have some transparency
                      Jim_Babbage Level 4

                      Don't use the export wizard.

                      Use File > Export

                      Optimization in FW hasn't changed in a long time - if ever - so the 

                      general steps should be the same.

                       

                      I used your sample file from your web site and this worked as 

                      expected. I haven't seen the original PS file so I can't comment on 

                      that, but FW will open PSD's so rather than trying to optimize in PS, 

                      try opening the PSD in FW and exporting it.

                       

                      I can recommend many tutorials (and a couple books - grin) that can 

                      help you adjust to Fireworks.

                       

                      For starters, check out this link.

                       

                      http://www.communitymx.com/abstract.cfm?cid=ECAAF

                       

                      Jim Babbage

                      • 8. Re: Problem w/image that is 'Suppose' to have some transparency
                        pixlor Level 4

                        I took a look at fiercesome ol' Gertrude for you. Without having the original .psd, here's what I can do with it (using CS3)...

                         

                        The edge of Gertrude is soft, so when I flood-fill the background, I get anti-aliased colors. This means that, once I turn the rectangular background fully transparent there will be some pixels along the edge that are blended. Consequently, the best color to choose is not yellow, but a grass green color. As a first guess, I tried #66CC00, but you can probably tweak that.

                         

                        Then, I use the menu File>Image Preview, so I can adjust the parameters and see how the image will look before I export it. I set the file format to GIF and palette to Exact (since you don't have very many colors, let's keep them pure).

                         

                        Lower down is where you can set the transparency options. Since I want to choose the green background color to turn transparent, I select Index Transparency in the drop down, click on the first transparent eyedropper (Select Transparent Color), and then use that tool to click somewhere in the green background.

                         

                        Once I do that, the green background disappears, revealing the checkerboard. Also, the color chip in the palette turns from green to transparent. You can also see the pixels that are Gertrude anti-aliased to the green background. (Nice green aura for her. ) See http://drop.io/FWpixlor/asset/fixgertrude-png for example.

                         

                         

                        If you can open your original .psd and it shows with a transparent background, then you can use this same preview to choose Alpha Transparency rather than Index Transparency before you export. With the number of colors you have, the .gif format will be the better choice for you, as it won't require any fancy coding to make it work in older browsers.

                         

                         

                        For your other question.... The Web Layer is the layer where Web slices and hot spots live. To turn that layer's visibility off, click on the eye symbol at the left of it in the Layers palette. In Photoshop, every object is on its own layer. In Fireworks, objects are objects, and you can organize them by putting them in layers (more like files in folders). Each object in a layer has an eye icon visibility control, as does the layer. You can make individual objects invisible or entire layers.

                         

                        cheers!

                         

                        Lorraine

                        • 9. Re: Problem w/image that is 'Suppose' to have some transparency
                          dan hop Level 1

                          Thank you for your help...

                           

                          Dan H.

                          • 11. Re: Problem w/image that is 'Suppose' to have some transparency
                            simonwalsworth

                            I can confirm that this issue is a problem with Fireworks CS4.

                             

                            Please see here for a detailed description of the issue with demonstration files.

                             

                            http://forums.adobe.com/thread/469307

                             

                            Apologies for cross posting.