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.
Have an opinion?