Download slices - WordPress.com

Chapter 13
Preparing Graphics for the Web
Creating Slices
• When you create graphics for the web, you will
need to pay attention to different considerations
than you would when designing graphics for
print.
– Color
– Resolution
– File formats
Creating Slices
• File size is a fundamental consideration when
creating graphics for the web.
• Illustrator allows you to divide the artwork into
slices.
Creating Slices
Slice 3 was created with the Slice tool; slices 1,2, and 4 were generated
automatically
Artwork divided into slices
Creating Slices
• Web pages contain many different elements,
such as HTML text and bitmap images.
• If you use slices to divide different elements, you
can output them differently.
Creating Slices
• The Make Slice command creates a slice
whose dimensions match those of the bounding
box of the object.
• The Slice tool allows a rectangle to be drawn
anywhere on the artboard.
– If artwork is moved, slice doesn’t move
Creating Slices
• You can use standard ruler guides to define how
you want artwork to be divided into slices.
• By definition, guides extend across and beyond
the artboard.
Creating Slices
• Therefore, when you use guides to define areas
to be sliced, the length of the guide can get in the
way.
• The following figure shows three guides that
were positioned so as to isolate the graphic of
the dog.
Creating Slices
Guides isolate the dog graphic into its own area
Horizontal guide
Two vertical guides
Creating Slices
• When you apply the Create from Guides
command, Illustrator generates slices for each
area defined by the guide.
• You can select each slice with the Slice Selection
tool, which means slices can be easily combined.
Creating Slices
The Create from Guides command generates only slices– not automatic slices
Creating Slices
• Of the three main ways that Illustrator offers for
making slices, using guides and then combining
excess slices is the simplest, most
straightforward, and hassle-free method.
Specifying Slice Type and Slice
Options
• Slice type and options assigned to them
determine how artwork contained in a slice
will function on a web page.
• Three slice types you can specify in the Slice
Options dialog box:
– Image (if content will be linked)
– No Image
– HTML Text
Specifying Slice Type and Slice
Options
• If you specify a slice as an Image slice, set
options in the Slice Options dialog box for:
– Name – slice name is used as file name
– URL – makes slice a hotspot on the web
–
–
–
–
–
Target – specifies frame you want to link to target
Message –will appear in status bar of browser
Alt – for sight impaired Web surfer
Background – specify a color for background
Text – enter text in Displayed in Cell text box
Specifying Slice Type and Slice
Options
Slice Type
list arrow
Message
text box
Alt text box
Slice Options dialog box for slice 03
Using the Save for Web Dialog Box
• Optimization is a process which reduces file
size through standard color compression
algorithms.
• In the Save for Web dialog box, select options
for previewing images.
Using the Save for Web Dialog Box
• GIF is a standard file format for compressing
images with flat color, which makes it an
excellent choice for many types of artwork
generated in Illustrator.
• GIF compression works by lowering the number
of colors in the file.
• The trick with GIFs is to lower the number of
available colors as much as possible without
adversely affecting the appearance of the image.
Using the Save for Web Dialog Box
A GIF file with too few colors available to render the image adequately
Using the Save for Web Dialog Box
• JPEG is a standard file format for compressing
continuous-tone images, gradients, and blends.
JPEG compression relies on “lossy” algorithms—
“lossy” refers to a loss of data.
• In the JPEG format, data is selectively discarded.
• You choose the level of compression in the
JPEG format by specifying the JPEG’s quality
setting.
Using the Save for Web Dialog Box
• When JPEG compression is too severe for an
image, the problems with the image are obvious
and unappealing.
Using the Save for Web Dialog Box
Problems with JPEGs are obvious and unappealing
Creating an Image Map
• Because of inconsistency of document color
appearance, Illustrator offers a Web Safe RGB
mode in the Color panel and a web swatch
library.
Creating an Image Map
Current fill
color button
Out of Web
Color Warning
button
In Web
Color button
Color panel in Web Safe RGB mode
Creating an Image Map
• Image maps allow you to define an area of an
illustration as a link.
• In a web browser, when a user clicks the area of
the image defined as a link, the web browser
loads the linked file.
Creating an Image Map
Image maps enable you to define odd-shaped areas of an image as links to a URL
Creating an Image Map
• The Attributes panel contains the Image list
arrow, which allows you to choose a shape for
your image map.
• The linked area that the user clicks is called a
hotspot.
Exporting Illustrator Graphics for the
Web
• SWF is an acronym for Shockwave Flash.
• SWFs can be exported and placed in Adobe
Flash or opened directly by a web browser.
– Internet Explorer
– Firefox
Exporting Illustrator Graphics for the
Web
SWF Options dialog box
Exporting Illustrator Graphics for the
Web
• You can use Illustrator graphics as animations for
the web or in Flash.
• Use the Blend tool to create a blend and then
export it as an animation.
Exporting Illustrator Graphics for the
Web
6-step blend
Exporting Illustrator Graphics for the
Web
• Illustrator allows you to export a blend as an
animation.
• To export any Illustrator artwork—blend or no
blend—as an animation, you must choose AI
Layers to SWF Frames in the Export As
menu.
Exporting Illustrator Graphics for the
Web
AI Layers to SWF Frames option in SWF Options dialog box
Creates an animated SWF file
Exporting Illustrator Graphics for the
Web
• Illustrations that you create in Illustrator without
blends can also be exported as animations.
• To do so, you must first put the components of
the artwork on separate layers.
Exporting Illustrator Graphics for the
Web
• The following figure shows a type of Illustrator
artwork that can be exported successfully as an
animation.
• You could start with the larger square animating
down to the smaller square, creating the illusion
that the squares are collapsing into themselves.
Exporting Illustrator Graphics for the
Web
Non-blend artwork