PhotoShop Save for the Web

 

Youve got some pretty cool images now, huh? Well, all thats left is learning how to save them in web format.

Remember that the web uses two different types of images, JPG for photographs, and GIF for line art and solid color images.

 

Save Web Image Types

PhotoShop will help you properly prepare your images for the web. Right now, were just going to learn the basics of saving for the web. Later on, during the Fireworks section, well get into more detail about all the save options.

 

Saving Originals

Before you save your image as a GIF or a JPG, save it as a PhotoShop file (PSD). You should always keep your original files. Clients will expect them when you turn over a site, and you will be able to use them to change your images later on. Just click:

FILE-> SAVE

 

Saving for the Web

If you click File-> Save, youll see GIF and JPG as options. You will not save GIFs and JPGs by clicking FILE-> SAVE. When you save for the web, you need to optimize your files, making them look good while remaining keeping file size as low as possible so theyll download quickly.

 

To save for the web:

1. FILE-> SAVE FOR WEB
2. Click the 2-Up tab.
   The 2-U[p tab will allow you to see the image twice. You can apply different formatting to each image and decide which one looks better.

 

3. Click the left image. By selecting the left image youre instructing PhotoShop to show you a preview for that image.
4. Choose JPEG or GIF from the pull down menu

5. Notice that underneath the preview image it lists the image size and how long it takes to download on a 28K modem. Your goal is to get the load time as low as possible with an acceptable image quality.
6. Youll need to Adjust image options
1. For JPG: Adjust the Quality slider
2. For GIF: Adjust the number of colors.
   
   
7. When youre satisfied, select the preview that you like and click OK.
8. Save the image

 

Changing Download Speed or Color Views

You might want to see how fast your image will load on different modems, or you may want to see how people on a PC or Mac would see your image. Easy enough. Just right-click (ctrl-click, Mac) the modem speed indicator.

 

A Note About JPGs

JPG compression works by changing colors that are close to each other into the same color. Every time you save a JPG, compression is applied and colors merge together. Thusly, every time you save the image looks worse To edit a JPG, open the original PhotoShop file and save from there

 

A Note About GIFs

A GIF only has, at max, 256 colors. The colors are kept in a list, called an index. A GIF is, therefore, an indexed color image. It isnt made up of the standard choices kept in the Red-Green-Blue palette. Most PhotoShop editing features like filters wont work on an Index Color image.

To change a GIF to Red-Green-Blue:

Click IMAGE-> MODE-> RGB

 

During this section of the web design course we have really only begun to explore all of the options available for saving images. During the Fireworks section we will learn more advanced features.

 

| Back to Courseware