Along the way, you'll notice writing in italics. Those sections will contain any notes or tips I have. They aren't essential to making a button, but extra information never hurts!
Before scaling the image, I change the percentage at the bottom left corner of GIMP to see what looks good. I then use a calculator to determine the new height and width. For example, let's say an image was 175 pixels wide and I found that it looks good at 35%. I would multiply 175 by .35 to get 61.25. I would round to 61 when I scale the image, and the height would automatically change. Taking this step allows me to maintain a high quality image.
If you notice that your image has become blurrier because it was sized down, go to the drop down menu under 'filters,' then select 'enhance' and 'sharpen.' Since there is a preview, play around with the sharpness. Looking back at the original to see that you haven't sharpened it too much is a good idea as well.
Remember what I said before? "I encourage all of you to experiment." Each image is different, so while using only one overlay layer may have worked for this image, it may not for yours. Try different combinations and orders to see what looks best.
Some images look a bit plain. One thing you can do to fix this is add scanlines. You can do this by creating a transparent layer, then using the bucket fill tool (make sure you have chosen 'pattern fill' and 'scanlines' in the tool options box). Then change the mode to either 'overlay' or 'grain merge' and adjust the opacity. If you have not installed scanlines, you may copy and paste the ones below.
Something else you can do to make your image stand out is change the colors. You do this simply by creating a white layer on top of your image, filling it with a color, and changing the mode. Doing this a couple of times with different modes creates different results. If you wish to use more colors, you may use the blend tool. Change the foreground and background colors first. Create a new layer, drag your cursor across the image, and adjust the mode and opacity.
The process of adding textures is practically the same. Paste a texture onto your image and adjust the mode and opacity. I suggest using a texture whose colors are similar to those of your button base, since textures are often used to emphasize those main colors. A few sites I always visit to satisfy my texture needs include Jubilee Resources and Details. If used correctly, textures may transform a button from bland to beautiful. Something else you can do is go to the drop down menu under colors and select 'color balance...' Play around with the values to get interesting effects.
To make everything a little more organized for the next steps, I suggest right clicking on the bottom layer in the layers box and selecting flatten image.
The border is an important part, so I must warn you now: Don't choose the craziest one you find! I see many new button makers make this mistake. Remember that the function of a button is to advertise a site. If the image is covered up or the text is illegible, what's the use?
Now it's time to make the border colorful! Right click on the new layer and choose 'alpha to selection.' Then, go to the drop down menu under edit and select either 'fill with FG color' or 'fill with BG color.' This is assuming that you have already selected a color for your border. Of course, you can be a little more fancy and make your border have two colors. Fill your foreground and background boxes in the toolbox with different colors and select the blend tool. Again, right click on the new layer and select 'alpha to selection.' All you have to do now is drag your cursor across the image.
Play around with the opacity too. Some borders look better if the opacity's value is lowered.
To finish the border, merge the layers and choose the rectangle select tool. Cut away all parts of your image that are outside of the border. As you do this, the parts that you delete should become grey. If they become white, right click on the pasted layer in the layers box (this is after you have merged the layers) and select 'add alpha channel.' This will make it so your button has a transparent background.
Now that that's done, let's start by changing the foreground color to white and clicking on the text tool. Choose a font, change the size, and then click on your button. All that's left is typing.
Before you type, I suggest pressing the enter and space keys on your keyboard. Otherwise, when you add a border to the text, it will be partly cut off. Also, if you are using more than one word on different lines (as I am), you may want to create each word separately and then merge the layers. This way you can center and space out the words any way you want.
If you want your text to stand out even more, you can add a drop shadow. Right click on the layer with your text's border and choose 'alpha to selection.' Go to the drop down menu under filters, choose 'light and shadow,' followed by 'drop shadow.' Change both offsets to 0 px. I usually make the blur radius between 5 and 10 px. Now all you have to do is select a color (I often go with the same color I used for the text's border) and click OK. In your layers box, drag the drop shadow layer so it is between the image and text's border. The last step is adjusting your drop shadow's opacity. This is usually when I adjust the border's opacity as well.
Sadly, GIMP does not make text look very good, and if you want it to be high-quality you have to do it on your own. This is where you have to use the eraser tool. The brush should have a hardness of 75. Make the scale to be 0.01 and the opacity to about 50. Change the percentage at the bottom of GIMP to about 800% and erase any part of the border that does not touch your text. Here's what I mean (the blue parts represent where I would click once to erase):
I realize that this may be time consuming, but it does make a difference. See what I mean below? Small changes go a long way!
Next make a transparent layer and put it between the image and text. Use the rectangle select tool to create a box around your text on that layer. Go to 'edit' and 'fill with BG color' (assuming that your BG color is white). Adjust the opacity of this layer to your liking.
There are three ways to cut off a stripe so that it doesn't cover up your image. The first is to use the rectangle select tool and cut away the part you don't want. You can also use the ellipse select tool. Make sure that the box for feather edges has a check mark and that the radius is at 100. Select a part of your stripe and press ctrl and x on your keyboard at the same time. The bigger the circle, the more will be deleted. The more times you press ctrl and x, the less your stripe will be visible. If you're like me and have an object in your image that is covered up, you can even make the stripe look like it's going behind that object. All you have to do is use the eraser tool.
The last thing that I always do is create a drop shadow. Right click on the layer with your stripe and choose 'alpha to selection.' Go to the drop down menu under filters and select 'light and shadow' followed by 'drop shadow.' The offsets should be at 0. I usually use a blur radius of 10 and keep the color as black. Move the drop shadow layer so that it's beneath your stripe. You'll notice that the shadow extends to the sides. To fix this, use the rectangle select tool. Create a box around the shadows on the sides and delete them. The last step is to change the the mode of the drop shadow (if the shadow is black, I suggest overlay).
Change the FG color to whatever you want your animation's color to be. 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 10 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 'export.' I suggest that you make your button a GIF. Click 'export' again, and choose 'save as animation.' Make sure there is a check mark by 'loop forever' and set the delay to around 130 before clicking 'export' one last time.
To create this smoother version of the one by one animation, once again count the number of letters in your text. Add three to that number. Duplicate your button that many times. Leave the first two layers as they are, but fill in the first letter of your text in the third layer, the second letter of your text in the fourth layer, and so on. Leave a layer without any letters filled in at the end, then go to 'filters,' 'animation,' and 'blend.' Make the immediate frames about 10, the max. blur radius 0, have a check mark next to 'looped', and click on OK. Use the new window that pops up to save. Voilà!
Now click on the top layer and select your text's border. Duplicate and fill it with a white color, then change the opacity (and possibly mode). 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.
Now merge the drop shadow and lighter text border onto your third layer. You should have two regular layers, one with glowing text, and another regular layer, in that order. Next, click on 'animation' 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! I suggest a delay of 110 or less.
Create four layers of your button. Leave the first two layers and the last layer as they are, but fill in the letters of the third layer. Go to 'filters,' 'animation,' 'blend.' Make the immediate frames to 10, the max. blur radius 0, make sure that 'looped' is check-marked, and click OK. Save in the new window that appears.
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 10 times. Play back the animation before saving to make sure it looks good. Lastly, save your image the same way as for the last animation.
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!
It's difficult to describe 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 (though the example below is in black). Then, select the pencil tool. In the tool options box, the brush should have a hardness of 100. 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 (five layers create a sparkle, one layer is an extra). On each layer, draw the sparkle as it is shown below. The numbers above the examples correspond to layers. I also use a brush with a hardness of 75, size of 7, and 50% opacity on the third step and click once on top of my sparkle to give it a bit of a glow. When you're done, don't forget to duplicate the extra layer at the end to give the animation a break. The end product should look somewhat like the button to the right.
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!
Duplicate this shine layer at least 10 times (you may need more or less than this though). Duplicate your base that many times and place these layers in between the shine layers. As shown to the right, the layers should be base, shine, base, shine...
Go back to your first shine layer and move it to the left - far enough so that the entire layer is next to your base.
Move your second shine layer so that part of it is seen at the left of your button. If your border is not a rectangle, right click on a base layer in the layers box and select 'alpha to selection.' Press Ctrl and I at the same time. Left click on the shine layer in your layers box and press the delete button on your keyboard. Once this is done, keep moving the next shine layers to the left, as is shown below. The image to the right of this text shows what the button would look like if there weren't base layers in between the shine layers - since the shine layers are next to each other they would cover the entire button.
Change the mode of each shine layer to 'overlay.' Then right click on each shine layer and select 'merge down.' Once all of the shine layers are connected to the base layers beneath them, create about ten layers of just your base as a break in your animation. Save your button with a delay of about 120.