Setting up Photoshop for web and iOS development

Most people who have designed web sites or apps in Photoshop will, at one point or another, have had issues trying to match colors in images to colors generated by HTML, CSS or code. This article aims to solve those problems once and for all.

Color management attempts to match colors across multiple devices

In the printing world, color management typically involves calibrating your entire workflow, from scanner or digital camera to computer display to hard proofs to the final press output. This can be quite a tall order, especially when the devices use different color spaces—matching RGB and CMYK devices is notoriously hard.
When designing or editing for TV, it’s common for the main editing display to be calibrated and for a broadcast monitor to be used—these show a real time proof for how the image might look on a typical TV in a viewer’s home.
In those scenarios, color management offers many benefits and is highly recommended.
When building web and application interfaces, the situation is a little different. The final output is the same device that you’re using to create the artwork—a computer display. (Please ignore the differences in gamma between Windows, Mac OS X prior to 10.6 and the iPhone for now, as these are covered later.)
There is a catch though. Even though you’re creating your web or app interface on the same device the final product will be shown on, there’s various sources for colors: images (typically PNG, GIF and JPEG), style markup (CSS) and code (JavaScript, HTML, Objective-C etc). Getting them all to match can be tricky.

The goal

When designing websites or app interfaces, we’d like to perfectly match the colors displayed on screen in Photoshop and saved in files with what’s displayed in other applications, including Firefox, Safari and the iPhone Simulator. We want the colors to not just look the same, but the actual values saved into files to match the colors we defined in Photoshop perfectly.
Colors can not shift or appear to shift in any way, under any circumstance.

Why is this so difficult?

Photoshop applies color management to the images displayed within its windows and also to the files it saves. This is a bad thing if you’re working exclusively with RGB images that are for web or onscreen UI. With the default Photoshop settings, #FF0000 will actually display as #FB0018 and #BB95FF displays as #BA98FD. The differences are subtle, but definitely exist.

How does Photoshop’s color management differ to color management in OS X and Windows?

OS X’s color management is applied to the entire display at the very end of the processing chain, after the main buffer in video ram. This means that although color management is being applied, software utilities that measure colors on screen (like /Utilities/DigitalColor Meter) will still report the same values as you saved in the file or entered into your code. I believe the color management in Windows Vista and Windows 7 (Windows Color System) works in a similar fashion.
Photoshop’s color management is applied only to the image portion of its windows and to the files it saves. This color correction happens as Photoshop draws the image on screen, so software utilities that measure colors on screen often report different colors to the ones you specified. It’s worth noting that OS X’s color management is applied on top of Photoshop’s.
The best solution I’ve found is to disable Photoshop’s color management for RGB documents as much as possible. Doing so forces RGB colors on screen and saved to file to match the actual color value. If you need your monitor to be calibrated a specific way, then you’ll be best served by changing it at an OS level for web and app design work.
Disabling color management used to be quite easy in Photoshop CS2 and all versions prior, but now requires a little more skill.

Disabling Photoshop’s RGB color management

These instructions are for Photoshop CS4 & CS5 on Mac and Windows. Setting up CS3 is very similar.
Step 1 — Choose Edit > Color Settings... and set the working space for RGB to Monitor RGB.


Step 2 — Open a document and choose Edit > Assign Profile..., then set it to Working RGB. This must be done for every single document you work on.

Step 3 — Ensure View > Proof Colors is turned off.
Step 4 — When saving files with Save For Web & Devices..., ensure Convert to sRGB is turned off. If you’re saving a JPEG file, then also turn off Embed Color Profile (there are some cases where you might want this on for photos, but chances are you’ll want it off for interface elements and icons).

The difference between “Assign Profile...” and “Convert to Profile...”

Now might be a good time to mention the difference between “Assign Profile...” and “Convert to Profile...” so you’ll know when to use the appropiate function.
Each Photoshop document contains a color profile that’s separate to the actual color data stored for each pixel. “Assign Profile...” simply changes the profile in the document, without affecting any of the color data. It’s a non-destructive action—you can assign a new color profile to your documents as often as you like without any fear of doing damage. Assigning a new profile may change the way your document appears on screen, but the data contained in the file will be unaltered.
“Convert to Profile...” is quite different. It not only assigns a color profile to a document, but it tries to keep your image looking the same on screen. It does this by processing the color data contained in the file for each pixel. Converting to a new profile is more likely to maintain the way your document appears on screen, but the data contained in the file will be permanently changed. Use with caution.
If you’re copying layers from one Photoshop document to another, it’s a good idea to ensure both documents have been assigned the color profile.

Illustrator is the same as Photoshop

If you'd like images saved from Illustrator or imported from Illustrator to Photoshop to match as well, then follow the steps below. These instructions are for Illustrator CS4 & CS5 on Mac and Windows. Setting up Illustrator CS3 is very similar.
Step 1 — Choose Edit > Color Settings... and set the working space for RGB to Monitor RGB.


Step 2 — Open a document and choose Edit > Assign Profile..., then set it to Working RGB. This must be done for every single document you work on.

Step 3 — Ensure View > Proof Colors is turned off.
Step 4 — When saving files with Save For Web & Devices..., ensure Convert to sRGB is turned off. If you’re saving a JPEG file, then also turn off Embed Color Profile (there are some cases where you might want this on for photos, but chances are you’ll want it off for interface elements and icons).

Gamma differences

Windows has used a gamma of 2.2 since its introduction. Mac OS X has used a gamma of 1.8 for all versions except Snow Leopard (the latest release), which uses 2.2. What does this mean? Prior to Snow Leopard, web pages looked darker on Windows. Thankfully, both operating systems are in sync now, so the same web page design should look very similar on a Mac and a PC that are using the same monitor.
Information about the iPhone’s gamma is a little hard to come by, but I believe it’s 2.2. This is one of the reasons why it’s also a good idea to test your interface on an iPhone.

The final check when developing iOS UI

There’s a good chance that your iPhone, iPod or iPad’s screen and calibration will be different to your Mac or PC’s screen and calibration. I often import full screen images of UI into iPhoto and sync them with an iPhone to see exactly how the final interface will look on the device (on Windows you can sync photos using iTunes). This gives you another opportunity to make adjustments before slicing images up or committing anything to code.
Please note: For some bizarre reason, the Photos app on the iPhone doesn’t display landscape images at 1:1—it scales them slightly or shifts them to a sub-pixel position, making images blurrier than they should be. To avoid any issues, always save images as portrait (320 pixels wide by 480 pixels high) to test your user interface mockups (read more about this issue).

Saving Mac OS X icons

If you’re saving Mac icons using Snow Leopard’s Icon Composer, following Panic’s brilliant colour profile advice will help produce predictable and accurate results. Highly recommended.

Handy tools for Mac users

On Mac, moving colors between Photoshop and code can be made easier with Developer Picker, Hex Color Picker and Colors (all free).

Conclusion

You’ll now be able to move bitmap and vector images between Photoshop and Illustrator without any color shifts at all, using any method. You’ll also be able to use the color picker in Photoshop to grab a color, then use the same HEX color value in your CSS, HTML, Javascript, Flash or Objective-C code and it’ll match your images perfectly.
I hope this article helped. If you have any questions then feel free to ask us via Twitter.