Best practices for creating web graphics

  1. Illustrator User Guide
  2. Get to know Illustrator
    1. Introduction to Illustrator
      1. What's new in Illustrator
      2. Common questions
      3. Illustrator system requirements
      4. Illustrator for Apple silicon
    2. Workspace
      1. Workspace basics
      2. Create documents
      3. Tools Default keyboard shortcuts | Illustrator
      4. Tool galleries
      5. Customize keyboard shortcuts
      6. Artboards
      7. Customize the workspace
      8. Properties panel
      9. Set preferences
      10. Touch Workspace
      11. Microsoft Surface Dial support in Illustrator
      12. Recovery, undo, and automation
      13. Rotate view
      14. Rulers, grids, and guides
      15. Accessibility in Illustrator
      16. Safe Mode
      17. View artwork
      18. Use the Touch Bar with Illustrator
      19. Files and templates
      20. Synchronize settings using Adobe Creative Cloud
    3. Tools in Illustrator
      1. Selection
        1. Overview
        2. Selection
        3. Direct Selection
        4. Group Selection
        5. Lasso
        6. Magic Wand
      2. Navigation
        1. Overview
        2. Zoom
        3. Rotate View
      3. Paint
        1. Overview
        2. Gradient
        3. Shape Builder
      4. Type
        1. Overview
        2. Type
        3. Type on path
  3. Illustrator on the iPad
    1. Introduction to Illustrator on the iPad
      1. Illustrator on the iPad overview
      2. Illustrator on the iPad FAQs
      3. System requirements | Illustrator on the iPad
      4. What you can or cannot do on Illustrator on the iPad
    2. Workspace
      1. Illustrator on the iPad workspace
      2. Touch shortcuts and gestures
      3. Keyboard shortcuts for Illustrator on the iPad
      4. Manage your app settings
    3. Documents
      1. Work with documents in Illustrator on the iPad
      2. Import Photoshop and Fresco documents
    4. Select and arrange objects
      1. Create repeat objects
      2. Blend objects
    5. Drawing
      1. Draw and edit paths
      2. Draw and edit shapes
    6. Type
      1. Work with type and fonts
      2. Create text designs along a path
      3. Add your own fonts
    7. Work with images
      1. Vectorize raster images
    8. Color
      1. Apply colors and gradients
  4. Cloud documents
    1. Basics
      1. Work with Illustrator cloud documents
      2. Share and collaborate on Illustrator cloud documents
      3. Upgrade cloud storage for Adobe Illustrator
      4. Illustrator cloud documents | Common questions
    2. Troubleshooting
      1. Troubleshoot create or save issues for Illustrator cloud documents
      2. Troubleshoot Illustrator cloud documents issues
  5. Add and edit content
    1. Drawing
      1. Drawing basics
      2. Edit paths
      3. Draw pixel-perfect art
      4. Draw with the Pen, Curvature, or Pencil tool
      5. Draw simple lines and shapes
      6. Image Trace
      7. Simplify a path
      8. Define perspective grids
      9. Symbolism tools and symbol sets
      10. Adjust path segments
      11. Design a flower in 5 easy steps
      12. Perspective drawing
      13. Symbols
      14. Draw pixel-aligned paths for web workflows
    2. 3D effects and Adobe Substance materials
      1. About 3D effects in Illustrator
      2. Create 3D graphics
      3. Create 3D objects
      4. Create 3D Text
    3. Color
      1. About color
      2. Select colors
      3. Use and create swatches
      4. Adjust colors
      5. Use the Adobe Color Themes panel
      6. Color groups (harmonies)
      7. Color Themes panel
      8. Recolor your artwork
    4. Painting
      1. About painting
      2. Paint with fills and strokes
      3. Live Paint groups
      4. Gradients
      5. Brushes
      6. Transparency and blending modes
      7. Apply stroke on an object
      8. Create and edit patterns
      9. Meshes
      10. Patterns
    5. Select and arrange objects
      1. Select objects
      2. Layers
      3. Group and expand objects
      4. Move, align, and distribute objects
      5. Stack objects    
      6. Lock, hide, and delete objects
      7. Duplicate objects
      8. Rotate and reflect objects
    6. Reshape objects
      1. Crop images
      2. Transform objects
      3. Combine objects
      4. Cut, divide, and trim objects
      5. Puppet Warp
      6. Scale, shear, and distort objects
      7. Blend objects
      8. Reshape using envelopes
      9. Reshape objects with effects
      10. Build new shapes with Shaper and Shape Builder tools
      11. Work with Live Corners
      12. Enhanced reshape workflows with touch support
      13. Edit clipping masks
      14. Live shapes
      15. Create shapes using the Shape Builder tool
      16. Global editing
    7. Type
      1. Create text
      2. Fonts and typography
      3. Format type
      4. Import and export text
      5. Format paragraphs
      6. Special characters
      7. Create type on a path
      8. Character and paragraph styles
      9. Tabs
      10. Text and type
      11. Find missing fonts (Typekit workflow)
      12. Update text from Illustrator 10
      13. Arabic and Hebrew type
      14. Fonts | FAQ and troubleshooting tips
      15. Create 3D text effect
      16. Creative typography designs
      17. Scale and rotate type
      18. Line and character spacing
      19. Hyphenation and line breaks
      20. Text enhancements
      21. Spelling and language dictionaries
      22. Format Asian characters
      23. Composers for Asian scripts
      24. Create text designs with blend objects
      25. Create a text poster using Image Trace
    8. Create special effects
      1. Work with effects
      2. Graphic styles
      3. Create a drop shadow
      4. Appearance attributes
      5. Create sketches and mosaics
      6. Drop shadows, glows, and feathering
      7. Summary of effects
    9. Web graphics
      1. Best practices for creating web graphics
      2. Graphs
      3. SVG
      4. Create animations
      5. Slices and image maps
  6. Import, export, and save
    1. Import
      1. Import artwork files
      2. Import bitmap images
      3. Import artwork from Photoshop
      4. Place multiple files | Illustrator CC
      5. Unembed images
      6. Import Adobe PDF files
      7. Import EPS, DCS, and AutoCAD files
      8. Links information
    2. Creative Cloud Libraries in Illustrator 
      1. Creative Cloud Libraries in Illustrator
    3. Save
      1. Save artwork
    4. Export
      1. Use Illustrator artwork in Photoshop
      2. Export artwork
      3. Collect assets and export in batches
      4. Package files
      5. Create Adobe PDF files
      6. Extract CSS | Illustrator CC
      7. Adobe PDF options
      8. File information and metadata
  7. Printing
    1. Prepare for printing
      1. Set up documents for printing
      2. Change the page size and orientation
      3. Specify crop marks for trimming or aligning
      4. Get started with large canvas
    2. Printing
      1. Overprint
      2. Print with color management
      3. PostScript printing
      4. Print presets
      5. Printer's marks and bleeds
      6. Print and save transparent artwork
      7. Trapping
      8. Print color separations
      9. Print gradients, meshes, and color blends
      10. White Overprint
  8. Automate tasks
    1. Data merge using the Variables panel
    2. Automation with scripts
    3. Automation with actions
  9. Troubleshooting 
    1. Crash on launch issues
    2. Recover files after crash
    3. File issues
    4. GPU device driver issues
    5. Wacom device issues
    6. DLL file issues
    7. Memory issues
    8. Preferences file issues
    9. Font issues
    10. Printer issues
    11. Share crash report with Adobe

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 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.

Piezīme.

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. 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 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)

Piezīme.

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

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.

Adobe logotips

Pierakstieties savā kontā