ptg Designing for the Web and Devices Introduction If you need to manipulate a photographic image to place it on the Web, there's not a better program on the market than Adobe Photoshop that will do the job for you. You can pre- pare images for the Internet all right from Photoshop. Photoshop uses various document formats such as JPEG, GIF, PNG, and WBMP (Wireless BMP), to save images for the Web. For example, the JPEG format is used primarily for compressing photographic images, while the GIF format is used for compressing clip art and text. Each format is designed to serve a purpose, and knowing when to use a specific format will help you design fast-loading, dynamic web documents. However, saving files in a specific file format is not the only way Photoshop helps you create web-friendly images; you can also slice images. When you slice an image, you're cutting the image into several pieces. Since the Internet han- dles smaller packets of information more efficiently than one large piece, slicing an image makes the whole graphic load faster, and Photoshop helps you slice images with ease. 19 19 What You’ll Do Save for the Web Work with Save For Web Options Optimize an Image to File Size Work with Web File Formats Optimize a JPEG Document Optimize a GIF Document Optimize a PNG-8 Document Optimize a PNG-24 Document Optimize a WBMP Document Create an Animated GIF Work with Animation Slice Images the Easy Way Work with Slices Arrange Slices Save a Sliced Image for the Web Add HTML Text or URL Link to Slices Define and Edit Web Data Variables Export Directly to Video Export to Zoomify 443 From the Library of Wow! eBook ptg 444 Chapter 19 Photoshop's Save For Web & Devices command is a dream come true for preparing images for the Internet, or even for saving images in a quick-loading format for Microsoft PowerPoint slide presentations, and you don't even have to leave Photoshop. The Save For Web & Devices command lets you open any Photoshop document, and convert it into a web-friendly format using the GIF, JPEG, PNG, or WBMP formats. You can even try different optimization settings or compare different opti- mizations using the 2-Up or 4-Up panes. In addition, the dialog area below each image provides optimization information on the size and download time of the file. Saving for the Web Save for the Web Open a document. Click the File menu, and then click Save For Web & Devices. Click the Original, Optimized, 2-Up, or 4-Up tabs to view the document using different layouts. Click one of the sample images to change its default format. IMPORTANT If you're viewing the document using 2-Up or 4-Up, the first image is the original. You can't change the original; you can only edit one of the sample images. Click the Optimized File Format list arrow, and then select from the following options: ◆ GIF. The Graphics Interchange Format is useful for clip art, text, or images that contain a large amount of solid color. GIF uses lossless compression. ◆ JPEG. The Joint Photographic Experts Group format is useful for images that contain a lot of continuous tones, like photo- graphs. JPEG uses lossy compression. ◆ PNG-8. The Portable Network Graphics 8-bit format functions like the GIF format. PNG uses lossless compression. 5 4 3 2 1 3 4 5 6 From the Library of Wow! eBook ptg Chapter 19 Designing for the Web and Devices 445 ◆ PNG-24. The Portable Network Graphics 24-bit format functions like the JPEG format. PNG-24 uses lossless compression. ◆ WBMP. The Wireless Bitmap format converts an image into black and white dots, for use on output devices like cell phones and PDAs. Click the Preset list arrow. Select a template from the available options, if you want to use some timesaving default options. Select from the various options that will change based on your File Format selection. Select Convert to sRGB if you want the image converted, and choose your preferred viewing style and amount of metadata to be included in the file. Click the Color Table section (available for the GIF and PNG-8 formats), and add, subtract, or edit colors in the selected document. To ch ange the selecte d image's width and height, make desired adjustments from the Image Size section. To mo ve the se lec ted image directly into the Device Central application, click the Device Central button. Click Save. Enter a name, and then select a location in which to save the image file. Click OK. Photoshop saves the modified file and returns you to the original image. 13 12 11 10 9 8 7 6 9 10 11 Working with Matte and Transparency The Matte option, when available, specifies the background color used to fill anti-aliased edges that lie adjacent to transparent areas of the image. When the Transparency option is selected, the matte is applied to edge areas to help blend the edges with a web back- ground of the same color. When the Transparency option is not selected, the matte is applied to transparent areas. Choosing the None option for the matte creates hard edges if Transparency is selected; otherwise, all transparent areas are filled with 100% white. The image must have transparency for the Matte options to be available. For Your Information 7 8 From the Library of Wow! eBook ptg 446 Chapter 19 When you choose Save For Web & Devices, you are able to save your image in one of four web formats: GIF, JPEG, PNG, or WBMP. The Save For Web & Devices dialog box comes with options that will help you through the process. For example, if you choose the JPEG format, you can select the amount of compression applied to the image or, if you select the GIF format, you can choose how many colors are preserved with the image. The PNG format lets you save images in an 8-bit (256 colors) or a 24-bit (millions of colors) format. The options available with Save For Web & Devices give you the control you need to produce small image files with high quality. Working with Save For Web Options Work with Save For Web Options Open a document. Click the File menu, and then click Save For Web & Devices. Select from the various Save For Web & Devices tools: ◆ Hand Tool. Drag the image to change the view of a document. ◆ Slice Selection Tool. Select a predefined image slice. ◆ Zoom Tool. Click on the image to expand the view size. ◆ Eyedropper Tool. Drag within the image to perform a live sampling of the colors. Click the Thumbnail Options button, and then select bandwidth options for the selected document. Click the Zoom list arrow, and then select a view size for the sample images. Click the Toggle Slices Visibility button to show or hide the image slices. Click the Preview button to choose from browser options or view in the default browser, and then select the image. Click Save. 8 7 6 5 4 3 2 1 3 6 7 5 Additional save options in Photoshop include: Convert to sRGB. You can choose to have image colors converted to sRGB in the Save process. Preview. Select from four preview options: Monitor Color (default), Macintosh or Windows with no color management, or Use Document Profile. Metadata. Select from five options to include no metadata (very help- ful for stripping out metadata you don't want others to see), copyright only, copyright and contact info, all metadata except camera info, or all metadata. For Your Information 4 8 From the Library of Wow! eBook ptg Chapter 19 Designing for the Web and Devices 447 The Save For Web & Devices dialog box has many options to help you create the exact image you need—including helping you compress an image down to a specific file size. For example, you've just created an image you want to display on the Web, but the maximum file size you can use is 35 KB. You could experiment with compression options in the Save For Web & Devices settings, or you could use the Optimize to File Size option. Optimizing an Image to File Size Optimize an Image to File Size Open a document. Click the File menu, and then click Save For Web & Devices. Click the 2-Up tab, and then select the sample image to the right. Click the Optimize menu, and then click Optimize To File Size. Enter a file size in the Desired File Size data box. Click the Current Settings option or the Auto Select GIF/JPEG option to let Photoshop choose between the JPEG or GIF format. Click the following Use options: ◆ Current Slice ◆ Each Slice ◆ Total of Al l Sl ic es Click OK. Photoshop compresses the selected sample. Click Save to save the compressed image. 9 8 7 6 5 4 3 2 1 3 85 6 7 4 9 From the Library of Wow! eBook ptg 448 Chapter 19 If you design web documents, you know that the size of your images is very important. Photoshop gives you the option of compressing images in one of four formats appropriate for use on the Web: GIF, JPEG, PNG, and WBMP. The GIF format compresses images that contain solid col- ors with sharp, definable edges, such as clip art and text. The JPEG for- mat reduces the size of image files that contain a lot of soft transitional colors, such as photographs. The PNG format is a hybrid format designed to take the place of the GIF and JPEG format. Finally, the WBMP format was created to display images on low-resolution devices like cell phones and PDAs by converting the image into dots of black and white. Photoshop will help you transform your images into whatever format you need in order to create stunning web images. Working with Web File Formats Work with Web File Formats Open a document. Click the File menu, and then click Save For Web & Devices. Click the Original, Optimized, 2-Up, or 4-Up tabs to view the document using different layouts. Select one of the samples. Click the Optimized File Format list arrow, and then select a format from the available options. Select the options you want to use to change the image compression, and specify your desired color profile options. Click Save. The Save Optimized As dialog box appears. 7 6 5 4 3 2 1 43 7 5 6 From the Library of Wow! eBook ptg Chapter 19 Designing for the Web and Devices 449 Enter a file name in the Save As box. Click the Save as Type (Win) or Format (Mac) list arrow, and then select to save the image in HTML and Images, Images Only, or HTML Only. Click the Save As list arrow, and then select the location in which to save the file. Click the Settings and Slices list arrows to further define the output files (if you save a single image without slices, you can leave these settings at their default values). Click Save. 12 11 10 9 8 9 11 8 Creating an HTML File for an Image When you save an optimized file using the Save Optimized As com- mand, you can choose to generate an HTML file for the image. This file contains all the necessary information to display your image in a web browser. For Your Information 10 12 From the Library of Wow! eBook . better program on the market than Adobe Photoshop that will do the job for you. You can pre- pare images for the Internet all right from Photoshop. Photoshop uses various document formats such. PowerPoint slide presentations, and you don't even have to leave Photoshop. The Save For Web & Devices command lets you open any Photoshop document, and convert it into a web-friendly format. GIF/JPEG option to let Photoshop choose between the JPEG or GIF format. Click the following Use options: ◆ Current Slice ◆ Each Slice ◆ Total of Al l Sl ic es Click OK. Photoshop compresses the