Fixing the "Save for web" color shift Fixing the "Save for web" color shift / tutorial / free

http://viget.com/inspire/the-mysterious-save-fo...

I encountered this extremely frustrating problem recently, and this article solved the problem. Basically when saving a .png, you can open the identical image in photoshop right after and the colors have dulled slightly.
0 favorites
submitted almost 4 years ago, by pineapple
Fixing the "Save for web" color shift popular tutorial

25 Comments

pineapple

Important: I would highly recommend you disregard his last step which says to turn off sRGB. Keep that on.

pineapple, almost 4 years ago

SkinnyGeek1010

One thing for others to keep in mind, if you're experiencing color shifts when matching a CSS color, uncheck this and see if that resolves it.

Also note that by checking convert to sRGB, it will permanently change the pixels. It's basically making it look like it has a sRGB color profile embedded... without the weight. This is the same as doing an edit > 'convert to color profile'.

At one time, (not sure if this still applies) the browsers would take an un-color managed image and apply an sRGB profile automatically

SkinnyGeek1010, almost 4 years ago

pineapple

I can't believe it took me this long to finally figure out what the hell is going on with this. I just got fed up and googled it and it was the first result.

The same thing would happen when using colorsnapper, i would get two slightly different values measuring from colorsnapper and then from photoshop eyedropper.

This has solved the issue... that was driving me insane.

pineapple, almost 4 years ago

SkinnyGeek1010

I think the reason for this is because OS-X applies it's color management at the very end of the processing chain across the whole display, right before it hits the video ram... creating a discrepancy with screen picking software. Photoshop's color management is only applied in the PS window and it's document file and is applied before OS-X applies an overall color management... or something like that.

SkinnyGeek1010, almost 4 years ago

pineapple

ahhhh. well this photoshop tutorial fixed it right up. I cant even count the number of times this drove me insane having something be off by 1 shade.

pineapple, almost 4 years ago

SkinnyGeek1010

Same here!... I once broke a wireless mouse after chucking it against the wall in frustration of mis-matching colors :D

SkinnyGeek1010, almost 4 years ago

SkinnyGeek1010

Ah great article... color management is soooo frustrating! I use a slightly different method (same principle though). Basically I setup sRGB as the workspace and then view > proof a custom profile (monitor profile). This way the PS pane looks like the browser in proof mode, and I can work in a (slightly) larger gamut. I don't think this really matters, or is a better way, but is habit from working in print, since you want to convert at the last minute (if you think lime green loses pop in the browser, try converting to uncoated paper CMYK profile!).

I have spent so many hours trying to keep the lcd monitors, plate-setter, printing presses and inkjet proofs in sync at my old job... and I think it might have been easier than web color management... working without a profile 'target' is maddening! =)

One thing the article didn't mention (since it was 2008), if you have a nice flickr like photo (not something that matches css colors) that you want to pop and look nice, embed the color profile and this can make it sing, especially if the source was ProPhoto or adobeRGB. The only con is that this bloats file size. Almost all of the modern browsers now support embedded profiles (that i'm aware of).

SkinnyGeek1010, almost 4 years ago

pineapple

Hmmm.... so thats really good info. perhaps I should set mine how you have it.

pineapple, almost 4 years ago

SkinnyGeek1010

I think the only real pragmatic advantage is that you can do a save as.. and it will embed the sRGB (or w/e) profile, instead of your monitor profile (which varies from someone else's).

SkinnyGeek1010, almost 4 years ago

SkinnyGeek1010

Here's an example of how I have mine setup... works for me =)

http://imgur.com/HYk0Z

SkinnyGeek1010, almost 4 years ago

pineapple

Awesome! I was just about to ask that actually. thanks so much!!

pineapple, almost 4 years ago

pineapple

Well I have absolutely no idea what I just changed...... but I trust you.

I see this, and my mind is full of fuck.

http://i.imgur.com/zv50a.png

color profiles

pineapple, almost 4 years ago

SkinnyGeek1010

Niiiiice, Cinema Display =)

SkinnyGeek1010, almost 4 years ago

pineapple

The other comment has no space, but...

$500 for a book?? WTF!

The most expensive book i ever bought was Alla Prima by richard schmid for $150. Basically a world-recognized painter's 60 years of experience condensed into a book. Everything you need to know.. That I could see (barely)

But that is just batshit insane for $500

pineapple, almost 4 years ago

SkinnyGeek1010

lol I know right?!? I think msrp was 50 or 60... must have been a collectors item or something.

SkinnyGeek1010, almost 4 years ago

st0rk

Thanks. I just fixed my photoshop with this.

st0rk, almost 4 years ago

pineapple

One question... Am I supposed to turn 'proof colors' on every time I save something? If I don't, it saves things as the wrong color, but it wont leave proof colors on by default, so I have to change it to that for every image I open.

pineapple, almost 4 years ago

SkinnyGeek1010

Hmm, it shouldn't alter the actual image any by having proof on or off.... having proof on should just make it visually look different in the PS window.

SkinnyGeek1010, almost 4 years ago

pineapple

Ok I'm going to email you. This is worse than SOAP, it's making me so mad. It's no longer working, I feel like I have tried everything.

pineapple, almost 4 years ago

pineapple

What is the 'proof mode' exactly?

pineapple, almost 4 years ago

SkinnyGeek1010

It's used to simulate another colorspace other than your working color space. An RGB colorspace has a lot of color because the screens can reproduce vibrant colors (as opposed to print). A CMYK colorspace simulates how bright and vibrant you can make something with a certain printing press.

Ideally, if you fire up the image and turn on proof colors > Working CMYK, and you place the printed piece next to your monitor they will look identical.

Unfortunately things fall apart really quickly if the monitor isn't calibrated perfectly, if the ambient is the wrong color and brightness (or wall paint is not 50% gray), or if the printing press isn't able to reproduce your SWOP or Gracol colorspace.

For web, it gets tricky and really confusing since you're normally not using color profile 'targets' and different browsers handle colors differently.

SkinnyGeek1010, almost 4 years ago

pineapple

Excellent.. further question... what is the difference between the regular RGB and 'working rgb'?

pineapple, almost 4 years ago

SkinnyGeek1010

The working RGB profile is what is shown in your PS document window, it's also usually embedded on save.

If you embed the profile that will also be used in OSX's preview.app or anything else that uses color management.

RGB is a rather ambiguous term. A 'raw' or unmanaged RGB file will for example on a given pixel have a red (R) value of 235. Without a color profile it will be displayed as 235,,. If however the output profile is adobeRGB, it might shift it to display as 243,, to match that given profile.

As far as I know, the reason for adobeRGB, and ProPhoto, etc.. is because more expensive monitors can visually render more colors than sRGB.

for example, take a $2000 Eizo retouching monitor, and a $150 Acme monitor and display a vibrant photo using sRGB. (for this ex) They look identical because the are both able to reproduce the same colors. But, if you have a photo that was taken/captured in adobeRGB, and you display it on both monitors, the Eizo will look better and the Acme monitor will render somewhere in between and look flatter than the Eizo, as the colors outside it's gamut will get clipped.

Color Gamut of both:

So I guess to answer your question there isn't a 'regular' RGB, though most of the time it's sRGB because it can be rendered by most monitors.

edit

A cool pic of mobile device gamut's

SkinnyGeek1010, almost 4 years ago

pineapple

I guess I understand :/

pineapple, almost 4 years ago

SkinnyGeek1010

No worries, I prob. didn't explain it well. Also there where supposed to be asterisks in 235,x,x and it came out as 235,,

I was going to recommend this book but it's retailing from $540 new... damn I gave it away last year! At least the epub is $24 lol

SkinnyGeek1010, almost 4 years ago


Login or to comment.

Tutorials are any resources you learn from.

Examples: an intro to html5 screencast, a pdf about git, photoshop effects tutorials, meta-programming in ruby, lambda calculus, higher-order fixed-point combinators.

Tools are websites, apps or services used -on- your project (indirectly), to aid the process.

Examples: A color scheme generator, email marketing software, usability heat maps, css3 code generators, a downloadable png compressor.

Assets are downloadable files used -in- your projects, usually as code, textures, or images.

Examples: a jquery sticky menu, photoshop brushes, background textures, mvc frameworks, twitter bootstrap, 960 grid system.