• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Getting started

In this lesson, you'll create a GIF image, a JPEG image, an image map with three buttons, and a simple animation for a Web page. Before you begin, you'll need to restore the default preferences for Adobe Illustrator and then you'll open the finished art file for this lesson to see what you'll be creating.

To ensure that the tools and palettes function exactly as described in this lesson, delete or deactivate (by renaming) the Adobe Illustrator 9.0 preferences file. See "Restoring default preferences" .

Start Adobe Illustrator.

Choose File > Open, and open the L15comp.ai file in the L15Start folder, located in the Lesson 15 folder, inside the Lessons folder within the AICIB folder on your hard drive.

The artwork in this file is a design mock-up of a Web home page. The design for the completed page includes several styles of artwork, including flat-color, continuous-tone, and gradient-filled artwork.

Notice the various styles of artwork in the design:

  • Logo. The Swing Classes logo in the top left corner of the page is flat-color artwork with a transparency option applied to it, allowing the background to show through the cutout areas around the objects.

  • Buttons. The three shoe prints at the right side of the page are flat-color artwork made into buttons on an image map by linking each to a separate URL address.

  • Placed photograph. The photograph is a continuous-tone bitmap image imported from Adobe Photoshop.

  • Gradients. The background of the design is a tiled pattern, with each tile containing a number of shapes filled with a gradient.

The following table describes the file formats generally recommended for displaying specific types of artwork on the Web. Keep in mind, however, that the file format you choose for your artwork may also be determined by the quality and size of the image you want to place on the Web.

Graphic Export to
Flat color GIF or PNG-8
Full color (continuous-tone) JPEG, or PNG-24 if multilevel transparency is required
Gradient-filled JPEG, PNG-8, GIF, SVG
Grayscale (continuous-tone) JPEG
Animation layers SWF or SVG

If you like, choose View > Zoom Out to make the design mock-up smaller, adjust the window size, and leave it on your screen as you work. (Use the hand tool ( ) to move the artwork where you want it in the window.) If you don't want to leave the artwork open, choose File > Close.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint