A while ago I wrote a post about how my colors were losing intensity when I would “Save for web.” I found out via this awesome little explanation that Photoshop embeds color profiles into your images when saved. I recommend visiting the Vidget blog to get the full reasoning behind why Photoshop does this, but I have also included my own little tutorial about how to get the same vibrant colors from Photoshop to the web.
Ever had a similar experience?
As you can see, there is a very noticeable difference between the left and right sides of the above image. The left side is just what the image looked like in Photoshop before saving. The right side of the image is after “Saving for Web”. The colors are just faded and not quite as vibrant as I would like.Â
After much searching I found someone to explain to me just what was going on with my images. The post on the Vidget design blog was straight forward and answered my question perfectly.Â
This is what the above image should look like:
How to fix your rig
The amazing thing about this is that it’s really easy to persuade Photoshop to do what you want. Since Vidget already made a great post about this I will just skim through the process. There is no need to reinvent the wheel.
Step One
Edit > Color Settings > Monitor Color
Step Two
View > Proof Setup > Monitor RGB
Step Three
Save for web > (Circle w/ arrow in it) > Convert to sRGB (uncheck)
note: While in save for web mode you can toggle between checked and unchecked on the “Convert to sRGB” mode to see the difference in color.
Easy as pie. Now that pesky little problem of color shift should be gone. There might still be a discrepancy on mediums such as different monitors. That is just the way the monitor displays and it’s out of your hands.
On your own system sure. The right thing would be to tell the computer what YOUR monitors profile is and then use that same profile in photo shop.
Then no dicreppancy between your monitor will happen AND others would know what the hell it should look like on their monitor. This way what you see is what you get on yoru monitor and on OTHER monitors provided that your profile is even remotely right.
I know teh concept behind profiles is hard to understadn but without them your in a even wilder realm of nothing working ever even in the future once peopel astart doing thsi proper.
[...] making matters worse for me. I hadn’t yet upgraded to CS3 at work, so after doing just that, I followed these instructions—which should be set by default in Photoshop—and am feeling happy [...]