It Logo

Photoshop 6: Saving your Image Files

There are two parts to saving an image because it is best to keep two copies of each image you make. One copy will be a layered photoshop file (with a file extension of .psd) that can only be used in Photoshop and the other will be a flattened version that can be used in a web page (file extension .gif or .jpg). It's a good idea to store all the images for your site in a separate folder, with the layered (Photoshop) files in a source folder within the images folder; that way you will have an easier time finding the particular kind of file you are looking for.

To save the layered Photoshop version, just select Save in the File menu. A dialog box like the one below will pop up.

save as

As when you save a file in another application, make sure you are in the right drive and folder and name the image something that will make sense later. Be sure that the file type (in the above image it's "Photoshop (*.PSD, .*PDD)") is right and that you aren't giving the file another file extension (something with a "." in it). Then click on the Save button.

To save the second flattened version of the image once you have saved as above, go to the File menu again, but select Save for Web.... A dialog box like the one below will come up.

2 up window

There are many different parts to this one dialog box, but it makes saving web versions of your image files very simple.

In the Settings section, you can choose the file type (above, GIF is selected from the pull down menu) and other options in order to get the best image possible. All this is done because it is best to try to get the smallest files possible, since smaller files take less time to load in a browser and are therefore more suited for web use.

In the above example, the 2-up TAB is selected. This shows you 2 versions of your file. The view on the left is your current image and size while the view of the right shows you an version optimized by Photoshop to improve the file size for web use. It usually does a very good job. You can select various options under the Settings section to see how well you can improve your file size before you cause too much degradation to the image.

Once you are satisfied with your selection, you can click OK and it will prompt you to save your file with a new name and extension.


LESSON ACTIVITY:

  1. Save your image for the Web by Selecting File -Save for Web
  2. Change the image Setting option to a GIF and/or JPG and observe the various other setting options
  3. For JPG option - change the compression quality to Medium and select the option for Progressive (the Progressive option causes the image to start loading immediately before the whole image is downloaded)
  4. Then save your image with a new name by selecting Save. You will then be sent back to Photoshop and your image. You can close this image now and not save it again because you have saved it already for the web under a new name.