Jump to content

- - - - -

Simple Web Button Effect

  • Please log in to reply
1 reply to this topic

#1 applyimage


    Young Padawan

  • Members
  • Pip
  • 11 posts

Posted 15 January 2008 - 12:05 PM

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.

Posted Image

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:
Posted Image

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:
Posted Image
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)

Posted Image

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:
Posted Image

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:

Posted Image

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

#2 applyimage


    Young Padawan

  • Members
  • Pip
  • 11 posts

Posted 15 February 2008 - 08:36 AM

Nice man! Keep 'em coming!

If I copy all the layers, paste them after the 11th frame and reverse, would I be able to make the image change from blue to purple then fade back to blue?

Great tutorial! :D

Ofcourse buddy!!! but be a little carful of how long the animation is, makes for a larger file size and people are extremely inpatient online and may not stick around to see thee full effect. Glad you liked it!! d:]

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users