How to Use Adobe Illustrator to Create Website Graphics

See Adobe Illustrator: Tips and Tricks for similar articles.

Generating web graphics from Illustrator used to be a tedious process that involved creating web slices (pieces) of the art, then saving those slices in a web-optimized format. Adobe has made that process much simpler. A typical workflow when building a website is for a designer to create the look and feel of the site and then hand off the various graphic elements and type specifications to a programmer for assembly in an application such as Dreamweaver, where the HTML code defines the elements that make up the web page, and an associated CSS (Cascading Style Sheet) file defines the appearance of those elements. With Creative Cloud, Illustrator introduced a CSS Properties Panel that streamlines the process for both the designer and programmer.

This technique applies to Illustrator CC versions

  1. We'll start with the graphics. When graphics are exported for web, vector art is rasterized, and converted to a bitmap made up of pixels that will display properly on the screen. Where color transitions occur, such as a black shape against a white background, areas where the black slices through pixels are anti-aliased. This means that those edge pixels wills display as a shade of gray, and it can make the art look fuzzy. While this is unavoidable on curved or diagonal edges, there's no reason for this on vertical and horizontal edges. To see what the art will look like on screen, zoom in, then go to View > Pixel Preview. Note the gray vertical edges in the letter shapes below: Pixel Preview
  2. Use the Selection Tool and the Select All command (Ctrl+A) to select everything on the artboard, then go to the Control Panel and click the Align Selected Art to Pixel Grid button. Pixel Preview
  3. Now to export the assets. You can see in the screen-shot below that the layers in this file have been organized much like a web page is structured Layers Panel
  4. Select a graphic element on the artboard. (In this case, the Header graphic is selected.) Go to Window > CSS Properties and examine the message in the lower portion of the panel. CSS Properties
  5. In the Layers Panel, double-click the selected object's name and change it to an appropriate web name, such as "header-bkg", Make sure to press enter to commit the name change. Layers Panel
  6. Continue renaming all of the graphic elements in the Layers Panel. Layers Panel
  7. Deselect everything in the file. Click the CSS Properties Panel menu and select Export All.CSS Properties Panel
  8. Navigate to your correct folder and click Save, then review the options in the next dialog box and click OK. CSS Export Options
  9. Go to your desktop and take a look at the folder. You should see PNG image files have been generated for all the elements you renamed, as well as a CSS file. File Directory

Related Articles

  1. Creating an SVG logo
  2. How to Use the Gradient Tool in Adobe Illustrator
  3. How to Use the Gradient Mesh Tool in Adobe Illustrator
  4. How to Use a Photoshop File in Adobe Illustrator
  5. How to Use Live Paint to Color and Paint Artwork in Adobe Illustrator
  6. How to Put Type in Perspective in Adobe Illustrator
  7. How to Create Variable-width Stroke Profiles in Adobe Illustrator
  8. How to Create a Line Graph in Adobe Illustrator
  9. How to Create a Pattern Brush in Adobe Illustrator
  10. How to Use Isolation Mode in Adobe Illustrator
  11. How to Add Spot Color in Adobe Illustrator
  12. How to Use Draw Inside Mode in Adobe Illustrator
  13. How to Find and Replace in Adobe Illustrator
  14. How to Divide Basic Shapes into Component Pieces in Adobe Illustrator
  15. How to Work with Bezier Curves in Adobe Illustrator
  16. How to Create a Brochure in Adobe Illustrator
  17. How to Use the Shape Builder Tool in Adobe Illustrator
  18. How to Use the Group Selection Tool in Adobe Illustrator
  19. How to Check Spelling in Adobe Illustrator
  20. How to Use Image Trace in Adobe Illustrator
  21. How to Use Global Color Swatches in Adobe Illustrator
  22. How to Manage Artwork with Sublayers in Adobe Illustrator
  23. How to Import Illustrator Files Into Adobe Animate
  24. How to Create Shapes from Multiple Paths in Adobe Illustrator
  25. How to Adjust the Default Artboard in Adobe Illustrator
  26. How to Create a New Document in Adobe Illustrator
  27. How to Use a Color Group to Change Multiple Swatches in Adobe Illustrator
  28. How to Create a Package File from a Template in Adobe Illustrator
  29. How to Work with Hidden Characters in Adobe Illustrator
  30. How to Work with Template Layers in Adobe Illustrator
  31. How to Create Symbols for Mapping Artwork to 3D Objects in Adobe Illustrator
  32. How to Work with Threaded Text in Adobe Illustrator
  33. How to Convert Type to Outlines in Adobe Illustrator
  34. How to Use Draw Behind Mode in Adobe Illustrator
  35. How to Use Adobe Illustrator to Create Website Graphics (this article)
  36. How to Create a Custom Pattern in Adobe Illustrator
  37. How to Use Warp Design Elements in Adobe Illustrator
  38. How to Create Custom Graphics from Letter Shapes in Adobe Illustrator