DIGITAL
ARTS 1
Mr. Skocko • Room 246 •
593-5446 • Digital Arts Home
Saving for the Web in Photoshop
In this lesson you will learn how to save Photoshop files for the Web so that they may be viewed as rollover images via a web browser.
First, organize your .psd files and rename them so that they contain NO capital letters, spaces, or special characters
File Names such as Mike's Great Image!.psd are best corrected at this point in the process
Changing the name to mikes_great_image.psd will save you many headaches down the road
Use the underscore (Shift-hyphen) to simulate spaces
The key to understanding this process lies in the Layers Palette (F7)
When you save the .psd file for the Web, Photoshop will only save layers that are visible
In this example the original photograph will be used as the primary image
Option-clicking on an eyeball (the layer visibility icon) turns all other layers either on or off
Experiment in your Layers Palette
With a single layer visible (or any combination of layers), press Shift-Option-Command-S to Save for the Web
The Save for Web dialog box opens (Click on the 2-Up tab for this project)
Note the settings on the right side of the image below
These files will be saved as JPEG High with a Quality setting of 60
Clicking on the Image Size tab reveals the size of your original image
1024 x 768 is too big for our purposes so we will resize the image by entering 800 for the Width
If Constrain Proportions is checked, Photoshop will set the appropriate height automatically
Notice that the 3MB file has been reduced to less than one-fifteenth the original size without compromising image quality
(We could reduce the file size further but let's save that for another lesson)
Be sure Quality is set to Smooth (Bicubic) and click Apply
Photoshop resizes your image and recalculates the new file size (seen just below the smiling faces)
Hit Return (or click OK)
The Save Optimized As dialog box opens
Notice that the file name is preserved but the extension is now .jpg
Navigate to your images folder (inside your art folder) and open it
Save your image (DO NOT change the name of the image)
To save a rollover image, Option-click on the visibility icon to make all layers visible (or manually click to turn layers on or off to suit your purposes)
Shift-Option-Command-S to Save for Web
Change the image size to 800 x 600 once again and click Apply
Make sure your settings are correct and hit Return
DO NOT click Save yet
Notice that this file has the same name as the previous one you saved
Add _over to the file name as shown
Rollover images should always be titled in this manner (you'll soon understand why)
Hit Return to save the file
You may wonder if your original image has been resized during this process
To check, navigate to Image > Image Size...
The Image Size dialog box confirms that your original is still 1024 x 768
When you close your original image Photoshop will ask:
If you save, Photoshop will remember your Save for Web settings
Congratulations! You now know how to save images and rollover images for the Web
Repeat
as necessary so that all your .psd files can be viewed
as .jpgs via a browser then see the insert
image and insert rollover images
tutorials