x

To the Top
The Image
The Border
The Text
The Animation
Successes
Sitely

Welcome!

Want to make your very own button? Well, here is a simple tutorial that I, Emma, 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'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!

Updates

September 20, 2013 - Dear Visitors,
This tutorial will no longer be updated as it once was. I won't add new sections, I won't add news, the only thing that may change is the successes. Even though there are far better guides out there, I'm still proud of Impulse's Tutorial. I've put hours into this page and revealed almost everything I know (hey, I need to have a few secrets! c:). The neomails I've gotten have meant the world - whether they contained questions or thank you's. I'm not leaving Neo, so keep those neomails coming! Hopefully this tutorial will remain helpful for a long time. ♥

September 14, 2013 - Laptop issues
One more success added! *tap dances* *doesn't know how to tap dance and falls on face*

August 31, 2013 - Why won't the bunnies work???
Another button is now in the successes! I also changed the buttons so that they all link back to the users that made them instead of petpages. Scroll down and behold the beauty there. :D

August 26, 2013 - Folk music :D ... O.o
Added another button the the successes! Go check it out. ^^

August 22, 2013 - YESSS!!
I'm so happy right now! I finally figured out how to do the shine animation! I've wanted to know how to do it for months, and I've experimented for weeks, and today I finally got it! Obviously it's been added to the tutorial. It kind of looks like a mess, and as I read through it seemed confusing even to me, but hopefully everyone will understand the basic idea. Aaah I'm just so happy! :D

August 16, 2013 - Let's watch Lilo & Stitch!
Removed the extras page! It was kind of boring and pointless. The only extra I really like is the 'Successes,' and that's located here. Plus, I could use the extra petpage. ^^

August 2, 2013 - All I do is win
WHOA. So apparently the tutorial got 16 votes and was one of the overall winners at Golden Neopia! Just getting a single vote means a lot to me, so knowing that 16 people voted is indescribable. Thank you so much voters and visitors! ♥
I'm currently busy with The Button Club, but rest assured that there are plans for this site! I hope to add individual layers in the animations portion to show specifically what must be done. (:

July 19, 2013 - Bandwidth frustrations
If you can't tell by the abundance of broken images, my bandwidth was exceeded. This has never happened to me, so I'm at a bit of a loss as to what to do. Luckily, the images should be working in 2 days. Until then, bare with me! I'll try and find another solution. ):

July 9, 2013 - Still somewhat under construction
Today I changed all of the examples. I really didn't like that last one. Alhough the Lutari was adorable, my editing of the image was too much like my old style. Need to keep it modern. c: I also added three animations, though they're kind of playing off previous ones. That's all for now!

July 8, 2013 - Somewhat under construction
So much for the whole 'weekly updates' thing. But I'm going to be changing many parts of the tutorial, as well as adding new animations. Don't mind if a new part shows up all of a sudden.

July 3, 2013 - I'm nocturnal
Sorry for the lapse in updates! As you may know, I've been busy with my new site, The Button Club. However, this is a good prelude for the future. I want my first year of college, which starts in just a few months, to be as great as possible, without the distraction of updating often. That being said, updates will probably be weekly from now on, and eventually only when changes are made. The tutorial doesn't really require updates after all. I know, I know - sites are boring without frequent updates (at least I think so). But at the end of the day real life is far more important. I still love Neo and have no plans to leave (and am too addicted). Keep any neomails coming, just expect less activity. (Sorry for the ridiculously long message!)
One button has been added to the success section! Love it. (:

June 25, 2013 - *confetti*
The request section has been removed from the extras page... because The Button Club is officially open!! Go check it out. :D

June 24, 2013 - Too. Many. Numbers.
Another awesome button has been added to the successes! c:
Deleted one border. Added another. It was more difficult than it should have been.
If all goes as planned, The Button Club should open tomorrow! Hopefully. Wednesday at the latest. :D

June 22, 2013 - Party day
No changes to the tutorial, but I'm so excited about The Button Club! It's going great so far. The layout is pretty much done, the content is being written, and I'm getting new ideas every minute! The grand opening should be within the next few days! :D

June 21, 2013 - Unoriginal title
Two more buttons have been added to the success section! I am loving this part of the site. And I gotta say, I've been really impressed by the submissions! They all look better than the buttons I made as a beginner (though I wouldn't call myself a pro just yet, I'm learning every day). The future of button makers on Neo looks bright. c:

June 20, 2013 - She's your lobster
It's official! I am making a site all about buttons! (Am I obsessed? Slightly.) I'll probably be adding uneeded stress to my life, but that's okay. It won't be a very serious site, nor will I feel guilty about not updating often. I think even without updates it will be very interesting. Keep checking /~Vasara!
I've gotten so many neomails over the past few days regarding the tutorial and I absolutely love it! I love getting questions or comments and just interacting with button makers overall. Keep the mail coming! :*
Three buttons have been added to the success section of the site! They all look absolutely wonderful. c:

June 16, 2013 - Sunshine, daisies, butter mellow...
I've added another section to the site. It's an extra, really, but I wanted to have it on the main page. Hopefully someone will use it (see 'Successes' in the navigation)!

June 15, 2013 - Coffee cravings O.o
*fanfare* After many promises and delays, the (mini) revamp is done! Though it took me probably ten tries, I'm finally happy with the layout I chose. It's neat, simple, and I love it. I think I'll just change the banner every once in a while to keep things interesting. You'll also find that many parts of the tutorial itself have been rewritten. I went through the entire thing, looking for mistakes or areas I could clarify. I also added anything new I've learned. As for the extras, the resources have been (temporarily?) removed. I actually considered removing the entire extras page, since I was going to start another site. But I really don't have the energy to, even though I've had the idea literally for years.
Now I need to plan what's next. I do have two animations that will be added as soon as possible. But for now, I'll allow myself a bit of sleep. Really. I'm exhausted after working on the tutorial. All for you. c:
I just changed the navigation to be on the left. Hopefully it shows up for everyone now. Let me know if you spot any problems with the layout!

Part 1: The Image

Selection

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 right of this text. Beginners tend to use images from Neopets Backgrounds, but I also suggest looking through less conventional places, like the Caption Competition, Background Bonanza, game images, TCG cards, shops, and plots. Dr. Sloth's Image Emporium is a great site for finding images as well.





Scaling & Sharpening

After pasting your image into GIMP, you will likely have to change its size. Go to the drop down menu under 'image' and select 'scale image.' Then adjust the width and height values. You may also take this moment to delete parts of your image so that it is 88 x 31 pixels, the standard size of a button.

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.







Scanlines, Colors, & Textures

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 change the opacity, which can be adjusted right beneath the mode.

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.

Part 2: The Border

Selection

After you are done with the image, you can add a border. You may create your own or use the ones below. (Note: credit is appreciated but not required!)

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?







Outer Border

Begin by creating a transparent layer on top of your image and pasting your border on top. Then 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.

Play around with the opacity too. Some borders look better if the opacity's value is lowered.







Inner Border

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, make sure that the pixels of the inner border don't touch, as is shown below. 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 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.

Part 3: The Text

Selection

Now we'll move on to one of the most important parts of a button: the text! I suggest using 04b03 (capitalized and with a size of 8px) at first. Other fonts that I like are below. Most computers do not have these installed, so you need to download then. How do you do this? You'll have to look off-site. Once you've downloaded a font, go to 'start,' 'control panel,' 'appearance and themes,' and 'fonts.' Drag the downloaded font into the fonts folder. (Note: This is what works for me. Other computers may work differently).


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.







Border

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. Right click on your text layer and select 'alpha to selection.' Go to the drop down menu under select, and choose 'grow.' 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 (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!







Stripe

Something you can do to make your text stand out more is create a stripe. There are different ways to do this, but I will show you what I think is best. Start off by creating text with a white border, as is shown to the right.

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).

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







Fading One by One

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à!







Glow

This 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 four 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 (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.







Inner Glow

The concept from the last section can be transferred to make this easy animation.

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.







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







Appear

This animation is even easier than the last one, even though the concept is similar. Once again, create four layers of your button. The first two layers and the last layer 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!







Hearts

Yet another alternative is to make a few pixel hearts and have them appear onto your button. How cute!





Sparkle

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.

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!







Stars

You may also combine sparkles for a starry effect. Create some sparkles at a few spots, create more sparkles in different spots, and you should end up with an animation that is similar to the one you see to the right of this text.





Spinning Sparkle

If you wish for your sparkles to spin, follow the same steps as for a regular sparkle, just use the example below.







Shine

To make the shine animation, begin by creating a transparent layer on top of your image. Select the blend tool and change its gradient to 'Flare Rays Radial 1.' Then drag your cursor across part of the transparent layer - the longer the line, the thicker your animation will be.

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.

Successes

Did you find this tutorial helpful? If so, neomail me so I can display the button you've made here!

Sitely

Link Back?


(Help, borders, etc.) from Impulse's Tutorial




Listers

Akakosui's Directory | Alliecat's Directory | Clockwork Directory | Dragon's Lair | Masked | Plethora | Lacuna Directory | Smiley Central | The Shelf



Credit

CSS by Mellie.
PNG & textures in the banner from Details.
Neomail sign & bullets from Bedazzled.
Dividers from The Lunch Box.

Counter started on July 27, 2011.



Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions