Tutorial: Simple Button Effect
Description: Button gradually changes colour on rollover.
Author/Creator: Martin Fletcher
© Copyright 2006-2007 Applyimage.co.uk
1. Create a new document the desired size of your button (CTRL+N)
2. Create a new fill layer.
Layer > New fill layer > Solid colour
Click ok, this will open the colour picker box. Choose the desired colour you want to see before you rollover. Click ok again.
3. Repeat this step again, this time choose the colour you want the button to gradually change to.
Your layers pallet should now be looking something like this:
4. Duplicate the initial colour which in my case is blue 10 times. Make sure you desired colour is underneath the other layers.
Layer > Duplicate Layer > 'ok'
5. You may also want to add some text to the button.
It should be looking like this:
Tip: Name Layers to avoid confusion.
6. Now focusing on the inital colour, from top to bottom you need to decrease the opacity.
The layers should be as follows:
initial colour 10: 100%
initial colour 9: 90%
initial colour 8: 80%
initial colour 7: 70%
and so on until initial colour 1 is set to 10%.
6. Then hide all initial colour layers except initial colour 10.
7. We now need to go into adobe imageready by clicking the symbol on the toolbar. (if you are using adobe cs3 you can do the same by following window > animation)
8. Once in imageready you will see your animation timeline. This part is quite complicated, you need to duplicate current frame showing the correct layer each time so the colour gradually changes.
Duplicate current frame is done using this button:
9. Click the button making your second frame. On the layers pallet you must now hide initial colour 10 and show initial colour 9 (90% opacity).
Continue this technique until you have 11 frames, It should look like this:
10. One last thing is on the bottom left of the Animation box it must be set to 'once' rather than 'forever' so the animation doesn't repeat itself over and over again.
11. Save your animation as a .gif
File > Save optimized as...
12. The animation rollover is now complete!
The final step to have the animation working on your webpage as a button is you must save frame 1 as a non-animated image, this image will appear when the person first visits the webage and the animation will work as the person rolls over the image.
Use Dreamweaver to insert the rollover into your webpage.
See the Tutorial in action!
Support will be shown in this thread for any problems you may encounter - Applyimage