Welcome!

Want to make your very own button? Well, here is a simple tutorial that I, Viky, have made to help you do so using GIMP. As you read this guide, keep in mind that each button maker has their own techniques. Creativity is key, so I encourage all of you to experiment. Who knows, maybe your way will be better than mine! Along the way, you will notice writing in boxes just like this one. They will contain some extra notes or tips I have. They aren't essential to making a button, but extra information never hurts!

April 10, 2012 Aah! This page has over 2,000 views! I remember reaching 200 and thinking 'Wow, doing pretty good.' xD But thank you to all who visit! I'm really proud of how successful this tutorial has become. (: In other news, (or non-news, really) I'm still quite busy. I'll add stuff when I can. Don't blame me! Blame school. ;) March 30, 2012 Whew, finally done with button requests. However, I've decided not to open them again for at least a few more weeks. In fact, I don't think I'll be updating the tutorial much either. There are things in real life that are more important than Neo at the moment. Just thought I'd let you all know. (: March 27, 2012 It's been only four days and here I am updating again. I suppose I will post news more than I planned. I personally find updates to be one of the best parts of a site. I love reading what site-makers are doing. But so many sites are inactive these days. I guess those who feel the same way can just read what I write here. xD Sorry for not adding content in a long while! I have been working on requests for the past few days, but I hope to add more to the tutorial soon. March 23, 2012 *gasp* Could it be? A box for news? So does this mean that this is an official site? ... Kind of. Obviously, it's a lot more casual. I don't think I'll update very often. I just thought that this would make the tutorial a bit more interesting and convenient. (: If you've visited before, you'll notice that there have been a few changes to the layout! I made the last one as it was snowing, but the warm weather lately inspired me to change it up. What do you think? If I may say so, I am pretty proud of my banner. Looks like a giant button. xD Speaking of buttons, requests are now open!

Part 1: The Image

The first step in creating a button is choosing an image, of course! For this tutorial, I will be using the one located to the left of this text. The most obvious place to find images is from Neopets Backgrounds, but I also suggest looking through the Caption Competition, game images, TCG Cards, and plots.

After you paste your image into GIMP, you can begin editing! However, I size down my image beforehand. I'm sure there is an easier way, but this is how I do it: I begin by changing the percentage in the bottom left corner of GIMP. Next, I take a screenie by pressing the print screen/sysRq button on my keyboard. I paste the screenie into MS Paint and use the Select tool to cut away everything but the image. Lastly, I paste a border (just like the yellow one seen to the left) onto my image and drag it around. After I have chosen which part I want to use, I simply select that part then copy and paste it back into GIMP.

My image is pretty clear, but if you notice that yours 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.

All you really have to do to edit an image is play around with the layers. I begin by right clicking on the pasted layer in the layers box and selecting duplicate layer. I then set the mode to overlay and changed the opacity, which can be adjusted right beneath the mode.

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. You can also add textures, which is the same process, except you paste a texture on top of your image instead of using the bucket fill tool.

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. For my button, I chose the colors directly from the image using the color picker tool.

Part 2: The Border

After you are done with the image, you can add a border. The ones below are examples of good ones, so feel free to use them!

Begin by creating a transparent layer on top of your image and pasting your border on top. Make sure to paste only your border with no extra space around it. Also, don't forget to right click on the floating selection and select anchor layer. After this, choose the fuzzy select tool. Click on all of the white areas around your border and press the delete button on your keyboard.

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.

Next, add a white "inner border." Select the pencil tool and change the scale in the tool options box to 0.01 px. Make sure that your FG color is set to white. Create a transparent layer on top of your image and draw in the border (to do this, I usually change the percentage at the bottom of GIMP to 400%). If your border curves, I suggest that the pixels of the inner border don't touch (drag and drop the image to the left to see what I mean). Finally, change the mode of the layer with the inner border to either screen, overlay, or grain merge, and adjust the opacity.

To finish the border, merge the layers and choose the fuzzy 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.

Part 3: The Text

Now we'll move on to one of the most important parts of a button: the text! 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. I know it's tempting to start with the big fonts that have become popular with button makers lately, but for beginners I suggest 04b03 (capitalized and with a size of 8px), possibly even Bangalore or Handy00. You may notice that GIMP does not allow you to make these fonts bold. If you wish to do so, you can type the text in bold in MS Paint and then paste it back into GIMP.

As you can see, without a border the text is much more difficult to read. To add one, first change either the FG or BG color. I usually choose the same color as the image, only I make it a bit darker. Right click on your text layer and select alpha to selection. Go to the drop down menu under select, and choose grow. Then, change the number to 1, click on OK, and duplicate the text layer. Finally, click on the text layer closest to the image, go to the drop down menu under edit, and choose either fill with FG Color or fill with BG Color.

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 and click OK (I often go with the same color I used for the text's border). In your Layers box, drag the drop shadow layer so it is between the image and text's border.

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.

SWISH: 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.

GLOW: 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!

APPEAR: 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!

Extras

Link Back: I truly hope that you found this tutorial helpful! If so, I'd appreciate it very much if you linked back. <a href="/~Dumblydohr"><img src="http://i43.tinypic.com/21lsxht.gif" border="0"></a> (Help/placeholder) from Impulse's Tutorial (Help/placeholder) from <a href="/~Dumblydohr">Impulse's Tutorial</a>

Listed At: Please neomail me if you have listed Impulse's Tutorial in your directory so I can link back! Dragon's Lair Masked Simple Gifts Soroptimist Directory The Shelf Directory

Request: Very rarely (every few weeks, maybe even months!), I will open button requests. If you wish to send one in, please make sure that you credit me once your button is done and that the button itself is either for a site or guild. You may look at my portfolio and offer suggestions, but there is no guarantee I will use them. (: Name: Site link: What should the text say? Should it be Neo-related? Any suggestions?

template and envelope by Nienke.
background from Foomanshu.
dividers from The Lunch Box.
bullets from Bedazzled.