Optimizing Images with Save for Web & Devices BC29 • To select all colors in the Color Table that are already Web safe (or Bonus all those that aren’t Web safe), choose Select All Web Safe Colors or Chapter 1 Select All Non-Web Safe Colors from the Color Table’s panel menu. 2. Select Shift/Unshift Selected Colors to/from Web Palette from the Prepping Web Color Table panel pop-up menu. Graphics You can also select colors in the Color Table and convert them to transpar- ency by clicking the Transparency button in the Color Table, or lock them to keep them from being removed by clicking the Lock Color button. To remove colors from the Color Table, select the colors and click the trash can icon. BC30 Bonus Chapters Bonus Chapter 2: Slicing Web Images In This Chapter ✓ Deciding to use slices ✓ Defining slices ✓ Selecting and modifying slices ✓ Setting slice options A re the images on your Web page an attraction or a distraction? Do they invite visitors to explore your page or send them fleeing to the Back button? Attractive images that load quickly are the key to captivating those who visit your site. Unfortunately, few (if any) visitors will stick around to see even the most gorgeous images if they take forever to download. Slicing images is a great tool for improving the download speed of your Web pages. Instead of loading up your page with huge pictures that download slowly, you can slice your images into byte-sized pieces optimized for speed, appearance, and special functions, such as links. Photoshop creates the HTML (the language used to create Web pages) needed to reconstruct your images on your page. This chapter introduces you to the Slice tool found in Photoshop. Photoshop’s built-in slicer-dicer has everything you need to get started in segmenting your images. Why Slice? Although speedy broadband connections are becoming more common, some Internet cruisers are still using slow connections. For these users, nothing is more painful than clicking a link and watching a blank page laboriously download a few pixels at a time. When confronted with a page like this, users are likely to click their Back buttons and move on. BC32 Slicing Up Images Your solutions, as Webmaster, fall into several categories: ✓ Use images with very small dimensions. Buttons and graphic rules download quickly. However, they’re usually ornamental or functional, rather than centerpieces of your page design. ✓ Select the best format for your image. Choosing the JPEG or GIF format when appropriate can make a significant difference in how quickly your image downloads. You can find out about these formats and how to make this determination in Bonus Chapter 1. ✓ Optimize the heck out of the image. One image in a particular format can be five or ten times as large as the same image in the same format, depending on how you optimize it. You can find out how to optimize your images in Bonus Chapter 1. ✓ Slice your image into pieces. Individually optimize each piece for its intended purpose: appearance, download speed, or a combination of the two. With a little care, you can take a complicated image and divide it into slices that look as good as or better than the original. Slices also enable you to easily apply Web features such as rollovers. Another point to keep in mind is that different visitors use different screen resolutions. If you’re happily cruising the Internet at quadruple-figure resolu- tions, that doesn’t mean you should include really large images on your pages (even if sliced and optimized). Other users with the same screen reso- lution you use may have set their browser windows to a smaller size or may be using displays with a maximum 1024 x 768 pixels or smaller. The ability to slice images doesn’t mean you can fill your screen with gigantic graphics. Slices also let you treat different parts of an image in different ways, associ- ating some with Web links to other images or pages, or optimizing each slice separately. Design your Web pages to fit your audience. If your site is geared toward the masses, make the pages a maximum of 1024 x 768 pixels. If it’s aimed at a specialized high-end audience, then you can go larger — 1280 x 1024 pixels, or even larger. Slicing Up Images You can create slices from many different kinds of images. Figure 2-1 shows a fanciful fictitious Web page, but with the kinds of images you might want to slice. Slicing Up Images BC33 Bonus Chapter 2 Slicing Web Images Schaf Photo Figure 2-1: Slicing a graphic-intensive Web page enables you to individually optimize selected areas of your image. For example, you might be interested in slicing the menu of choices on the left side of the figure so that you can include links to the individual pages referenced. The lower image of the four foreign lands offers even more moti- vation for slicing. Each slice is a candidate for a link that takes visitors to a page devoted to that particular country. Types of slices Photoshop enables you to create several different types of slices: ✓ User slices: You create these slices by defining areas of the image. BC34 Slicing Up Images ✓ Layer slices: Photoshop creates these slices from layers of an image. ✓ Auto slices: Photoshop creates these slices automatically to account for the rest of the image after you slice a bit out of it. You can find out more about the differences between these kinds of slices throughout the rest of this chapter. Creating slices To slice an image into user slices, just follow these steps: 1. Select the Slice tool from the Tools panel. You can also press C, or Shift+C if another tool is active, to activate it. 2. Drag with the Slice tool to select the part of the image you want to slice. For example, I selected the entire Japan area in the lower edge. A solid slice selection box appears around the new slice, with handles at each corner and at the sides, top, and bottom. Photoshop assigns the slice a number and icon in the upper-left corner of the slice. 3. Repeat Step 2 to slice the image into as many individual portions as you want. For example, I continued to select the other countries to slice the image into individual portions. Photoshop assigns each of your user slices its own slice number and icon, as shown in Figure 2-2. Figure 2-2: A solid selection box and number appear when you slice your image. Slicing Up Images BC35 Slicing options Bonus Chapter 2 The steps in the preceding section show the slicing operation in its simplest form. You do have some additional options, however, as I describe in the Slicing Web Images following list: ✓ Use a fixed size or fixed aspect ratio (proportion). From the Style pop- up menu on the Options bar, select Fixed Size and type a width and height in pixels in the Width and Height boxes. Or select Fixed Aspect Ratio and type the relative proportions that you want to use (that is, 1:2, 3:4, and so forth) in the Width and Height boxes. Photoshop constrains the Slice tool to the size or proportions you specify. You might want to use Fixed Size to create equal-sized slices in an image, especially an image composed of similar-sized elements, and Fixed Aspect Ratio to create slices that have similar proportions. If you’ve already created a slice that’s the right size to apply to another portion of your image, you can duplicate the slice by dragging the slice, with the Slice Select tool (in the Tools panel on the same flyout menu as the Slice tool), while holding down the Alt key (Option key on the Mac). Drag the new slice to the location where you want to apply it. ✓ Create a square slice. Hold down the Shift key while you drag a slice’s boundaries to create a slice in a perfect square when the Slice or Slice Selection tool is active. You can also hold down Alt (Option on the Mac) to draw from the center out. ✓ Create slices from guides. You can create horizontal and vertical guides that mark the boundaries of your desired slices. Then, click the Slices from Guides button on the Options bar to automatically slice the image by using these guides. ✓ Put each slice in its own layer. You can put each portion of the image you want to define as a slice in its own layer. Then, just select the layer and choose Layer➪New Layer Based Slice. This is how you create a roll- over state (an action taken on a Web page when the mouse passes over, clicks, or leaves a defined area). You can create rollovers in programs such as Dreamweaver. Auto slices are slices that Photoshop creates to account for the area that you haven’t defined as a user slice or layer slice. They’re shown onscreen as dot- ted lines to differentiate them from the solid lines that define user slices and layer slices. Auto slices also have gray slice numbers and icons, as opposed to the blue numbers and icons used to represent their nonautomatic sib- lings. If you want to change an auto slice to a user slice (say, it encompasses an area you were going to slice anyway), select the slice with the Slice Select tool and select Promote from the Options bar. BC36 Selecting and Modifying Slices Selecting and Modifying Slices User slice The number assigned to each slice is dynamic, starting with the slice at the top-left corner of the image and going from left to right and top to bottom. When you rearrange slices, Photoshop Layer slice updates the numbers. Each slice also receives an icon that reflects its type, as shown in Figure 2-3. Figure 2-3: Identify slice types Showing/hiding slices by their icons. and slice numbers You can show or hide slices and their numbers: ✓ Show or hide slices. Choose View➪Show➪Slices. ✓ Show or hide slice numbers. Choose Edit➪Preferences➪Guides, Grid, & Slices (or Photoshop➪Preferences➪Guides, Grid, & Slices on the Mac) and select or deselect the Show Slice Numbers option. When the Slice Select tool is selected, you can also hide auto slices by clicking the Hide Auto Slices button on the Options bar. Changing the color of the lines To change the color used to represent slices, choose Edit➪Preferences➪Grid, Guides, & Slices (Photoshop➪Preferences➪Grid, Guides, & Slices on the Mac) and select a color from the Line Color pop-up menu in the Slices area. Selecting slices To make any changes to a slice, you must first select it. You can select a slice by clicking any visible portion of the slice with the Slice Select tool. Here are a few tips for using this tool: ✓ Switch from the Slice tool to the Slice Select tool. Press Shift+C when the Slice tool is active. The Slice Select tool becomes the active tool. ✓ Alternate between the Slice tool and the Slice Select tool. Hold down the Ctrl key (Ô key on the Mac) to temporarily activate the other tool. For example, if you’re busy slicing images and want to quickly select a slice, hold down Ctrl (or Ô) and click the slice you want to select. When you release the key, the Slice tool becomes the active tool again. To remove a slice, select the slice and press the Delete or Backspace key (Delete on the Mac). To remove all slices from an image and start over, choose View➪Clear Slices. To protect slices from accidental modifications, choose View➪Lock Slices. Selecting and Modifying Slices BC37 Resizing and moving slices Bonus Chapter 2 You can easily resize a user slice or move it to a new location. If you want to resize or move a layer slice, first select it and then click the Promote button Slicing Web Images on the Options bar to change it into a user slice. Here’s how to resize or move slices: ✓ Move a user slice. Select the slice and position the cursor inside the slice’s borders. Then, drag to its new position. To help keep slices aligned evenly, you can hold down the Shift key while you drag to restrict movement horizontally, vertically, or to 45-degree angles. ✓ Place a slice at specific coordinates in your image. Click the Set Options for Current Slice button on the Options bar, as shown in Figure 2-4, or activate the Slice Select tool and double-click inside the slice you want to position. The Slice Options dialog box, as it appears with an image slice, is shown in Figure 2-5. In the X box, type the number of pix- els you want between the left side of the slice and the left border of the image. In the Y box, type the number of pixels you want between the top edge of the slice and the top border of the image. Set options for the current slice Figure 2-4: Most slice options appear only when you select the Slice Select tool. ✓ Resize a user slice in any direction. Grab one of the corner or side handles of a selected slice and drag. ✓ Use dimensions to resize a user slice. Activate the Slice Select tool and double-click inside the slice you want to resize. Then, type the width and height, in pixels, in the W and H boxes. To simplify positioning slices, Figure 2-5: Specify your slice’s exact choose View➪Snap To and select position in the Slice Options dialog box. Guides and/or Slices to tell Photoshop you want to snap slices to guides or other slices. Then, choose View➪Snap to turn on the snapping feature. ✓ Duplicate a slice. Select the slice with the Slice Select tool and then Alt-drag (Option-drag on the Mac). BC38 Selecting and Modifying Slices Dividing a slice You can further divide a slice you’ve made by following these steps: 1. Using the Slice Select tool, select the user slice or auto slice you want to divide. 2. Click the Divide button on the Options bar. The Divide Slice dialog box appears, as shown in Figure 2-6. Figure 2-6: For large graphics, you may want to further divide your slice. 3. Select the appropriate check box(es) to divide the slice horizontally, vertically, or both. 4. Enter a number in the Slices Down, Evenly Spaced text box or the Slices Across, Evenly Spaced text box to split your slice into that number of equal slices. Alternatively, specify a size per slice in the Pixels per Slice box. 5. Select the Preview option if you want to view the new slices in the document window. 6. Click OK to divide the slice. Stacking slices Slices can overlap, but the top slice in a stack of overlapping slices defines the area allocated to them. You can usually resize slices so that they closely fit the areas you want to define, but overlapping allows you to create custom rectangle-shaped slices. You might want to change the stacking order of slices so that the slice encompasses the exact area you want to define.