Chapter 13 Preparing Graphics for the Web

Creating Slices When you create graphics for the web, you will need to pay attention to different considerations than you would when designing graphics for print. –Color –Resolution –File formats

Creating Slices File size is a fundamental consideration when creating graphics for the web. Illustrator allows you to divide the artwork into slices.

Creating Slices Artwork divided into slices Slice 3 was created with the Slice tool; slices 1,2, and 4 were generated automatically

Creating Slices Web pages contain many different elements, such as HTML text and bitmap images. If you use slices to divide different elements, you can output them differently.

Creating Slices The Make Slice command creates a slice whose dimensions match those of the bounding box of the object. The Slice tool allows a rectangle to be drawn anywhere on the artboard. –If artwork is moved, slice doesn’t move

Creating Slices You can use standard ruler guides to define how you want artwork to be divided into slices. By definition, guides extend across and beyond the artboard.

Creating Slices Therefore, when you use guides to define areas to be sliced, the length of the guide can get in the way. The following figure shows three guides that were positioned so as to isolate the graphic of the dog.

Creating Slices Guides isolate the dog graphic into its own area Horizontal guide Two vertical guides

Creating Slices When you apply the Create from Guides command, Illustrator generates slices for each area defined by the guide. You can select each slice with the Slice Selection tool, which means slices can be easily combined.

Creating Slices The Create from Guides command generates only slices– not automatic slices

Creating Slices Of the three main ways that Illustrator offers for making slices, using guides and then combining excess slices is the simplest, most straightforward, and hassle-free method.

Specifying Slice Type and Slice Options Slice type and options assigned to them determine how artwork contained in a slice will function on a web page. Three slice types you can specify in the Slice Options dialog box: –Image (if content will be linked) –No Image –HTML Text

Specifying Slice Type and Slice Options If you specify a slice as an Image slice, set options in the Slice Options dialog box for: –Name – slice name is used as file name –URL – makes slice a hotspot on the web –Target – specifies frame you want to link to target –Message –will appear in status bar of browser –Alt – for sight impaired Web surfer –Background – specify a color for background –Text – enter text in Displayed in Cell text box

Specifying Slice Type and Slice Options Message text box Alt text box Slice Type list arrow Slice Options dialog box for slice 03

Using the Save for Web Dialog Box Optimization is a process which reduces file size through standard color compression algorithms. In the Save for Web dialog box, select options for previewing images.

Using the Save for Web Dialog Box GIF is a standard file format for compressing images with flat color, which makes it an excellent choice for many types of artwork generated in Illustrator. GIF compression works by lowering the number of colors in the file. The trick with GIFs is to lower the number of available colors as much as possible without adversely affecting the appearance of the image.

Using the Save for Web Dialog Box A GIF file with too few colors available to render the image adequately

Using the Save for Web Dialog Box JPEG is a standard file format for compressing continuous-tone images, gradients, and blends. JPEG compression relies on “lossy” algorithms— “lossy” refers 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 quality setting.

Using the Save for Web Dialog Box When JPEG compression is too severe for an image, the problems with the image are obvious and unappealing.

Problems with JPEGs are obvious and unappealing Using the Save for Web Dialog Box

Creating an Image Map Because of inconsistency of document color appearance, Illustrator offers a Web Safe RGB mode in the Color panel and a web swatch library.

Creating an Image Map Current fill color button Out of Web Color Warning button In Web Color button Color panel in Web Safe RGB mode

Creating an Image Map Image maps allow you to define an area of an illustration as a link. In a web browser, when a user clicks the area of the image defined as a link, the web browser loads the linked file.

Creating an Image Map Image maps enable you to define odd-shaped areas of an image as links to a URL

Creating an Image Map The Attributes panel contains the Image list arrow, which allows you to choose a shape for your image map. The linked area that the user clicks is called a hotspot.

Exporting Illustrator Graphics for the Web SWF is an acronym for Shockwave Flash. SWFs can be exported and placed in Adobe Flash or opened directly by a web browser. –Internet Explorer –Firefox

Exporting Illustrator Graphics for the Web SWF Options dialog box

Exporting Illustrator Graphics for the Web You can use Illustrator graphics as animations for the web or in Flash. Use the Blend tool to create a blend and then export it as an animation.

Exporting Illustrator Graphics for the Web 6-step blend

Exporting Illustrator Graphics for the Web Illustrator allows you to export a blend as an animation. To export any Illustrator artwork—blend or no blend—as an animation, you must choose AI Layers to SWF Frames in the Export As menu.

Exporting Illustrator Graphics for the Web Creates an animated SWF file AI Layers to SWF Frames option in SWF Options dialog box

Exporting Illustrator Graphics for the Web Illustrations that you create in Illustrator without blends can also be exported as animations. To do so, you must first put the components of the artwork on separate layers.

Exporting Illustrator Graphics for the Web The following figure shows a type of Illustrator artwork that can be exported successfully as an animation. You could start with the larger square animating down to the smaller square, creating the illusion that the squares are collapsing into themselves.

Exporting Illustrator Graphics for the Web Non-blend artwork