Setting Up Photoshop For Web, App and iPhone Development

Most peo­ple who have designed web­sites or apps in Pho­to­shop will, at one point or another, have had issues try­ing to match col­ors in images to col­ors gen­er­ated by HTML, CSS or code. This arti­cle aims to solve those prob­lems once and for all.

Color Man­age­ment to Match Col­ors Across Mul­ti­ple Devices

In the print world, color man­age­ment typ­i­cally involves cal­i­brat­ing your entire work­flow, from scan­ner or dig­i­tal cam­era to com­puter dis­play to hard proofs to the final press out­put. This can be quite a tall order, espe­cially when the devices use dif­fer­ent color spaces — match­ing RGB and CMYK devices is noto­ri­ously hard.

When design­ing or edit­ing for TV, cal­i­brat­ing the main edit­ing dis­play and using a broad­cast mon­i­tor are com­mon; these show real-time proof of how the image will look on a typ­i­cal TV in a viewer’s home. In such a sce­nario, color man­age­ment offers many ben­e­fits and is highly recommended.

When build­ing Web and appli­ca­tion inter­faces, the sit­u­a­tion is a lit­tle dif­fer­ent. The final out­put is the same device that you’re using to cre­ate the art­work: a com­puter dis­play (putting aside for now dif­fer­ences in gamma between Win­dows, Mac OS X prior to 10.6 and the iPhone, which we’ll cover later.)

There is a catch, though. Even though you’re cre­at­ing the Web or app inter­face on the same device that the final prod­uct will be shown on, the col­ors will have var­i­ous sources: images (typ­i­cally PNG, GIF and JPEG), style markup (CSS) and code (JavaScript, HTML, Objective-C, etc). Get­ting them all to match can be tricky.

The Goal

When design­ing web­sites or app inter­faces, we want to per­fectly match the col­ors that are dis­played on screen in Pho­to­shop and that are saved in files with what’s dis­played in other appli­ca­tions, includ­ing Fire­fox, Safari and the iPhone Sim­u­la­tor. Not only do we want the col­ors to look the same, but we want the actual val­ues saved in the files to per­fectly match the col­ors we have defined in Pho­to­shop. Col­ors should not shift or appear to shift in any way, under any circumstance.

Why Is This So Difficult?

Pho­to­shop applies its color man­age­ment to images dis­played within its win­dows and to the files it saves. This is a bad thing if you’re work­ing exclu­sively with RGB images for Web or on-screen user inter­faces. With the default Pho­to­shop set­tings, #FF0000 will actu­ally dis­play as #FB0018, and #BB95FF will dis­play as #BA98FD. The dif­fer­ences are sub­tle but def­i­nitely there.

How Does Pho­to­shop Dif­fer From OS X And Windows?

OS X’s color man­age­ment is applied to the entire dis­play at the very end of the pro­cess­ing chain, after the main buffer in video ram. This means that although color man­age­ment is applied, the soft­ware util­i­ties that mea­sure color on screen (like /Utilities/DigitalColor Meter) will report the same val­ues that you have saved in the file or entered as your code. I believe the color man­age­ment in Win­dows Vista and Win­dows 7 (Win­dows Color Sys­tem) works in a sim­i­lar fashion.

Photoshop’s color man­age­ment is applied only to the image por­tion of its win­dows and to the files it saves. This color cor­rec­tion hap­pens as Pho­to­shop draws the image on screen, so soft­ware util­i­ties that mea­sure color on screen often report dif­fer­ent col­ors from the ones you have spec­i­fied. It’s worth not­ing that OS X’s color man­age­ment is applied on top of Photoshop’s.

The best solu­tion I’ve found is to dis­able Photoshop’s color man­age­ment for RGB doc­u­ments as much as pos­si­ble. Doing so forces the RGB col­ors that are on screen and saved to the file to match the actual color value. If you need to cal­i­brate your mon­i­tor for Web and app design work, then you would best be served by chang­ing it at the OS level.

Dis­abling color man­age­ment used to be quite easy in Pho­to­shop CS2 and all ver­sions prior, but it now requires a lit­tle more skill.

Dis­abling Photoshop’s RGB Color Management

These instruc­tions are for Pho­to­shop CS4 on Mac and Win­dows. Set­ting up CS3 is very similar.

Step 1: Go to Edit → Color Set­tings and set the work­ing space for RGB to Mon­i­tor RGB.

Step 2: Open a doc­u­ment and go to Edit → Assign Pro­file, then set it to Work­ing RGB. This must be done for every sin­gle doc­u­ment you work on.

Step 3: Ensure View → Proof Col­ors is turned off.

Step 4: When sav­ing files with Save for Web & Devices, ensure that Con­vert to sRGB is turned off. If you’re sav­ing a JPEG file, then also turn off Embed Color Pro­file (you may want this turned on for cer­tain pho­tos, but chances are you’ll want it off for inter­face ele­ments and icons).

Dif­fer­ence Between “Assign Pro­file” And “Con­vert To Profile”

Now would be a good time to men­tion the dif­fer­ence between Assign Pro­file and Con­vert to Pro­file, so that you know which to use when.

Each Pho­to­shop doc­u­ment con­tains a color pro­file that’s sep­a­rate from the actual color data stored for each pixel. Assign Pro­file sim­ply changes the pro­file in the doc­u­ment, with­out affect­ing any of the color data. It’s a non-destructive action: you can assign a new color pro­file to your doc­u­ments as often as you like with­out doing any dam­age. Assign­ing a new pro­file may change the way your doc­u­ment appears on screen, but the data con­tained in the file will remain unaltered.

Con­vert to Pro­file is quite dif­fer­ent. Not only does it assign a color pro­file to the doc­u­ment, but it tries to keep your image look­ing the same on screen. It does this by pro­cess­ing the color data con­tained in the file for each pixel. Con­vert­ing to a new pro­file will more likely pre­serve a document’s color on screen, but the data con­tained in the file will be per­ma­nently altered. Use with caution.

If you’re copy­ing lay­ers from one Pho­to­shop doc­u­ment to another, you will want to ensure that the doc­u­ments have been assigned the same color profile.

Illus­tra­tor Is The Same As Photoshop

If you would like images saved in Illus­tra­tor or imported from Illus­tra­tor to Pho­to­shop to match as well, then fol­low the steps below. These instruc­tions are for Illus­tra­tor CS4 on Mac and Win­dows. Set­ting up Illus­tra­tor CS3 is very similar.

Step 1: Go to Edit → Color Set­tings, and set the work­ing space for RGB to Mon­i­tor RGB.

Step 2: Open the doc­u­ment and go to Edit → Assign Pro­file. Then set it to Work­ing RGB. This must be done for every sin­gle doc­u­ment you work on.

Step 3: Ensure that View → Proof Col­ors is turned off.

Step 4: When sav­ing files with Save for Web & Devices, ensure that Con­vert to sRGB is turned off. If you’re sav­ing a JPEG file, then also turn off Embed Color Pro­file (again, you may want this turned on for cer­tain pho­tos, but chances are you’ll want it off for inter­face ele­ments and icons).

Gamma Dif­fer­ences

Win­dows has used a gamma of 2.2 since its intro­duc­tion. Mac OS X has used a gamma of 1.8 for all ver­sions except Snow Leop­ard (the lat­est release), which uses 2.2. What does this mean? Prior to Snow Leop­ard, Web pages looked darker on Win­dows. Thank­fully, both oper­at­ing sys­tems are now in sync, so a Web page should look very sim­i­lar on a Mac and PC that use the same monitor.

Infor­ma­tion about the iPhone’s gamma is a lit­tle hard to come by; I couldn’t ascer­tain whether it is 1.8 or 2.2. This is another rea­son to test your inter­face on an iPhone.

Final Check For iPhone UI

Your iPhone or iPod’s screen and cal­i­bra­tion will likely be dif­fer­ent from your Mac or PC’s screen and cal­i­bra­tion. I often import full-screen images of the UI into iPhoto and sync them with an iPhone to see exactly how the final inter­face will look on the device (on Win­dows, you can sync pho­tos using iTunes). This gives you another chance to make adjust­ments before slic­ing up images or com­mit­ting any­thing to code.

This arti­cle explains how to han­dle the prob­lem that while test­ing some land­scape iPhone app inter­face mocks, they seem blur­rier than they appear in Photoshop.

Please note: For some bizarre rea­son, the Pho­tos app on the iPhone doesn’t dis­play land­scape images at 1:1. Instead, it scales them slightly or shifts them to a sub-pixel posi­tion, mak­ing the images blur­rier than they should be. To avoid any issues, always save images in por­trait mode (320 pix­els wide by 480 pix­els high) to test your user inter­face mock­ups (read more about this issue).

On Mac, mov­ing col­ors between Pho­to­shop and code can be made eas­ier with Devel­oper Picker, Hex Color Picker and Col­ors (all free).

Con­clu­sion

Now, you’re able to move bitmap and vec­tor images between Pho­to­shop and Illus­tra­tor with­out any color shifts at all, and using any method. You’re also able to grab a color using the color picker in Pho­to­shop, and then use the same HEX color value in your CSS, HTML, JavaScript, Flash or Objective-C code, and it will match your images per­fectly. I hope this arti­cle has helped. If you have any ques­tions, feel free to ask in the com­ments below.

Related posts

You may be inter­est­ing in the fol­low­ing related posts:

• 20 Time-Saving Tips to Improve Designer’s Workflow
• Clever PNG Opti­miza­tion Techniques
• PNG Opti­miza­tion Guide: More Clever Techniques
• Clever JPEG Opti­miza­tion Techniques

About the Author

Marc Edwards (@marcedwards) is the Direc­tor and Lead Designer at Bjango (@bjango), an iPhone app devel­oper. Marc has been using Pho­to­shop and Illus­tra­tor for over 12 years, design­ing for print, Web, desk­top appli­ca­tions and iPhone.

(al)