PNG/GIF won't save transparancy

[webspinner]

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.

[melissapiccone]

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.

[melissapiccone]

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

[melissapiccone · Accepted solution]

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.

[webspinner]

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.

[melissapiccone]

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??)