Animation on Rollover
1. Open your canvas in Photoshop and click the button at he bottom of the
tool bar to jump to image ready.
 2.
Use the slice tool to slice the template up into 12 slices . Select the
slice selection tool, and selct each slice, applying the Name of the slices
as follows and add the links where applicable :
- 1 = flowertop
- 2 =banner
- 3 =flwrbottmlft
- 4 =flwrrt
- 5 = main
- 6 =home
link= index.html
- 7 =white
- 8 =frogpond
link= index.html
- 9 =thebuzz
link= thebuzz.html
- 10 =garden
link=
 garden.html
- 11 =contact
link= contact.html
- 12 = bottom
3. Click on the slice with the home button. Then click on the Rollover
panel. Click the button that creates a new rollover state. (PS 7 you can
right click and add a rollover effect)
4. Click on the over image on the rollover panel to highlight it. Turn
off the Drop shadow effect for the home button slice.
5. Click on the animation palette. Set the time of frame 1 on the
animation palette to 0.1 seconds.
6. Click on the Duplicate Current Frame Icon on the bottom of the animation
palette 14 times until you have 15 frames.
7. Creating animation frames:
Click on frame 2.. Turn on the eye on the layer palette layer called frame
1.
Click on frame 3. Turn on the eye on the layer palette layer called frame 2.
Click on frame 4. Turn on the eye on the layer palette layer called frame 3.
Click on frame 5. Turn on the eye on the layer palette layer called frame 4.
Click on frame 6. Turn on the eye on the layer palette layer called frame 5.
Click on frame 7. Turn on the eye on the layer palette layer called frame 6.
Click on frame 8. Turn on the eye on the layer palette layer called frame 7.
Click on frame 9. Turn on the eye on the layer palette layer called frame 8.
Click on frame10. Turn on the eye on the layer palette layer called frame 9.
Click on frame 11. Turn on the eye on the layer palette layer called frame
10.
Click on frame 12. Turn on the eye on the layer palette layer called frame
11.
Click on frame 13. Turn on the eye on the layer palette layer called frame
12.
Click on frame 14. Turn on the eye on the layer palette layer called frame
13.
Click on frame 15. The bee should be missing.
8. Set the timing of the Frame on the animation panel where the bee lands on
the flower to 0.5 seconds or more.
 9.
For Photoshop 6, repeat #4-8 above for each of the button slices
making sure you turn off the drop shadow for the correct button and add the
animation to the rollover effect.
For Photoshop 7, Click on each of the other button selections in
the rollover panel. Add a rollover state by right clicking and selecting
add rolloverstate.
 Once
you have added the rollover state for each button, go back to the home
button rollover state and highlight that rollover. Click the right hand
arrow at the top of the rollover palette. select Copy Rollover State.
Then highlight the new rollover states for each of the other
buttons. Click the right hand arrow at the top of the rollover pallette and
select Paste Rollover State.
Go back to the rollover state of each of the buttons and then to the
animation panel frame 1. Turn the drop shadow back on for the home button,
and turn off the drop shadow for the corresponding button you are on.
Now publish your template!
|
