Vivid color in Photoshop/color management

[mkiv808]

OK, this has always confused me. I've been a designer for 8 years now, and have always been just that: a designer/art director. I let the guys that code code, I've only done basic HTML before.

So, I'm not the guy cutting up the images for production. I wrap up a PSD, and give it to the coder to take care of. I direct changes/tweaks from there.

One thing I noticed, as I'm working with a few coders now, is how colors are coming out on my sites. The color is usually of the dull Monitor RGB proof view. Of course, taking a screenshot of the PSD in another proof view shows the vibrancy in the screenshot. If you were to slice up that screenshot in say Fireworks, it'd look great.

When I used to design sites in Fireworks, this was never an issue, because every color was just as it was in Fireworks as it was exported by default.

So how can I go about retaining the vibrancy of my color?

Any tips or tricks?

[hewligan]

Web browsers use the sRGB colour space. Make sure that, when you're designing your files, you are working in that colour space, and your colours should match - as far as any colours match on the web, that is.

[mkiv808]

Yup, use sRGB. But still, the exported images look like the Monitor RGB preview, which is always washed out. :confused:

[hewligan]

Well, the images should look like they do in the preview - that's the whole point of it. You need to design to that preview.

[Broacher]

There's so many if's in browser colour management-- even when it exists at all. Throw in the infinite combinations from all those uncalibrated monitors, different ages, gammas, etc.-- you just HAVE to practice safe colour design whenever possible. Of course, explaining that to a demanding client is another thing.

Here's a good page to demonstrate technically what can happen:

http://www.gballard.net/psd/go_live_page_profile/embeddedJPEGprofiles.html#

[mkiv808]

Anyone know what color mode Fireworks uses for its proof/preview/view?

[mkiv808]

I just noticed that if you Save As and include the embedded profile, Safari will show the colors properly. Firefox still shows them washed out. It seems as if Save for Web doesn't give the option to embed the profile.

[mkiv808]

It just doesn't make sense to me. If I take a screenshot of my design in Photoshop without the proof selected, cut that up in Fireworks, it looks like how I want it to look in most browsers. Why can't Photoshop export things like that in the first place?

[mkiv808]

OK, check this out.

Same exact screenshot. Screenshot was taken from non-proof preview in Photoshop.

1st one was opened and exported in Fireworks

2nd one was opened and exported in Photoshop

I don't care what browser you use, you can see the difference. The Fireworks export is much truer to the original colors.

[hewligan]

Safari is the only web browser out there that respects colour profiles, so you're really wasting your time embedding them.

Fireworks doesn't really use colour profiles either - it's just designed for web work. It just displays whatever your monitor would normally. Photoshop's a bit more complicated than that.

I'm guessing, based on looking at those images, that you're working on a Mac. Have you checked what your images look like under Windows?

[mkiv808]

Safari is the only web browser out there that respects colour profiles, so you're really wasting your time embedding them.

Fireworks doesn't really use colour profiles either - it's just designed for web work. It just displays whatever your monitor would normally. Photoshop's a bit more complicated than that.

I'm guessing, based on looking at those images, that you're working on a Mac. Have you checked what your images look like under Windows? Yes, I understand the bit about color profiles in Safari.

And yes, I've checked these images on every platform and browser. It's the same result. The Fireworks exported image looks good, Photoshop looks washed out. :(

[hewligan]

Well, I just tried taking your blah.jpg and resaving it through photoshop's save for web, and there wasn't much noticeable difference. The only way I could replicate blah2.jpg was by assigning to profile (which you generally shouldn't do) Apple RGB - and you expect that to come out lighter as Mac's have a higher gamma.

So, I'd say the problem's in your colour settings somewhere, but I've run out of ideas as to where. Sorry I couldn't be more help.

[Broacher]

Did you guys check that link?

Here's his browser CM list:

List of Color-Managed Browsers:

Apple's SAFARI for Mac
(Assumes monitor profile on untagged files)

Apple's SAFARI for Windows XP Vista Pro
(Likely Assumes monitor profile on untagged files)
(Read about it on robgalbraith.com)
Safari 3 Information and free DOWNLOAD

OmniWeb 5.1.3 (Mac)
(ColorSync® must be checked in OmniWeb> Preferences> Appearance> Use ColorSync)

Microsoft EXPLORER (Mac)
(ColorSync® must be checked in Explorer> Preferences> Web Content: Use ColorSync)


List of Un-Managed Browsers:

Mozilla FIREFOX (Mac)

OmniWeb 5.1.3 (Mac)
(using default preferences)

Microsoft EXPLORER (Mac)
(using default preferences)

I was told that no PC Windows web browser is colormanaged (so Safari 3 is the only Windows XP Vista Pro browser that will display this white paper with the correct calibrated color).

[mkiv808]

Well, I just tried taking your blah.jpg and resaving it through photoshop's save for web, and there wasn't much noticeable difference. The only way I could replicate blah2.jpg was by assigning to profile (which you generally shouldn't do) Apple RGB - and you expect that to come out lighter as Mac's have a higher gamma.

So, I'd say the problem's in your colour settings somewhere, but I've run out of ideas as to where. Sorry I couldn't be more help. That's odd. It happens with my coders' Photoshop too (he's on Windows). What are all your color settings?

[hewligan]

That's odd. It happens with my coders' Photoshop too (he's on Windows). What are all your color settings?

The North American General Purpose 2 preset.

And, Broacher - yeah, I've read that list before. That makes the colour managed browsers Safari, and a bunch of stuff no one uses. So, to all intents and purposes, it's just Safari.

[mkiv808]

The North American General Purpose 2 preset.

And, Broacher - yeah, I've read that list before. That makes the colour managed browsers Safari, and a bunch of stuff no one uses. So, to all intents and purposes, it's just Safari.
Just tried that preset, saved the screenshot for web... same result, faded out. :(

Of course, it's not a HUGE difference, but noticeable.

[hewligan]

No, I think there was more difference between the images you posted and what I got. Having said that, the difference is less than I would expect from displaying the image on a Mac and displaying the same image on Windows.

Which version of photoshop are you using? I used CS2.

[mkiv808]

No, I think there was more difference between the images you posted and what I got. Having said that, the difference is less than I would expect from displaying the image on a Mac and displaying the same image on Windows.

Which version of photoshop are you using? I used CS2.
CS3