Part 4: The Animation
An animation is absolutely not necessary. In fact, some buttons look better without one! But you can always add one if you feel that your button needs a little extra something.
ONE BY ONE:
Let's begin by making one of the most simple animations there is. Change the percentage at the bottom of GIMP to about 400%. Count the number of letters that your text has. Then, duplicate the layer with your button that many times. For example, 'Impulse's Tutorial' has 16 letters, so after I have duplicated the layers, there will be 17 all together.
Change the FG color to whatever you want your animation's color to be (try to choose a light color). Select the bucket fill tool and the layer at the very bottom of your layers box. Fill in the first letter, then click on the second layer and fill in the second letter. Keep going until you have done this for all letters.
If you duplicated the layers correctly before, you will notice that you have an extra one left. Duplicate this layer a few times (I duplicate at least 7 times), as it will give your animation a pause at the end. Go to the drop down menu under filters, click on animation
and then playback
. This way you can see if you have made any mistakes or if there's anything you would like to change.
The last part is saving your button. Go to file
and save As
(I suggest that you make your button a GIF). After you have clicked OK, choose save as animation
, and click on export
. Make sure there is a check mark by loop forever
and change the delay
to around 130.
This next animation is also fairly easy to make. Begin the same way as before: change the percentage at the bottom of GIMP to about 400% and duplicate the layer as many times as there are letters on your button. However, this time add three extra layers.
Next choose a FG color. Use the bucket fill tool to fill in the first letter on your first layer, the second letter on your second layer, and so on.
After you are done, select a lighter shade of the color you used before. Go back to the second layer of your button and fill in the first letter, then go to the third layer and fill in the second letter. When you come to the last letter, use the first extra layer you made before. Now repeat the process with an even lighter shade. This one should be very close to the color of your font.
Once you have finished, duplicate the last extra layer about 7 times. Playback the animation before saving to make sure it looks good. Lastly, save your image the same way as for the last animation.
The glow animation is super easy to make. In fact, it only requires a few layers, and you can finish it in a matter of seconds. The first step is to make three layers of your button.
Now click on the top layer and select your text's border. Duplicate and fill it with a white color, then change the opacity to about 40. After making sure that only the border is selected, go to the drop down menu under filters and click on light and shadow, followed by drop shadow. Adjust both offsets to 0, the blur radius to about 5, the color to white, and the opacity to 100. Place the drop shadow beneath your text, but on top of the image, and duplicate it a few times if needed.
Once you have merged everything so that only the three layers are in your layers box, click on animations and blend under the drop down menu for filters. Change the immediate frames to 10, the max. blur radius to 0, make sure that looped is check-marked, and click on OK. A new window will pop up, and this will be the one you should use. After you check that the animation looks good, all that's left is to save!
This animation is even easier than the last one, even though the concept is similar. Again, create three layers of your button. The difference is that this time the first two layers should be without text, only the image.
Go to the drop down menu under filters and select animation, followed by blend. Once again, change the intermediate frames to 10, the max. blur radius to 0, make it looped, and click on OK. Now go to the new window that has popped up. Find the layer in which the text is not faded, duplicate it about 10 times, and save. Yup, that's it!
This is one of the most popular animations. It adds a bit of elegance and is useful if you want a person's eye to travel around or if there is no real focal point.
There really is no way to explain what a sparkle is supposed to look like, so I'll be using the image below to explain. Start by changing the foreground color in the toolbox to whichever color you want your sparkle to be. This is usually white, but I've chosen black as an example. Then, select the pencil tool. In the tool options box, the brush should be set to circle (11). Change the scale to 0.01 and change the percentage at the bottom of GIMP to about 800%. Duplicate your image five times for a single sparkle. On each layer, draw the sparkle as it is shown below. The numbers above the examples correspond to layers. When you're done, don't forget to add a few layers of your image to give the animation a break. The end product should look somewhat like the button to the left.
Of course few people choose to go with only one sparkle. If you want multiple sparkles, here's how to do it: whenever a sparkle you've made is on step four (according to the image above), start a new sparkle. That means that when your new sparkle is on step two, your old one is on step five and disappears completely when your new sparkle is on step three. It might seem complicated, but it's pretty simple once you get the hang of it!