Illustrator provides a variety of tools for creating layout for web pages, or creating and optimizing web graphics. For example, use web-safe colors, balance image quality with file size, and choose the best file format for your graphic. Web graphics can take advantage of slices and image maps, and you can use a variety of optimization options and work with Device Central to ensure your files display well on the web.

About web graphics

When designing graphics for the web, you must consider different issues than when designing graphics for print. 

To help you make informed decisions about web graphics, keep in mind the following three guidelines:

Use web‑safe colors.

Color is often a key aspect of artwork. However, the colors you see on your artboard aren’t necessarily the colors that will appear in a web browser on someone else’s system. You can prevent dithering (the method of simulating unavailable colors) and other color problems by taking two precautionary steps when creating web graphics. First, always work in RGB color mode. Second, use a web-safe color.

Balance image quality with file size.

Creating small graphics file sizes is essential to distributing images on the web. With smaller file sizes, web servers can store and transmit images more efficiently, and viewers can download images more quickly. You can view the size and the estimated download time for a web graphic in the Save For Web & Devices dialog box.

Choose the best file format for your graphic.

Different types of graphics need to be saved in different file formats to display their best and create a file size suitable for the web. For more information on specific formats, see Web graphics optimization options.

Note:

There are many Illustrator templates made specifically for the web, including web pages and banners. Choose File > New From Template to choose a template.

About pixel preview mode

To enable web designers to create pixel accurate designs, the pixel-aligned property has been added in Illustrator CS5. When the pixel-aligned property is enabled for an object, all the horizontal and vertical segments in the object get aligned to the pixel grid, which provides a crisp appearance to strokes. On any transformation, as long as this property is set for the object, it gets realigned to the pixel grid according to its new coordinates. You can enable this property by selecting the Align to Pixel Grid option from the Transform panel. Illustrator CS5 also provides the Align New Objects to Pixel Grid option at the document level, which is enabled by default for Web documents. With this property enabled, any new objects that you draw have the pixel-aligned property set by default.

For more information, see Drawing pixel-aligned paths for web workflows.

When you save artwork in a bitmap format, such as JPEG, GIF, or PNG, Illustrator rasterizes the artwork at 72 pixels per inch. You can preview how objects will appear when rasterized by choosing View > Pixel Preview. This is especially helpful when you want to control the precise placement, size, and anti-aliasing of objects in a rasterized graphic.

To understand how Illustrator divides objects into pixels, open a file that contains vector objects, choose View > Pixel Preview, and magnify the artwork so that you can see its individual pixels. The placement of pixels is determined by the pixel grid that divides the artboard into 1‑point (1/72 inch) increments. You can view the pixel grid if you zoom in to 600% view. If you move, add, or transform an object, the object snaps to the pixel grid. As a result, any anti-aliasing along the “snapped” edges of the object (usually the left and top edges) disappears. Now deselect the View > Snap To Pixel command, and move the object. This time, you’ll be able to position the object between the grid lines. Notice how this affects the anti-aliasing of the object. As you can see, making very minor adjustments can affect how the object is rasterized.

Pixel Preview off (top) compared to on (bottom)
Pixel Preview off (top) compared to on (bottom)

Note:

The pixel grid is sensitive to the ruler origin (0,0). Moving the origin of the ruler will change how Illustrator rasterizes artwork.

Using Adobe Device Central with Illustrator

Device Central enables Illustrator users to preview how Illustrator files will look on a variety of mobile devices.

For example, a graphic artist may use Illustrator to design a wallpaper for mobile phones. After creating the file, the artist can easily test the file on a wide variety of phones. The artist can then make adjustments, such as altering the file so that it looks good on a number of phones, or creating two separate files that cover a range of popular phone screen sizes.

Access Illustrator from Adobe Device Central

  1. Start Device Central.
  2. Select File > New Document In > Illustrator.

    In Device Central, the New Document panel appears with the correct options to create a new mobile document in the selected application.

  3. Make any necessary changes, such as selecting a Player Version, Display Size, Flash Version, or Content type.
  4. Do one of the following:
    • Select the Custom Size for All Selected Devices option and add a width and height (in pixels).

    • Select a device or multiple devices from the Device Sets list or Available Devices list.

  5. If you selected multiple devices, Device Central selects a size for you. If you want to select a different size, click on a different device or set of devices.
  6. Click Create.

    The selected application opens with a new mobile document ready to edit.

Create mobile content with Adobe Device Central and Illustrator

  1. In Illustrator, select File > New.
  2. In New Document Profile, select Mobile and Devices.
  3. Click Device Central to close the dialog box in Illustrator and open Device Central.
  4. Select a content type.

    The available Devices list on the left is updated and shows the devices that support the content type selected.

  5. In Device Central, select a device, several devices, or a device set.

    Based on the device(s) selected and content type, Device Central suggests one or multiple artboard sizes to be created. To create one document at a time, select a suggested document size (or select the Custom Size for all selected Devices option and enter custom values for Width and Height).

  6. Click Create.

    A blank AI file of the specified size opens in Illustrator. The new file has the following parameters set by default:

    • Color Mode: RGB

    • Raster Resolution: 72 ppi

  7. Fill the blank AI file with content in Illustrator.
  8. When you finish, select File > Save For Web& Devices.
  9. In the Save for Web & Devices dialog box, select the desired format and change other export settings as desired.
  10. Click Device Central.

    A temporary file with the export settings specified is displayed in the Device Central Emulator tab. To continue testing, double-click the name of a different device in the Device Sets orAvailable Devices lists.

  11. If, after previewing the file in Device Central, you need to make changes to the file, go back to Illustrator.
  12. In the Illustrator Save for Web & Devices dialog box, make adjustments such as selecting a different format or quality for export.
  13. To test the file again with the new export settings, click Device Central.
  14. When you are satisfied with the results, click Save in the Illustrator Save for Web & Devices dialog box.

    Note:

    To simply open Device Central from Illustrator (instead of creating and testing a file), select File > Device Central.

    For a tutorial about creating content with Illustrator and Device Central, see http://www.adobe.com/go/vid0207.

Tips for creating Illustrator images for mobile devices

To optimize graphical content for mobile devices, save artwork created in Illustrator in any SVG format, including SVG‑t, which is especially designed for mobile devices.

Use the following tips to ensure that images created in Illustrator display well on mobile devices:

  • Use the SVG standard to create content. Using SVG to publish vector graphics on mobile devices results in a small file size, display independence, superior color control, zooming ability, and editable text (within the source code). Also, because SVG is XML-based, you can incorporate interactivity into images, such as highlighting, tool tips, special effects, audio, and animation.

  • Work within the final dimensions of your target mobile device(s) from the beginning. Although SVG is scalable, working within the correct size will ensure that final graphics are optimized in quality and size for the target device(s).

  • Set Illustrator color mode to RGB. SVG is viewed on RGB raster display devices, such as a monitor.

  • To reduce file size, try reducing the number of objects (including groups) or making it less complex (fewer points). Using fewer points significantly reduces the amount of textual information needed to describe the artwork in the SVG file. To reduce points, select Object > Path > Simplify and try different combinations to find a balance between quality and number of points.

  • Use symbols when possible. Symbols define the vectors that describe an object once, instead of multiple times. This is useful if artwork contains objects like button backgrounds that are reused.

  • When animating graphics, limit the number of objects used and try to reuse objects whenever possible to reduce file size. Apply animations to groups of objects instead of to individual objects to avoid code repetition.

  • Consider using SVGZ, the compressed gzipped version of SVG. Compression can reduce file size dramatically, depending on the content. Text can usually be heavily compressed, but binary-encoded content, such as embedded rasters (JPEG, PNG, or GIF files), cannot be compressed significantly. SVGZ files can be uncompressed by any application that expands files compressed with gzip. To use SGVZ successfully, check that your target mobile device can decompress gzip files.

For more tips and techniques for creating content for mobile phones and devices, see www.adobe.com/go/learn_cs_mobilewiki_en.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy