How to really save for web in Photoshop

by Joe Sparano
5 October 2009Tips and freebies 2 comments
oxide_j20091005_02

Justin Timberlake and Adam Torpin bobbleheads

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 illustrate what our web images used to look like. See how the colors are washed out?

oxide_j20091005_01

Black Knight pinball machine

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:

1. Make sure your document is in RGB mode
Image > Mode > RGB Color

2. Remove the color profile (again, it’s not a guarantee anyway)
Edit > Assign Profile > Don’t Color Mange This Document

3. Turn on color-proofing
View > Proof Colors

4. 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.

Comments

  1. One Word – Fireworks.

    I know it may seem like a horrid downgrade and/or sacrilege, but if you’re working for Web/screen graphics, FW is the way to go. I don’t know how file sizes compare with your new method, but you can usually squeeze a little more graphic per Mb if you export via FW than PS, FW cares about pixels and how they affect your lines, and while PS was meant for editing photos, FW was meant for building screen graphics.

    http://hicksdesign.co.uk/journal/a-big-assed-post-about-fireworks – The first half explains much better than I can a few of the points I mentioned, as well as a few others.

    PS is a fine program, but it wasn’t meant for creating screen graphics (let alone all the other things it’s used for beyond photo editing).

    Of course, I’m just a front-end Web developer, and only *moderately* hip with the graphics scene.

    JA

    John Arthur says: (5 October 2009)

  2. That’s a good thought, John. I doubt that we build enough web graphics to justify the switch, but it probably explains Photoshop’s quirkiness here.

    Joe Sparano says: (5 October 2009)
Leave a comment