Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I have recently started with web developement and changed my Photoshops Color Profile to sRGB, in addtion I set the Proof Setup to Monitor RGB to make the colors look more like the end result will be and it works fine.

The problem I have is that the Color Picker inside Photoshop CS5 seems not to use the proofing and displays the colors wrong, which means that picked color and the color that actually gets drawn are different.

Is there any way to fix it to color proof the whole Photoshop?

share|improve this question
    
I would suggest doing a beginner course in Photoshop so that you get a grasp on how the program works. You are asking the wrong question because you don't understand what you are seeing. –  Alan Gilbertson Sep 13 '11 at 18:37
    
Can you explain? –  Nikolask Sep 14 '11 at 7:56
    
Not really. There are fundamentals involved that you should be learning about. You should not set up or use proofing in this situation. sRGB is the web standard. Proofing has a different purpose. –  Alan Gilbertson Sep 14 '11 at 9:05
    
If I am not using the proofing, the colors on the web look different from the colors that I am using in the Photoshop. I will try to look for a tutorial, but I thought that setting the Photoshop to use web standard(sRGB) and then proofing the colors to match the final result was pretty general. I might have misunderstood the whole thing thought. –  Nikolask Sep 14 '11 at 11:15
2  
Perhaps Nikolask's use of the word proofing doesn't relate to proofing, which is a prepress term? Maybe he instead tries to say that the colors of his artwork appear different outside (exported) than they do within Photoshop? At least that's the way I interpreted the question :) and answered accordingly. Maybe posting links is against the site's idea, but I wonder why my answer was downvoted as it in fact poses perfect knowledge on the issue of color shifting, again, if that's what the target for this question is. –  hced Jan 2 '12 at 22:00

3 Answers 3

If I understand you correctly, you have issues with the artwork not appearing in the exact same colors when exported, as they appeared inside your Photoshop project? If so, I recommend you do not use sRGB at all, especially if you're producing for the web. Also, in your Color Settings (under Edit menu), set RGB to "Monitor RGB - Display" and optionally turn Color Management Policies for RGB off (descriptions below).

To prevent color shifting when Exporting for Web

Basically this means to not color manage images at all. What you see in Photoshop is what *you* see when it's been exported. N.B. that obviously doesn't also mean that viewers see the same colors exactly as they were intended. The representation is entirely in the hands of their monitors*, which means that this approach leaves more room for variations (which may or may not be a critical thing). If you happen to know you're solely producing for a bunch of people with crappy old CRT monitors, you should proceed with caution. One thing to be aware of, especially in such case, is also the difference in display gamma on various systems such as Macs vs. Pc's (see my previously posted links to read up on that). Anyway:

Under Edit menu, select Color Settings and choose the "Monitor RGB - Display" for RGB, and under Color Management Policies, you may also want to choose "Off", which means that Photoshop will disregard color management profiles of any new images you open (which is nice if this is what you mostly prefer, such as when producing for web).

enter image description here

When Exporting for Web, do NOT convert to sRGB.

enter image description here

share|improve this answer
    
One may argue that people see and perceive colors very differently anyway (because of different eyesight). Personally, I often think the logic relation between colors is more important than "ultra precise" rendition of just the intended color – as far as the colors of critical elements won't deviate into something that becomes inaccessible for people with vision loss. –  hced Jan 3 '12 at 0:56
    
One should never set any color management to "Monitor RGB" unless everything you do is on that monitor and will never be seen on any other digital screen anywhere. Set the working RGB space to sRGB and calibrate your monitor properly. –  Scott Feb 2 '12 at 1:22
    
Scott: If you're producing for web (UIs, structural elements, etc.), I'd say you're wrong, and many with me. sRGB introduces nasty color shifts that makes it utterly unworkable in this environment (web design). If, however, you are referring to e.g. photography, I think you're right on choosing sRGB. If you don't know what I mean by color shifting, or what I'm trying to say, please take a peek at the following apart from the links I posted in my (oddly enough) downvoted answer: smashingmagazine.com/2009/10/12/… –  hced Feb 2 '12 at 4:58
    
Have to disagree hced. sRGB is especially suited for web design. Monitor RGB should not be used. All the experts agree on this, including the Photoshop developers themselves. Check out digitaldog.net –  Scott Feb 2 '12 at 6:45

There's nothing difficult or mysterious about creating colour accurate web, app or UI graphics, when you keep the facts in mind.

  • Macs, PCs and iOS devices have the same gamma, 2.2.
  • Photoshop can't save PNGs with ICC profiles.
  • GIFs can't contain ICC profiles.
  • JPEGs can contain ICC profiles, but they're ignored in some situations.
  • Xcode and iOS ignore ICC profiles in PNGs used for iOS UI.

But the most important thing to note is this:

  • Chances are you want to colours in your images to match colours in HTML, CSS, Flash, Objective-C etc.

This is only possible if Photoshop is set up to display colours without doing a profile adjustment when editing and if you disable the profile conversion on export ("Convert to sRGB").

There are some situations where you may want to use colour profiles and save an ICC profile in a JPEG that's going to be used on the web, but that's a special case, typically only for photos where accurate reproduction is required (please note that it also assumes you have a good workflow with respect to colour profiles throughout the entire process).

But, for web and UI design, matching relative colour trumps matching colour across different devices. The reason for that is simple: Relative colour differences will be immediately noticeable. The argument against using profiles is simple: PNGs and GIFs can't be saved with ICC profiles with Photoshop.

If you're converting to sRGB when you export, you're not adding some magic to the file that will make it appear the same on all computers, you're just destructively processing your images so they don't match relative to the other colours in your design.

If you're doing mobile UI design, testing your design on the device is a must though — there's too many variables, so seeing your design in situ is the best way to check everything's ok.

Also... you should be setting up your documents to 72PPI. There's multiple reasons for this.

  • PPI is typically ignored on the web and in app UI (it's the pixel size that counts).
  • Using anything other than 72PPI can give unexpected results in some situations (I can go into detail if you'd like).
  • If you have all your documents set to different values, dragging elements between documents can mean that layer styles get scaled, which often isn't what you want.

The comments of the Smashing Mag article hced linked to are worth a read if you're in doubt. Pretty much any related topic is covered.

Disclaimer: I'm the author of Smashing Mag article.

I'd recommend using "Don't Color Manage This Document"

I've changed my workflow a little since writing the article. I now assign "Don't Color Manage This Document" to all documents, rather than using the Monitor profile — doing so lets you move between computers with different monitor profiles without having to reassign your documents.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.