We use Photoshop a lot. We use it for all kinds of things, and we know it pretty well. However, there are plenty of things that we don’t know about it. (Let’s be honest: no one knows everything about Photoshop.)
And yet, this is still kind of embarrassing. Here it is: we just learned how to build images for the web. Well, we’ve always known how to rip JPEGs and PNGs, but until two weeks ago, we didn’t know how to make them look good.
The left half of the images in this post show what our web images used to look like. Notice how the colors are washed out.
Even though the images might look great in Photoshop, using Save for Web would ruin them. We first thought this was a color profile issue, but adding or removing the profile didn’t make a difference in every browser. We asked around and searched the web, but nothing seemed to solve this particular problem.
So, we just started super-saturating the image before saving it, knowing all along that we were only addressing the symptom.
Then, two weeks ago, we stumbled across the solution: Proof Colors. For the uninitiated, here’s the right way to build images for web:
- Make sure your document is in RGB mode
Image > Mode > RGB Color
- Remove the color profile(again, it’s not a guarantee anyway)
Edit > Assign Profile > Don’t Color Mange This Document
- Turn on color-proofing
View > Proof Colors
- Select a basic RGB proofing setting
View > Proof Setup > Monitor RGB
In short, the problem was that Photoshop was showing us colors that weren’t real. (We’re still not sure if we were using the wrong proofing setting or just not proofing at all.)
Either way, when saving these mis-proofed files for web, the images weren’t changing at all – they were just being shown in their natural state for the first time. Now, we’re building images accurately from the start, and our PSDs look the same as our PNGs.