Create HTML Web Pages in Illustrator

Illustrator provides minimal options for saving a document as an HTML web page. A general word of advice if you plan to design web pages in Illustrator: Don t. If you are serious about creating web pages, you ll need to take up HTML or use Illustrator in conjunction with a web design program such as Dreamweaver, FrontPage (for Windows only), or GoLive. The fatal flaw in Illustrator s (and Photoshop s) web page generation tools is that Illustrator (and Photoshop) do not provide the ability to save text as HTML text. So when you export your document as an HTML page, all of the text is converted to images.

Because Illustrator is not much of a functional web page design program, we ll take only a quick look at how it can be used to generate web pages. The key feature and concept to understand is slicing . Slicing has a lot of different meanings in web graphic design, but here it refers to the Illustrator feature that allows you to designate individually exportable objects within a single document.

Slice Illustrations

Slicing can be used to break a large image into smaller chunks , which some web designers consider more suitable for web pages. And slicing allows you to assign different attributes to different elements of an image. For example, you can slice up a large illustration and export one slice as a high-quality JPEG to preserve a gradient while exporting another slice as a low-quality JPEG to speed up download time.

If you do not do any slicing, you can still convert an Illustrator element into an HTML page. But the page will have just one graphic file that includes all of the objects on the page.

Follow these steps to create slices from an illustration:

1. Select an object or objects on the artboard .

2. Choose Object Slice Make. The document will appear sliced into rectangular, as shown in Figure 23-8.

   
   Figure 23-8: Each mug shot has been defined as a separate slice.

   Note  

   If you want to generate a single slice out of all your selected objects, choose Object Slice Create from Selection.

Another technique for defining slices is to create a grid on your page using guides and then generate slices based on those guides. Follow these steps to generate slices from guides:

1. Choose View Show Rulers to display rulers.

2. Click and drag from either the horizontal or vertical ruler to place guides on the artboard.

3. After you place guides on the artboard, choose Object Slice Create from Guides to generate slices from the grid you defined with horizontal and/or vertical guides, as shown in Figure 23-9.

   
   Figure 23-9: Generating many slices from one object using guides

Export Illustrator Documents to HTML

Illustrator s Save for Web feature allows you to export distinct web graphics from each slice image, and Illustrator will generate HTML (web page layout) code that will place all of your exported images in a layout grid using HTML tables.

Follow these steps to save an Illustrator document as an HTML page:

1. Choose File Save for Web.

2. If you have sliced objects on your page, choose the Slice Select tool from the Save for Web dialog box toolbox (in the upper-left corner of the dialog box) and select one of the sliced objects.

3. Define specific image export attributes for the selected slice (if you created slices), as shown in Figure 23-10.

   
   Figure 23-10: Saving a slice of an illustration as a medium-quality, progressive JPEG file

4. Define additional specific export attributes for other slices.

5. After you ve defined your web export settings for each slice in the Save for Web dialog box, click Save.

6. In the Save Optimized as dialog box, choose HTML and Images in the Save as Type drop-down list.

7. Navigate to a file folder and enter a filename in the Save Optimized as dialog box.

8. If your document will be used as a (template) background image on a web page, choose Background Image from the Settings drop-down list in the Save Optimized as dialog box.

   Tip  

   If you know HTML, you can use the Other option in the Settings drop-down list to open the Output Settings dialog box and define how Illustrator will generate HTML.

9. Click Save to save your file. If you are replacing an earlier version of your HTML page (or if there is a different HTML page with the filename you selected), the Replace Files dialog box appears. You can deselect the check box(es) next to the file(s) that you don t want to replace. Then click Replace.

The web page you generate using the export options in Illustrator will have images embedded within it. Those images are saved in an Images folder that is generated during the export process. You can open your HTML file in any editor for further refinement.