Photoshop to iPad color profile woes

This is driving me insane.

I always design in Photoshop with my monitor profile as the active profile. My PSD's are never color managed. This is the way I've designed since I can remember and I have always had great results. Until now.

I'm designing an iPad interface and while my blues are blue in Photoshop and soft blue/greys are soft blue/grey - saving as a PNG (not converting to sRGB), emailing them to my ipad and previewing them in the Photo app makes my blues dull and my soft blue/greys more like a brown grey.

Any help would be appreciated.

Solution 1:

2017 update: Display P3 Macs will display incorrect colours if you use the strategy below. I should write more about the setup required for the 5K iMacs and 2016 MacBook Pros.

You're well on track if you use "Don't Color Manage This Document" for your PSDs. That's part of the issue solved. And by disabling "Convert to sRGB" in the Save For Web window, you've solved another big issue (profile conversion on export shifting colours).

Emailing photos isn't really the best way to do on device previews though. If you can, use something else (there's a few apps that do it).

iOS devices have a gamma that's identical to OS X and Windows, so the main difference you're seeing is a difference in the display and their profile. Do not listen to anyone who thinks you should be assigning a colour profile in Photoshop or trying to saving colour profiles in exported images — they don't know what they're talking about. PNGs and other image formats have their embedded colour profiles ignored by iOS at runtime (in some cases, Xcode may display with colour management, so you should make sure you test on the device itself, or at the very least, in the iOS Simulator).

The real goal when designing app interfaces is to perfectly match the colours displayed on screen in Photoshop and saved in files with what’s displayed in other applications, including the iPhone Simulator. You want the colours to not just look the same, but the actual values saved into files to match the colours we defined in Photoshop perfectly.

So what you're after is for colour values entered into Photoshop (i.e. #FF0000) to remain that value on in the PSD, in the exported PNG and to be on the device, in memory as #FF0000.

It's possible and actually not that difficult.

Full instructions can be found here (I'm the author of the article, I hope it's ok to post it here): http://bjango.com/articles/photoshop/

However, the displays found on various iOS devices (even of the same generation/type) can be subtly or quite different. The absolute best way to get good results is to do realtime device testing, using an appropriate app for that (and one that knows enough about this stuff to get it right).

Solution 2:

Well, using the monitor profile in Photoshop means the colors in your file is right on only one device on the planet, which is your monitor. To make it more universal, you need to convert the colors in your file to a device-independent profile like Adobe RGB.

In color management world, you can only assign or convert colors. Assigning doesn't change the numbers in your file, but changes the appearance of colors. Converting changes the numbers in your file, but tries to preserve the appearance of colors as much as possible. Thus, in your case, you need to convert colors to either Adobe RGB or sRGB, which is a bit more dull-looking saturation-wise, but is more stable from one device to another. And by device here I mean devices like monitors.

Now I don't know what profile is the iPad using by default to display colors onscreen, but I would assume that it is either Adobe RGB or sRGB. It could be a custom profile, but this is difficult to know. But I assume also that Apple has built support for color management in iOS, aka ColorSync.

Try either of them and let me know if it helps.

Btw, you could improve your workflow by assigning Adobe RGB to new documents from now on, as it is device-independent, and then convert them to a destination profile that matches the target device. It's just a suggestion, but a well calibrated and well profiled monitor and an Adobe RGB based workflow in Photoshop (or any other image editing app) can get you a long way.

The logic and science behind color management is extremely complex, but using it is very simple and constant. :-)