923 CHAPTER Creating Images for the Web and Mobile Devices IN THIS CHAPTER Preparing images for the Web Slicing images to enable hot spots Adding transparency to Web images Adding animated images to Web pages Converting images to Web formats Adding zoomable images to Web pages A lthough Photoshop is not typically thought of as a tool used for creating Web pages, Photoshop does have some powerful features that can aid graphic designers in preparing images for Web applications. One of the biggest obstacles to overcome when preparing images for the Web is adjusting the size and file format to support the limited capabilities of Web browsers. That’s where Photoshop comes in. This chapter discusses some of the basics of how and why images are prepared for viewing on the Web, such as color settings, slicing images, and adding transparency and animation. We also discuss the Save for Web & Devices utility to prepare and output images in formats that are supported on the Web with the necessary supporting HTML data. Preparing Images for the Web You can prepare images for use on the Web in many ways. Web browsers support only a limited number of file formats, so images must be converted to one of these formats. You also likely need to resize images to reduce them to reasonable sizes that can be supported by the limited network bandwidth. The following sections cover the basic Web formats, how to use color management to ensure consistency between browsers, adding animation to images, and adding transparency to make images flow better with Web page backgrounds. 42_584743-ch30.indd 92342_584743-ch30.indd 923 5/3/10 10:53 AM5/3/10 10:53 AM Part IX: Advanced Output Techniques 924 Understanding Web image formats One of the most basic decisions that you face when preparing images for the Web is the file format of the image. You should decide on the file format before you make too many changes to the image, because they vary in color and transparency support. The following list describes the most common file formats used for the Web: Cross-Ref For more information about different file types, see Chapter 3. n l GIF: Graphic Interchange Format (GIF) images were the standard format for Web images for a long time because they are very small in file size relative to the image size. GIFs support only 256 colors, which is good for Web icons, logos, and text but not so good for pictures. GIF images also support embedded animation that is triggered when the file is loaded. Another advantage of GIF files is that they support transparency, which allows the background color and patterns on the Web page to show through parts of the image. Tip If you are planning on creating GIF or PNG-8 images, you should change the color mode to Indexed color, because that’s the basic format of these file types. This keeps the colors in the image limited to the 256 colors of the indexed color table that are supported when you save the file, so you won’t be editing colors that won’t exist in the final image. n l JPEG: Joint Photographic Experts Group (JPEG) images support 16.7 million colors, so they are much better for displaying photographs or colorful images. They are supported by most Web browsers, so they easily can be embedded in Web pages or viewed as a standalone file. JPEG images do not support animation or transparency, so they aren’t commonly used for buttons, logos, and icons. Another downside to using the JPEG format is that unless you specify a lossless JPEG compression algorithm, JPEG images can result in artifacts in the images. l PNG-8 and PNG-24: Portable Network Graphic (PNG) images were created to replace GIF and, to an extent, JPEG images. PNG-8 is similar to the GIF format in that it is 8-bit and supports only 256 colors. PNG-8 also supports transparency and animation just like GIFs. PNG-24 is similar to JPEG in that it supports the same number of colors. However, because PNG-24 files use a lossless compression, file sizes are larger than JPEGs, but they do not exhibit the same types of artifacts. A big advantage of PNG-24 is that they support transparency in the image using an alpha channel. l WBMP: Wireless Bitmap (WBMP) files use a 1-bit format that is widely supported by mobile devices that can display only black and white pixels. Most current devices support color images, such as JPEG and PNG, but if you are creating an image that needs to be displayed on all devices, you may want to create a WBMP copy along with the color copy. 42_584743-ch30.indd 92442_584743-ch30.indd 924 5/3/10 10:53 AM5/3/10 10:53 AM Chapter 30: Creating Images for the Web and Mobile Devices 925 Selecting the right color profile When working with images that are intended for the Web, you want to use the RGB color mode by selecting Image ➪ Mode ➪ RGB Color from the main menu. You want to use RGB because it’s the color mode that computer screens use to display images in Web browsers. You should use the sRGB color profile when editing images for the Web. The colors are limited to ones that are supported on most displays, so your images look the same for every person no matter what computer is accessing the Web. Tip You can proof the way that images will look on the Web by selecting View ➪ Proof Setup ➪ InternetStandard RGB and then using the View ➪ Proof Colors menu option to toggle proofing on and off. For more information about proofing and color profiles, see Chapter 29. n Slicing images for Web use Another task you may need to perform when preparing images for the Web is to slice them up. Slicing images involves assigning areas of the image as hot points that have meaning in the Web page. These hot points can be assigned descriptions that pop up when the mouse hovers over that area of the image and even links that allow users to navigate to different Web pages by clicking different areas in the image. The following sections discuss the different types of slices that can be created and the tools that you can use to create and define the slices in the image. Understanding slices Photoshop provides four types of slices that vary in their behavior and how they are created. Slices are designated by a bounding box with an icon in the upper-left corner. The icon and color of the bounding box designate the type of slice. The following list describes the types of slices, and Figure 30.1 shows the icons used for each: FIGURE 30.1 The User, Layer Based, and No Image slices are designated by different icons in the top-left corner. The Auto slices are designated by a gray bounding box and icon. User Slice Auto Slice Layer Based Slice No Image Slice 42_584743-ch30.indd 92542_584743-ch30.indd 925 5/3/10 10:53 AM5/3/10 10:53 AM Part IX: Advanced Output Techniques 926 l User Slice: User slices are the basic slices that you draw yourself. They are designated by a blue bounding box and the icon shown in Figure 30.1. l Auto Slice: Auto slices are slices that Photoshop automatically generates and assigns to the areas of the image that are not defined as user, layer based, or no image slices. Auto slices are designated by the same icon as user slices but have a gray bounding box instead of blue. l Layer Based Slice: Layers based slices are created by selecting a layer in the Layers panel and then selecting Layer ➪ New Layer Based Slice from the main Photoshop menu. This creates a square slice the size of the content of the layer. A great feature of layer-based slices is that the slice boundary is automatically adjusted if you change the size of the content in the layer or add a drop shadow. l No Image Slice: A no image slice instructs Photoshop to treat that region in the image as HTML-encoded text. The text that is displayed in the Web page is configured using the Slice Option dialog box, discussed later in this chapter. Using HTML-encoded text areas in the image keeps the text crisp even if the display size in the browser is changed. Another important benefit is that the encoded text is readable by search engines, making the content available for Web searches. Creating slices The Slice tool, shown in Figure 30.2, is used to quickly carve up the image into slices. Using the Slice tool, slices can be created in one of three ways, as shown in Figure 30.3: FIGURE 30.2 The Slice tool allows you to quickly carve up an image into slices manually or by using guidelines. l Manually: Slices can be created manually by dragging the Slice tool across the image to create the bounding box. The Style setting in the Slice tool options menu allows you to control how slices are created. The Normal style allows you to create a simple rectangle by dragging the cursor. Holding down the Shift key while dragging creates a box. The Fixed Aspect Ratio style forces the rectangle to match the ratio specified by the Width and Height settings. The Fixed Size style creates a bounding box the exact size specified by the Width and Height settings. Figure 30.3 shows how the slices are created by dragging the Slice tool. Notice that the area selected is defined into a user slice and the rest of the area is automatically sliced up into auto slices. l Using Guidelines: A great way to create slices is to define guidelines in the document by selecting View ➪ New Guide from the main menu. After all guidelines are created, you can click Slices From Guides to create a set of slices based on the guidelines. Figure 30.3 shows how the slices are created from guidelines. Notice that all the slices created are user slices. 42_584743-ch30.indd 92642_584743-ch30.indd 926 5/3/10 10:53 AM5/3/10 10:53 AM Chapter 30: Creating Images for the Web and Mobile Devices 927 l From Layers: As mentioned earlier, a slice can be created by selecting a layer from the Layers panel and then selecting Layer ➪ New Layer Based Slice. Figure 30.3 shows how a layer-based slice is created from a layer that contains an image. Notice that a layer-based slice is created around the image, and the rest of the document is carved up into auto slices. FIGURE 30.3 Slices can be created manually by dragging the Slice tool, automatically based on guidelines, or from a layer. Manually creating slices Slices from layers Slices from guidelines 42_584743-ch30.indd 92742_584743-ch30.indd 927 5/3/10 10:53 AM5/3/10 10:53 AM Part IX: Advanced Output Techniques 928 Tip You should use the fewest slices you can to keep the HTML code as simple as possible. Avoid having slices overlap each other, and try not to leave gaps between the slices because these force Photoshop to create auto slices to fill those areas. It might help to select View ➪ Snap To ➪ Slices to have the slices snap to each other to avoid the gaps as you draw them. n Configuring slices The Slice Select tool, shown in Figure 30.4, is used to select, manipulate, and configure the slices after they have been created. Using the Slice Select tool, you can change the size of the slices by selecting them and dragging the control handles on the bounding box. FIGURE 30.4 The Slice Select tool allows you to quickly carve up an image into slices manually or by using guidelines. Slice OptionsAlignmentOrdering Note You can access most of the slice configuration options by right-clicking the icon in the upper-left corner of the slice to display the Slice pop-up menu. From this menu, you can change the order of the slice as well as promote, delete, and divide it. n You can select one or more slices and use the following options in the Slice Select tool Options bar to organize and configure the selected slices: l Order: These options adjust the order of the selected slices either to the top, up one, down one, or to the bottom. l Promote: Clicking the Promote button promotes an auto or layer slice to a user slice. l Divide: Clicking the Divide button launches the Divide Slice dialog box, shown in Figure 30.5. From the Divide Slice dialog box, you can specify either evenly spaced or fixed slice divisions to be added to the current slice. The result is that the current slice is divided into the specified set of slices, as shown in Figure 30.5. 42_584743-ch30.indd 92842_584743-ch30.indd 928 5/3/10 10:53 AM5/3/10 10:53 AM Chapter 30: Creating Images for the Web and Mobile Devices 929 FIGURE 30.5 Using the Divide option, you can divide a slice horizontally and/or vertically into a set of equally spaced slices. l Align: The Align option allows you to quickly align the selected slices with each other. Only the selected slices are affected. l Hide Auto Slices: The Hide Auto Slices option hides the auto slices from the document display window. This allows you to more easily see the interaction with the other slices. l Slice Options: The Slice Options button launches the Slice Options dialog box shown in Figure 30.6. From the Slice Options dialog box, you can set the type of the slice to Image, No Image, and Table. When you set the slice to Image, you can configure the HTML tag information for the image slice, as shown in Figure 30.6. When you select No Image, you can set the text that is converted to HTML-encoded text. You can set the dimension of the slice in the Dimension setting. The X and Y options specify the coordinates of the top-left corner of the slice box. The W and H settings set the width and height in pixels. The Slice Background Type option allows you to set the background type to black, white, or a custom color. You also can set the background to matte. The Matte setting is used for the partially transparent areas in images. PNG and GIF files support only fully opaque or fully transparent pixels, so the matte color is used to blend in the partially transparent pixels to fully opaque. Typically, you would set the matte color to the same color as the background of the Web page. 42_584743-ch30.indd 92942_584743-ch30.indd 929 5/3/10 10:53 AM5/3/10 10:53 AM Part IX: Advanced Output Techniques 930 FIGURE 30.6 The Slice Options dialog box allows you to configure the HTML settings, dimensions, and background options for the slice. Adding transparency to images An important aspect of some Web images is the ability to use transparency to help an image seem to belong as part of the Web page. Image files are always rectangular with a height and width dimension. When you place a rectangular image in a Web page, it stands out from the background. The way to solve that problem is to add transparency to the image and save it as a GIF or PNG file. The transparent areas of the image allow the background of the Web page to show through the image, making the image blend with the background. Tip When adding transparency to images that are intended for the Web, keep in mind that PNG and GIF files support only fully opaque or fully transparent pixels. So you want to either use only fully transparent pixels or use a matte color that matches the background color of the Web page. The matte color is used to blend in the partially transparent pixels to fully opaque pixels. n The simplest way to create transparency is to add a layer mask alpha channel to the image that masks the area of the image you want opaque using the following steps: 1. Open the image in Photoshop. 2. Select the area of the image that you want to remain opaque in the Web page. Figure 30.7 shows that the moon is selected in the image. 42_584743-ch30.indd 93042_584743-ch30.indd 930 5/3/10 10:53 AM5/3/10 10:53 AM . formats Adding zoomable images to Web pages A lthough Photoshop is not typically thought of as a tool used for creating Web pages, Photoshop does have some powerful features that can aid. slices in the image. Understanding slices Photoshop provides four types of slices that vary in their behavior and how they are created. Slices are designated by a bounding box with an icon in the. 30.1 The User, Layer Based, and No Image slices are designated by different icons in the top-left corner. The Auto slices are designated by a gray bounding box and icon. User Slice Auto Slice Layer