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 top Tweet itShare on Facebook

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

Advertisement
  1. 1

    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
  2. 52

    @Jeff, EXACTLY the way to do it.

    Or use Fireworks

    0
  3. 103

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

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

    1
  5. 205

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

    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?

    -1
  7. 307

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

    0
  8. 358

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

    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.

    0
  10. 460

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

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

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

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

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

      Very good,Thankyou.

      0
  13. 766

    Thanks, this helped me immensely!

    0
  14. 817

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

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

    0
  16. 919

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

    0
  17. 970

    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
  18. 1021

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

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

    0
  20. 1123

    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
  21. 1174

    @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
  22. 1225

    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
  23. 1276

    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
  24. 1327

    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
  25. 1378

    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
  26. 1429

    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
  27. 1480

    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
  28. 1531

    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
  29. 1582

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

    0
  30. 1633

    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
  31. 1735

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

      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
  32. 1837

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

      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
  33. 1990

    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
  34. 2041

    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
  35. 2092

    Thank you It was helped me lot.

    0
  36. 2143

    Thanks for Articles. :-)

    0
  37. 2194

    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
  38. 2245

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

      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
  39. 2347

    Simply GREAT!

    0
  40. 2398

    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
  41. 2449

    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
  42. 2500

    Nice article! Thank you!

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

    0
  43. 2551

    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