Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Setting Up Photoshop For Web, App and iPhone Development

Most people who have designed websites 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 to Match Colors Across Multiple Devices Link

In the print 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, calibrating the main editing display and using a broadcast monitor are common; these show real-time proof of how the image will look on a typical TV in a viewer’s home. In such a scenario, 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 (putting aside for now differences in gamma between Windows, OS X prior to 10.6 and the iPhone, which we’ll cover later.)

There is a catch, though. Even though you’re creating the Web or app interface on the same device that the final product will be shown on, the colors will have various sources: 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 Link

When designing websites or app interfaces, we want to perfectly match the colors that are displayed on screen in Photoshop and that are saved in files with what’s displayed in other applications, including Firefox, Safari and the iPhone Simulator. Not only do we want the colors to look the same, but we want the actual values saved in the files to perfectly match the colors we have defined in Photoshop. Colors should not shift or appear to shift in any way, under any circumstance.

Screenshot

Why Is This So Difficult? Link

Photoshop applies its color management to images displayed within its windows and to the files it saves. This is a bad thing if you’re working exclusively with RGB images for Web or on-screen user interfaces. With the default Photoshop settings, #FF0000 will actually display as #FB0018, and #BB95FF will display as #BA98FD. The differences are subtle but definitely there.

How Does Photoshop Differ From OS X And Windows? Link

ScreenshotOS 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 applied, the software utilities that measure color on screen (like /Utilities/DigitalColor Meter) will report the same values that you have saved in the file or entered as 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 color on screen often report different colors from the ones you have 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 the RGB colors that are on screen and saved to the file to match the actual color value. If you need to calibrate your monitor for Web and app design work, then you would best be served by changing it at the OS level.

Disabling color management used to be quite easy in Photoshop CS2 and all versions prior, but it now requires a little more skill.

Disabling Photoshop’s RGB Color Management Link

These instructions are for Photoshop CS4 on Mac and Windows. Setting up CS3 is very similar.

Step 1: Go to Edit → Color Settings and set the working space for RGB to Monitor RGB.

Screenshot

Step 2: Open a document and go to Edit → Assign Profile, then set it to Don’t Color Manage This Document. This must be done for every single document you work on.

Screenshot1

Step 3: Ensure View → Proof Colors is turned off.

Step 4: When saving files with Save for Web & Devices, ensure that Convert to sRGB is turned off. If you’re saving a JPEG file, then also turn off Embed Color Profile (you may want this turned on for certain photos, but chances are you’ll want it off for interface elements and icons).

Difference Between “Assign Profile” And “Convert To Profile” Link

Now would be a good time to mention the difference between Assign Profile and Convert to Profile, so that you know which to use when.

Each Photoshop document contains a color profile that’s separate from 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 doing any damage. Assigning a new profile may change the way your document appears on screen, but the data contained in the file will remain unaltered.

Convert to Profile is quite different. Not only does it assign a color profile to the 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 will more likely preserve a document’s color on screen, but the data contained in the file will be permanently altered. Use with caution.

If you’re copying layers from one Photoshop document to another, you will want to ensure that the documents have been assigned the same color profile.

Illustrator Is The Same As Photoshop Link

If you would like images saved in Illustrator or imported from Illustrator to Photoshop to match as well, then follow the steps below. These instructions are for Illustrator CS4 on Mac and Windows. Setting up Illustrator CS3 is very similar.

Step 1: Go to Edit → Color Settings, and set the working space for RGB to Monitor RGB.

Screenshot

Step 2: Open the document and go to Edit → Assign Profile. Then set it to Don’t Color Manage This Document. This must be done for every single document you work on.

Screenshot2

Step 3: Ensure that View → Proof Colors is turned off.

Step 4: When saving files with Save for Web & Devices, ensure that Convert to sRGB is turned off. If you’re saving a JPEG file, then also turn off Embed Color Profile (again, you may want this turned on for certain photos, but chances are you’ll want it off for interface elements and icons).

Screenshot

Gamma Differences Link

Windows has used a gamma3 of 2.2 since its introduction. 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 now in sync, so a Web page should look very similar on a Mac and PC that use the same monitor.

Information about the iPhone’s gamma is a little hard to come by; I couldn’t ascertain whether it is 1.8 or 2.2. This is another reason to test your interface on an iPhone.

Final Check For iPhone UI Link

Your iPhone or iPod’s screen and calibration will likely be different from your Mac or PC’s screen and calibration. I often import full-screen images of the 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 chance to make adjustments before slicing up images or committing anything to code.

Screenshot4
This article5 explains how to handle the problem that while testing some landscape iPhone app interface mocks, they seem blurrier than they appear in Photoshop.

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

Conclusion Link

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

You may be interesting in the following related posts:

(al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2009/10/assignprofile1.png
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2009/10/assignprofile-ill1.png
  3. 3 http://en.wikipedia.org/wiki/Gamma_correction
  4. 4 http://bjango.com/articles/photoappscaling/
  5. 5 http://bjango.com/articles/photoappscaling/
  6. 6 http://www.panic.com/~wade/picker/
  7. 7 http://wafflesoftware.net/hexpicker/
  8. 8 http://mattpatenaude.com/
  9. 9 https://www.smashingmagazine.com/2009/05/26/20-time-saving-tips-to-improve-designers-workflow-part-1/
  10. 10 https://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
  11. 11 https://www.smashingmagazine.com/2009/07/25/png-optimization-guide-more-clever-techniques/
  12. 12 https://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Marc Edwards (@marcedwards) is the Director & Lead Designer at Bjango (@bjango) and co-host of the Iterate podcast (@iteratetv).

  1. 1

    Smashing! great article – really useful for future projects!

    5
  2. 2

    Vitaly Friedman

    October 12, 2009 3:12 am

    Please do not post comments without any content – like “first!!!”, “thxxxx”, “GREAT!!!” etc. Instead, please leave useful and constructive feedback and respect opinions of other readers of Smashing Magazine’s articles.

    -3
  3. 3

    GREAT!!!

    -15
  4. 5

    Funny this should pop up here. I’m the ‘MacMojo’ that got the entire ball rolling at Vignet’s origional article “The Mysterious Save For Web Color Shift”.
    I feel a personal monitor profile will make it look perfect on your monitor. Just be aware it won’t always look perfect on another monitor.

    2
  5. 6

    Thats off topic but really funny because there is no such thing as dpi.

    -3
  6. 7

    the much problem was every users has difference monitor brightness, contrast, gamma set to their eyes preference (darker or lighter), and it can be pain to create a web that unified this.

    the mobile phone likely will always have a noticeable gamma/brightness/contrast, but it also depending on what LCD quality in use.

    while on desktop side, it always a fight between CRT vs LCD and later maybe Plasma or HD monitor (just maybe).

    what i remember was, my black is not your black and my white is not your white.

    maybe we should discuss about that

    0
    • 8

      I agree with Dels in regards to the issue of what one monitor sees as white might not be seen on another monitor.
      An example of this:
      I had been using the same monitor for nearly 3 – 4 years, and finally decided to upgrade. Rather than simply replacing the one monitor, I decided to duel screen with the new monitor as the primary monitor. However, upon duel screening, it was very apparent that the contrast/brightness, etc was EXTREMELY different. The older monitor was in fact quite yellow-tinted compared to the other monitor. When trying to adjust the whiteness by comparing it to a standard piece of paper (this is a bad method to adjust whiteness by the way), I was shocked at just how different it had always been.
      All the colours I had been designing and using in photoshop looked readily different on different people’s monitors, just due to simple settings and life expectancy of the hardware.
      I believe that CRT monitors have a more realistic (i.e. closest to print) quality in terms of colour? Is this correct?

      1
  7. 9

    It’s not really working here (Cinema display, Photoshop CS3). The exported images appear much brighter in Safari and Preview than the original psd file. And also the hex codes are different. Weird, because I did exactly the same and I also used Save for web.

    0
  8. 10

    I already found the solution. Photoshop CS3 has a few more options in the Color Settings window. You need to make sure that ‘Desaturate Monitor Colors By’ is unchecked. WIN!

    2
  9. 13

    @Nilo you could be right, I’ve put a lot of time into getting my monitor, photoshop, firefox, safari, and preview in sync, and these settings above don’t work for me either.

    The following settings work for me (for publishing to web on OSX):

    Calibrate your monitor through OSX

    Set Photoshop working space to: Monitor RGB
    Proof Colors turned ON
    and Save For Web with sRGB turned ON.

    My images look the same in Photoshop, Preview, Firefox, and Safari

    2
  10. 14

    The much problem was every users has difference monitor brightness, contrast, gamma set to their eyes preference (darker or lighter), and it can be pain to create a web that unified this.

    That’s actually a separate issue, and one that should be easier to fix long term. I avoided talking about the differences between how different users will see your site as it would have made the article too long.

    The first goal is getting your own computer and development environment to behave in a predictable manor, ensuring everything’s creating identical colours (as discussed in the article).

    The second goal is to ensure better consistency across different computers. Probably the best way to handle this would be to apply a global color profile to your entire website (and allow for individual images with profiles to override the site’s setting), allowing the user’s browser to try to correct as necessary match their display. To say color profiles are a little experimental on the web would be an understatement. Good work is being done, but there’s still a long way to go. I’m sure a future article from Smashing Magazine will cover this at some point!

    It’s also worth noting that all new mainstream computers have the same gamma in 2009 (Windows, Mac OS X and Linux all use 2.2 by default). Plasmas and other TVs can be higher.

    the mobile phone likely will always have a noticeable gamma/brightness/contrast, but it also depending on what LCD quality in use.

    iPhones and iPods don’t vary too much. You also have to be careful… the goal of color profiles shouldn’t be to undo the user’s brightness setting.

    It’s not really working here (Cinema display, Photoshop CS3). The exported images appear much brighter in Safari and Preview than the original psd file.

    Please ensure you’re following all the instructions to the letter. A single wrong step can throw things off.

    0
  11. 15

    I’d like it if you stopped using “iphone” and started with something more universal for things like this. “Smartphone”, “Handset” or “Crossmedia” for example. Apple already get more attention than they deserve.

    0
    • 16

      Skip Savage

      July 6, 2011 8:10 am

      Give credit where credit is due. Without Apple, smartphones would look like Blackberries and there would be no tablets, because “they serve no purpose”.

      0
  12. 17

    I already found the solution. Photoshop CS3 has a few more options in the Color Settings window. You need to make sure that ‘Desaturate Monitor Colors By’ is unchecked. WIN!

    Great to hear! The instructions in the article were for CS4, so I missed that one. Sorry.

    0
  13. 18

    “This means that although color management is applied, the software utilities that measure color on screen (like /Utilities/DigitalColor Meter) will report the same values that you have saved in the file or entered as your code.”

    This is what you expect but it is not true. As long as you are on your own screen all is OK. If you ever work with an extra, external screen you will find that it is almost impossible to get the same value on the two screens for the exact same graphics. The DigitalColorMeter works with the profile of your extrenal monitor and this will end up in wrong values. At least not the values you entered in your graphics software.

    0
  14. 19

    I use RC Web Color Picker as it works best for me compared to the others mentioned. http://osx.iusethis.com/app/rcwebcolorpicker

    0
  15. 20

    Maximilian Bartel

    October 12, 2009 4:40 am

    Great article! You can’t believe how often I had to struggle with the color shift on images exported for HTML / CSS coding. Even though I could often fix it myself I never knew why it looked so different – this said, this article was really helpful indeed! Thanks!

    0
  16. 21

    If you ever work with an extra, external screen you will find that it is almost impossible to get the same value on the two screens for the exact same graphics.

    I’m assuming you’re talking about a second (or third!) screen with a different color profile. Do you have a solution for that situation?

    1
  17. 22

    Martin Leblanc

    October 12, 2009 5:13 am

    I have been waiting for this article for a long time!

    Thanks.

    0
  18. 23
    If you ever work with an extra, external screen you will find that it is almost impossible to get the same value on the two screens for the exact same graphics.

    I’m assuming you’re talking about a second (or third!) screen with a different color profile. Do you have a solution for that situation?

    Yes, I’m talking about a second screen with a different color profile and no, I don’t have a solution. The solution I use is to do all colormetering on just my main display.

    0
  19. 24

    Doug Avery on Viget.com’s Inspire blog has a post with a comparison chart showing the various color shifts here.

    Seems like he took a different path, but ended up with the a similar result.

    It’s also worth noting that a lot of common web image formats don’t support color profiles.

    GIF: No profile or gamma support.
    PNG: Only gamma support.
    JPEG: Has profile support.

    If you’re saving GIFs or PNGs, then you’re not saving images with profiles.

    Ballard’s articles focus more on preserving accurate color for photographs across machines and displays

    It’s definitely a good idea to save photographs as JPEG images with the profile you’ve used to create and edit the image. Some browsers won’t display it using the profile, but some will.

    Yes, I’m talking about a second screen with a different color profile and no, I don’t have a solution. The solution I use is to do all colormetering on just my main display.

    Shame there’s no work around for that. I guess you could use the same profile for both screens, but then they’d look different, even if it meant you could sample them both and obtain the same (correct) color values.

    0
  20. 25

    I am a big fan of Smashing Mag but I have to disagree with this article. In my opinion the right way is
    1. Set your color settings for working in Photoshop to sRGB (Edit menu)
    2. Proof Colors is turned on and the Proof settings is set to Monitor RGB. This ensures that the output will be the same in all your applications (Safari, Preview etc.) that displays sRGB color space
    3. When saving for web ‘Embed sRGB’ is turned on

    Since most of the applications, browsers etc. is able to display the sRGB color space (not talking about the latest Safari and Firefox that can handle color profiles) all your web work should be in sRGB. If you embed the color profile sRGB then you make sure that all applications/devices will display the image in sRGB (even if for example Safari is set to use the Adobe RGB color space).

    Check this.

    2
    • 26

      hi,

      marcs article leads to a working environment in which you can be quite sure that what you see on screen is what you save to hd. it not necessarily assures that your work looks the same on every monitor out there.

      with your approach, one will have consistent display of color across all your devices. but it can lead to ever greater shifts on other devices as it alters the image colors when saving.

      however, if there is no working space “assigned” to an image file nor a color profile it will always display as sRGB as this is the minimum standard for devices. thus there is no need to convert to sRGB when saving.

      1

↑ Back to top