Setting Up Photoshop For Web, App and iPhone Development

Advertisement

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

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

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?

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?

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

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”

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

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

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

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

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.

Related posts

You may be interesting in the following related posts:

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2009/10/assignprofile1.png
  2. 2 http://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 http://www.smashingmagazine.com/2009/05/26/20-time-saving-tips-to-improve-designers-workflow-part-1/
  10. 10 http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
  11. 11 http://www.smashingmagazine.com/2009/07/25/png-optimization-guide-more-clever-techniques/
  12. 12 http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/

↑ Back to topShare on Twitter

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

Advertising
  1. 1

    Smashing! great article – really useful for future projects!

    3
  2. 2

    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

    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
    • 4

      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
  4. 5

    GREAT!!!

    -14
  5. 7

    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
  6. 8

    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
  7. 11

    @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
  8. 12

    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
  9. 13

    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
    • 14

      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
  10. 15

    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
  11. 16

    “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
  12. 17

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

    0
  13. 18

    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
  14. 19

    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
  15. 20

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

    Thanks.

    0
  16. 21

    Everyone should read the following two additional articles about this issue:

    Glen Ballard has many detailed articles about Photoshop and color profiles here.

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

    Ballard’s articles focus more on preserving accurate color for photographs across machines and displays, so he advocates working in sRGB. The Viget article, on the other hand, focuses on designing interfaces in Photoshop (Avery prefers working in Monitor RGB, as this Smashing Magazine article does).

    2
  17. 22

    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.

    1
  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
  21. 27

    Open the document and go to Edit → Assign Profile. Then set it to Working RGB. This must be done for every single document you work on.

    Any advise n how to remember to do this in big stressful projects? Is it Action-able?

    0
  22. 28

    when testing designs for iphone layout its maybe worth mentioning that the iphone uses 160dpi, not 72

    0
  23. 29

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

    -1
  24. 30

    Any advise n how to remember to do this in big stressful projects? Is it Action-able?

    It certainly is actionable. Just record an action the first time you do it, then either set up a keyboard shortcut for the action or batch process your PSDs. Please note that it’s just the PSD that needs to have the profile assigned, your GIFs and PNGs can’t have profiles and you shouldn’t have a profile on your interface elements saved as JPEGs.

    In my opinion the right way is
    1. Set your color settings for working in Photoshop to sRGB (Edit menu)

    With all due respect, doing so will mean your images in Photoshop look slightly different and have different values on screen to the same image in Firefox, Safari etc. You must use the monitor’s profile in Photoshop for it to not alter colors shown. This is crucial.

    To test this:
    - Open an image or create an image in Photoshop that has some large blocks of flat color, so they’re easy to test with an eyedropper.
    - Save the image for web using your settings.
    - Open the image in Preview in OS X or a similar tool in Windows.
    - Place the two windows (the opened Photoshop doc and the saved image in Preview) side by side.
    - Open DigitalColor Meter and compare.

    A quick test here using your settings shows different values (assuming I’ve correctly followed your instructions).

    when testing designs for iphone layout its maybe worth mentioning that the iphone uses 160dpi, not 72

    It’s definitely worth mentioning. If you’re viewing your interface design at 100% in Photoshop, it will appear smaller when viewed at 100% on an iPhone or iPod touch (or most smartphones).

    I’m not sure much more needs to be done about this… you just need to be mindful that things will appear smaller and get used to how text and fine lines appear on the device.

    1
  25. 31

    Ah, but then you’re talking about pixels per inch. DPI is for printwork, as both the iPhone and internet don’t honor DPI. (A common mistake that can result in crazy errors. Size is set in pixels and dpi is not relevant).

    -1
  26. 32

    Ah, but then you’re talking about pixels per inch. DPI is for printwork, as both the iPhone and internet don’t honor DPI.

    I took shellyc to mean PPI when she said DPI.

    shellyc: Most desktop and laptop computer displays aren’t 72PPI, they’re much higher (around 100PPI, sometimes more). Really old Macs were 72PPI though.

    1
  27. 33

    Thanks, this has been bugging me since I switched to CS3 & 4. I have been working with sRGB working space and proofing ON with proofing profile set to my monitors. That way I see the document correctly but everything else in the UI is wrong, like color chooser.

    It seems like such a bit issue I am amazed Adobe has not come up with a proper solution.

    0
  28. 34

    Wow, the more I study this color management stuff the more confused I become. So when designing for web, do I want to color calibrate with something like Datacolor Spyder or not? This obviously is very important when designing for print, but would it be best to forget it entirely when working for web?

    0
  29. 35

    Instead of setting my color preferences in Photoshop then Illustrator, I set color preferences on a global level using Bridge by choosing edit > Creative Suite Color Settings…

    0
  30. 36

    I really like readling SM but I have to strongly disagree with this article.

    To my knowleage “turning off” color management in PS is a very bad idea. Here is why you shouldn’t disable color management.

    Here you will find informations why you see color shift on MAC when you save files without color profile (in save for web). All informations how to fight this problems are covered in this story.

    From my experience I may add it is good idea to turn on color management in FireFox and configure it. Here is add-on that will let you turn color management in firefox

    Also just the MAC users suffers from what it seems to be badly developed ColorSync, windows users have much lesser problem that can be easly fixed. Please follow given links.

    Regards,
    Chris

    0
  31. 37

    To test this:
    - Open an image or create an image in Photoshop that has some large blocks of flat color, so they’re easy to test with an eyedropper.
    - Save the image for web using your settings.
    - Open the image in Preview in OS X or a similar tool in Windows.
    - Place the two windows (the opened Photoshop doc and the saved image in Preview) side by side.
    - Open DigitalColor Meter and compare.
    A quick test here using your settings shows different values (assuming I’ve correctly followed your instructions).

    You might have forgotten to turn on Proof Colors in the View menu. I get the same colors this way if I follow your test.

    0
  32. 38

    Great tip on using Bridge to manage colors globally. Anyone use InDesign for web layouts? It works much better in terms of a layout tool – at least for me it does.

    0
  33. 39

    I would like to see some Color Management for print…This is all rgb based screen work and when i print using these settings it is all off! I know all printers are different especially the new digital printers but a tut for print would be a nice follow up don’t you think?

    0
  34. 40

    Why, if I may ask, is the “Assign Profile” step needed? It seems the more logical alternative is to leave Photoshop out of it using the “Don’t Color Manage this Document” option. Can anyone clarify this?

    0
  35. 41
  36. 42

    thanks! this has ALWAYS bugged the hell out of me!

    0
  37. 43

    …Don’t Color Manage this Document” option. Can anyone clarify this?

    Because you could deactivate Color Management in Photoshop using the deactivate-setting, but it won’t matter. You just can’t deactivate it! That can drive you crazy. (Especially print-designers until they realize Photoshop will assign it’s standard RGB-profile to an image without a profile, like internet-images. Print-people use the AdobeRGB as the standard RGB and because of that they’ll see the same image but much brighter).

    0
  38. 44

    I’ve used the monitor RGB method for years, switching off colour management was an easy way to ensure consistency across apps and when passing PSDs to dev teams.

    However, as I understand it, sRGB has a much wider colour gamut than the basic RGB monitor profile. Giving much richer images. Modern browsers also support sRGB and colour profiling. So I’d suggest using Bridge to sync up your apps.

    So far, we’ve had no issues.

    0
    • 45

      just to clarify: sRGB is not a monitor profile. it is the color space, defining the range of colors that can be displayed by the device. while high-end monitors display Adobe RGB or even greater spaces, sRGB is the minimum standard for low-end consumer devices and for browser software. converting an image from Adobe RGB to sRGB means to reduce it’s range of colors.

      if you open an Adobe RGB image file in a browser or on a consumer monitor it displays as sRGB because that’s what the software and the monitor can display. there is no need to convert it first.

      0
  39. 46

    nice article – just to add: you can save the color settings in Photoshop or Illustrator as presets. So you can switch, if you do print jobs and switch again, if you are working from the web. And after you saved your presets one time, you can change the settings in „Bridge” globally for all Creative Suite Programms. (Option + Shift + K or Edit -> Color Settings)

    0
  40. 47

    I sort of agree with Peter Z, I hav ealways read, and was always directed to use sRGB as an ideal space for web work (as indicated IN the pull-down menu in CS4 from Adobe :-) ) I am sure it comes down to preference on this, but can anyone explain this discrepancy?

    0
  41. 48

    Does this also apply to CS2 as the scrap business I run would benefit from these settings?

    0
  42. 49

    To my knowleage “turning off” color management in PS is a very bad idea. Here is why you shouldn’t disable color management.

    G Ballard’s article discusses photographs, not user interface elements. His advice is great for photographers, but not good for user interface designers. It’s worth noting that GIFs and PNGs can’t store color profiles, so no matter what you do, they won’t benefit from using G Ballard’s methods. PNGs are used exclusively for iPhone app design and for a lot of smartphone app design. GIFs and PNGs are widely used on the web, as are JPEGs.

    It’s also worth noting that if you follow G Ballard’s advice, the colors in your color profiled JPEGs will be corrected in color profile aware browsers. This is an issue, because your colors defined in CSS, HTML, Flash and JavaScript won’t be corrected… meaning colors don’t match!

    …and that’s the reason for this article.

    However, as I understand it, sRGB has a much wider colour gamut than the basic RGB monitor profile. Giving much richer images.

    Please note that doing so stops us from achieving our goal: “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.”

    So when designing for web, do I want to color calibrate with something like Datacolor Spyder or not? This obviously is very important when designing for print, but would it be best to forget it entirely when working for web?

    My (humble) recommendations:
    - When designing for print, calibrate your monitor using a Spyder or similar. Observe color profiles best practices and maintain profiles throughout the entire workflow.
    - When designing for web, use a standard/common setup and don’t change a thing. Buy a Mac and Apple display, run Snow Leopard with a gamma of 2.2 (the default for Mac and Windows) and don’t calibrate your screen… that way you’ll be as close to the “common man” as possible.

    Does this also apply to CS2 as the scrap business I run would benefit from these settings?

    Yes, it applies to Photoshop CS2, but the settings you’ll have to change are slightly different. Sorry, but I can’t remember the specifics on how they differ.

    Because you could deactivate Color Management in Photoshop using the deactivate-setting, but it won’t matter. You just can’t deactivate it! That can drive you crazy.

    I agree. It does drive you crazy! None of this would be needed if Photoshop had a global switch to disable color management that worked.

    1
  43. 50

    Oh good god, I started switching to Photoshop a few months ago and that means I now have a whole stack of images with an inaccurate colour profile, awesome.

    0
  44. 51

    Great article, thanks for the tips, I’ve already started putting them into motion.

    0
  45. 52

    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.

    Thanks.

    0
  46. 53

    it’s really useful article for designers. but, i tried in my macbook. i followed the same procedure, still i can see the color difference between browser and photoshop.

    0
  47. 54

    FIRSTly …I THANKS… for this GREAT… article for I really need it the knowledge like this .. this will help me much, ..

    0
  48. 55

    Love it! Been looking for a round up guide on this topic.

    0
  49. 56

    not the way I learned how to do it…

    this piece goes against dozens and dozens of past articles that go about achieving consistent color across as many devices as possible in an entirely different way, such as Pete Z has indicated.

    In addition, this article’s approach especially does not work if you do any sort of print or if you are a pro or prosumer photographer who works in both the wide-gamut Adobe RGB for printing or viewing on a wide-gamut display and also effectually duplicates and converts those wide-gamut photos/images to sRGB for a similar looking image when viewed on consumer displays with a web browser.

    I am going to pretend I did not read this article :)

    0
    • 57

      No need to pretend that you didn’t read it, that much is obvious based on your comment.

      The author’s intention is not to achieve consistent color across as many devices as possible or within print work. He explains that pretty clearly in the first few paragraphs of the article.

      The goal of this method is to achieve exact color matching within the same web page or UI element, between images and code based colors.

      As another commenter has posted, you can save your color settings in Photoshop and apply them to all Adobe CS applications within Bridge so that you can easily switch between different color management workflows depending on what your goals are; (print, web, UI, etc.)

      0
  50. 58

    You can enable the rules checkboxes under color management so that PS will ask you to convert or not the images at open or paste time ;)

    Normal LCD screens work in sRGB color space, so that’s the profile to use for online content, unless you have an expensive screen that supports wider gamuts and you’re working for offline printing.

    Convert to sRGB should be on also. Do guys on smashingmagazine.com ever read the articles, this is totally crap.

    My advice: ignore this article.
    Cheers.
    invisioner

    0
  51. 59

    @Jeff, EXACTLY the way to do it.

    Or use Fireworks

    0
  52. 60

    Really, really useful post! I’ve been trying to get this right for ages without luck — even CMYK – RGB matching is well documented but documentation on “Save for Web” that renders off-colored JPGs is hard to find. Thanks for the amazing post!

    Cheers,

    0
  53. 61

    …achieving consistent color across as many devices as possible

    That’s not actually the goal for web, application or smartphone design. The goal is to get images to match colors in code.

    if you do any sort of print or if you are a pro or prosumer photographer

    I agree.

    I absolutely would not recommend this setup for photographers or print work. That should have been clear from this section of the text in the article: “In such a scenario, color management offers many benefits and is highly recommended”.

    For the record, I’ve spent most of my career as a photo retoucher for print and understand how important color management workflow is in that domain. Designing web sites and user interfaces is a completely different beast and requires a very different approach.

    Anyone who’s telling you to assign an sRGB profile to your documents doesn’t understand two fundamental points: GIFs and PNGs can’t embed profiles and colors defined in code do not have color profiles attached to them.

    JPEGs can contain color profiles, but only some web browsers respect those profiles.

    I’m not the only one to recommend turning off ICC profiles and Convert to sRGB though. Doug Avery came to a very similar conclusion. http://www.viget.com/inspire/save-for-web-simply/

    Normal LCD screens work in sRGB color space, so that’s the profile to use for online content

    Let me ask you a question. If your images are GIFs or PNGs (which can’t have color profiles embedded) and they’re displaying in your browser, what type of color correction is done? (The answer is none.)

    If your browser isn’t doing any color correction, then what’s the best way to get Photoshop to match your browser?

    Using an sRGB profile and/or using “Convert to sRGB” when saving for web will introduce conversion and will almost certainly alter the color values you entered.

    Using the instructions in the article, you can view an image in your web browser, take a screenshot of it, edit that screenshot in Photoshop, save it for web, load it into a browser, take a screenshot of it again, then load it into Illustrator, save it for web and view it in another browser, without ANY color shift at all. If you think you have a good setup now, then I suggest you try that experiment and see what kind of results you get.

    0
  54. 62

    Man!!!! Thanks a lot. This is great article I just was looking for solving my problem with colors in Photoshop and Firefox.

    1
  55. 63

    I’m a big fan of SM as well, but I agree with

    7. Joel Laumans and 20. Peter Z

    and first do the global settings in Bridge for the internet

    0
  56. 64

    56 TH !!!! , thxxxx, GREAT!!! etc

    0
  57. 65

    Marc,

    You say:
    “Anyone who’s telling you to assign an sRGB profile to your documents doesn’t understand two fundamental points: GIFs and PNGs can’t embed profiles and colors defined in code do not have color profiles attached to them.”

    Now tell me: why would someone embed color profiles for web usage? You don’t embed a profile for an image to display on the web, you convert it to the sRGB color space, and that’s available for all the formats web supports.

    Second, color shifting in JPG and GIF is brought by compression artifacts, try saving for web at 100% and… VOILÁ, no shifting in color. That’s the trade for smaller weighted files. If you save the same file at 60% quality you’ll see shifted color, but try looking at the file at 1000 zoom or so, if you have a trained eye (and you have, that’s why you wrote this article, didn’t you?) you’ll see the slight variations in pixels color.
    Are you trying to match saved images to screenshots of those image in a browser or what?

    Try this simple test: create a new file and fill it with some color you like. Uncheck “embed color profile” and check “convert to sRGB” (that’s right, www. colorspace).And i spent three lines to tell it ;)
    To resume: you managed to match colors on your screen, go ahead and take a capture on a screen with another ICC asigned and your article gets flushed.
    Cheers.

    0
  58. 66

    Second, color shifting in JPG and GIF is brought by compression artifacts, try saving for web at 100% and… VOILÁ, no shifting in color.

    Sometimes JPEG compression or converting to indexed color when exporting to GIF can alter colors (more index conversion than JPEG). However, that’s not the main reason why it happens. If you have large areas of flat color, then it’s definitely not compression that causes the shifts. PNG-24s are lossless, so how do you explain the exact same shift happing to them?

    I’ve compiled some tests demonstrating that saving to GIF and JPEG shouldn’t shift your colors: Some Photoshop save for web tests

    Now tell me: why would someone embed color profiles for web usage?

    They might if they were displaying a photograph that was saved as a JPEG, but otherwise they wouldn’t. I’m glad you recognise that embedding profiles for web interfaces isn’t a good idea. G Ballard’s article suggested images should be saved with profiles, so my comment related to that.

    Try this simple test: create a new file and fill it with some color you like. Uncheck “embed color profile” and check “convert to sRGB” (that’s right, www. colorspace).And i spent three lines to tell it ;)

    Please take a look at this image (created by Doug Avery): http://www.viget.com/uploads/image/color-shift-grid.jpg

    To resume: you managed to match colors on your screen, go ahead and take a capture on a screen with another ICC asigned and your article gets flushed.

    Another ICC on your images? Or another ICC on another computer while editing? Or another ICC while viewing the webpage created?

    I guess we need to strongly define the goal here (as I did in the article). For me the first priority is getting images to not shift and for values set in Photoshop to match code every single time, plus Photoshop’s preview to be perfect.

    Is that your goal?

    0
  59. 67

    If there are any intelligent people reading this, here’s a warning for you: neither the author of this article, nor any of the respondents, has any clue what they’re talking about. For a few reasons, there is no good solution to color management for Web work — but you won’t even be able to find the “least bad” solution unless you understand a little more about how color management works than any of the ignoramuses in this thread. My advice is to read “Real World Color Management” by the late Bruce Fraser, although even that focuses more on the print world, not the Web. Sorry to be so negative, but this stuff is hard and misinformation isn’t going to help anybody.

    -1
  60. 68

    even that focuses more on the print world, not the Web

    …there’s your issue right there. The issues surrounding web and app development are unique to those fields. The requirements are very different to print work.

    Please reread the article and the comments a little more closely. And again (I can’t stress this enough), I’m not recommending print designers or photographers take this advice. Print design and photography requires a totally different workflow with respect to color profiles.

    If you haven’t tried to match image colors with code colors on the web, then maybe the advice isn’t for you. If you google for the issue, you’ll see it’s very, very common and can’t be fixed by following standard print color management philosophies.

    1
  61. 69

    I’m not conflating print and Web color management; you’re raising a red herring. I simply mentioned that Fraser’s book focuses more on print (although it discusses Web issues too). And I did read your article and the comments closely.

    I have years of experience wrestling with this issue, as a developer, experimenter, and teacher of color theory — and I still maintain that you don’t understand this issue in any depth and are just adding to peoples’ confusion. For example, your article goes into no detail about the range of monitor types and monitor settings in current typical use, and the implications that has for Web color strategies — yet that hellish situation (the characteristics of the typical user’s crappy TN-crystal, misadjusted monitor) remains the core consideration in any useful Web-color strategy. And you do nothing to caution the readers against the common confusion (evident in many of the comments) between what one sees on one’s own monitor, vs. what your users will see on their monitors. Rather, you (like most writers on this issue) harp on consistency within the developer’s own computer — i.e. colors in *your* Photoshop matching colors in *your* browser, etc. — which is only the tip of the iceberg.

    Also you clearly don’t understand what the intentions of Photoshop’s developers were in implementing their Web workflow, and I doubt if you really know what sRGB is either.

    Given the staggering confusion of all the self-appointed “experts” out there on these issues, and the fact that they rarely agree with each other, my conclusion is that color management really is akin to rocket science (despite all the people claiming it’s “really simple,” which is just a disguised form of bragging about how smart they are). And your claim, early in your article, that “This article aims to solve those problems once and for all” is extremely arrogant.

    -1
    • 70

      “I have years of experience wrestling with this issue, as a developer, experimenter, and teacher of color theory”

      And yet you offer no alternative solutions to the problem…

      “If there are any intelligent people reading this, here’s a warning for you: neither the author of this article, nor any of the respondents, has any clue what they’re talking about. For a few reasons, there is no good solution to color management for Web work — but you won’t even be able to find the “least bad” solution unless you understand a little more about how color management works than any of the ignoramuses in this thread. ”

      I find your comments, being the self appointed expert of color theory that you are, to be not only extremely arrogant, but also just way of publicly bragging about how smart you think you are.

      The author’s solution to the problem is authentic; it solved my problem of colors not matching between various programs on my machine with what Photoshop was displaying. It’s also the same solution discovered by another author: http://www.viget.com/inspire/save-for-web-simply/

      Both authors illustrate very clearly that this color management workflow is not for use with print or trying to match colors between a multitude of devices for photos, but rather for matching the colors of images with code based colors within the same webpage or UI element.

      So again I say, if you have a better solution for this particular problem with your “years of experience wrestling the issue” please do share with the rest of us.

      0
  62. 71

    Rather, you (like most writers on this issue) harp on consistency within the developer’s own computer — i.e. colors in *your* Photoshop matching colors in *your* browser, etc. — which is only the tip of the iceberg

    Let’s lay down some facts we can agree on:
    1. GIFs can’t contain ICC profiles.
    2. PNGs saved by Photoshop can’t contain ICC profiles.
    3. HTML documents can’t contain ICC profiles (if they can, we’re talking about experimental use).
    4. iPhone UI development typically uses PNGs exclusively, as does Mac app development.
    5. The iPhone Simulator and iPhone itself don’t respect color management on PNG images (partly because PNGs saved by Photoshop can’t contain ICC profiles).

    As is stands right now, the viewing platforms for web, iPhone and Mac apps don’t respect color management* and the final files you deliver don’t contain ICC profiles. Do you agree with everything so far?

    This means that your images and colors in code WILL NOT CHANGE THEIR VALUES with the client’s display and color profile. They simply can’t because the viewing platforms don’t respect color management (yet). Still agree?

    This isn’t an issue for the iPhone or iPod, because all of those devices are very, very similar and any large differences in display tech are correct by Apple’s profiles, making images/color values look very similar across the entire range (we have a large collection of iPods and iPhones here and they’re definitely very similar—close enough to be effectively the same for development).

    This IS an issue with websites, because (as you’ve said) a lot of users will be viewing on “the typical user’s crappy TN-crystal, misadjusted monitor”. However, your images and colors in code WILL NOT CHANGE with the client’s display and color profile, because the viewing platforms don’t respect color management. No action you take can change that.

    If you’re a web developer 100% of the time, then your best strategy is to follow the instructions in the article above AND set your monitor profile to sRGB, or buy a second display and set that to sRGB. If I did that here, I’d end up with a way to see what typical Mac users see and what typical PC users see.

    There is NO WAY to have the images automatically adjust for different users (until adding ICC profiles to HTML documents becomes supported).

    I think you’re giving too much weight to the difference between different user’s screens (given that you can’t automatically change the color values) and not enough weight to getting colors within the one page/document/app matching. Colors not matching within the one page/document/app will be noticed by EVERYONE who sees it, but differences between displays won’t, unless they have a side by side comparison.

    I’d be especially interested if you disagree with some of the facts in the first half of my comments.

    If you have time, please give me the settings you use for Photoshop and I’ll replicate them here and do some tests.

    *Beyond supporting profiled JPEGs for some browsers.

    1
    • 72

      I would also put it that there is a huge difference between a very widely distributed public appreciation of colour across numerous mediums that have multiple production inputs coming from disparate environments, versus a more personal viewing experience that is the web viewed in one colourspace at a time (presuming that I don’t have a multi-monitor setup).

      Even when I have a physical, printed item to compare with colours on my screen, I find that my eye compensates for the medium and, I often find brand colours indistinguishable when translated from a virtual space (screen) to another (print).

      Now sRGB and other compensatory colour-spaces were created with the intention to allow images to be represented with the limited 255 value steps from black to white per channel. Our perception is so good that a linear representation of colour from 0-255 does not suffice. When represented as straight RGB, we perceive a rather large step in luminosity between value 0 and 1, whereas in sRGB space, which compensates for this, the observed difference between these values is diminished. This is because we are more sensitive to differentiation within darker ranges (survival reasons I suppose) than the capturing devices were at the time of sRGB’s inception. This sRGB thing, AFAIAC, is just a temporary measure to get over some short term, technical limitations in input and output devices.

      So it seems to me that while sRGB (a compromise to produce a generally “better” looking image) and RGB differ wildly, the safest bet (it is a gamble) is to rely on the most common denomination which is RGB plus local screen calibration (on the creator’s side) to produce a subjectively consistent viewing of GIFs, PNGs, JPGs, HTML colours etc on the client side. especially when the inputs are many and varied. Your monitor probably is already compensating for RGB by applying sRGB, so why compensate again and again? Over-correcting is just as useless as under-correction.

      That way, I have a base standard that is predictable and exceptions that can be reliably handled or catered for.

      In short, I agree with the writer.

      I like using colour in percentages for the same reason. As devices resolve better with each generation and as CSS begin to accommodate these developments, they will be more able to display arbitrary values such as 70.707% for example.

      1
    • 73

      Very good,Thankyou.

      0
  63. 74

    Thanks, this helped me immensely!

    0
  64. 75

    hi me too a graphic designer, your site helps me a lot in helping to get new ideas, watching since 2008 regularly, but now after an accident doing paintings from home, but very useful site i refereed this smashing magazine to all my designer in my old company helpful to all thanks for the tips and trick for designer…….

    raghu

    0
  65. 76

    I love LiveView for instantly viewing mockups on the iPhone. It’s a lot easier and faster than making screenshots.

    0
  66. 77

    LiveView’s great, very tidy little app. I use that sometimes.

    0
  67. 78

    To sum things up:

    This is a very difficult topic and there’s no single perfect solution.
    Warning refers to the original idea behind color management: Trying to get consistent colors across all platforms. For web design this means trying to get the same colors regardless of the device you’re using to view websites.
    Marc tries to get consistent colors only across a single web-page for a single device. If you follow his approach all elements on a page will have the same color values and look the same on your monitor. However they may look totally different on another monitor/smartphone etc.
    Here’s the issue: color is relative. For example you can view RGB red (255 000 000) on a monitor that can’t even display the sRGB gamut. To you it will look like red, of course. But if you view the same RGB red on a wide gamut monitor, it will look much more vibrant and too saturated.
    Again: The author’s advice only works for non wide gamut displays. As long as Operating Systems and browsers are not color aware it’s a potential solution to disregard color management. Stuff won’t look the same anyway, so why bother? But this is only a temporary solution and you have to be aware of the consequences!
    Ultimately I would gladly accept some minor differences in color between elements of a website as long as the site looks roughly the same, even on wide gamut displays.

    0
  68. 79

    Trying to get consistent colors across all platforms. For web design this means trying to get the same colors regardless of the device you’re using to view websites.

    That’s actually not possible currently—websites and web browsers don’t support color management, apart from JPEG images (and some experimental use). As mentioned in the article, GIFs, PNGs, CSS, HTML and other code doesn’t get color managed.

    You’re kidding yourself if you think any action you’re taking is making your website better for cross-platform viewing. It’s not. All you can do is test on a variety of displays/platforms and see if you’re happy with the results. If you’re on a Mac it’s a good idea to upgrade to Snow Leopard or set your gamma to 2.2. Beyond that, there’s not much you can do.

    Eventually we’ll all be able to link to an ICC profile in our HTML documents, but we can’t yet. Even if we could today, the advice in the article still stands. The only difference would be providing the ICC profile for the monitor/computer used.

    To make things even more obvious, here’s what’s happening…

    When you view something in Photoshop:
    Color value –> Photoshop color management –> OS color management –> What you see

    When you view something in your web browser or Preview or other apps:
    Color value –> OS color management –> What you see

    All I’m suggesting is removing Photoshop’s color management from things you’re looking at in Photoshop and saving. As you can see, that makes the two different paths the same.

    There’s been some criticism of the article (which is great), but not much in the way of solid opposing advice. I’m all ears if someone wants to detail how they have solved the same issue in a different way.

    1
  69. 80

    Awsome!!!! You Rock Man!!!! Excellent!! that’s what i needded!!! Wooohoooo!!

    0
  70. 81

    Good article. I don’t understand much about color management, but I now design with “Monitor RGB” selected every time as the proof setup (which is a little different from what you’re saying, but I assume the end result is the same).

    But sometimes I forget to select it and end up creating my document with the Mac RGB setup instead. Now when I switch to Monitor RGB the colors look all faded and desaturated. My question: is there a way to automagically convert the colors so that they look the same in Monitor RGB as the way they looked in Mac RGB ? (obviously, they would now be too saturated in Mac RGB, but that doesn’t matter).

    0
  71. 82

    @Sacha I think you’ll want to “Convert to Profile” rather than “Assign Profile” when you change. I also recommend having Proof Colors disabled (basically following the instructions in the article to the letter, as it’s very important to have your entire workflow correct).

    0
  72. 83

    interesting, this article (http://www.gballard.net/psd/saveforwebshift.html) about color profile using photoshop directly contradicts what is being said here:

    here you say –
    never use PS working RGB always use Monitor
    never use sRGB

    while the other article states-
    ALWAYS CONVERT TO sRGB before Save for Web, ImageReady.

    CALIBRATE AND PROFILE your monitor to 2.2 gamma D/65 6500.

    AND NEVER set Photoshop’s Working RGB to Monitor RGB.

    what is it that is so difficult? why can’t there be succinct instruction? afterall we’ve been struggling with web-safe image issues for 10+ years now. hasn’t someone figured it out yet?

    0
  73. 84

    after studying what is being said by the author at http://www.gballard.net/psd/saveforwebshift.html

    i feel compelled to defer to his recommendations. they just make more sense to me. since sRGB allows for device variables in the least destructive manner, it would make sense that using this embedded profile will provide the best and most satisfying results across the world of monitors and devices.

    anyone else have any thoughts?

    0
  74. 85

    anyone else have any thoughts?

    G Ballard’s advice is for photos. It’s not bad advice either, for photos.

    Please take a look at all the comments here. The real issue is that apart from JPEGs, web images don’t have profiles attached to them. This means that they can’t be corrected when displayed on the user’s display, which means the differences between the user’s OS/calibration/display won’t be accounted for. Your ONLY option in is to make your display as close to what the user might be using (if you’re targeting Mac web users, then your best bet is to buy and Apple display and use Apple’s profile). Luckily Mac OS X 10.6 is much closer to Windows now, so a Mac with the same screen as a PC will be closer than they’ve ever been, color-wise.

    (Reposted from above.)
    To make things even more obvious, here’s what’s happening…

    When you view something in Photoshop:
    Color value –> Photoshop color management –> OS color management –> What you see

    When you view something in your web browser or Preview or other apps:
    Color value –> OS color management –> What you see

    All I’m suggesting is removing Photoshop’s color management from things you’re looking at in Photoshop and saving. As you can see, that makes the two different paths the same (which is essential).

    G Ballard’s advice doesn’t solve one crucial issue: colors in images and code MUST match for user interface and web design. Always.

    I assure you the information provided in the article is absolutely correct.

    0
  75. 86

    I have to bring up one more thing. One is, if you share files back and forth with other designers, you have to remember to get rid of the monitor color profile, I know I’ve gotten files that way, and they really don’t look as intended to look, cause I have a different monitor. I’ve been working with convert to srgb for years, and things lighten up when I click on save for web, but I can handle that, I’m used to that and can predict how it’s going to change. Until snow leopard. Since I upgraded to snow leopard, my blue images take on a green tinge when I hit save for web. I’m wondering if anyone else has noticed major color shifts for the web on the upgrade?

    0
  76. 87

    if you share files back and forth with other designers, you have to remember to get rid of the monitor color profile

    There’s a few things you can do that might help with that:

    - Show the document’s color profile in the bottom left hand corner of the window. This can be changed by clicking the arrow to the left of the horizontal scroll bar and selecting Show > Document Profile. Now you’ll be able to see a doc’s profile at a glance.

    - Create an action to assign your monitor’s profile. This is handy for situations where you don’t want to edit the documents actual color values, but want to ensure Save For Web won’t shift colors.

    - Create an action to convert to your monitor’s profile. This is handy for situations where you like the way the colors look and you want the document to have your monitor’s profile, but you don’t mind if the color values change.

    I have the first two set up and use them regularly (the third I don’t need as I don’t often get files from other designers).

    I’m wondering if anyone else has noticed major color shifts for the web on the upgrade?

    Snow Leopard changed the system’s default gamma, which has affected quite a few things. Please follow the instructions in the article if you’d like Save For Web to maintain colors from Photoshop to your webpage/browser perfectly. It’s worth noting that you have to follow all the instructions… they can’t be done in part.

    0
  77. 88

    Thanks, I came to this same conclusion. Its a little wierd to have to answer the color profile question on every file opening which made me think i was doing it wrong. Glad we have the same conclusion on the best way to do this though,, I will gladly set the profile on file open to ensure my documents are consistant.

    0
  78. 89

    Its a little wierd to have to answer the color profile question on every file opening which made me think i was doing it wrong

    You can change the way Photoshop handles/asks about profile mismatches in Edit > Color Settings. That might help remove some of the dialogues when opening files (I have it set to not ask about profile mismatches).

    0
  79. 90

    Thanks very very much for this article. I’ve had so many problems with syncing colors… this article really helps a lot!

    0
  80. 91

    Would like to ask if this and Doug Avery’s article (http://www.viget.com/inspire/save-for-web-simply) have the same approach with different methods?

    0
  81. 93

    Just a question here bud…im no web designer but doesn’t photoshop give you a web color when selecting your colors in the color selector? (i.e. # FB6161) Who cares if it looks different on my screen at home than on my screen at work. It’s close enough and NO ONE I MEAN NO ONE will notice the slightest change except for all you web design geeks out there.

    Now Match Print that’s a different story. That’s what I do and I’m not gonna change my Adobe suite settings to satisfy my “color correctness” for a website. As long as my Blue logo looks blue on my screen, which shouldn’t be too hard to do unless your a colorblind graphic designer (counterproductive on your part for choosing that profession), I’m happy. Stop making it harder on yourself guys. Unless you plan on moving to Print. Even then you still have “Color Correctness” all wrong bud.

    0
    • 94

      It’s close enough and NO ONE I MEAN NO ONE will notice the slightest change except for all you web design geeks out there.

      The issue, and the main point of this article, is that colours from images and code often appear next to each other. If they don’t match, even the most untrained eye will see the difference.

      So not only does it matter, the difference is obvious to normal users.

      0
  82. 95

    Step 2: Open the document and go to Edit → Assign Profile. Then set it to Working RGB. This must be done for every single document you work on.

    What’s the big idea behind this Step?

    I’m using an E1 calibrated Eizo CG and really don’t see the difference either with or without this step. I made some jpg/png/gif/css test setups, no differnece in all major browsers.

    0
    • 96

      If you copy and paste between documents and they all have the correct profile assigned, then colours won’t shift. If you don’t have the correct profiles assigned, then they might. Having no profile (“Don’t color manage this document”) should also give the same result.

      0
  83. 98

    Waiting for response regarding my question above on Doug Avery’s article (http://www.viget.com/inspire/save-for-web-simply)

    I need to choose between the two.

    0
  84. 99

    Waiting for response regarding my question above on Doug Avery’s article.

    I’m not sure there is much difference between the advice in this article and Doug Avery’s findings. Doug’s grid shows that he found using the iMac’s profile and not converting to sRGB gave the best result:

    http://www.viget.com/uploads/image/color-shift-grid.jpg

    That’s essentially what the article here suggests you do as well.

    0
  85. 100

    Thank you It was helped me lot.

    0
  86. 101

    Thanks for Articles. :-)

    0
  87. 102

    j. albert bowden II

    September 5, 2010 6:14 pm

    has anyone done anything with JavaScript for Photoshop? or any application in Adobe CS? that’s what i was looking for when i came here. good article, i don’t want to take away from it, actually i think that information about scripting for adobe would add to it.

    0
  88. 103

    What should the gray and spot settings be on?
    The Gray is on “Gray Gamma 2.2″ and spot is on “Dot Gain 20%” by default.

    1
    • 104

      Dot gain refers to the print process, which has nothing to do with this article…
      Essentially, Dot Gain is how much a dot will “expand” when it is printed on a proper printing press. It is dependent on the roller settings of the press, which would then be calibrated and you would find out what percentage gain you get when printing, allowing you to compensate for it in Photoshop

      0
  89. 105

    Simply GREAT!

    0
  90. 106

    Great article Marc! This really helped sort out my problem, while at the same time pointing out that color management workflows for print or photos are different. I’ve been tearing out my hair for the last few years trying to figure out why my images within Photoshop look different than they do in every other program, on the same screen of the same damn computer.

    0
  91. 107

    Unless I’m misunderstanding this there could still be an issue:

    1) I’m choosing a nice blue background for a website in photoshop. I choose “VIEW > PROOF COLOURS” which means that if I choose a HEX value and set that on a web page using CSS, the mockup in photoshop and the block HEX value on my browser both look the same on my own monitor. This is great.

    2) I save the mockup, disregarding all colour info as a jpg. I view that jpg on the same monitor in windows photo viewer and all of a sudden this is not the same blue as my browser is now showing. I’m pretty sure the photo viewer is applying the monitor’s colour profile.

    That’s not a massive problem. But say I send the file to a client, – of course the colours will look different on their monitor to mine. BUT they might view it in a photo viewer, love the colour blue they are seeing then go to the finished website and want the same blue that they saw in their viewer.

    I guess that if this is the case, we should send mockups where a colour is important to a client in a browser as a background image.

    Could someone more knowledgeable on this let me know if all I’ve said above makes sense or if I’ve misunderstood it?

    Thanks

    0
  92. 108

    Nice article! Thank you!

    SmashingMagazine ps: copyright violation here: http://bjango.com/articles/photoshop/

    0
  93. 109

    After reading all the articles, I’m now doing this:

    VIEW > PROOF SETUP MONITOR RGB

    VIEW > PROOF COLOURS > OFF

    In PS6.

    If I create a graphic with a very strong/bold blue and hit “save for web” and save it as a png, the image is the same blue when viewed in a browser as it is in photoshop. If however I save turn proof colours on it is different.

    This feels like the lesser of two evils. At least the image looks the same in the browser as it does in photoshop. Does this make sense or am I missing something?

    0

↑ Back to top