PDA

View Full Version : Photoshop Colour Profiles + Save for Web....



forgie
18th February 2009, 12:53 PM
I'm pretty new to CS3, so bare with me. I'm doing a webpage design in Photoshop, and I am exporting slices of the page by copying, creating a new temp document, then doing a "Save for Web & Devices...". The reason I use that option for saving is that it gives good PNG compression. If I do a save as, I get a PNG that is 4-5x larger in file size. The only thing is, when I "Save for Web", the colours don't look the same. I don't really know what I'm doing when it comes to colour profiles, but is there some way I can do a compressed PNG export and have the image colours look the same in Safari as it does in Photoshop?

banjo
18th February 2009, 01:23 PM
What settings under Save for Web are you using? PNG-24? or PNG-8 with a restrictive web-safe colour pallet? Does the image preview in Save for Web look like your Photoshop file or the one you see in Safari?

You don't get to choose the colour profile when using Save for Web, however you do when you create the PSD. As you create a new file you can set the colour profile for it under the advanced settings. You should always set it to sRGB when designing for the web.

forgie
18th February 2009, 02:13 PM
I am exporting with PNG-24, alpha enabled, interlaced.

Also, when I do a normal "save as" PNG, it looks right in Safari, but wrong (as though it was exported via "Save for Web") in Firefox. Is this because Safari supports embedded colour profiles, but Firefox doesn't?

geektechnu
18th February 2009, 02:45 PM
I always put PNG images through PNGGauntlet (Windows GUI for the PNGCrush (http://pmt.sourceforge.net/pngcrush/) commandline tool).
Don't know if there's a Mac port of this :|

It will strip out the gamma correction data that is causing problems.
It will also optimise the PNG compression to save you 10-20% in filesize.

banjo
18th February 2009, 03:49 PM
Is this because Safari supports embedded colour profiles, but Firefox doesn't?

Yes. That's why I was a little confused about your problem because you said the colour in Safari was not what you saw in Photoshop.


Anyway, I just found this tutorial on how to use Save for Web properly (http://www.gballard.net/psd/save_for_web_embed_ICC_profile.html). I haven't read it, but it might be helpful. It basically describes how to convert you images to sRGB so they will look consistent.

marc
18th February 2009, 04:08 PM
When I do a normal "save as" PNG, it looks right in Safari, but wrong (as though it was exported via "Save for Web") in Firefox. Is this because Safari supports embedded colour profiles, but Firefox doesn't?
PNGs don't have colour profiles, only gamma (which is more trouble than it's worth). PNGCrusher can help remove gamma: Automatic PNG optimization: PNGCrusher (http://www.amake.us/software/pngcrusher/)

Here's an old thread that got VERY heated (http://forums.mactalk.com.au/24/6843-photoshop-working-colour-space.html), but I did loads of tests and I have everything set up here so Safari, Firefox and Photoshop are all identical and match HTML, CSS, JPEG, PNG and Flash (not that I use Flash).

Photoshop CS2 was a little easier to set up. You pretty much just had to turn off colour management for RGB docs.

Here's what I've been doing in Photoshop CS3:
- Edit>Color Settings. Change RGB to "Monitor RGB" in the Working Spaces section. For me this is actually "Monitor RGB - Cinema Display", but it'll vary depending on what ColorSync profile you're using.
- Open your PSD file up. Edit>Assign Profile. Set it to "Working RGB: Cinema Display". This must be done for every document you work on.
- View>Proof Setup>Monitor RGB.
- View>Proof Colors (turn it on).

It's crazy you have to do all that just to effectively turn colour management off for RGB docs. I hope they've fixed this in CS4.

Anyway, once you have that working, you'll be able to use Utilities/DigitalColor Meter to colour pick Safari, Firefox, Photoshop etc next to each other.

More info: if you're saving JPEGs, make sure you turn off the ICC profile check box when saving. I also run all PNGs through PNGCrusher.

Hope that helps.

forgie
18th February 2009, 04:25 PM
I tried dropping the "Save As..." images into PNGCrusher. It compressed a 416KB PNG down to 324KB, but if I do a photoshop "Save for Web..." it compresses down to around 160KB. It doesn't stop Firefox from displaying the colours differently (presumably due to embedded Gamma?). I have caches disabled in Firefox, so I'm pretty sure it is the updated version of the image that still looks wrong.

I'll look into the CS3 colour management settings soon. Thanks for the info and advice.

marc
18th February 2009, 04:27 PM
Nah, I'd be using Save For Web & Devices. Every single image I save for every website, widget and iPhone app I've worked on has gone through it... definitely the best way to create small file sizes.

geektechnu
18th February 2009, 07:30 PM
The last version of PNGCrusher changed its compression engine from PNGCrush to OptiPNG.
According to the official OptiPNG docs, it cannot remove gamma info as it chooses keep all metadata.

This is good reading:
Articles > The PNG Gamma Dilemma | Trevor Morris Photographics (http://morris-photographics.com/photoshop/articles/png-gamma.html)

And apparently mac GUI for PNGCrush here:
http://code.google.com/p/pngsmush/

marc
18th February 2009, 11:06 PM
The last version of PNGCrusher changed its compression engine from PNGCrush to OptiPNG.
According to the official OptiPNG docs, it cannot remove gamma info as it chooses keep all metadata.
Damn. That sucks.


This is good reading:
Articles > The PNG Gamma Dilemma | Trevor Morris Photographics (http://morris-photographics.com/photoshop/articles/png-gamma.html)
Very, very old doc though. I believe all the issues with Safari have been fixed.

Either way, my advice is still the same... remove all gamma and profile info.

forgie
19th February 2009, 02:08 PM
Here's what I've been doing in Photoshop CS3:
- Edit>Color Settings. Change RGB to "Monitor RGB" in the Working Spaces section. For me this is actually "Monitor RGB - Cinema Display", but it'll vary depending on what ColorSync profile you're using.
- Open your PSD file up. Edit>Assign Profile. Set it to "Working RGB: Cinema Display". This must be done for every document you work on.
- View>Proof Setup>Monitor RGB.
- View>Proof Colors (turn it on).
I have followed these steps, but when I turn on Proof Colors, I get the shoddy colours that were being exported by PS. Is there any way that I can "convert" the PSD so that all the colours look how they look with Proof Colors turned off when images are exported?

Very frustrating, Adobe.... :thumbdn:

edit: Going to "View -> Convert to Profile..." and selecting "Working RGB" seems to have fixed it... now to test the exports in Safari + FF3.

edit 2: After doing a "Save for Web", and selecting "Uncompensated Color" (from the tiny little triangle in the top right corner, WTF were the UI guys smoking there?), the preview shows some terrible colour compensation, but the actual exported file looks how it should in both Safari and FF3.

What a PITA. Thanks for the help and advice!

edit 3: Ah shit, I'm not out of the woods yet. Every smart object has had its colours borked. F@#$K you Adobe, this shit shouldn't be anywhere near this hard.

</vent>

marc
19th February 2009, 02:50 PM
Ah shit, I'm not out of the woods yet. Every smart object has had its colours borked. F@#$K you Adobe, this shit shouldn't be anywhere near this hard.
...especially when you consider what we're actually after: Just display the image and save the file with the values we've painted in PS with NO CONVERSION.

Apparently doing nothing is difficult for PS, it just has to impose some colour correction on you, like a rabid political campaigner.

A thought: maybe you need to set the colour profile of your Illustrator doc to Monitor RGB as well, so that when you paste the object in, it's "corrected" by not correcting?

I'm scared about buying CS4. I really want it, but I know there will be more hell to pay when setting it up for building PNGs.

forgie
19th February 2009, 03:09 PM
...especially when you consider what we're actually after: Just display the image and save the file with the values we've painted in PS with NO CONVERSION.

Apparently doing nothing is difficult for PS, it just has to impose some colour correction on you, like a rabid political campaigner.

A thought: maybe you need to set the colour profile of your Illustrator doc to Monitor RGB as well, so that when you paste the object in, it's "corrected" by not correcting?

I'm scared about buying CS4. I really want it, but I know there will be more hell to pay when setting it up for building PNGs.
I'm not actually using Illustrator for the smart objects, I am making them directly in Photoshop, but if/when I do start using it, I'll be sure to play around with the colour profiles before I do many days worth of work fine tuning colours and colour schemes! :mad:

Things seem to be working now - the only thing is that when I do a Save for Web, it gives me a puketastic preview, the colours look like Photoshop is on drugs. I have memorised the sequence of keystrokes to copy a selection, make a new document, save for web etc. so I don't actually look at the preview anyway.

marc
20th February 2009, 12:44 AM
Maybe copy + pasting the smart object into a new doc would help?

forgie
26th February 2009, 11:44 AM
Hilarious.... in a doc with colour management turned off, exporting as PNG and 'PNG for web' look right, but 'JPEG for web' looks wrong! Oh well, I will just go with PNG.

WTF is up with Photoshop? Isn't this supposed to be the state of the art in graphics software?

marc
2nd June 2009, 04:06 PM
Bump!

Worth noting: there's also a "Convert to sRGB" option in Photoshop's Save For Web. Make sure it's turned off! Forgot I changed that.

http://homepage.mac.com/marcedwards/forumbits/converttosrgb.png

marc
3rd October 2009, 06:46 PM
Full fix and cheat sheet for this issue here: Setting up Photoshop for web and iPhone dev (http://bjango.com/articles/photoshop/)

Also includes instructions for Illustrator.

marc
13th October 2009, 02:49 PM
The article was also published by Smashing Magazine: Setting Up Photoshop For Web, App and iPhone Development Smashing Magazine (http://www.smashingmagazine.com/2009/10/12/setting-up-photoshop-for-web-app-and-iphone-development/)

If this is something that interests you, then the comments of the article might be worth reading too, as there was some good discussion.