Transcript chap06

The Web Warrior Guide to
Web Design Technologies
Chapter 6
Photoshop and ImageReady: Part II
Objectives
In this chapter, you will:
• Animate images
• Create rollover effects
• Create image maps
• Slice images
Animating Images
• You can create animation for the Web
either by creating a Flash movie or by
animating GIF images
• In this section, you will learn how to create
animated GIF images
Optimizing and Saving Animations
• ImageReady includes an Optimize palette that has
the same features as the Save for Web dialog box
in Photoshop
• In Photoshop, you must wait until you are ready
to save before making your optimization settings
• In ImageReady, you can select these settings at
any time
• ImageReady allows you to save images using the
Save As command or using the Save Optimized
As command
Optimizing and Saving Animations
• The Save As command is only used when
saving Photoshop format (PSD) files when
you are in the middle of a project
• The Save Optimized As command is used
when you are finished with an image and
need to save it as GIF or JPG
Using the Animation Palette
•
ImageReady includes an Animation palette that is not available in
Photoshop
•
As seen in Figure 6-1, the Animation palette displays individual
frames of animation and contains buttons at the bottom that you
can use to create and play back animated images
Creating Animations from a Single
Layer
• The basic element of an animated image is the
frame
• The frames of an animated image all have the
same height and width and are displayed one
after the other in the same position, just like the
frames of film
• The easiest way to create an animated image is
by animating a single layer
A Single-Layer Animation
Tweening
•
Tweening is a technique in which you decide how the first and last
frames of an animation should look, and then allow the software
(in this case ImageReady) to create (or tween) all the frames in
between
•
The Tweens animation frames button is in the Animation palette,
as shown in Figure 6-4
Creating Animations from Multiple
Layers
• You can animate the position and opacity of
single layers, but to animate other attributes,
such as painting, rotation, and text, you need to
create multiple layers
• Imagine a slide projector displaying the image of
a green ball against a screen
• Each frame can show the contents of one or more
layers, and much of the work in creating
animations in ImageReady is deciding which
layers to make visible in each frame
Animation Frame with Only Some
Layers Visible
Creating Animation from Files
• In addition to
using layers to
create
animations,
you can
import
multiple files,
each of which
will become a
separate
frame of the
animation
Setting the Frame Delay
• You have probably noticed that the animations
you have seen so far have played back very
quickly
• You can easily adjust the frame delay of each
frame to make the animation play more slowly
• Unlike film or video, where every frame has the
same duration on screen, the frames in a GIF
animation can each play for a different amount of
time
Setting the Frame Delay
• The default frame delay for animations is zero seconds,
which is another way of saying the animation should play
back as quickly as the user’s computer is able
Setting the Loop Count
• In addition to controlling the delay of each frame,
you can also control how many times the
animation loops, or plays
• When an animation is set to play a finite number
of times, it always ends on the last frame
• When creating animations that will only loop a
finite number of times, make sure that the last
frame can act as a stand-alone image
The Selects Looping Options Menu
and the Set Loop Count Dialog Box
Creating Rollover Effects
• Each image used in a rollover effect is called
a state
• The image that first appears in the Web page
is called the Normal state
• Rollover effects require JavaScript
programming to trigger the switching of
images
Creating Rollover Effects
• When you create rollovers in ImageReady,
ImageReady creates all the necessary JavaScript
coding for you
• ImageReady includes a Rollovers palette where
you do most of the work in creating rollover
effects
• To make the Rollovers palette visible, click
Windows on the menu bar and then click
Rollovers
Creating Rollovers from Layers
• Although the individual parts of an animation are
called “frames,” each image in a rollover effect is
called a state
• Each state is named for the mouse event that
triggers it, as shown in the following list:
– Normal
— Over
– Down
— Up
– Out
— Click
Creating Rollovers from Layers
• The most common states are Normal, Over, and Out
Creating Rollovers Using Styles
• Another way to create rollover effects is by using styles
• In ImageReady, styles are pre-designed effects that allow
you to quickly generate sophisticated-looking images
• Preset styles are available from the Styles palette
Using Animation in Rollover Effects
• You can combine animation with rollover effects
so that moving the mouse triggers an animation
to appear
• This can be tricky, because you have to keep an
eye on the Animation palette, the Rollovers
palette, and the Layers palette at the same time
Using Animation in Rollover Effects
• First, you set up all the layers you will need
• Next, you create the necessary rollover states
• Then you select each state and, in the Layers
palette, specify which layers should be visible
during that state
• Next, you select the rollover state you wish to
animate
• Finally, you use the Animation palette to create
the frames of animation for that state
A Rollover Effect that Includes
Animation
Creating Image Maps
• Image maps are another type of Web graphic
• They are usually larger than other images and
are often used as splash screens, large
images used on a Web site’s home page
• Any Web graphic can be used as an image
map
Creating Image Maps
• Typically, a user can click areas of an image
map to link to other pages
• The linked areas, called hot spots, are defined
in the HTML file that displays the image
• To define the hot spots in an image, you use
the Image Map palette
Creating Image Maps with the Image
Map Tools
• The Toolbox in ImageReady contains four Image
Map tools that you can use to create and select
hot spots
• Hot spots can be rectangular, circular, or almost
any polygonal shape
• The Rectangle Image Map tool can create hot
spots in either square or rectangular shapes
• The Circle Image Map tool can create circular, but
not elliptical, hot spots
A Hot Spot in an Image Map
Controlling Linking Destinations
• Each hot spot is a separate link, so you need to
define each one with its own Name, URL, Target,
and Alt settings
• The Name setting is used only for complex
images that combine image maps and rollover
effects; you can ignore this setting for most
image map projects
• The URL is the address of the destination Web
page (the page you want the hot spot to link to)
Link Settings for an Image Map Hot
Spot
Creating Image Maps from Selection
Areas
• You can also
create hot spots
that are based on
selection areas
• You use the
Marquee, Magic
Wand, or Lasso
tools to create the
selection areas
and then convert
them to image
map hot spots
Creating Image Maps from Layers
• You can also
create hot spots
from the contents
of layers
• This is convenient
when your
original image
consists of
multiple elements,
with each element
in a separate layer
Slicing Images
• Sliced images are multiple graphics that are
positioned in a Web page to look like a single larger
image
• Slicing an image into smaller parts, called slices,
makes the image download faster
• It also makes it possible to incorporate multiple
features into one image
• Sliced images are usually used as splash screens on
a Web site’s home page, but you can use them
anyplace where it would make sense to break a
graphic into smaller pieces
Creating Slices
•
Creating sliced
images can be
tricky, because
you quickly
end up with
several images
•
The easiest
way to get
started is by
using the Slice
tool and the
Slice palette,
shown in
Figure 6-20
Creating Slices
•
Using the Slice
tool results in
user slices, which
are slices you
create and can
resize
•
Because slices
must always fill a
rectangular area,
ImageReady then
generates auto
slices to fill in the
rest of the image
Creating Slices from Selection Areas
• As with image
maps, you can
create slices
from selection
areas
• Once you have
some initial
slices, you can
use additional
menu options
to divide and
align slices
Creating Slices from Layers
• It can be tricky to slice an image precisely
• It is sometimes easier to create slices from
layers than it is to use the Slice tool
• Creating slices from layers results in layerbased slices, which are like user slices,
except that changing the contents of a layer
automatically changes the related layer-based
slice as well
A Layer-Based Slice
Controlling the Display of Slices in
HTML
• An advantage of slicing images is that you
are sometimes able to replace slices with
empty space; this means the user will have to
download fewer images
• The empty space is in fact a table cell defined
in HTML, and you can include color and text
as you would in any other table
Using HTML in Slices
Using Animation in a Sliced Image
• In addition to the ability to optimize parts of an
image separately, another advantage to sliced
images is the ability to include animation in only
a small part of a larger image
• If you create animations from entire large images,
the files can become prohibitively large
• By combining animation and image slices, you
can reduce your image’s download time
Using Animation in a Sliced Image
Using Rollover Effects in a Sliced
Image
• Including rollover effects in a sliced image is
similar to adding animation
• You select a slice and then add states in the
Rollovers palette
• Unlike in animation, however, the rollover effects
in one image slice can be used to cause another
slice to change
• You can use this technique to make very
sophisticated images, especially if one or more of
the slices includes animation as well
Using Rollovers in a Sliced Image
Summary
• You can create animations by animating a single
layer, changing the visibility of multiple layers, or
by importing a folder of image files
• Tweening lets ImageReady insert new frames
between two animation frames and calculate
changes in position, opacity, or styles
• The amount of time a frame is displayed is called
the frame delay
Summary
• Rollover effects are created by changing the
visibility in layers and can include styles and
animation
• Image maps are normal Web images that can
include multiple links
• Sliced images are multiple images that, when
positioned in an HTML table, appear to be one
image
• Image slices can include rollover effects and
animation