Photoshop Friday Revisited: Saving Layouts for the Web

As we’re starting up a brand new class over at, we have the regular round of questions about how to save layouts for the web (which is something that everyone has to learn at some point, and it’s interesting that we have people who’ve been digi scrapping for a year or more who’ve never done this. I think it’s awesome that so many people are sharing layout they’ve never shared before! :D So our revisit will be this way old post from May of 2006 on saving layouts for the web. Holy cow. That is OLD.

Part of the reason for the revisit is to update the instructions. Things change. I learn stuff. And here is the officially new and improved instructions for saving layouts for the web. :)

First off, save that layout in its original pristine .psd format. This is the layout we don’t want to touch, so even after we make changes here, we’ll actually close without saving, because of this save. It is veddy, veddy important.

Now, we need to get our full-sized, printable digital page down to a size that’s manageable for the web. Here’s how:

1. Go to Image > Resize > Image Size (in CS/CS2/CS3, go to Image > Image Size).

2. In the Image Size dialog box, do these things in this order:

  • Check the Resample Image checkbox at the bottom of the box
  • In the Resolution field, type 72 (that’s pixels per inch, typically recognized as the “web-sized resolution”)
  • Opptional: You’ll notice that the pixel size at the top of the dialog box changes (that’s actually a measurement IN pixels). If you would like to further refine the size of your layout (say you want to make it 500 x 500, or 600 x 600 pixels) you can now type these values into the upper Width and Height boxes.
  • Click OK.

3. Now we’re almost ready to save. Let’s make sure our colors are right for displaying on the web. Normally when you’re scrapbooking something for print, you want to be in the Adobe RGB (1998) color space (unless you have calibrated your monitor and have created a color profile). But for display on the web, you’ll need to switch into something that monitors have an easier time displaying, and that means sRGB. The techniques for doing this in PSE vs. PSCS2/3 are different, but they do exactly the same thing: they change your layout into the sRGB color space.

  • In Photoshop Elements, go to Edit > Color Settings. Make sure that the “Always optimize for computer screens” radio button is selected. Click OK.
  • In Photoshop CS2/CS3, go to Edit > Convert to Profile. Choose sRGBIE61966-2.1 from the dropdown menu. Click OK.

4. Now for the sharpening. Typically this is the last thing I do before saving.

In PSE: Go to Enhance > Adjust Sharpness.

In PSCS2/3: Go to Filter > Sharpen > Smart Sharpen.

I like to adjust the Amount slider to about 85%, and then use the Radius slider until I get a good level of sharpening (this totally depends on your image - you can click and hold on the image preview to get a quick before/after.

Click OK. 

5. Now we’re ready to save! Go to File > Save for Web. In the Save for Web dialog box (the PSCS3 one looks slightly different than this by default), choose “JPEG High” from the dropdown menu on the right hand side. Click OK.


Click for Larger

6. Now you’ll get a filesystem browser, and you can save your file with a new name (and preferably in a folder that is NOT the folder you keep your original .psd files in, just to minimize the risk of overwriting by accident). Click Save.

7. This last step is veddy veddy important. Please either close your layout without saving (since you saved before step 1, right? I know you did.), OR, go back in your History palette until you hit the step right before Image Size (which was the step where you threw away thousands of pixels that are useless on a computer screen, but are utterly necessary if you want to ever print this out). Don’t screw this part up, ok? Sad times will ensue. Don’t ask me how I know.

And that’s it!

It looks like a lot. But if you’re using CS3 you can make an action. And if you’re using Elements, it’ll become kinda second-nature to you after awhile. And it’s pretty darned satisfying to hit that final Save button and know you’re on your way to sharing this creation with friends and family by email, or uploading it to your blog, or putting it in a web gallery. :)

Enjoy! Have a great weekend!

p.s. NOTE on STEP 3: For some reason, step 3 has a MUCH more noticeable difference when I do this step in CS3 rather than Photoshop Elements. I can tell right away in CS3 when I have forgotten to change color spaces, but Elements seems not to care too much, and sort of washes things out anyway. I don’t know why. I would like to. If anyone has any info on why changing to the sRGB color space in Elements STILL doesn’t look as good as saving out of CS3, do tell. All ears. :D

Technorati tags:



Photoshop Elements




Photoshop tutorial