Create an animated fade-in button

Creating animations on your site makes your site look more professional and friendly, well apart from the tacky clip art that is. Smooth fading effects are a great idea and this can be achieved through animated gifs. In this tutorial I am going to show you how to create a fade in animated button for your site in The Gimp, you can also apply this effect to loads of other elements on your site.

1. To start off with create a new file with the dimensions you would like your button to be, mine is going to be 150 x 40 pixels
2. Now select two shades of the same colour, I am going to use #175e95 and #60bed2
3. Select the gradient tool (shortcut: “L) and click and drag from the top to the bottom of the image, it should now look like this:
   
4. We are now going to give the button a nice web 2.0 effect.
5. Create a new layer and draw a rectangle on the top half of the button leaving 2 pixels from each side and fill it with white, it should now look like this:
   
6. Change the opacity of the layer to 10.0
7. We will now create the animation.
8. Select the Image menu and click Merge Visible Layers and click the Merge button on the dialog that appears.
9. Create two layers, move the layers to below the top layer by clicking and dragging the layer or using the arrow buttons
10. Create two new layers, one should have no colour or content on it, it should be transparent and the other fill with white.
11. Now go to the Filters menu and select Animation followed by Blend
12. On the window that appears, change the intermediate frames to 7, unselect the Looped box (unless you would want it to loop which isn’t a good idea if you want professionalism) and click the OK button.
13. Now go to save the file as a .gif file
14. On the window that appears, select Save as Animation, and click Export.
15. On the next window unselect Loop forever, and make sure the millisecond option is set to 100 and click Save
16. And that’s it, it should look like this (I’ve linked to it so you can see the effect)