Photoshop CS2 All-in-One Desk Reference For Dummies- P25

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:30

Thêm vào BST

Báo xấu

54
lượt xem 10
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Photoshop CS2 All-in-One Desk Reference For Dummies- P25:Barbara Obermeier is principal of Obermeier Design, a graphic design studio in Ventura, California. She’s the author of Photoshop Album For Dummies, coauthor of Adobe Master Class: Illustrator Illuminated, Photoshop 7 For Dummies, and Illustrator 10 For Dummies. She has contributed as coauthor, technical editor, or layout designer for numerous books. Barb also teaches computer graphics at Brooks Institute; the University of California, Santa Barbara; and Ventura College....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Photoshop CS2 All-in-One Desk Reference For Dummies- P25

BC-14 Using a Web-Safe Palette and Hexadecimal Colors Selecting individual Web-safe colors Photoshop lets you select individual colors based on their Web-safeness. You can do that two ways: Selecting the Only Web Colors check box in the Color Picker, as shown in Figure 1-6. If you don’t select the Only Web Colors check box, the Adobe Color Picker still lets you know when you select a nonsafe color. A small cube appears above the selected color patch in the dialog box (to the left Figure 1-6: Web safe colors help ensure that your color of the Custom button). displays consistently across all browsers. Selecting Make Ramp Web Safe in the Color palette. See Book II, Chapter 3 for details on using either of these features with Web safe colors. So what are hexadecimal colors? Hexadecimal colors are simply a way of representing hues in the notation used by computer programmers. Hexadecimal values are calculated by using the digits 0 to 9 and the letters A through F. Fortunately, you don’t need to bother with the math. You just need to know that a hex value from 00 (no color) to FF (maximum color) represents the 256 shades of red, green, and blue. For example, a value of F0306F might represent a deep rose color. This cryptic value can be broken into three parts: Red — F0 (240 in decimal); Green — 30 (230 in decimal); and Blue — 6F (111 in decimal). The hex numbers are handy because you can enter them into HTML text to reproduce the color. You can read the hexadecimal values of a selected color in the Info palette and use the same values to specify that color in any dialog box (such as the Adobe Color Picker) that accepts them. You are also likely to use these values when you use HTML or another markup language to specify the text and background colors on your Web page or Web site.
Making Type Look Good On-Screen BC-15 Keeping Color Consistent in Web Images Although getting color consistent and optimal is probably more challenging for print, you need to consider a couple issues for the Web as well. First, your images will be viewed on a wide variety of monitors, operating systems, and computer platforms. This alone causes the images to display differently. In addition, most Web browsers do not take into account an image’s embedded ICC profile (see Book II, Chapter 3). Raw RGB color data is all that displays. So again, how your image is viewed depends on the viewer’s computer system/ monitor. Some of the things you can do to help remedy the situation are the same things you do for working with color for print, and a couple are unique: Set up the optimum image-editing environment. Keep your desktop a neutral gray, eliminate distracting surroundings, and so on. Find more details about setting up your environment in Book II, Chapter 3. Calibrate your monitor! Set your monitor to its optimum viewing state and keep it that way. I describe calibration in detail in Book II, Chapter 3. Establish your color settings. I recommend that if you’re cranking out lots of Web images, use the Web Graphics Defaults as your setting. This setting enables you to produce images in the sRGB color space and increases the chances that your images display correctly and consistently. I cover color management detail in, you got it, Book II, Chapter 3. Convert any non-sRGB profiled documents you have to sRGB. To do this, choose Image Mode Convert to Profile. Select sRGB in the Destination Space area. Finally, use the Save for Web feature to save all your Web images. This way, you have more control over how your images are optimized. You can choose how many colors are displayed, what palettes are used, and so forth. Making Type Look Good On-Screen The last thing you may want to consider when prepping your images for the Web is how your type looks. You can make changes as you prepare or edit the image that affect how well your type shows up on-screen. The following sections describe some of your options. Anti-aliasing Depending on your typeface and the size, you may or may not want to apply anti-aliasing. Photoshop offers five different anti-aliasing methods:
BC-16 Making Type Look Good On-Screen None uses no anti-aliasing. Although it depends on the font, this choice is often a good choice for small type. A few fonts are specifically designed for use without anti-aliasing. When used with anti-aliasing turned on, these fonts look atrocious. You may want to check out Pixel fonts. They are a newer breed of fonts designed specifically for Web display, especially at smaller sizes, used at a specific point size. Sharp applies only enough anti-aliasing to soften the edges of diagonal strokes, keeping the type quite sharp. This is another sensible choice for smaller type. Crisp increases the amount of anti-aliasing a bit, but the type still looks fairly sharp. Smooth provides the maximum amount of anti-aliasing but can slightly affect the sharpness of the type. Strong gives the type a heavier appearance. Although these recommendations usually hold true, your results may vary depending on specific typeface and size; you may want to experi- ment in some cases. Fractional width/system layout At small sizes and low resolutions, such as those typical of Web display, type can be rendered inconsistently with the default Photoshop type setting of Fractional Width. In this mode, Photoshop varies the distance between char- acters by using fractions of whole pixels. At sizes smaller than 20 points, such type may either have too much space between characters, or not enough space, causing the characters to run together. To prevent this, choose System Layout from the Character palette options menu. System Layout displays text as the operating system would by using a program, such as WordPad or SimpleText. Photoshop switches to whole pixel increments and removes all anti-aliasing. The type won’t look quite as neat, but you can prevent the spacing problems. It can also be a good choice for smaller text. Faux styles Photoshop cobbles together imitations of italic or bold typefaces for fonts that don’t have them. The program normally does an okay job of slanting the Roman (upright or normal) version of the type, or making the type thicker to simulate bold.
Optimizing Images with Save for Web BC-17 At smaller type sizes and for type displayed online, the results are often less than pleasing. So when creating type for online display, try to avoid using the Faux styles. To apply these styles, such as those shown in Figure 1-7, choose Faux Bold or Faux Italic from the Character palette options menu or click the Faux Bold or Faux Italic button that appears near the bottom of the Character palette. Figure 1-7: Just because Faux Bold and Faux Italic styles are available doesn’t mean you should use them. Optimizing Images with Save for Web One thing to keep in mind as you work with Save for Web is that optimization always involves a trade-off between two goals that conflict with each other to a certain extent: Image quality: With a few exceptions confined to the artistic realm, you generally want your image to appear on a Web page as sharp as it possibly can be, with the full range of colors shown in the original. The best qual- ity image should also be sized to fit in well with your Web page design, no matter what size browser window users are viewing a page through. Download speed: Short download times are desirable, with no excep- tions. The ideal Web page image should appear on-screen as quickly as possible, regardless of the user’s connection speed. Although fast load- ing times are essential when users have pokey dial-up connections, you also want fast download speeds for those using faster cable modem/DSL broadband links. Unfortunately, you can’t fully meet either of these two goals at all times. The best quality images and the largest and flashiest photos also take the longest to download. Conversely, the images that download the fastest can poten- tially look the worst.
BC-18 Optimizing Images with Save for Web But don’t panic yet. You can make trade-offs to ensure that your images have the quality you expect and the fast download times that users demand. By choosing the best file format for your image, making some choices about how much quality you’re willing to give up, and tweaking your image with Photoshop, you can frequently get the best of both worlds. Earlier sections in this chapter offer advice on the manual prep you can do. Save for Web provides the automated half of that equation. In fact, Save for Web has the simplest automation tool of all: Optimize to File Size, shown in Figure 1-8. This option is tucked away in the Save for Web dialog box’s palette menu (see the next section for more on this dialog box). Select the file size you want, click a few other settings, and Photoshop gives you a file that meets that file size Figure 1-8: The Optimize to File Size command creates a requirement. file with your target file size. Exploring the Save for Web dialog box You can access the Save for Web dialog box by choosing File➪Save for Web from the menu bar. The dialog box, shown in Figure 1-9 a little later in this chapter, has four tabbed pages, a Tools palette, a clutch of options and menus, and a generous Preview window that you can use to evaluate your results. The following sections briefly describe each of the dialog box’s key components. Tools palette and image preview At the left edge of the dialog box is the Tools palette, which includes four tools and a preview box that closely resemble their counterparts in the main Photoshop program. Here’s a quick rundown, from top to bottom, of the Tools palette options: Hand ( H ): Select this tool and then drag in the Preview window to move the image.
Optimizing Images with Save for Web BC-19 Slice Select ( K): Use this tool to select slices. For more information on creating slices, see Book IX, Chapter 2. Zoom ( Z ): Use this tool or press the spacebar and Ctrl in Windows (or press the spacebar and Ô on the Mac) to zoom in. To zoom out, press the spacebar and Alt in Windows. On the Mac, press the spacebar and Option. If you’re using the Hand tool, you don’t have to press the spacebar if you want to zoom out or in. Hold down Alt or Ctrl (Option or Ô on the Mac) to zoom out and in, respectively. Eyedropper ( I ): Use the Eyedropper tool to sample colors in the pre- view image. If you’re sampling in a GIF or PNG image, the Color Table is available and, if shown, highlights the color you sample in the table. For more information on GIF, PNG, and JPEG file formats, see Book IX, Chapter 1. Eyedropper tool color: This patch shows the color most recently sam- pled by the Eyedropper tool. Click the patch to access the Color Picker and select a color of your choice. Toggle Slices Visibility (Q): Click this icon to turn the display of slices on or off. Edit in ImageReady: Click this button, located in the lower-right corner, to jump into ImageReady, where you find more Web tools. The Save for Web dialog box also lets you control your view of images. Along the bottom of the window, you see these options: Zoom Level: Type a zoom value here, or choose zoom levels from 12.5% to 1,600%, or select Fit on Screen. Status bar: This bar shows the RGB values of the color under the cursor, the value of any alpha channel, and the hex values and Index. Browser preview: Click to preview the image in the browser selected from the pop-up menu. The majority of the Save for Web dialog box shows you a preview of the image you’re working with: Preview windows: The tabs at the top of the window show the original image, or one of three other optional views. See the “Introducing Preview options” section, later in this chapter. Preview status: This area shows the size of the original image, as well as various parameters of optimized images, such as download speed and number of colors.
BC-20 Optimizing Images with Save for Web Selectively changing quality levels in an image You can use the Mask button next to the Quality For example, you can specify a minimum box to selectively apply different quality levels quality level of 19 percent and a maximum to different areas of your image. This is called quality level of 62 percent. Photoshop uses Weighted Optimization. To use this option, the grayscale values in the masks and/or follow these steps: alpha channels you select to apply those quality levels. Photoshop optimizes the 1. Click the Mask button (refer Figure 1-10). lightest areas of the mask at the highest 2. Select whether you want to use all text quality level you specify and the darkest layers, all vector shape layers, or both. You areas of the mask at the lowest quality level can also select one of the alpha channels. you specify. For more on vector shapes, see Book IV, See the GIF optimization options later in this Chapter 2. For more on alpha channels, see chapter for more ways to weight optimiza- Book VI, Chapter 1. tion by using masks. 3. Adjust the minimum and maximum quality 4. Click OK to apply the weighted optimization. sliders in the Quality bar to the levels you You have some additional options in the Preview want. Menu pop-up menu (called out in Figure 1-10), including a choice of browser dither schemes, whether you want to hide slices created auto- matically (see Book IX, Chapter 3 for more on slices), whether to include the color compensa- tion option, and the display of the estimated time for downloading. Change settings Along the right side of the window, you can make adjustments to the various color, file, and size settings for your image. Here’s a rundown of what you see: Save/Cancel/Done buttons: Use these buttons to save an optimized image, cancel the operation, or indicate that you’re done optimizing. Preset: You can choose settings, including the type of file. I describe these settings in detail later in this chapter. Color Table: Shown only when you select a GIF or PNG image in the Preview window, this tab displays the Color Table for the optimized image. Image Size: Click this tab to resize your image. Animation: This new options enables you to select frames and play the animation.
Optimizing Images with Save for Web BC-21 Introducing Preview options You have four Preview options: Original: Fills the Preview with the original image, giving you a chance to review it, zoom to the desired size, or divide the image into slices to be optimized separately. Optimized: Fills the Preview window with the optimized version of the original image. If you like, you can make all your optimization settings with only this view available. You can compare your results with the original by clicking the Original tab. 2-Up: Divides the Preview window in two and shows the original on the left and the optimized version on the right (or on the top (original) and bottom (optimized)), with information about each in the status box below the Previews. 4-Up: Divides the Preview window into four panes. The original image is shown in the upper-left corner, and three different optimized versions are shown in the other three panes (see Figure 1-9). If the image is verti- cal and thin in orientation, Photoshop stacks them four across. Tools palett e View image Settings PhotoDisc/Getty Images Figure 1-9: The Save for Web dialog box offers four previews of various optimization settings.
BC-22 Optimizing Images with Save for Web Optimizing your image Before getting into the nitty-gritty of working with the tools and options in the preceding sections, I give you a quick overview of using the Save for Web dialog box. To optimize an image, you follow these steps: 1. Open the image in Photoshop. 2. Choose File➪Save for Web. 3. Select the kind of preview you want to use by clicking one of these four tabs: Original, Optimized, 2-Up, or 4-Up. Although the upper-left pane displays the original image by default, you can select this pane and change it into a fourth optimized preview. 4. Click any of the four panes and, in the Settings area of the dialog box, choose the kind of optimization you want to apply to that version. I explain these options in detail throughout the rest of this chapter. 5. After you fine-tune the optimization settings and are satisfied with the results, select one of the Previews and click Save. Your image is stored on your hard drive with those optimization settings. 6. Repeat Step 5 to create as many different versions as you like, using a different optimization method for each. JPEG options To optimize an image as a JPEG, choose the file format by doing one of the following: Choose one of the preset JPEG optimization settings from the Preset pop-up menu: • JPEG High: High quality (low compression) • JPEG Medium: Medium quality (medium compression) • JPEG Low: Low quality (high compression) If you save your own presets for optimization settings, they appear in the same list. Choose the JPEG file format and Maximum, Very High, High, Medium, or Low directly from the Optimized file format and Compression quality pop-up menus, shown in Figure 1-10.
Optimizing Images with Save for Web BC-23 Compression quality pop-up menu Optimized file format pop-up menu Preview pop-up menu Mask Corbis Digital Stock Figure 1-10: Choose your desired file format and compression quality settings in the Save for Web dialog box. Then select any or all of these options: Progressive: This option creates a low-resolution version of the image that downloads quickly (much like an interlaced GIF) and that is fol- lowed by progressively detailed overlays until the full image is seen. Again, not all browsers can benefit from this setting. ICC Profile: Choose this option to embed the ICC color profile of the image in the JPEG file. Very few browsers can correct the colors they display based on this information, and because it adds about 3K to your file size, you’re better off leaving it deselected for now. For more on color management, see Book II, Chapter 3. Optimized: This option creates a JPEG file that is occasionally a little smaller at any quality setting (and often doesn’t change the size at all), but not all browsers can display images with this type of optimization. If you feel many users with older browsers will view your page, you might want to forego this option. Quality: You can specify an exact quality/compression level by using a slider or by typing a value into the text box.
BC-24 Optimizing Images with Save for Web Blur: Images that are slightly blurred can be squeezed more thoroughly by using the JPEG compression scheme. If your image still looks good with a tiny bit of blur applied, you can use a setting of 0.1 to 0.5 to gain a smaller file size. However, most likely you don’t want to sacrifice image detail, in which case it is better to go with a higher rate of compression and leave the blur setting at 0. Matte: This setting lets you specify a color for filling in pixels that were completely or partially transparent in the original. Partially transparent pixels are blended with the color you choose. Select a color from the pop-up menu, or click in the color swatch to select a color from the Color Picker. You can save any customized JPEG settings you make by choosing Save Settings from the dialog box’s palette menu. Your stored settings then appear in the Settings menu for reuse. GIF options The GIF options, shown in Figure 1-11, are generally different from those available for JPEG, as befits the very different nature of the GIF image. Dithering algorithm Transparency Color reduction dithering algorithm algorithm Corbis Digital Stock Figure 1-11: When saving a GIF, choose your desired color reduction and dithering algorithms.
Optimizing Images with Save for Web BC-25 File Format To optimize an image as a GIF, choose the file format by doing one of the following: Choose one of the preset optimization settings from the Settings pop-up menu. You find presets for GIF 128, GIF 64, and GIF 32 (both dithered and undithered), plus GIF Restrictive. The figures represent the number of colors in the GIF image. Choose the GIF file format directly from the File Format menu. Color Reduction Algorithm This menu includes three categories of options for creating a palette for the Color Table: Dynamic: The options in this category include: • Perceptual: Favors colors the human eye is most sensitive to. • Selective: Weights the colors toward those considered Web safe. • Adaptive: Builds a Color Table emphasizing the portion of the spectrum containing the colors that are most commonly found in the image — for example, greens in scenic photos or flesh tones in portraits. • Restrictive ( Web): Also called Web-safe. Uses a 216 Windows palette and a 256 Mac palette. Ensures that the browser doesn’t dither 8-bit color images. Be warned that it can create larger files. With the dynamic options, a new palette of colors is collected every time you change or optimize the image. Fixed: These options include Mac OS and Windows (the palettes used by the Mac and Windows operating systems, respectively), Grayscale, and Black and White. The colors available are fixed, but the actual colors used vary with the image they are applied to. Custom: This option uses a fixed color palette created by the user, but which is not updated automatically when the image is modified. You can also apply weighted optimization to color reduction by clicking the Mask button next to the Color Reduction Algorithm box, and selecting the mask as described in the sidebar, “Selectively changing quality levels in an image.” Dithering Algorithm Choose the dithering scheme used to simulate colors that can’t be represented by the hues in the Color Table. Your choices are Diffusion (a random type of dithering), Pattern (a regular, halftone screen-like pattern), Noise (a random pattern that doesn’t spread across pixels), and No Dither. You can also choose the amount of dithering to allow in the Dither slider or text box.
BC-26 Optimizing Images with Save for Web You can also apply weighted optimization to dithering by clicking the Mask button next to the Dither box and then selecting the mask and amount of dithering as described in the sidebar, “Selectively changing quality levels in an image.” Transparency and Matte Choose Transparency and Matte options to control how transparent pixels are handled during optimization. Select a matte color from the menu or click the matte color patch and choose a hue from the Color Picker. You want the matte color to match the background color of the Web page as closely as possible. Select transparency and a matte color. This option keeps transparent pixels in the original image transparent and blends partially transparent pixels with a matte color you choose. Select transparency and no matte color. Choosing None from the Matte menu makes transparent pixels and those that are more than 50 percent transparent fully transparent, while rendering pixels that are 50 percent or less transparent as fully opaque. Select no transparency and a matte color. Deselecting transparency and choosing a matte color fills pixels that are completely transparent with the matte color you select and blends them. Consult an HTML manual to find out how to determine the hexadecimal values of the background colors of the page. You can find a description of hexadecimal colors earlier in this chapter. Transparency Dithering Set the options for Transparency Dithering. This option determines how Photoshop dithers pixels that are partially transparent: No Transparency Dither: Leaves partially transparent pixels in the image alone. Diffusion Transparency Dither: Adds a random pattern to partially transparent pixels. Like diffusion dither, the pattern is spread across adjacent pixels. You can specify the degree of dithering with the Amount box/slider. Pattern Transparency Dither: Applies a halftone-like pattern to the pixels that are partially transparent. Noise Transparency Dither: Applies a random, nondiffused pattern to the semitransparent pixels.
Optimizing Images with Save for Web BC-27 Specify the amount of transparency dithering by moving the slider or enter- ing a value. Interlaced Choose whether you want the image interlaced (to appear gradually in the browser when it downloads) or not interlaced. Lossy Select the amount of lossy file compression allowed with the Lossy slider or text box. You can use masks to add weight to lossy compression by clicking the Mask button and applying the mask settings as I describe earlier in the chapter. Colors Choose the number of colors in the image from the Colors list. Select a specific number of colors from 2 to 256, or choose Auto to let Photoshop choose the number of colors automatically based on the colors in the Color Table. Web Snap Use the Web Snap slider or text box to specify a tolerance level that automat- ically changes pixels that are within that tolerance level of a Web-safe color to that Web-safe hue. The higher the value, the more Web-safe colors the image has. PNG options If you elect to create a PNG file, two sets of options are available for the two types of PNG files: PNG-8 (256 colors) and PNG-24 (16.7 million colors). Note that a PNG-8 preset consists of 128 dithered colors. The PNG-8 options, shown in Figure 1-12, are similar to the GIF options (described earlier in the chapter), with the following exceptions: Lossy compression is not available for PNG-8. Weighted optimization can be applied to the color reduction and dither- ing algorithms, which are otherwise similar to those used with GIF. The PNG-24 options include only interlacing and the transparency/matte options described in “GIF options” earlier in this chapter.
BC-28 Optimizing Images with Save for Web PhotoDisc/Getty Images Figure 1-12: The PNG-8 optimization settings are similar to those of GIFs. Image Size The Save for Web dialog box includes its own version of the Image Size dialog box, which resides on a separate tab, next to the Color Table tab, as shown in Figure 1-13. Although slightly differ- ent in appearance, it operates the same as the Image Size dialog box. You can specify a new width and height for the image or change the size by a percent- age. You also can select the type of resampling performed when resizing the image, although you almost always want to use the default Bicubic algo- rithm. For more information on chang- ing image size, see Book II, Chapter 1. Figure 1-13: The Save For Web window Optimizing Colors sports its own version of the Image Size You can manually shift one or more dialog box. colors toward Web-safety. You can also change specific colors in an image that has already been converted to 256 colors (see Book II, Chapter 2 for details) to make them Web safe. Just follow these steps:
Optimizing Images with Save for Web BC-29 1. With the Color Table visible, shown in Figure 1-14, choose the colors you want to convert. These are your options: • Click an individual color in the Color Table to select only that color. • Press the Ctrl key (or Ô key on the Mac) to add additional colors to your selection. • Press the Shift key and click an additional color to select all the colors between the last color selected and the additional color. • To choose all colors in the Color Table that are already Web safe (or all those that are not Web safe), choose All Web Safe Colors or All Non-Web Safe Colors from the Color Table’s palette menu. Figure 1-14: Choose the color you want to convert to Web safe. 2. Choose Shift/Unshift Selected Colors to/from Web Palette from the Color Table palette pop-up menu. You can also select colors in the Color Table and convert them to transparency 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.
BC-30 Photoshop CS2 All-in-One Desk Reference For Dummies
Bonus Chapter 2: Slicing and Showing 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, even the most gorgeous images will never be seen at all 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 up your images into byte-sized pieces opti- mized 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. ImageReady has a similar tool and expanded slicing capabilities, but Photoshop’s built-in slicer-dicer has more than enough versatility to get you started. Why Slice? Although speedy broadband connections are becoming more common, many Internet cruisers are still using dial-up connections with top speeds of 56 Kbps. 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.
BC-32 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 are 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 find out about these formats and how to make this determination in Book IX, 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 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 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 1024 x 768 resolution, that doesn’t mean you should include really large images on your pages (even if sliced and optimized). Other users with the same screen resolution you use may have set their browser windows to a smaller size or may be using displays with a maximum of 800 x 600 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, just as you can do with image maps in ImageReady. Design your Web pages to fit your audience. If your site is geared toward the masses, make the pages a maximum of 800 x 600 pixels. If it is aimed at a spe- cialized high-end audience, then you can go as large as 1024 x 768 pixels. 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 BC-33 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. 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.