The Web Warrior Guide to Web Design Technologies

1. The Web Warrior Guide to Web Design Technologies Chapter 6 Photoshop and ImageReady: Part II

2. Objectives In this chapter, you will: • Animate images • Create rollover effects • Create image maps • Slice images

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

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

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

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

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

8. A Single-Layer Animation

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

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

11. Animation Frame with Only Some Layers Visible

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

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

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

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

16. The Selects Looping Options Menu and the Set Loop Count Dialog Box

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

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

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

20. Creating Rollovers from Layers • The most common states are Normal, Over, and Out

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

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

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

24. A Rollover Effect that Includes Animation

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

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

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

28. A Hot Spot in an Image Map

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

30. Link Settings for an Image Map Hot Spot

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

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

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

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

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

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

37. 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 layer-based slices, which are like user slices, except that changing the contents of a layer automatically changes the related layer-based slice as well

38. A Layer-Based Slice

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

40. Using HTML in Slices

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

42. Using Animation in a Sliced Image

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

44. Using Rollovers in a Sliced Image

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

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