Adobe 29400084 User Guide - Page 31

Tips for creating Illustrator images for mobile devices, SVG file. To reduce points

Page 31 highlights

DEVICE CENTRAL 28 User Guide • Try to reduce the number of colors in images as much as possible and consider using grayscale. The majority of devices currently on the market still support only 16-bit color (thousands), not 24- or 32-bit (millions). Thus, special color effects may not display properly. For example, gradients often appear as banded stripes of solid color instead of a smooth graduated transition. • For photos, try applying the Sharpen filter one or more times to increase the contrast between colors. • Make images small enough to fit the addressable screen size of your target mobile device. (Device Central lists the addressable screen size of each device in its library.) Scrolling is often impossible on mobile devices, so if an image does not fit the screen, portions of the image may simply be inaccessible to viewers. For more tips and techniques for creating content for mobile phones and devices, see www.adobe.com/go/learn_cs_mobilewiki_en. 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 monitors. • 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.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

DEVICE CENTRAL
User Guide
28
Try to reduce the number of colors in images as much as possible and consider using grayscale. The majority of
devices currently on the market still support only 16-bit color (thousands), not 24- or 32-bit (millions). Thus,
special color effects may not display properly. For example, gradients often appear as banded stripes of solid color
instead of a smooth graduated transition.
For photos, try applying the Sharpen filter one or more times to increase the contrast between colors.
Make images small enough to fit the addressable screen size of your target mobile device. (Device Central lists the
addressable screen size of each device in its library.) Scrolling is often impossible on mobile devices, so if an image
does not fit the screen, portions of the image may simply be inaccessible to viewers.
For more tips and techniques for creating content for mobile phones and devices, see
www.adobe.com/go/learn_cs_mobilewiki_en
.
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 monitors.
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
.