Photoshop
Saving Files
Optimizing for the Web
Because Photoshop is a powerful tool for creating images for the Web, Adobe recently included the ability to save specifically to a compressed Web format within Photoshop. This is accomplished by using the Save for Web & Devices (Save for Web in Photoshop CS2) dialog. We'll look at the more general aspects of the dialog in this lecture and then get into the specifics in subsequent lectures.
Optimizing Images
Your first step is to decide on the Web format for your image. The choices are GIF, JPEG, or PNG. The format must suit the type of image; e.g., number of colours, transparency requirements, etc. We discussed the various Web image formats in the first module of this course. As a reminder, as we address how each format is optimized in the following lectures, we'll review the types of images suitable for the format being discussed.
An optimized image is one that has been saved using a combination of settings that result in the best visual quality and the smallest possible file size. While there are optimization options available when using the Save As command, The Save for Web & Devices dialog provides a dedicated interface for previewing the appearance and estimated file size of your images as well as other saving options.
Save for Web & Devices Dialog
To open the Save for Web & Devices dialog, go to File > Save for Web & Devices or use the keyboard shortcut Shift-Alt-Ctrl-S (Shift-Option-Cmd-S). The most prominent feature when you open the dialog is the image display area. We'll deal with that in the next lecture when we talk about the options for viewing your images. We'll begin by looking at some of the other controls that are relevant regardless of which file type you'll be generating.
Tools
There is a tool set in the top left corner of the dialog. Many of the tools are the same as their Toolbox equivalents and have the same keyboard shortcuts. The Hand and Zoom tools are used to navigate around the image displayed in the dialog. The Slice Select and Toggle Slices Visibility tools are used when you create slices in your image file (not covered in this course). The Eyedropper tool and colour swatch are used for assigning a background colour or matte to images that have transparent areas.
Browser Preview
The Preview In button lets you preview your image in a browser window. Along with the image, the browser will display the image's file format, dimensions, file size, and optimization settings.
The Preview In button on the left will display the icon of your system's default browser. Clicking on this button will open that browser and display your image. If you want to use a different browser, you can choose another from the Select Browser Menu, which is shown in the example above. All the browsers on your system are added to this menu when Photoshop is installed. If you've installed another browser after the Photoshop installation, you can use the Other option to navigate to the browser and preview your image in it.
Adding a Browser to the Preview In Menu
- Create a shortcut (Windows) or alias (Macintosh) for your browser application.
- Drag it to the Helpers > Preview In folder in the Photoshop application folder.
- Restart Photoshop.
Output Settings (HTML)
This button opens a dialog that lets you customize an HTML document that can be published with the image information embedded into it.
Optimizing for the Web Summary
- The Save for Web & Devices dialog is used to optimize GIF, JPEG and PNG images for the Web.
- Optimizing an image means selecting settings for saving that will produce the best quality image at the smallest possible file size.
- The Preview In button lets you preview your image in any browser installed on your system. The browser will also display the image's file format, dimensions, file size, and optimization settings.
Optimizing for the Web Keyboard Shortcuts:
- Save for Web & Devices: Shift-Alt-Ctrl-S (Shift-Option-Cmd-S)
Photoshop - TOC - Introduction - Books -
Saving Files - Links - Questions -
1 - [ 2 ] - 3 - 4 - 5 - 6 - 7 -
