If you’ve spent as many years as I have designing websites using Photoshop, you’ve most definitely run into the quirky little speed bumps that must be passed in order to turn Photoshop into a better tool for creating images for the web. After all, Photoshop isn’t just for websites; the name alone will tell you that. Developers understand this and take this in stride. Yet even though we do some gnarly things in order to make our work web-friendly, I find this little quirk to be the most detrimental to all Photoshop users.
Photoshop changes the colors of images when I save for web
Photoshop knows that not all monitors produce the same colors, and not all operating systems display colors in the same manner. Photoshop allows someone creating images the opportunity to adjust the way images are viewed on different mediums using color profiles. These color profiles may be friends to some but enemies to others, depending on what you’d like to accomplish.
This image color changing phenomenon, now popularly known as the Save For Web (..and Devices) Color Shift, requires just as much research and understanding as the pen tool. Here’s a great way to test out your color options, including profiles and sRGB.
- Using Photoshop CS3 or higher, create a new 500 x 500 image.
- Put a super bright color on top of another super bright color.
- With just default settings, head to File > Save For Web (..and Devices), and save the file.
- Open up that image in a browser and check out the saved image and the PSD image side by side.
- For further testing, take a screenshot of the saved image, open it up in Photoshop, and select the colors with the eye dropper tool. Can you see a difference?
You’ll find my example below.
I made a 100 x 100 image with an orange background of #ff9900 with a red heart of #ff0000.
I placed it on top of a 250 x 250 html square. A screenshot of the outcome shows the difference between the two colors.
Easier said than resolved, really. It depends on what you want. If you’re creating stand alone images such as pictures then Photoshop is helping you out and doing the right thing by assigning color profiles. But if you’re interested in blending images, such as the images that make up the layout of your website, with backgrounds then you’re going to want dead on color accuracy. I can’t give you the end all answer because this topic is still wildly debated. I can, however, give you the options to tweak and the settings that I use to make website design more accurate.
Settings that have worked for me
- Head to View > Proof Setup > and select Monitor RGB.
- Now go to Edit > Monitor Settings > under RGB Settings change the setting to “Monitor RGB – (Your Computer Name)…”
- Finally, when you are finished with your image and head to File > Save for Web (…and Devices), you’ll want to make sure that “Optimized” is not checked, “Convert to sRGB” is not checked, and you’re previewing in Monitor Color.
Why it’s not working for you
That’s probably the trickiest part of all of this. You may find the outcome half as accurate as you want it to be in certain browsers or while using certain monitors. Not everyone will be satisfied. These are the variables you’ll want to play with:
- Converting to rSGB when you save or not.
- Using an ICC profile or not.
The best I can give you is a big good luck, a pat on the back, and a “hope you figure out what you like.” It’s a shame there are so many options that we have to struggle with, but what would Photoshop be without options? Imagine building websites with MS Paint.