Revising a PNG file. Question!

[^Photographer]

I have a PNG image that I have changed.

I'm wondering why it looks so different from the original.

I don't have the layered PS files so had to work off the PNG file...

The top one is the one I changed. The bottom one is the original.

Why is it that the original looks so clean and the revised one has little black lines underneath the icons etc?

Is there a different way to save that I should be using? I just chose save as: PNG

Any help would be appreciated.

 

[^Photographer]

Actually I noticed that when I open the original PND image in PS that it comes up all pixelized just like it is shown above whereas the original; PNG files is clean.

Any ideas?

 

[MrToM]

The original is in SuperPNG Fabricated Profile colour space which is rated at gamma 2.2.
The edited one is in sRGB colour space. (Which is correct for web graphics)

Not that it's contributary to the problem but you should really work in AdobeRGB(1998) colour space and have PS convert this to SRGB when you save it out. (Checkbox in the save For Web Window)

You can change the colour profile if you want to but even if you don't, ALWAYS use Save For Web when saving graphics for the web.

With PNG you have 2 choices.....PNG-8 and PNG-24.
The difference is that PNG-8 transparency is either ON or OFF.....anything else gets replaced with the matte colour...in your case, black.
(Hence all the nasty black pixels)

PNG-24 OTOH supports variable opacity....like in the drop shadow on those sprites.
Use Save For Web and PNG-24 and you'll find it should be ok.

Colour profiles can be changed from Edit > Change To Profile > AdobeRGB(1998) from the dropdown list.

Regards.
MrTom.

 

[^Photographer]

The original is in SuperPNG Fabricated Profile colour space which is rated at gamma 2.2.
The edited one is in sRGB colour space. (Which is correct for web graphics)

Not that it's contributary to the problem but you should really work in AdobeRGB(1998) colour space and have PS convert this to SRGB when you save it out. (Checkbox in the save For Web Window)

You can change the colour profile if you want to but even if you don't, ALWAYS use Save For Web when saving graphics for the web.

With PNG you have 2 choices.....PNG-8 and PNG-24.
The difference is that PNG-8 transparency is either ON or OFF.....anything else gets replaced with the matte colour...in your case, black.
(Hence all the nasty black pixels)

PNG-24 OTOH supports variable opacity....like in the drop shadow on those sprites.
Use Save For Web and PNG-24 and you'll find it should be ok.

Colour profiles can be changed from Edit > Change To Profile > AdobeRGB(1998) from the dropdown list.

Regards.
MrTom.

Hi Mr. Tom...

First, thank you very much for helping me with this issue.

I am using CS5.1

The little sprite.png I have was created by my forum software company. When I place it into PS it immediately takes on the characteristics that make the images look awful (you called it matte color).

So I don't know how to get it to a place where it is PNG-24. In fact, how do I tell if it's PNG-8?

Can you help me a little further to see if I can get this into PS correctly before I edit. It comes in as Indexed color and I change it to RGB Color but still it's messed up from import even before changing from Indexed Color.

Anything you can do to guilde me along would be so appreciated.

Thanks.

 

[MrToM]

Well I'm a bit confused here myself now to be honest...

The two images you posted open just fine in PS.
The only difference is the one you edited is in sRGB colour space and has the black pixels, but I assumed this was a result of you saving the original out to a PNG-8 and not PNG-24.

The original image, although in SuperPNG colour space, looks absolutely fine.
When saved out as a PNG-24 it doesn't have the black pixels...although there is a slight colour difference because of the different colour profile.

How did you manage to open the original file and save it (erroneously) in the first place?
You must have done this as you posted the images here on the forum......???

Regards.
MrTom.

 

[thebestcpu]

Doing a tag team with MrTom.

Importing PNGs with indexed transparency into CS5 does not work well. It is fine in CS6 and CC.
Here is a link that describes the issue: http://feedback.photoshop.com/photoshop_family/topics/opening_transparent_png_loses_transparency
I see exactly the same thing as Photographer when I use CS5 yet it is fine in CS6 and CC

An easy workaround is the read the PNG into a reader that does not have this issue and just ressave the PNG to the correct format.
In my case I just opened up the PNG in Preview on my Mac and exported as PNG. Then it read in just fine in CS5

Note that you can create the same issue when using Save for Web if you save as PNG-8 with transparency and use a black matte yet I don't think that was your issue.

You just need a compatible reader, re-save to the correct format and you are good to go even with CS5. Hope this helps

 

[MrToM]

Ah ha!

Right.....with you now!

Thanks thebestcpu.....yes that makes sense.

I guess the challenge now then is to find something that not only open the file correctly but will also save it correctly too....I'll experiment.

Thanks again.

Regards.
MrTom.

 

[^Photographer]

An easy workaround is the read the PNG into a reader that does not have this issue and just ressave the PNG to the correct format.
In my case I just opened up the PNG in Preview on my Mac and exported as PNG. Then it read in just fine in CS5

Note that you can create the same issue when using Save for Web if you save as PNG-8 with transparency and use a black matte yet I don't think that was your issue.

You just need a compatible reader, re-save to the correct format and you are good to go even with CS5. Hope this helps

I stumbled across the same fix. Opened the original PNG in Preview and saved as a PNG and it worked fine.

Kind of lucked into a solution.

Thanks for the help guys.