Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

Possible Duplicate:
Choosing colors that work well on projectors
Photoshop “Save For Web” Color Shift problem

Hey guys I'm having a really tough(since yesterday) time figuring out why my output in PS "Save for Web" is always in monitor RGB. This is really a nightmare for me (a beginner) for I'm trying to apply a job as front-end designer.

This is my second time to post question regarding this topic. And this one is more specific than the previous one. I don't really know my exact problem why my output in PS Save for web is always like this:

enter image description here

After saving to web/device, the output is drastically changed from this: enter image description here

My PS Current Color Setting isenter image description here:

Even if I play the color RGB in sRBG, Adobe RGB, and my Monitor RGB or ticked(Convert to sRGB, the output is always i monitor Color like this: enter image description here

Until I came up with this site (How to Fix Color Profile - "proof colors" - Conflict In Photoshop). But the PS used in this site is CS2/3. Im using CS5. I did not yet uninstalled one of the color profiles because im afraid to mess out my display.

My Color Management Setting is: enter image description here

Is there a conflict with my color management that causes my photoshop result even not "Save for Web/Devices" monitor color.

My Image Configuration is: enter image description here

Im really desperate to find a fix to this problem so that I uploaded these images. I would like to apologize if this page loads slower.

By HTML output is very dull colored. And Im not satisfied by it. So I really need a help of a pro who can help me fix this. enter image description here

My laptop is ASUS K45VD.

I just bought this laptop month ago.

MY OS is Windows 8.

Your reply regarding in this matter will be greatly appreciated.

share|improve this question
    
Much has been said on this topic around the forum. Just search for color management. –  plainclothes Dec 10 '12 at 23:30
    
guys i tested my html file in my other laptop but still the output of all my images saved are the same. I'm really a noob with it. Crap it really kills me i'm sorry if you don't know also what the problem with this. –  Jed Dec 10 '12 at 23:36
    
Hace you ever calibrated your monitor? –  Scott Dec 11 '12 at 1:18
1  
This is the OP's previous question: graphicdesign.stackexchange.com/questions/13261/… –  e100 Dec 11 '12 at 13:39
add comment

marked as duplicate by plainclothes, Yisela, Scott, e100, JohnB Dec 21 '12 at 17:07

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

2 Answers

up vote 4 down vote accepted

If you're saving PNG or GIF images from Photoshop, they can't contain colour profiles. If you're saving JPEG images from Photoshop, they can contain colour profiles.

If you'd like Photoshop to match what you're seeing in your browser, and you're designing user interfaces, and you'd like colours in images to match colours in PNGs and GIFs, then here's how to set up Photoshop:

Step 1 — Choose Edit > Color Settings and set the working space for RGB to Monitor RGB.

Step 2 — If you’re using Photoshop CS6, click More Options and turn off Blend Text Colors Using Gamma, because it changes how non-opaque text is rendered. It should already be off, but if it’s not, turn off Blend RGB Colors Using Gamma as well.

Step 3 — Open a document and choose Edit > Assign Profile, then set it to Don’t Color Manage This Document. This must be done for every single document you work on.

Step 4 — Ensure View > Proof Colors is turned off.

Step 5 — When saving files with Save For Web, ensure Convert to sRGB is turned off. If you’re saving a JPEG file, then also turn off Embed Color Profile (there are some cases where you might want this on for photos, but chances are you’ll want it off for interface elements and icons).

This answer provides way more detail: http://graphicdesign.stackexchange.com/a/9241/3901

share|improve this answer
    
Thanks a lot for the answer. I did this one by reading Doug Avery's http://viget.com/inspire/the-mysterious-save-for-web-color-shift. My question is: "Do I need to set again the desired saturation all my layers?" Because it drastically drop the saturation on every layer in my document by doing Avery's Solution. –  Jed Dec 11 '12 at 0:22
    
So you've followed my steps above? If you have, Photoshop should match your browser. So, if they match, you should make things look how you'd like in Photoshop, because that's how they'll appear in the browser. –  Marc Edwards Dec 11 '12 at 0:30
    
Yes, is it avery's solution, but the saturation of the template drops down drastically. They really match. But how about the raw pictures taken from photography? Do I need to change all of those? –  Jed Dec 11 '12 at 0:45
1  
"I strongly disagree" — Please provide a full answer on how you'd set up colour management for web. (Fair warning though: I will respond.) –  Marc Edwards Dec 11 '12 at 1:45
1  
@Jed Photography and using photos may require a slightly different workflow and setup, depending on where the images are from, how accurately you need to reproduce them and which browsers you're targeting. –  Marc Edwards Dec 13 '12 at 0:25
show 1 more comment

Make sure you don't have "Proof colors" checked in the view menu. That might be causing you some grief.

In general, the less color management you use on your web images, the better. You want to see what others are going to see, and they aren't going to have your color management settings.

share|improve this answer
    
Thank you very much for the suggestion. But still the result still the same in JPG and PNG output. –  Jed Dec 11 '12 at 0:00
add comment

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