ADOBE ILLUSTRATOR CS2 REVEALED PHẦN 10 docx

ILLUSTRATOR 13-10 Preparing Graphics for the Web Make slices 1. Open AI 13-1.ai, then save it as SDS. 2. Close all palettes except for the toolbox. 3. Change the style of the guides to Dots and the color of the guides to Yellow. TIP If you are using Macintosh OS 10, your preference settings are on the Illustrator menu. 4. Show the rulers, then position a guide on all four sides of the photo, as shown in Figure 6. 5. Position a vertical guide to the left of the three text buttons, then position another guide to the right of the three text buttons. 6. Position a horizontal guide above the purple text as shown in Figure 7. 7. Position a horizontal guide above and below the “purchase show tickets” button, as shown in Figure 8. 8. Verify that your guides are unlocked. 9. Select all, click Object on the menu bar, point to Slice, then click Create from Guides. Thirty slices are generated, as shown in Figure 9. TIP The View menu has commands to hide and show slices. You positioned guides, then used them to create slices. FIGURE 6 Positioning guides on all four sides of the photo FIGURE 7 Positioning a guide above the text FIGURE 8 Positioning guides above and below the “purchase show tickets” button FIGURE 9 Thirty slices generated from guides Horizontal guide above text Position guides on all four sides of this photo Purchase show tickets button Lesson 1 Create Slices ILLUSTRATOR 13-11 Combine slices 1. Click the Selection Tool , then click any- where in the scratch area to deselect the slices. 2. Click the Slice Selection Tool . TIP The Slice Selection Tool is hidden beneath the Slice Tool. 3. Using [Shift], select slices 06, 11, and 16 as shown in Figure 10. TIP The easiest way to select a slice is to click the slice number. 4. Click Object on the menu bar, point to Slice, then click Combine Slices. The three slices are combined into one slice; all of the slices are renumbered, as shown in Figure 11. 5. Hide the guides. 6. Using the same method, combine the four slices that contain the purple text. 7. Combine the six black slices on the right- hand margin. 8. Combine the three slices that contain the photo. 9. Combine the five slices that contain the logo in the spotlight, so that your slices corre- spond to Figure 12. 10.Save your work. You combined slices to create single slices for specific areas of the artwork. FIGURE 10 Slices 06, 11, and 16 selected FIGURE 11 Three slices combined into one FIGURE 12 After combining slices, 14 slices remain Slices 06, 11, and 16 Newly combined slice LESSON 2 Specifying Slice Types A slice’s type and the options assigned to it determine how the artwork contained in the slice will function on a Web page. A slice must be selected in order for you to assign a type and apply options to it. The Slice Options dialog box allows you to specify one of three categories for a slice’s type. Basically, a slice’s type defines its content. The Image type is used when you want the content of a slice to become a linked image file on a Web page. The No Image type is used when you want the area to contain text or a solid color. You enter the text or the color information directly into the Slice Options dialog box. You cannot view No Image slice content in Illustrator; you must use a Web browser to preview it. Choosing between Image and No Image is not always as straightforward as it would at first seem. Consider slice 2 in Figure 13, for example. It contains no artwork, and certainly would not function as a link. However, it does contain a background color—the same background color that is shared by all of the slices. If you were to define the slice type of slice 2 as No Image, it would by default have no background color. If you saved the file for the Web, the content of slice 2 would appear white on the Web page. You could apply a background color in the Slice Options dialog box, and specify the color to have the same RGB values as the back- ground color in the Image slices. This solu- tion may work well. However, you also have the option of specifying slice 2’s type as Image—a single color image with no links. In this case, slice 2 would be output using the same file format as the other slices, logically a safer bet for color consistency. The third type of slice is HTML Text, which you use if you want to capture Illustrator text and its basic formatting. You can only create this type of slice using the Make Slice command. What You’ll Do In this lesson, you will specify slices as Image or No Image, and you will add URL links to image slices. ▼ ILLUSTRATOR 13-12 Preparing Graphics for the Web SPECIFY SLICE TYPE AND SLICE OPTIONS Lesson 2 Specify Slice Type and Slice Options ILLUSTRATOR 13-13 Generally, you will use Illustrator to create display text—text that is intended to be used as a design element, such as a head- line. Rather than saving display text as text for the Web, it is a smart decision to simply save a version of your artwork with display text converted to outlines and defined as an image. With this method, you know for cer- tain that your text will appear exactly as you designed it, with no risk of its being modified by or being in conflict with a browser’s preset preferences. Setting Options for Image Content Slices When you specify a slice as an Image slice, you have the following options in the Slice Options dialog box: ■ Name: By default, the slice name is used as the file name when you save the Web page. By default, the slice is named with the slice number. It is a good idea to rename an important slice with a name that is more descriptive of its content. ■ URL: Specify a URL to make the slice a hotspot on the Web page. ■ Target: If you’ve specified a URL, the target specifies the frame that you want the link to target. You can enter the name of a target frame, or you can use one of the standard targets in the pop- up menu. If you are unfamiliar with frames, note that _parent and _blank are the most common. _blank means that a new browser window will be opened, or “spawned,” to show the linked page. _parent, the more standard of the two, means that the current win- dow will change to show the linked page. ■ Message: The information you type in the Message text box is what will appear in the status bar of a browser window when you position your cursor over the corresponding image slice. Messages usually convey information about the current image, or informa- tion about what the image links to. ■ Alt: Think of Alt as an “alternative” to an image. Alternative text is for sight impaired Web surfers. They will hear the alt text rather than see the image. ■ Background: If you are saving a bitmap image with a transparent back- ground, you can specify a color for the background behind the transparent areas. FIGURE 13 Slice 2 could be specified as an Image or a No Image type ILLUSTRATOR 13-14 Preparing Graphics for the Web Setting Options for No Image Content Slices In the Slice Options dialog box, you can set the following options: ■ Text: In the Text Displayed in Cell text box, you can enter text that will appear in the slice. You can format the text using standard HTML tags. Be careful not to enter more text than can fit in the slice. If you do, the overflow will extend into neighboring slices. Because you cannot view the text in Illustrator, you will need to save the file for the Web and open it in a browser to view your work. ■ Alignment: Use the Horiz and Vert list arrows to specify the horizontal and vertical alignment of the text. ■ Background: Choose a background color for the slice. QUICKTIP Using Illustrator CS2, you can build interactivity into your graphics that will be used on the Web. Using the SVG Interactivity palette, select the object that you plan on exporting as an SVG file, choose an event, such as onmouseover, from the Event list arrow, then enter your JavaScript in the JavaScript text box. When the graphic is placed in a browser, the event assigned to it will trigger the JavaScript command and cause another event such as a rollover or a pull-down menu to appear. Lesson 2 Specify Slice Type and Slice Options ILLUSTRATOR 13-15 Specify the type of slice 1. Click the Slice Selection Tool , then click slice 03, if necessary. 2. Click Object on the menu bar, point to Slice, then click Slice Options. 3. Click the Slice Type list arrow, then click Image, if necessary. 4. Type Susan’s Dance Studio in both the Message and Alt text boxes, as shown in Figure 14. 5. Click OK to close the Slice Options dialog box. 6. Click File on the menu bar, then click Save to update your slice numbers. 7. Click slice 14, click Object on the menu bar, point to Slice, click Slice Options, specify it as an Image slice, type Fall registration in the Message and Alt text boxes, click OK, then save. 8. Click slice 01, define it as No Image, click the Background list arrow, click Black, click OK, then save. The black background will be coded in HTML. If you wanted to use the underlying black object as the black background, you would specify the slice type as an image, just as you did the logo. 9. Repeat Step 8 to specify slices 02, 04, 05, 11, and 12 as No Image slices with a black background, one at a time. TIP You cannot apply Slice Options to multiple slices simultaneously. You used the Slice Options dialog box to specify slices as Image slices and No Image slices. FIGURE 14 Slice Options dialog box for slice 03 Slice Type list arrow Message text box Alt text box ILLUSTRATOR 13-16 Preparing Graphics for the Web Set options for image content slices 1. Click the Slice Selection Tool , if neces- sary, click slice 13, click Object on the menu bar, point to Slice, then click Slice Options. 2. Click the Slice Type list arrow, then click Image, if necessary. 3. Type http://www.sds.com/bio/index.html in the URL text box. In a Web browser, clicking slice 13 will link to an HTML biography page. 4. Click the Target list arrow, then click _parent. In a Web browser, clicking slice 13 will change the current window to the HTML biography page. 5. Type Susan Lynn bio in the Message and Alt text boxes, as shown in Figure 15, click OK, then save. TIP Each time you make changes to a slice or combine slices, the slice numbering is thrown off. Saving your work reapplies the correct slice numbers to the slices. (continued) FIGURE 15 Slice Options dialog box for slice 13 URL text box Lesson 2 Specify Slice Type and Slice Options ILLUSTRATOR 13-17 6. Click slice 08, open the Slice Options dialog box, repeat Steps 2–5 so that slice 08 con- tains the same slice information as slice 13, then save. 7. Click slice 06, open the Slice Options dialog box, verify that the Slice Type is set to Image, click OK, then save. 8. Click slice 07, open the Slice Options dialog box, type the information shown in Figure 16, click OK, then save. 9. Specify the slice options for slice 9 as shown in Figure 17, then save. 10.Specify the slice options for slice 10 as shown in Figure 18, then save. Because the target for slice 10 is _blank, slice 10, when clicked, will open a new browser window for the photo album page. You used the Slice Options dialog box to specify URLs to which the image slices will link when clicked in a browser application. FIGURE 16 Slice Options dialog box for slice 07 FIGURE 17 Slice Options dialog box for slice 09 FIGURE 18 Slice Options dialog box for slice 10 LESSON 3 Optimizing Artwork for the Web Most artwork, even when sliced, requires optimization. Optimization is a process by which the file size is reduced through stan- dard color compression algorithms. Illustrator CS2 offers a number of optimiza- tion features to save artwork in different Web graphics file formats. Your choice of a file format will have the greatest effect on the optimization method that is performed on the artwork. The Save for Web dialog box presents unprecedented options for previewing images. The tabs at the top of the image area define the display options. The Original display presents the artwork with no optimization. The Optimized display presents the artwork with the current optimization setting applied. The 2-Up display presents two versions of the artwork—the original and the optimized version—side by side, and the 4-Up display presents the original beside three optimized versions. Optimizing with the GIF File Format GIF is a standard file format for compress- ing images with flat color, which makes it an excellent choice for many types of art- work generated in Illustrator. GIFs provide effective compression; for the right type of artwork, GIFs maintain excellent quality with crisp detail. In many cases, the compression has no noticeable effect on the image. GIF compression works by lowering the number of colors in the file. The trick with GIFs is to lower the number of available What You’ll Do In this lesson, you will optimize slices for the Web, using the Save for Web dialog box. ▼ ILLUSTRATOR 13-18 Preparing Graphics for the Web USE THE SAVE FOR WEB DIALOG BOX Lesson 3 Use the Save for Web Dialog Box ILLUSTRATOR 13-19 colors as much as possible without adversely affecting the appearance of the image. Generally, if the number of colors is too low, problems with the image are obvi- ous, as shown in Figure 19. Optimizing with the JPEG File Format JPEG is a standard file format for compressing continuous-tone images, gradients, and blends. JPEG compression relies on “lossy” algorithms—lossy refer- ring to a loss of data. In the JPEG format, data is selectively discarded. You choose the level of compression in the JPEG format by specifying the JPEG’s qual- ity setting. The higher the quality setting, the more detail is preserved. Of course, the more detail preserved, the less the file size is reduced. When JPEG compression is too severe for an image, the problems with the image are obvious and very unappealing, as shown in Figure 20. JPEG has emerged as one of the most used, if not the most used, file formats on the Internet. As a result, many designers ignore GIFs in favor of JPEGs, though many times GIFs would be the better choice. FIGURE 19 A GIF file with too few colors available to render the image adequately FIGURE 20 Problems with JPEGs are obvious and very unappealing [...]... box for slice 09 10. Specify the slice options for slice 10 as shown in Figure 18, then save Because the target for slice 10 is _blank, slice 10, when clicked, will open a new browser window for the photo album page You used the Slice Options dialog box to specify URLs to which the image slices will link when clicked in a browser application FIGURE 18 Slice Options dialog box for slice 10 Lesson 2 Specify... extend into neighboring slices Because ILLUSTRATOR 13-14 ■ ■ you cannot view the text in Illustrator, you will need to save the file for the Web and open it in a browser to view your work Alignment: Use the Horiz and Vert list arrows to specify the horizontal and vertical alignment of the text Background: Choose a background color for the slice QUICKTIP Using Illustrator CS2, you can build interactivity... Lesson 3 10. Keep the Save for Web dialog box open You optimized a slice as a GIF You lowered the number of colors available to draw the image, noting the changes in image quality and file size Use the Save for Web Dialog Box ILLUSTRATOR 13-21 Compare and contrast JPEG vs GIF formats 1 Click the Slice Select Tool , if necessary, click slice 07, press and hold [Shift], then click slices 09 and 10 to add... the Save for Web Dialog Box ILLUSTRATOR 13-23 FIGURE 10 Combine slices Slices 06, 11, and 16 selected 1 Click the Selection Tool , then click anywhere in the scratch area to deselect the slices 2 Click the Slice Selection Tool Slices 06, 11, and 16 TIP The Slice Selection Tool is hidden beneath the Slice Tool 3 Using [Shift], select slices 06, 11, and 16 as shown in Figure 10 FIGURE 11 Three slices... for slice 10 Lesson 2 Specify Slice Type and Slice Options ILLUSTRATOR 13-17 L E S S O N 3 USE WEB DIALOG BOX THE SAVE FOR What You’ll Do Optimizing Artwork for the Web Most artwork, even when sliced, requires optimization Optimization is a process by which the file size is reduced through standard color compression algorithms ▼ Illustrator CS2 offers a number of optimization features to save artwork... Lesson 3 10. Keep the Save for Web dialog box open You optimized a slice as a GIF You lowered the number of colors available to draw the image, noting the changes in image quality and file size Use the Save for Web Dialog Box ILLUSTRATOR 13-21 Compare and contrast JPEG vs GIF formats 1 Click the Slice Select Tool , if necessary, click slice 07, press and hold [Shift], then click slices 09 and 10 to add... logically a safer bet for color consistency The third type of slice is HTML Text, which you use if you want to capture Illustrator text and its basic formatting You can only create this type of slice using the Make Slice command Preparing Graphics for the Web Generally, you will use Illustrator to create display text—text that is intended to be used as a design element, such as a headline Rather than... large (continued) ILLUSTRATOR 13-22 Preparing Graphics for the Web 7 Click the lower-left window, then note that its Selective palette is 64 colors, one-half that of the image in the upper-right window 8 Click the Colors list arrow, then click 32 The Selective palette of the image in the lower-left corner is reduced by half, yet the quality remains acceptable FIGURE 24 Slices 07, 09, and 10 optimized as... legs Download time Quality setting 9 Click the lower-left window, click the Quality list arrow, then drag the slider to 40 10. Keep the Save for Web dialog box open You used the 4-Up view of the Save for Web dialog box to compare three optimized JPEG files, each with different settings ILLUSTRATOR 13-20 Preparing Graphics for the Web Optimize slices as GIFs 1 Click the Optimized tab 2 Click the Slice Select... three slices that contain the photo 9 Combine the five slices that contain the logo in the spotlight, so that your slices correspond to Figure 12 10. Save your work You combined slices to create single slices for specific areas of the artwork Lesson 1 Create Slices ILLUSTRATOR 13-11 L E S S O N 2 SPECIFY SLICE TYPE AND SLICE OPTIONS What You’ll Do Specifying Slice Types ▼ A slice’s type and the options assigned . as shown in Figure 17, then save. 10. Specify the slice options for slice 10 as shown in Figure 18, then save. Because the target for slice 10 is _blank, slice 10, when clicked, will open a new. slices. ▼ ILLUSTRATOR 13-12 Preparing Graphics for the Web SPECIFY SLICE TYPE AND SLICE OPTIONS Lesson 2 Specify Slice Type and Slice Options ILLUSTRATOR 13-13 Generally, you will use Illustrator. slices. ▼ ILLUSTRATOR 13-12 Preparing Graphics for the Web SPECIFY SLICE TYPE AND SLICE OPTIONS Lesson 2 Specify Slice Type and Slice Options ILLUSTRATOR 13-13 Generally, you will use Illustrator