I was wondering how to save files for the web using Adobe Photoshop.

Asked by Brian Purkiss, a freelance designer in San Antonio Texas.

When you do the standard “save a jpg/gif/etc” it’s saved as an Adobe Photoshop jpg/gif/etc - and the file size is fairly large. How do you avoid that?

You can avoid that using Photoshops save for web feature.

With your file open, or with a slice made on your psd go to : File > Save for web. You will then be prompted with with a huge dialog box:

photoshops save for web feature

It might seem confusing and intimidating at first but allow me to walk you through it.

1. Window layout

Up here you have four choices to choose from to layout the preview window.

  • Original: Shows only one preview pane with the original quality of your .psd (or image)
  • Optimized: Will preview the quality of your selected file type (.jpg, .gif, .png)
  • 2-up: This will split the window in 2 previewing both the original on the left, and the selected file type on the right.
  • 4-up: The four up selection will split the preview pane into 4 and you can choose to view multiple file formats at once.

2. File size and download times

This section in the window will display the file size of the chosen file format and will also give a download time on certain connections. I’m not sure if the adobe crew sat down with stopwatches and timed it, but its safe to say its pretty accurate.

3. Format Settings

Here you can adjust the settings of the chosen file format. For instance, with a .gif you can change the max amount of colors to be used, or the matte color on the edges. Or with a .jpg you can edit the quality of the jpg compression ranging from “low” quality to “maximum” quality. Or you can choose to use Transparency with your .png’s

4. Browser Preview

Photoshop also gives the nifty little option to view your selected file format in your default browser (hopefully firefox). You can edit your browser list so you can view in all your favorite browsers. I guess it helps some people, but I never use this feature.

Step two, save settings

After clicking save you’re prompted with the save as dialog box.

save for web part 2

5. Save as Type

Here, photoshop gives you the option to save the image by itself, or to write the html along with the image. Never trust photoshop to write your code. It’s more fun to do it yourself :)

6. Settings

The settings field gives you some options like, having photoshop make an images folder and putting the saved file in that image. Or you can underscores and hyphens to the filename. To change the settings use the pulldown and choose “Other…” This will bring up the settings window and you can tweak them all you want.

7. Slices

In this field you can choose to save “All slices”, “All user slices”, or “Selected slices”. I prefer to just go with selected slices and ignore the other options.

Go on, try it out

I could write about every section on the window but where’s the fun in that? The best way to learn it, is to go experiment with it. I hope this helped, even if just a little. Enjoy!