c h a p t e r
8
I M A G E R E A D Y:
SPRINGBOARD TO
THE WEB
T
he best new feature of Photoshop 5.5 was not a feature at all. It was the inclusion
of an entire program—ImageReady. Once sold as a standalone program strictly for
the web, ImageReady has been upgraded, improved, and is sold only with Photoshop
now. The program picks up where Photoshop leaves off—it handles the exciting aspects
of web development that can really kick your site into high gear.
ImageReady gives you the ability to quickly and easily create animation, Java
rollovers, and sliced graphics. But before we get too deep into these individual aspects,
let me provide a quick overview of the ImageReady basics.
IMAGEREADY AND PHOTOSHOP:
HOW THEY DIFFER, HOW THEY
WORK TOGETHER
One of the nicest things about most of the Adobe products (I haven’t seen them all, so
I’ll protect myself with use of the word) is that they all utilize a standard interface and
production layout. This allows you, the designer, to find your way quickly around a
variety of programs, so that even if you don’t know the details, you’re already at home
with the generalities. Even Illustrator 9, which works with vector images as opposed to
Photoshop’s bitmap pictures, looks remarkably similar to Photoshop, even though their
methods of creating and manipulating graphics are technically quite different.
213
go to contents
214
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
The same holds true for Photoshop and ImageReady. In fact, the interface between
the two programs looks so much alike that I sometimes find myself having to look at
the icon at the top of the Tool palette just to see which program I’m currently in. Unlike
Illustrator, however, which is purely a stand-alone program, ImageReady has been engineered to be more of an extension of Photoshop. Many of the tools are the same, as are
the ways in which you may go about applying color corrections, working with layers,
and so forth.
But for there to be a need for each program to exist independently from each other,
they each have to do things that the other doesn’t. In general, you’ll be working most
efficiently if you do the majority of your creating, manipulating, selecting, correcting,
and retouching in Photoshop, and leave minor touch-up work to ImageReady.
ImageReady’s main function will be the special web effects that Photoshop can’t come
close to accomplishing: creating slices, animations, and rollovers for your web site.
Before we get into the details of how those effects are created, though, let’s look at
some of the ways that Photoshop and ImageReady can work together, and a few of the
more general differences between the two programs.
Quantum Leap: Jumping Between Programs
Adobe has made this very simple. Instead of the annoyance one might expect of having to save an image in one program and reopen it in another, Adobe has added a simple feature to the bottom of the Tool palette of each program. Shown in Figure 8–1,
the Jump To button gives you easy access to either program, with virtually no hassles.
To use the button, simply press it (or choose File -> Jump To -> ImageReady).
You can make the Jump To button access other programs besides
ImageReady and Photoshop. To make the Jump To button quickly
access another program, such as Illustrator:
1. Make an alias (Macintosh) or a Shortcut (Windows) of the
application that you want Jump To to access.
2. Put the alias or shortcut in the Jump To Graphics Editor folder,
located in the Helpers folder inside the main Photoshop 6 folder.
3. If you want to jump to this new application from Photoshop,
place curly brackets ({}) around the program name. If you want
to jump to the new application from ImageReady, use straight
brackets ([ ]).
When you jump to ImageReady from Photoshop (and back again), the image you are
working in will open in the other program. If you have made changes since your last
jump, you will be notified and asked if you want to update it before making the jump.
go to contents
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
Figure 8–1: The Jump To button appears at the bottom of the Tool palette in both programs.
You can avoid having to save an image manually or respond to a
warning dialog box by setting both programs to auto-update your
images every time you jump between programs. To auto-update in
Photoshop, simply choose File -> Preferences -> General to access
the dialog box. Check the box marked Auto-Update Open
Documents. To auto-update in ImageReady, choose Window ->
Show Optimize to open the Optimize palette. From the palette
menu, choose Auto-Regenerate. A checkmark will indicate that it is
turned on.
go to contents
215
216
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
Interface Differences
As you learned earlier, the Save for Web function in Photoshop 6 allows you to view
your image as you tweak the settings in one of four ways: the original image, the image
as optimized by the program, 2-Up (which shows you the original next to one image
that you can optimize), or 4-Up (which shows you the original plus three preview window you can optimize individually).
In ImageReady you don’t need to choose Save for Web for these options. The interface is built with these same tabs at the top of your canvas, so that you can see four versions of your image as you’re working. This is helpful, since, as we’ll see later in this
chapter, the optimization settings happen in a palette, applicable while you work, rather
than in a Save for Web dialog box.
If you’re working in the 2-Up or 4-Up tab, you will only be able to
apply manipulations, such as brush strokes or color adjustments, to
the original preview window. Most tools will become inactive in other
preview windows.
The Perils of Working in 2-Up or 4-Up
There is a negative aspect to doing all your work in the 2-Up or 4-Up tab. By default,
each time you make a change to your image, whether it is an airbrush stroke, a color
balance adjustment, a format switch in the Optimize palette, and so forth, you’ll have
to wait for the each preview window to regenerate its optimization. Even on an
extremely fast computer, this is likely to get pretty annoying.
You can turn off the auto-regeneration in the Optimize palette by selecting AutoRegenerate from the Optimize palette’s pull-down menu. Since it’s turned on by
default, selecting it now will turn it off. As Figure 8–2 shows, a small warning appears
at the bottom of the preview windows now to remind you that you are not viewing these
previews in their optimized state.
You can manually regenerate a preview window one of two ways:
◆
◆
Click the Warning icon of the window you wish to regenerate.
Choose Regenerate from the Optimize palette menu.
Beyond that, there really aren’t too many differences. A few different tools in the
Tool palette, some different options in the upper menu bar, but nothing so radical that
you won’t feel right at home in this program.
go to contents
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
217
Figure 8–2: The Warning icon indicates that the
Auto-Regenerate feature has been turned off.
Layers and Layer Options
Since version 3, layers have been one of the most important and useful aspects of
Photoshop. They are no less important in ImageReady. As we’ll see, the Layers palette in
ImageReady is where much of the work takes place for creating rollovers and animations.
The Layers palette is just as important in each though and, for the most part, looks
the same. The Layers palette in Photoshop 6, in fact, took some of the better features
that used to appear on earlier versions of ImageReady.
Regardless of the differences, it is important to remember that by
and large, what appears in the Layers palette in Photoshop will
appear in the Layers palette in ImageReady. All independent layers,
adjustment layers, and layer masks are preserved. And, although you
can view the results of an Adjustment Layer in ImageReady, you can
only create and edit them in Photoshop.
A few small changes are quickly apparent between the Photoshop and ImageReady
Layers palettes. The first is the addition of the Fast Forward and Rewind buttons at the
bottom left of the palette in ImageReady. As will be discussed later in this chapter, you
can use these buttons to move through frames of an animation. The second—and most
noticeable—change is how the palette and programs deal with Layer effects.
Layer Effects
Layer effects were introduced in Photoshop 5 (and explained in detail in Chapter 1) as
a way to create quickly the shadows, bevels, and glows that have become so predominant on the web. With the release of version 6, new Layer Attributes have been added—
including the Color Fill effect, which does little more than fill the layer elements with
your desired color.
The main difference between the programs is how the effects get applied. Instead of
using a bulky dialog box, all of the Layer effects in ImageReady have their own palettes,
as shown in Figure 8–3. The same variables can be set in these palettes that can be set in
the corresponding Photoshop dialog boxes, but the palette makes it a bit more compact.
go to contents
218
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
Figure 8–3: Layer Effects are controlled
through palettes in ImageReady.
Creating Styles (ImageReady)
Did you ever create a series of Layer effects for an image in Photoshop that you really
liked a lot, and used over and over again? This typically involved either redoing the
effects manually every time you wanted to place them, or having to invent an action to
do create them for you.
ImageReady solves that problem by letting you set and save Styles. Styles are like
small package that retain all the effects that you create. For example, if you create a
really cool set of effects that include a 50% opaque drop shadow and a pillow emboss
with a 12 pixel blur, you can bundle that into one established Style. That Style can then
be used on any layer, in any document, at any time.
To create a Style:
1. In your Layers palette (in ImageReady—Styles are not available in Photoshop),
create a Layer effect or series of effects.
2. Select one of the effects by clicking on it, or select all of the effects in a group by
clicking the Style icon, shown in Figure 8–4.
3. Open the Styles palette by choosing Window -> Show Styles. The Styles palette is
shown in Figure 8–5.
4. Drag the effect or set of effects to the Styles palette. It will appear and be saved for
you to apply at any time.
You can name the Style if you’d like by selecting the style and choosing Style Options for the palette menu. The Styles palette is full of
some really cool preset Styles, which include textures. Try some of
these by dragging the desired Style to a layer in the Layers palette.
Styles can also retain rollover states that allow the image to change should a mouse
roll over them in browser. Creating rollover states is discussed later in this chapter.
go to contents
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
219
Style Icon
Layer Effects
Figure 8–4: Layer Effect and Style
icons.
Figure 8–5: The Styles palette.
Making Selections
Depending on what you need to do with your selections, either program can provide an
advantage. Photoshop holds the edge, as some of the more advanced selection methods
don’t exist in ImageReady. These include using Quick Masks, creating paths and selections from paths, and Photoshop’s new Extract function and Background eraser tool
(introduced in Photoshop 5.5).
However, in the “this is so obviously needed that it should have been included in
Photoshop too” category, ImageReady provides a different marquee selection tool. The
Rounded Rectangular marquee tool lets you make rectangular selections with curved corners (you can control the extent of the curve in the Options palette). The same can be done
in Photoshop by using the Shape tool; however, this tool definitely streamlines that process.
The History Palette
While the History palette exists is both Photoshop and ImageReady, the latter of the two
doesn’t use it for much more than to provide a visible list of the commands you have
made. Neither the History brush nor the Art History brush is available in ImageReady,
so any type of History palette special effect (such as the one discussed in Chapter 1), is
pretty much impossible in ImageReady.
go to contents
220
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
OPTIMIZING IMAGES
Optimizing images is a key to creating web graphics. This is obvious simply by how
much emphasis Adobe has put on it with the changes it has made to both Photoshop and
ImageReady. In Chapter 2 we took a long look at how the new Save for Web feature lets
you optimize an image by manipulating variables. These variables were contained in
one convenient location in the Save for Web dialog box.
The options provided in that dialog box are also found in ImageReady. The primary
difference here is that the optimization settings are found in a separate palette (Figure 8–6)
and optimization can be set while you are working on an image—not just when you are
ready to save it.
To view the palette, choose Windows -> Show Optimize. The palette can be
expanded by choosing More Options from the palette menu. Since the options that you
will manipulate are the same as we’ve already reviewed in Chapter 2, I won’t bore you
with gory details again in this chapter.
CREATING ANIMATIONS
When I wrote my first book, Web Photoshop 5 To Go, I spent a large number of pages discussing how to create an animation using a separate program, outside the Adobe family.
In Macintosh, the predominant program was GIF Builder, while Windows users chose
from a number of popular free and shareware programs, including GIF Movie Builder.
With each of these programs, you needed to save each frame as a separate GIF file, then
load each, frame by frame, into the animation program, which was kind of a pain.
With ImageReady, animations are done in a very convenient Animation palette,
shown in Figure 8–7. What’s better, you don’t even need to save each frame as a separate file—you create frames as different layers, either in Photoshop or in ImageReady.
Figure 8–6: The Optimize palette.
Figure 8–7: The Animation palette.
go to contents
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
221
For the sake of simplicity, I’ll illustrate by creating an animation in ImageReady
using a basic “bouncing ball” example, in which a simple ball starts at the bottom of the
screen, bounces upward, back down again, and so forth. That way you’ll have a clear
frame of reference when comparing methods.
Just so that we’re all on the same page, create a simple multilayered image using the
following guidelines:
1. In Photoshop, create a new file, 72 x 216 pixels and immediately create two new
layers. We’ll begin working on Layer 2, at the top of the Layers palette.
2. With your Circular Shape tool, hold the Shift key for constraint and make a circle
toward the bottom of your canvas. Make sure that your foreground color is whatever color you want your bouncing ball to be (I’m using red).
3. Create a new layer and change your foreground color to black. Within the circular selection, use your airbrush to put a shadow on the bottom and a small highlight on the top. You may need to adjust the layer opacity to get the proper
shadow/highlight depth. Figure 8–8 gives an example of what your picture
should look like.
4. From the Layers palette, choose Merge down to combine the shadow/highlight
with the red circle. Rename the layer “Ball 1.”
5. On Layer 1, use your Elliptical Marquee tool to make an oval beneath your red ball.
Choose Select -> Feather with a feather radius of 5 to soften the edges. Click OK.
6. Fill the selection with black to create a shadow similar to that shown in Figure 8–8.
Rename the layer “Shadow.”
7. Reactivate the “Ball 1” layer, and choose Duplicate Layer from the palette pull-down
menu. Name the new, duplicated layer “Ball 2” and click OK. Do this three times for
a total of four separate balls. Name each successive layer “Ball 2,” Ball 3,” and so
forth.
8. On each duplicated layer, move the ball upward with the Move tool. Hold down
Shift key while moving, for constraint. When you’re through, the canvas, with all
the layers visible, will look like the canvas shown in Figure 8–9.
Figure 8–8: The original red circle with a shadow cast below.
go to contents
222
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
Figure 8–9: The animation on its
canvas, and the corresponding Layers
palette.
To make the ball actually “bounce,” you’d create the animation sequence in
ImageReady. In this particular bouncing ball example, as simple as it’ll probably seem,
we’re actually doing it the hard way. But showing how to create this type of animation
using multiple layers is the best way to illustrate how animation in ImageReady actually
gets created. Simpler ways will be described later, in the section “Tweening Frames.”
For this example, do the following:
1. Create the frames as individual layers in Photoshop, as you did in the previous
example. This is convenient because you never have to save your original file as
anything other than a .psd file. Figure 8–9 showed the original canvas and the corresponding Layers palette, with all layers visible, as it appears in Photoshop. I only
used the ball in four states, so that this example won’t go on forever. Later, when we
discuss tweening animation, you’ll see how you could also create this same bouncing ball effect with only two frames, but have a lot more fluidity of motion.
Although you can always add new layers and do a lot of work in
ImageReady, I would recommend doing the bulk of the work in
Photoshop. Photoshop is just a better program for large scale
changes. You can then make relatively minor changes and revisions
while in ImageReady, as you are building your animation.
go to contents
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
223
2. Once you have prepared your graphic, and all the layers are built, open your canvas in ImageReady by clicking the Jump To button on the bottom of the Tools
palette (see “Quantum Leap: Jumping Between Programs,” earlier in this chapter).
3. In ImageReady, open the Animation palette by choosing Window -> Show
Animation.
4. At this point, the Animation palette has only one frame, the first, as indicated by
the frame number in the top left of the Frame icon. Notice that the preview shown
looks exactly like your main canvas—since all the layers are visible, they all appear
in the first frame of your animation, as shown in Figure 8–10. Pretty easy so far,
right?
5. We’re going to want the animation to start with the first frame showing the ball on
the ground and a dark shadow underneath it. Turn off Ball 2, 3, and 4 layers by
clicking the Eye icon at the far left of each of those layers. You’ll see that the icon
for Frame 1 in the Animation palette has changed as well.
At the bottom of the Layers palette and toward the left in ImageReady,
you’ll see an area that says Frame 1. This tells you in which frame of
your animation you are currently working. As you create new frames,
this Frame Indicator at the bottom of the Layers palette will change to
reflect the frame in which you are currently working.
6. Create a new animation frame either by clicking on the New Frame icon at the bottom
of the Animation palette or by choosing New Frame from the Animation palette menu.
You’ll see a new frame window appear in the Animation palette, with the number 2 in
the top left, indicating that it’s the second frame. A black outline around the new window shows that this is the active frame—the one you will be adjusting. You’ll also
notice that upon creation, this frame looks identical to Frame 1. Did you see the
change at the bottom of the Layers palette? The Frame Indicator now says Frame 2.
7. We’re going to want two distinct changes to occur in this frame: First, we want the
ball to move up a bit. Second, we want the underlying shadow to become a bit
lighter, or more transparent. Hide the Frame 1 layer. You’ll see that the ball disappears in your canvas and in the icon for Frame 2 in the Animation palette. However,
nothing has changed in the icon for Frame 1.
Figure 8–10: When you open the Animation palette for the first
time, only one frame exists, with the icon showing everything
that is visible in the layer.
go to contents
224
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
8. Make the Ball 2 layer visible by clicking the empty box on the far left of the layer
in the Layers palette. Also, make the Shadow layer active by clicking on it (you’ll
see that it’s active once it is highlighted). Change Opacity to 66% in the Layers
palette. Note the changes in the icon for Frame 2 in the Animation palette.
9. To see how these changes are affecting only the active animation frame, make
Frame 1 active by clicking on it. A black border will appear to indicate that it is
now active. You’ll see in the Layers palette that the visible layers (and opacity for
the Shadow layer) have changed to represent the animation state that was saved in
Frame 1. Click back to Frame 2 to see the changes in the Layers palette again.
10. Make sure that Frame 2 is active, and then create a new frame in the Animation
palette by clicking the New Frame icon. Frame 3 appears, looking identical to
Frame 2.
11. Hide the Ball 2 layer and make the Ball 3 layer visible. Also, with the Shadow layer
active, reduce the shadow opacity to 33%.
12. Create a new frame by clicking the New Frame Icon. Frame 4 appears, looking
identical to Frame 3.
13. Hide Ball 3 and make Ball 4 visible. Also, reduce the opacity of the Shadow layer
to 1%.
14. Now that the ball is as high as it can go, do the whole thing in reverse. Leave out
the upper most and lower most states on the way down. The Animation palette will
look similar to Figure 8–11.
A quicker way to do this would be to click on Frame 2, then press
Shift and click on Frame 3 (this will highlight both frames). Choose
Copy Frames from the Animation palette menu. Make Frame 4 active
by clicking on it. Create a new frame, Frame 5, and make it active.
Make all the visible layers invisible, except for the background layer.
Choose Paste Layers from the Animation palette menu. Highlight
both of the newly pasted frames and choose Reverse Frames from the
palette menu. Believe me, it only sounds confusing.
Figure 8–11: The Animation palette after all of the frames have been created to make the ball bounce up and then back down.
go to contents
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
225
Miscellaneous Animation Points
I briefly want to review some of the other things you should keep in mind about animation and frames that weren’t covered in either the preceding or following sections:
◆
◆
◆
◆
Although you created the layers in the previous example in Photoshop, you
didn’t necessarily have to. You can also create layers in ImageReady to use in your
animation.
If you alter a layer that only appears in one frame, say, Layer 4 in the preceding
example, that change will only take place and be seen in the corresponding frame.
However, if a change is made, either moving an element, painting, and so forth, to
a layer seen in multiple frames, such as Layer 1 in the preceding example, that
change is seen in every frame of the animation that uses those layers.
If you use a Layer mask on an image that appears in multiple frames, the mask will
be apparent in every frame. However, you can move the mask to different locations
for each frame, even though the mask resides in just one layer.
If you would like to save an individual file for each frame, you can still do so pretty
easily. Choose Flatten Frames into Layers from the Animation palette menu. This
will create one composite layer for each frame of your animation, and store each
in your Layers palette. From there it’s just a simple, but tedious, process of saving
each frame as its own file.
Playing and Stopping Your Animation
After that long series of instructions, I thought you could use a break, so here’s a short
recipe for playing and stopping.
1. Push the Play button (the triangle), at the bottom of the Animation palette to play
the animation. Your animation will automatically loop forever, and the animation
will play in your canvas.
2. To stop your animation from playing, push the Stop button (the square) at the bottom of the Animation palette (only available while the animation is playing).
You can change the number of times that your animation loops by
choosing another option from the Loop pull-down menu. For a more
realistic rendition of what your animation will look like, you can preview it in any browser that you have loaded onto your system. Choose
File -> Preview In -> (your desired browser).
go to contents
226
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
Changing the Speed of Your Animation
By default, each frame will appear for 0 seconds, meaning that your animation will
move very quickly (no delay between frames). In many cases, that may be exactly the
way you want it. But, sometimes, slower can be better.
1. To change the speed of an individual frame, activate the frame by clicking on it.
2. At the bottom of the frame, click on the small arrow where it reads “0 sec.”
3. Choose the speed from the presets given in the pop-up menu, or set your own time
by choosing Other.
4. To change all the frames (or many frames in a row), click on the first frame you
would like to change.
5. Hold the Shift key and click on the last frame you want to change. All of the frames
in between will be highlighted as well.
6. Choose your desired time from the pop-up menu of any of the highlighted frames.
Notice that the delay time changes for all frames.
7. To change the delay times for multiple, noncontiguous frames, activate a frame you
would like to change, and press Command/Ctrl and click all other desired frames.
The frames in between will not be highlighted.
8. Choose your desired delay time from the pop-up menu of any highlighted frame.
Changing Frame Order and Deleting Frames
Similar to the way you work in layers, you can move a frame simply by clicking on the
frame you want to move, and holding the mouse button down.
1. Drag with your mouse to move the frame in question to the position you desire.
2. Delete a frame either by dragging it to the Trash icon in the Animation palette, or
choosing Delete Frame from the palette menu.
Wa
rni
ng
If multiple frames are selected, all of those frames will be deleted or
moved, not just the one that is active.
Tweening Frames
“Tweening” is essentially an easy way to create a number of frames in between
(between—that’s where the word tweening comes from) two existing frames for smooth
animation. For instance, in our bouncing ball example, we wanted the ball to reach the
go to contents
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
227
top of the canvas while the underlying shadow faded to almost nothing, which we
accomplished. But we could also accomplish it using just two frames, one for the ball
and one for the shadow.
1. Create the same basic image that we created before, but this time use only three
layers—keep the background layer empty, have the next layer contain your shadow,
and the third layer contain the ball.
2. Open the Animation palette in ImageReady. The first and only frame will show
both the ball and the shadow, just like your canvas.
3. Create a new frame by clicking on the New Frame icon.
4. Activate the Move tool. Make sure that the active layer is the one that contains the
ball and, holding Shift for constraint, drag the ball to the top of the canvas. You’ll
see that in Frame 2 of the Animation palette, the ball is at the top of the canvas, while
in Frame 1 it’s at the bottom, even though the ball is in the same layer. Click on
Frame 1, and you’ll see that the ball moves inside the canvas itself. ImageReady will
remember various states for different frames without creating additional layers.
Wa
rni
ng
This is an incredibly convenient way of working that’ll save you the
time of making multiple layers, but there is one drawback. When you
move the contents of a layer to accommodate multiple frames of an
animation, any changes that you make to that layer (color, paint
strokes, etc.) will be seen in every frame of your animation. There is
always a price for convenience.
5. With Frame 2 in the Animation palette active again, activate the layer that contains
the shadow within the Layer palette. Reduce the opacity of the shadow to 1%, and
you’ll see the effect happen within Frame 2 in the Animation palette, while Frame
1 still shows the shadow at full opacity.
6. With Frame 2 still active, click the Tween button at the bottom of the Animation
palette. Figure 8–12 shows the palette to this point, with the Tween button pointed out.
Figure 8–12: The Animation palette displaying the two existing frames. The Tween button is the one that resembles a
small comet.
go to contents
228
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
7. Pushing the Tween button will reveal the dialog box shown in Figure 8–13. It’s a
fairly straightforward dialog box with just a few options. The first option lets you
choose which layers you will tween. Choosing All Layers means that the frames
you create will use the elements from all the visible layers, while choosing Selected
Layer means that the tween will only affect the layer that is currently active. In this
case, you’ll want to select All Layers, since you’re trying to create an animation
using both the ball and the shadow, which both reside on different layers.
The next set of options is called Parameters. Here you can select one or more of the
available choices, which in this case would be Position (for the ball) and Opacity
(for the shadow). We’ll leave the Effects option unchecked, since it’s used more for
Layer effects types of animations, which we haven’t involved in this example.
The third choice you’ll have to make is labeled Tween With, and the options that
appear within the pull-down menu will change depending on which and how many
frames you have active.
◆
If you have just Frame 2 active, then the only choices that will be available will be
Previous Frame, meaning that the tween will occur between the active frame and
the frame directly before the active frame (Frame 1 in this case), or First Frame,
which would create the tween after the active frame and before the first frame.
If you had more than two frames existing in your animation, and had
one of the center frames active when you pushed the Tween button,
the First Frame option would be replaced with a Next Frame option.
The First Frame option only appears in our example because the next
frame after Frame 2 is the first frame.
Figure 8–13: The Tween dialog box.
go to contents
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
◆
◆
229
If you have the first frame of your animation active, your choices would be Next
Frame or Last Frame, which in this case are the same frame (Frame 2). The difference would be in where the tweened frames are placed, either after the first frame
or after the last frame.
If you have two contiguous frames selected, your only option will be Selection.
You cannot tween noncontiguous frames.
In this particular case, you’ll want to choose Previous Frame.
Lastly, you’ll have the option to select how many frames you want to add. The
more frames you add, the more fluid your animation will look, but the larger the
file size will be. For this example, I’m choosing to add four frames. Click OK when
you’ve made your selections.
8. You’ll see your new frames instantly added in your Animation palette, between
Frames 1 and 2. Play the animation, and you’ll see that you now have a smooth
transition from the first position to the last, which likely creates a smoother animation than the original way we created the bouncing ball earlier in this chapter.
Figure 8–14 shows the Animation palette with the tweened frames placed between
the original frames.
It’s kind of a neat thing, but let’s say you have your original Frames 1
and 2 again, and Frame 1 is active. If you create a new frame by
pushing the New Frame button at the bottom of the Animation
palette, the new frame appears as a duplicate of Frame 1, and is
lodged in the middle. If you select all three frames at once, and then
push the Tween button, you will not get the Tween dialog box at all.
Instead, the middle frame will just automatically be repositioned and
reworked to create a smoother transition between the first and last
frames.
Figure 8–14: The Animation palette with the Tween effect.
go to contents
230
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
TRANSPARENCY AND
ANIMATION
Mixing animation and transparency can produce some very ugly results.
The problem with having transparent files is that if you are creating an animation in
which your image moves from one area to another, you will see right through the transparency in each frame, and into the frame preceding it. This will essentially destroy the
desired moving effect, and you will end up with an animation that looks messy.
In ImageReady, you can keep one frame from showing through the transparent portion of the following frame(s) by “disposing” of a frame. Disposing of a frame means
that you will discard, or hide, a frame before the next frame appears. This way, there is
no threat of seeing that frame through the next frame.
To set a frame disposal:
1. Make the frame(s) that you want to dispose of, or hide, active.
2. Press Command/Ctrl and click (right-mouse click in Windows) on the icon for one
of the selected frames. A pop-up menu will appear.
3. Choose Restore to Background to make the selected frames hide before the next
frame appears. Choose Do Not Dispose to allow the selected frames to remain visible as the next frame plays (causing them to be seen through any transparent areas.
Choose Automatic, the default selection, to allow ImageReady to determine for
itself when a frame should or shouldn’t be discarded.
Optimizing an ImageReady Animation
By selecting a frame in your animation, you can use the Optimize palette to set the optimization variables. All frames will assume the same settings. Images that will retain
animations must be saved in the GIF file format. If you optimize your GIF to have a
Selective, Perceptual, or Adaptive palette, ImageReady will create a Color palette that
takes into consideration each frame individually. In addition, it will reduce odd color
shifts or “flickering” by applying unique dithering to each frame. This special attention
also includes optimized treatment only to the areas of each frame that change, to help
keep file size down for faster downloads.
Because animations have different properties than ordinary images (in that it may
have different elements that move, shift, or otherwise change over the course of
frames), the optimization settings can be a bit more involved. Beyond the variables provided in the Optimize palette, you can choose Optimize Animation from the Animation
palette menu.
go to contents
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
◆
◆
231
Check the box for Optimize by Bounding Box to have ImageReady crop each frame
of your animation to only retain the area that has been altered from the proceeding
frame. This will ultimately help reduce the file size, and is checked on by default.
Check the box for Redundant Pixel Removal to turn all unchanged pixels (between
frames) into transparent pixels. This will also help reduce file size, and is also
checked on by default.
As described earlier in this section, transparencies can be tricky when it comes to animation. Set the disposal method to Automatic when using the Redundant Pixel Removal
option for ImageReady to determine whether or not transparency is appropriate.
Saving and Opening an Animation
To save the image with all of its elements, including layers, as a Photoshop file, choose
File -> Save or Save As. This will allow you to work on your image at a later point, with
all layers retained, in either Photoshop or ImageReady.
If you reopen the image in Photoshop, whichever frame of your animation was
selected when you last saved it in ImageReady will be visible in Photoshop. If you add
a layer in Photoshop and manipulate it (by placing text, imagery, paint, etc., on it), and
then jump back to ImageReady, the new layer will appear, and the manipulations will
show up in the selected frame. If you make alterations to a layer in Photoshop that
appear in multiple frames of your animation, those changes will show up in each
respective frame.
Choose File -> Save Optimized or Save Optimized As to save your animation as a
GIF, with all of the optimization settings. The dialog box will allow you to choose
whether or not you want ImageReady to generate HTML text for you.
SLICING IMAGES
Slicing images is a practice that has become relatively commonplace for graphics on the
Internet. By “slicing,” I’m referring to literally cutting up an image into smaller pieces,
then having them reassembled in an HTML table within your browser.
There are a number of reasons why you would want to slice your images into smaller
pieces just to put them back together again later. Not only does slicing your image into
smaller pieces help make it load faster, but it is also the mechanism with which you can
create JavaScript rollovers in ImageReady. Rollovers are discussed later in this chapter.
Slicing an image in Photoshop version 5 or lower was a complete drag. It took forever, and there were inevitably mistakes that made you have to go back and do the
whole thing over again in many cases. With the inclusion of ImageReady in version 5.5,
go to contents
232
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
slicing images became much easier. ImageReady’s Slice tool made the job quick and
painless. Now, with 6, the Slice tool has found its way to Photoshop, so you don’t necessarily need to do your slicing in ImageReady—you can do it in Photoshop, instead.
So why, then, is this the first time that you’re really hearing about it?
Well, even though it’s offered in Photoshop, it doesn’t make sense to write about it
twice, since it basically does the same thing in both programs. You can create slices in
either, and they will transfer between programs just like layers do. But personally, I like
creating slices in ImageReady better that I like creating them in Photoshop for a few
reasons:
◆
◆
You can optimize slices individually in both programs, but in Photoshop you need
to go out of the way to open the Save for Web dialog box from the File menu to do
so, while ImageReady uses the much more convenient Optimize palette.
Setting a URL address, Target Frame, Message Text, and so forth is more convenient in ImageReady, where a floating palette allows you to set these parameters
easily. You can set them in Photoshop as well, but you have to double-click on each
frame to access the dialog box.
Creating slices in ImageReady merely comes down to mastering one tool—the Slice
tool, shown in Figure 8–15. If you know how to use the Rectangular marquee tool, then
you know how to use the Slice tool. There are, however, a lot of options and nuances
that you need to learn to take full advantage of the slice function so, without further
babbling …
To create slices in your image:
1. In the toolbar, make the Slice tool active by clicking on it. You’ll see a slight change
in your image, as a yellow outline with symbols in the upper left corner suddenly
appear. Photoshop places this there automatically, to indicate that the original slice
is the image itself.
2. With the Slice tool, drag with your cursor to select the area where you want to make
your first slice. This will feel much like using the Rectangular marquee tool, and
much of the controls are exactly the same. For example, dragging while holding the
Shift key will constrain the proportions, holding the Option key (Alt in Windows)
will allow you to drag from the middle instead of the corner, and so forth.
3. For the sake of this example, let’s suppose that you create your first slice from the
upper left corner of your image. The result would look similar to Figure 8–16.
Notice, however, that two other slices suddenly accompany the slice you just created. Not only that, but the area outside the slice you just created appears to have
a slight film over it, diminishing the colors in your image.
Figure 8–15: The Tool palette, with the
Slice and Slice Select tools pointed out.
go to contents
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
233
Figure 8–16: Slicing up an image.
4. If you are familiar with how HTML tables are created, then you will easily understand that the other slices are necessary in order to assemble your image properly
in HTML. These slices, generated by ImageReady, are called auto-slices. Autoslices differ in quality from the slice you created, otherwise known as a user-slice.
User-slices, as we will see, have more functionality to them and are displayed with
the full color of your image, as opposed to the slightly washed out look seen in the
auto-slices.
5. Continue using the Slice tool to make further slices to your image. As you create
more user-slices, more auto-slices are also created, until you have filled your image
with auto-slices.
6. As you create slices, you will notice that each individual slice is numbered. Slices
are numbered from left to right, with slice number one residing in the upper left
portion of your image.
If you are more comfortable creating slices from guides you have set,
you can do this as well. Simply place the guides in such a way that
they break up your image as desired. Then choose Slice -> Create
Slice from Guides. All slices created will be user-slices, and they will
be created in place of any slices that already exist.
go to contents
234
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
Selecting a Slice
1. To select either a user-slice or an auto-slice, choose the Slice Select tool.
2. Click on the slice of your choice. That slice becomes active, as indicated by the
bright yellow bounding box. If you have selected an auto-slice, that portion of your
image will display in its normal color for the duration of time that it is selected.
3. Hold the Shift key and click on another slice to select more than one at a time.
4. If you select an auto-slice, you can click in the slice and drag a selection to include
multiple slices. Clicking and dragging when starting from a user-slice will move
that slice elsewhere in your image. You can select all slices or deselect all slices by
choosing Select -> All Slice or Select -> Deselect All, respectively.
Turning an Auto-Slice Into a User-Slice
1. Select on auto-slice.
2. Choose Slice -> Promote to User Slice. The new user-slice will be indicated by a
change in color quality of that image portion and the inclusion of handlebars
around the bounding box.
Other choices or actions you will make, such as making certain selections in the
Slice palette (discussed later in this section), will also force an auto-slice to become a
user-slice. ImageReady really does prefer slices to be user-slices, and it is my prediction (you heard it here first) that future versions of ImageReady will simply do away
with auto-slices altogether.
Why You Would Want to Promote an Auto-Slice
Promoting auto-slices to user-slices gives you the freedom to manipulate them more
freely. This includes the ability to customize optimization settings for each slice, as well
as to link them together and distribute optimization settings. Some settings you may
make in the Slice palette (discussed later this chapter) will automatically promote an
auto-slice to a user-slice.
Optimizing Slices
In case you haven’t noticed, optimization has been the word of the day in this chapter.
Many of the improvements in this upgrade either directly or indirectly have something
to do with optimizing your files. To optimize a slice, simply use the Slice Select tool
and click on the slice you want to optimize. Then follow the directions for optimization
that were explained earlier in this chapter..
go to contents
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
235
If you have a lot of slices and want to apply the same optimization
setting to some or all of them, but don’t want to do it for each one
individually, you can link slices together. Optimizing linked slices will
distribute the same optimization settings across each slice in the
linked “chain.” All auto-slices are linked together in a group as they
are created.
To link slices, simply select the slices you would like to link with the Select Slice
tool, and choose Slice -> Link Slices. If the first slice you select is an auto-slice, then
all slices that you are linking together (even user-slices), will become part of the autoslice group. If the first slice selected is a user-slice, then any auto-slice that is selected
will automatically be upgraded to a user-slice. Different groups of slices will be delineated by the different colors of information in the upper left of the slices.
Resizing and/or Moving a Slice
1. Make the Slice Select tool active by clicking on it.
2. Click on the slice that you want to resize. If it is a user-slice, resize the slice by
manipulating the handlebars on the bounding box. If you have selected an autoslice, you will need to promote it to a user-slice if you want to resize or move your
slice.
3. If you move your slice in such a way that it overlaps another slice, ImageReady will
divide the slice underneath. This division will include separate slices for the visible
areas outside the overlapped area, as well as a slice for the area of the intersection.
These slices will become apparent when you save the optimized image and the
HTML table is generated. In the meantime, however, while you are working, the
underlying slice is preserved for you to move, enhance, or otherwise manipulate.
Dividing a Slice
This is actually pretty cool, and it can save you a lot of time if you follow these steps:
1. Select a slice by clicking on it with the Slice Select tool.
2. From the Slice palette menu, choose Divide Slice to access the dialog box shown
in Figure 8–17.
3. Check the Preview checkbox to see the divisions as they are being created.
4. In the dialog box, choose, by clicking on the respective checkbox, whether to
divide your slice horizontally, vertically, or both.
go to contents
236
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
Figure 8–17: The Divide Slice dialog box.
5. Within each area, you can decide whether you want to divide your slice into equal
parts (simply fill in the desired value), or by a certain number of pixels for each
division. If you choose the latter, and do not enter a value that will divide your slice
equally, ImageReady will make as many divisions as possible, and then make one
last slice from whatever is left over. So, for example, if your slice is 70 pixels, and
you divide into slices of 30 pixels each, you will get two slices at 30 pixels, and
one slice at 10 pixels.
Combining Slices
You can easily combine two or more slices into one slice, should you decide that you
either have too many slices to manage easily, or that, from a time management/optimization point of view, there is no value to having separate slices for one portion of
your image.
1. With the Slice Select tool, select the slices you want to combine (hold the Shift key
to make multiple selections). Bear in mind that you do not need to select only userslices to make a combination. Auto-slices can be used as well. In addition, slices
that you choose can be noncontiguous.
2. Choose Slice -> Combine Slices. A new user-slice is created (it is always a userslice, even if two auto-slices were selected as the candidates to combine), taking its
dimensions from the rectangle that can be created from the outside edge of the
selected slices. If the selected slices are not contiguous, the new slice will either
replace all underlying slices, or will overlap the underlying slices. Overlapping
slices are discussed earlier in this chapter.
go to contents
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
237
Combined slices will retain the optimization of the first slice that was
selected before you chose to combine them.
Aligning Slices With One Another
Much like aligning elements that reside in layers, you can align slices, too. You can
align slices either horizontally (by top, center, or bottom), or vertically (by top, center,
or bottom).
1. With the Slice Select tool, select the slices you want to combine (hold the Shift key
to make multiple selections). For alignment of slices, you must choose two or more
user-slices—auto-slices can’t be aligned. Promoting your auto-slice to a user-slice
is discussed earlier in this chapter.
2. Choose Slices -> Align ->[your preference of alignment]. If any areas overlap as a
result of the alignment, the overlap area will become its own user-slice.
When Looking at Slices Gets Annoying
Just push the button to hide slices on the toolbar. It’s located directly under the foreground and background color swatches, on the right.
Where it Gets Interesting: Using the Slice
Palette
As with almost anything else in Photoshop or ImageReady, the real magic starts when
you are in one of the palettes. The Slice palette, shown in Figure 8–18 and accessible
by choosing Window -> Show Slice, really gives you the flexibility to put the slices to
good use. Precise movements of individual slices, adding hyperlink information for
image mapping, and writing ALT tags are just some of the things you can accomplish
in this palette.
Figure 8–18: The Slice palette.
go to contents
238
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
To use the palette, you first have to select a slice with the Slice Select tool . The Slice
palette will retain different information for each slice in your image, although you will
have fewer options available for auto-slices, which is one of the reasons that you will
want to promote auto-slices to user-slices. In fact, many of the options that you make
in this palette will change your auto-slices into user-slices automatically.
To use the Slice palette:
1. Select the type from the Type pull-down menu. Choose Image to continue working
with the slice as an image. This is the default. Choose No Image to drop out the
image from the slice area. The slice palette will change a bit, revealing a text area.
Use this area to fill in the missing space with browser-generated text, if you would
like, or leave it blank to drop out the image without adding text.
NOTE: If you choose No Image for your Type, the preview window in
the palette and your canvas will still show the image. And if you fill in
the area with HTML text in the palette, it won't appear in the canvas,
either. To see the results of these options, you have to select File ->
Preview In -> [your desired browser].
2. Select your background color from the BG pull-down menu. The background color
you pick will fill in the transparent areas of your slice if you have chosen Image as
your Type. If you choose No Image as your Type, the background color will fill in
the entire area of your slice.
3. If a particular slice is one solid color, use the Color Picker to determine its hexadecimal code. Then set the slice to No Image and, in the BG pull-down menu,
access the Color Picker and fill in the hexadecimal value. (See next section for
more information on the BG pull-down menu). This will help eliminate colors from
the image, and decrease download time.
You can select from a number of options in the BG pull-down menu. The color
swatches at the bottom are the colors from the web-safe Color palette. You may also
choose None, which leaves the background as transparent (unless you are saving as a
JPEG, in which case the background color will default to the Matte option in the
Optimize palette. The Matte option in the BG pull-down area will also cause the color
to be placed in the Optimize palette. Foreground and Background will fill in your transparent or empty area with either your foreground or background color, respectively.
Choose Other to access the Color Picker.
1. In the Name area, you can change the file name that ImageReady had chosen for
the slice in question. Typically, these are pretty straightforward names that incorporate the slice number—I would advise thinking twice before changing the name.
2. If the slice is part of an image map, and you would like the user to access another
HTML page when he or she clicks on this particular slice, provide the appropriate
web page address in the URL text area.
go to contents
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
239
3. If you use frames in your web site (which divide your browser window into various segments) use the Target text area to specify in which frame you wish the corresponding URL to open. The name that you enter here must match the name you
have given to the frame in your HTML text. The Target area will be grayed out until
you have entered an address in the URL area. If you are working in a frames site,
but do not want the URL you have specified to open in one of the frames you have
named in your HTML text, you can select one of the options provided in the Target
pull-down menu.
◆ _blank: This will open the page in its own browser window, which will appear
in front of the original one.
◆ _self: This will cause the new frame to open in the same frame that held the link.
◆ _parent: Loads the image in the framset that contains the file clicked on.
◆ _top: This will load your new page into the entire browser, overriding all of the
frames.
4. Expand the Slice palette to include more options by choosing Show Options from
the palette menu. Figure 8–19 shows what the palette, including the extended
options, will look like.
5. The Precision area on the bottom left of the palette allows you to control the size
and position of the selected slice. Manipulating it in any way will change either the
dimensions or location of your slice, or both. Be prepared that this could cause an
overlapping of slices and could change the HTML table that ImageReady will create. An explanation of overlapping slices is provided earlier in this chapter.
6. Click the Constrain Proportions checkbox to maintain the original proportions of
the selected slice.
Figure 8–19: The Slice palette with the options visible.
go to contents
240
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
7. Enter a phrase, direction, or statement in the Message area that you wish to appear
in the browser status area (typically the bottom left portion of the browser frame).
This usually displays the URL that the user will link to should he or she click on a
particular part of your image. This is fine, and no one will complain about it, but
what looks nicer from a marketing or an aesthetic standpoint: “http://www.yoursitename.com/products.html” or “Click here to find out more about our wide product variety”? Remember, it’s all in the marketing, baby.
Saving Image Slices
Typically, you would save any image by choosing either File -> Save (to save your
image using the same name and file type), or File -> Save As (to save your image using
a different name or file type). Doing so after placing slices in your image will simply
preserve your slices, so that next time you open your image, the slices that you made
will still be there.
A different result can be achieved by choosing File -> Save Optimized As. Choosing
this will bring up the dialog box shown in Figure 8–20. Notice that the file name has an
.html extension, and not the .jpg or .gif extension that you might expect. That’s because
once you push the OK button, ImageReady will not only save each slice as its own separate file (and contain all of these files in its own folder), but it will write the HTML code
for you for the <TABLE> assembly. Just cut and paste this into your own HTML text.
Figure 8–20: The Save Optimized As dialog box.
go to contents
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
241
Check out the HTML Options button for more in-depth control when
ImageReady writes your HTML files. You can, for example, instruct
ImageReady to write all of your HTML tags in uppercase, which I
personally prefer.
If you copy the ImageReady text into your own HTML text, and then make changes
to the slice configuration in ImageReady, you don’t need to copy and paste again.
Simply save your changes by choosing File -> Save Optimized As. Then select File ->
Update HTML, and locate the HTML text page that you wish to update.
Wa
rni
ng
Although it doesn’t seem to make sense, after numerous trials and
errors, it would appear that not only does ImageReady update the
table in your HTML text, it also pretty much wipes out anything else
you had in there—other images, lines of copy, and so forth. Be careful
and experiment with this feature before you use it—you don’t want to
lose anything that you worked hard to write.
CREATING JAVASCRIPT
ROLLOVERS
Creating a JavaScript rollover is easy. Take a quarter stick of butter, and a teaspoon of
flour … Java … rollover … that’s a joke, son, don’t you get it?
Sorry—in the interest of bringing important information to my readers as quickly as
possible, I am still up typing at 3:16 a.m., and Foghorn J. Leghorn is the only thing
keeping me company.
Anyway, JavaScript rollovers are pretty easy in ImageReady. But before I get into
how to make them, let me provide a quick explanation of what they are. Have you ever
been to a website, where when you move your mouse over a button or an image, the
button changes color, or shape, or makes something appear elsewhere in the browser?
That’s a rollover. These are usually done with JavaScript, much like the one shown at
the end of Chapter 6 from the original book, Web Photoshop 5 To Go. Typically these
can be formidable to write (although the savvy non-Java programming language
designer will usually just borrow a script from another site), but they are spreading on
the web. It won’t be long before rollovers are as common on the web as animated GIFs,
and any semblance of class on the Internet will be gone, replaced by the New Jersey
diner standard of web design.
Fortunately, ImageReady allows you to create rollovers without having to write one
line of code. The palette setup makes JavaScript rollovers as easy to create as animation (examined earlier in this chapter) and, similar to the ImageReady animation
process, the tie-in to the Layers palette makes rollovers that much more familiar.
go to contents
242
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
Figure 8–21: We’ll make the buttons on this navigation bar have rollover effects.
For the purposes of this example, I’ll be using the simple navigation bar shown in
Figure 8–21, which is part of a larger page layout.
The entire page was created and laid out in Photoshop. The idea for this example is
that as the user rolls his or her cursor over the Home button, it will add a drop shadow.
As the cursor moves over the About Us button, a line of text will appear elsewhere on
the site. And finally, when the user’s cursor moves over the Products button, an animation will start elsewhere on the page. Granted, this mish-mosh of effects would create a
pretty ugly web site, but for the sake of this chapter it’ll create a pretty useful example.
To achieve each of these effects, the entire page will need to be sliced into smaller
parts. Slicing an image was discussed earlier in this chapter. The slices that I have created for this example are shown in Figure 8–22.
Adding a Drop Shadow to the Home Button
Probably the most common type of rollover, this simple effect will change the very portion of the image that the user rolls his or her cursor over. In this instance, we will make
a drop shadow appear behind the Home button. More commonly the change would be
a shift in color, but considering that this is a black and white book, I’ve made the change
more visible.
go to contents
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
243
Figure 8–22: I’ve divided up the navigation into slices.
1. Make the Slice Selection tool active by clicking on it.
2. Make sure that the slices in your image are visible by choosing Window -> Show
Slices.
3. Make the slice containing the word Home active by clicking on it. You’ll see that
the slice lights up in a bright yellow color.
4. Open the Rollover palette by choosing Window -> Show Rollover. The palette
appears in Figure 8–23. Notice that the first frame, or state, is named Normal to
indicate that this is how the image appears when the cursor is not being rolled
over it.
Figure 8–23: The Rollover palette.
go to contents
244
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
5. Create a new rollover state by clicking the New State button on the bottom of the
Rollover palette (you can also do this by choosing New State from the Rollover
palette menu. This new state will, by default, be labeled Over, to indicate that it is
what will happen when the cursor is moved over the image.
6. Notice that the preview window in the Over state looks identical to the image in the
Normal preview window. This will change in just a moment.
7. With the slice for the word Home still active, choose Select -> Create Selection
from Slice to make an active marquee selection in the slice area.
8. When I created the text buttons, I placed all of the words at once, so they all
appear on the same layer. For the rollover to work, we’re going to need the word
Home to appear on a separate layer (remember that we’re going to add rollover
effects through the use of different layers, much like we did when creating animations). Choose Layer -> New -> Layer Via Copy. The word Home will appear
in its own unique layer, as well as still existing in its original layer. In the original
layer, the text is still editable, so you can change the copy, font, size, and so forth
at any time. Once you copy all or part of the text onto a new layer, the copy that
appears in that new layer will not be editable—it will just be a graphic representation of the word Home.
9. Because you were in the Over state when you created your new layer, that layer is
only visible when the Over state is active. Just for testing purposes, make the
Normal state active by clicking on it. You can see that even though your new layer
exists while in this state, it become invisible. Make the Over state active again by
clicking on it which, in turn, will make your new layer visible again.
10. Make the new layer, the one with only the word Home in it, active by clicking on
it in the Layers palette.
11. Add a drop shadow to the word Home by using the Layer effects. Layer effects,
described in greater detail in Chapter 5, can still be accessed in ImageReady
through the Layer -> Layer Effects menu. An easier way, however, is by pushing
the small black circle with “f” inside it at the bottom of the Layers palette. A popup menu featuring the Layers effects options appears. Choose Drop Shadow for the
current example.
12. Unlike Photoshop, which gives you a full dialog box for the creation of Layer
effects, ImageReady lets you adjust each effect by supplying a unique palette for it
(the Layer Options palette changes names and variables, depending on which
Layer effect you choose). The palette for Drop Shadow is shown earlier in this
chapter. Use the palette to create a drop shadow for the word Home.
13. To see your rollover at work, you’ll need to open your image in a browser. Choose
File -> Preview In -> (desired browser). Provided you have enough RAM, the
browser that you selected will open and display your image. Roll over the word
Home to see the drop shadow work.
go to contents
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
245
A Few Other Things You Should Know
The following points are a few extra things that you should know about creating
rollovers. These were not covered in the preceding section because they were not
needed for the last example. Although Over states are the most common, the process
does not have to end there. You can continue adding states by clicking the New State
button. Each new state will appear with a different function, in the following order:
◆
◆
◆
◆
◆
Down: The change will occur when the user clicks on the image. It will last for as
long as the user keeps his or her mouse button down.
Click: This will change the appearance of your rollover after the user has clicked
on it. The effect will last until the user either clicks on another rollover element or
navigates to another page.
Out: This changes the image when the user moves his or her cursor out of the
rollover area. This is pretty much a waste of time, as the Normal state is typically
fine for this.
Up: This will change the image after the user has clicked off the image but still has
his or her cursor over it. Again, this is fairly useless, as the Over state is fine for
this. Do you get the feeling that the programming guys at Adobe went a little statehappy?
None: This state doesn’t appear in the browser no matter what you do with your
cursor—it just saves the image as it currently exists, so you can use it later.
The preceding list described each state, and listed them in the order that they appear.
You can change the function of any state, however, if you want them to occur in a different order. Just click on the small arrow next to the name of each state and select your
desired function from the pull-down menu. You cannot change the function of the first
state, which is marked Normal.
The pull-down menu will also offer an option named Custom. Choose this to create
your own function. To make this work, though, you will need to write or supply your
own JavaScript code for your HTML text.
Creating a Change Elsewhere in Your Image
This is really not so radically different from the example that we just examined. In fact,
it’s pretty much exactly the same, with one small thing to note. The reason that I have
listed it separately is that for some reason, this tends to be a common question that people have asked me since they got the new version.
For this example, the effect we’re looking for is that as the cursor moves over the
words About Us, the line “We are an advertising, communications, and production company” will appear at the bottom of the image. This is so similar to the last example of the
go to contents
246
CHAPTER 8 • IMAGEREADY: SPRINGBOARD TO THE WEB
Home button that I won’t bother to list the directions numerically. This time, you will
use the Slice Selection tool to select the About Us button. Follow the steps in the preceding example from there. When you are working in the Over state, simply add the line
of text anyplace on the image that you would like it. Because it is text, it will automatically be placed in its own layer. This layer will be invisible in the Normal state, and visible in the Over state.
The trick here is to realize that the preview window in your active state will only
show the slice you have selected—in this case, the About Us button. It will not preview
the text you have placed, since it exists elsewhere on the page. The only way to check
that it is working is either to see which layers are visible as you activate various states,
or to preview your image and test it in your browser.
Triggering an Animation as a State
As I mentioned in the introduction to the rollover section, we will try now to make an
animation begin elsewhere on the page when the user rolls his or her cursor over the
Products button. Once again, this is super simple. Once you have the slice containing
the word Product selected, and are working in the Over state (or any other state), start
building your animation as described earlier in this chapter. The entire animation will
be created in the Over state and will only activate when the user’s cursor moves over
the word Products.
SUMMARY
As the Web becomes more a part of our everyday lives, audiences will come to expect
more dynamic elements in the Web pages they view. Static images alone will not be sufficient to retain viewers and ensure return visitors. While animation alone is not enough
to turn an ineffective Web site into an effective one, the movement and interest it can
generate can play an important part in taking advantage of this expanding technology.
go to contents