5 Replies Latest reply on Aug 7, 2017 1:30 PM by melissapiccone

    PNG/GIF won't save transparancy

    webspinner Level 1

      I'm in Photoshop CC in Windows 7. 

       

      1.  Create a new file with two layers, one is a solid color, above it I have a text layer.

      2.  Make the opacity of the solid layer 50%.  Screen shows what I want correctly.

      3.  Save for web: PNG 24, Save Transparency button is selected.  (Matte field looks white, but I can't select it).

      At this point the image looks correct.  I see a checkerboard pattern indicating that transparency is on.

      4.  Save file and view it.  It has a solid background. 

       

      I've done this in the past and this is all I recall doing to get a transparent background on a PNG.  Did something change?

       

      Thanks!

       

      P.S.  Same deal on GIFs, which I have also made this way in the past.  Everything looks great until I view the saved image.

        • 1. Re: PNG/GIF won't save transparancy
          melissapiccone Adobe Community Professional

          How are you viewing the saved image? You need to place it over something other than white to see the transparency. If you view it in a browser, it won't look transparent. Create a new image in Photoshop. Add some colored squares - drop in your image into a new layer and you should see it is transparent. The checkerboard background is only in Photoshop and just a way to show you it's transparent.

          • 2. Re: PNG/GIF won't save transparancy
            melissapiccone Adobe Community Professional

            OK - I just tried this on an artboard and it didn't work - saved the whole artboard. Are you using artboards?

            • 3. Re: PNG/GIF won't save transparancy
              melissapiccone Adobe Community Professional

              I created a new document for print - no artboards and it worked the way it's supposed to. I don't know why it's different with an artboard - it shouldn't be. You have to generate your images from an artboard.

               

              Put the parts into a group. Rename the group - I named mine test.png. Add the extension .png to the name. Under the file menu - generate - make sure image assets is checked. You'll find a new folder where your document is stored called assets. If you haven't saved your document it will be on the desktop.

               

              Screen Shot 2017-08-07 at 10.58.28 AM.png

              • 4. Re: PNG/GIF won't save transparancy
                webspinner Level 1

                Thank you for your input!  I totally forgot you won't see the transparency unless it's actually over another image.

                 

                I'm trying to create a mouseover effect on a PDF.  I was able to do this in Acrobat, but it only worked in Firefox,

                neither Chrome or IE displayed the mouseover color.   Each product needs an "over" state.  The Fireworks image

                map I created is swapping images, so the transparency is not showing up.  I'm trying to figure out the most

                efficient way to do this.

                • 5. Re: PNG/GIF won't save transparancy
                  melissapiccone Adobe Community Professional

                  The easiest way is what I described above. Have each rollover version be in it's own layer / group and name them correctly then simply generate. I don't know about making them work in a PDF and I know nothing about Fireworks (why are you still using it??)