The reason your here, is probably to learn how to make buttons. If you're new to button making, let me give you a little introduction to their look and usefulness.

If you see above, I've linked you to my guild. Yes, that's a helpful link, but not as eye-catching as I would like it to be. I want something that makes somebody really want to visit, right? Well, let's try this instead.

Check Out Auexia!!

You know you want to click that button, go on do it, it's awesome! Isn't that much more spiffy looking than a plain old link, I'm here to teach you how to make your own!
For this tutorial I will be making a button for this page, The Button Tutorial.
Go ahead and click the link for Getting Started and we'll begin. (:

Well, the first and most important thing that you will need for making a button is what- go ahead and guess! Photoshop? Professional Art Degree? Graphics Knowledge? M4j0r 5k1ll5?
Nope! None of the above. The most important thing you need when making a button is need. If you don't really have a need for a button then you probably won't get any inspiration and it will be difficult to come up with ideas and be excited to make a button.
You can make a button to link to your guild, petpage, petlookup, userlookup, about me page, gallery- whatever you have that you'd like to show off. There's plenty of options.
Another item that you will need is a background image. This can be a Neopets image, a non-Neopets image (still Neopets appropriate!!) or a basic background. Dr. Sloth's Image Emporium from JellyNeo is a wonderful tool for finding Neopets images. I'll be using the side image of the Kaus. Here is the version I'll be using.

You'll want your image to be small so that it is visible and look good in the small parameters of your button. You can use GIMP to change the image size for larger images, but I'll explain that later.

You will also need the following to make your button. Don't worry, all these programs are free!

As you can the Animation part of this tutorial is optional. Some of my buttons I actually prefer without animation. I'll show you an example.

I feel like the animation is one too many things on this one. You don't want your button to look hectic!
An added bonus of not doing the animation is that you can keep your button transparent. You see the ugly white behind the animated one, that's one of the cons of animating buttons. (:

You want to get started? Yeah, me, too.

Once you are into paint go into Image - Attributes. Change the Width and Height of your Image to 88 pixels wide and 31 pixels high. This is the standard size for a button, like the ones we will be making. (:

Once you have the proper size background you can start making your template. This will be the shape of your button. There many possibilities for your template. You can make a basic rectangle, an oval template or any number of off the wall shapes. For this tutorial I'll be doing a rectangle with a few cut out shapes. Let me show you what I mean.

I used the rectangle creator to do an outline of the 88x31 background, and then made three equal circles with the circle tool. With buttons, it is usually best to use the smallest lines and paint available so that you don't take up too much space. Remember 88x31 pixels isn't very much space.
And incredibly important right now is- SAVE SAVE SAVE! You don't want to lose your hard work!

We want to get as much across in as little space right, so we need a little font for our title. This is where dafont comes in. Normally you'd have to download a font and install it and all this, but I am the Screenie Demon and dafont is a Screenie Demon's best friend.
The standard font for Button making is Redensek. So go to dafont and look up Redensek in the Search bar. I've already got it located, and have included the link in the Supply List for the lazy among us. (;

You can drag and drop this image into your address bar for a better quality preview.

For my title, I'll put 'THE BUTTON TUTORIAL' into the preview section. You can do Caps, lowercase or a mixture. I prefer using all caps since I've got an R and an I by each other. X is the most difficult letter to see/use in Redensek, but it's a necessary curse. (:
Once you've got your preview, print screen it and paste it into paint.
To Print Screen look on your keyboard, there should be a button in the upper right that says "Prt Scr" or some variation of the words "Print Screen." Press that and then go into a new open Paint tab.

Once you have it pasted, you are going to want to select the smaller preview of text with the rectangle cut tool. You can either copy and paste the text or cut and paste it, either is fine. Paste the text into a new Paint Tab. Make sure to delete old tabs that are no longer needed so that your dash isn't too cluttered. (:
For this next part I usually zoom in 8x, because it's easier to work on a smaller level, since we'll be painting each pixel individually.

We've got the basic text, but as you can see there is a problem. The basic text alone is 108px wide. We need to get it down to 80 at the very most. What we'll do is stack them!

Much better. It all fits in the 88x31 parameters. If your text won't fit, then you should shorten it or do a different title. You've got to leave at least two or three pixels around the letters because we'll be outlining them to make them stand out again our background and be readable. (:
This is the pixel-by-pixel part I was talking about earlier. You want to color all the spaces that directly touch the letters with a bright color. I usually choose Red.

As you can see, you don't paint the corner touching pixels. Right now, the red doesn't look very good, but we're going to fix it up in a minute. (: Take the bucket fill tool and fill the background with another bright color, lime green for example. Make sure you get all the white, this is important.
Depending on the type of button you might want a black font with white outline or a white font with black outline. I use the black font with white outline when the text is going to be fully inside the button, or mostly inside the button, so that the text will stand out more from the background. When the text is going to be outside the button or mostly outside the button I use a white font with black outline. Here are examples of each-

-

Do you see how the text stand out on each button, because of the alternate coloring?
Because I'm doing the button I'm using will have the text completely inside the button I will be using a black font with white outline.
If you want to do a white font with black outline simply press Ctrl+I in your open Paint -blocked- This will invert the colors and make your font white.

Now what you need to do is choose the color opposite your font (black outline for a white font- white outline for a black font) and change the outlining color.

You have to leave the bright background colors for later use.

But now, you're done using paint. Leave open the paint tabs though. At this time you should have your template and font Paint Windows open. Any other windows can be closed out. Once again, go through and save your template and font images just in case!!

Now, let's move on to our GIMP section!

When you first open GIMP there will be a start up window, this might take a minute or two the first couple times because your computer might not be used to GIMP yet. Let it work it's magic while you read through my long intro to GIMP. (:
When GIMP finally opens there will be the main window and a toolbox. First rule of GIMP
Never, ever, ever. NEVER. X out of the toolbox.
I mean, you can, but it gets rid of all your unsaved work. So as a general rule, I never Close out of the toolbox.

What I want you to do next is take a few minutes (5-15) to familiarize yourself with GIMP. Get to know each other. Press buttons just to see what happens. To do this go to File - New and Make a 500 x 500 image. Then just color on it. Use the paint brush, patterns, color changers, etc. Have fun with it.
The main buttons I want you to learn are-

Once you're done familiarizing yourself with the above tools I want you to go to the Paint Window that has your Template. Go to Edit - Select All and then Copy.
Once you've got the Template Copied, go into GIMP and go to File- Create- From Clipboard.
This will bring your template into GIMP for editing.

I always maximize the window so that I can work without distractions. (:
Remember how I said earlier to have a picture you want to use as a background- Neopets, non-Neo (but once again, still Neopets appropriate!!), or just a plain background. I'll be using

this image. Copy the image you want to use, and do the same as you did with your Template. File- Create- From Clipboard. This will open a separate GIMP window for your image.
If you think the size is good for your button then skip this next part. If the size is too large, (above 300px overall) then you'll want to scale it down some.
In GIMP press Image in the toolbar up top and then go to Scale Image.

Scale the image down some, to about 200px. If it looks too pixelated and grainy then undo the scale (Ctrl+Z) and try a slightly larger px size. Get it to the size you want, or choose a different image, whichever you want to do.

Once you've gotten the image to the proper size go to File- New, and create a separate 88x31 image. Yep, lots of windows open at this point. If they start grouping that's fine. Just double check which window you are in before you do any editing.
Once the new 88x31 image is made, go back to your background image. Now go to Edit- Copy Visible. Skip over to your blank 88x31 image (not the template!) and go to Edit- Paste.

The image you've just pasted will be larger than the main image. That's good. Select the Move tool (pictured below) and drag the image around the 88x31 background until you have a visible image that you want for your button.

Once you've got an image you like, go into the Layer button on the toolbar. You'll see a selection called Anchor Layer, select it. Now your image is 88x31 with the background you like. Woot!!

Now I want you to leave the background for a moment and go to the GIMP window that has your template. Remember the Fuzzy Select tool I told you to learn earlier, we'll be using that in this section. First though, I want you to make the image transparent!!!

Le. GASP!! That, lyke, takes M4j0r 5k1llzz! False! It takes a few clicks of your mouse! Go to Layer- Transparency- Add Alpha Channel!

Now your image is almost transparent. It has the ability to be transparent. Want to know the extremely difficult part to actually make it transparent?
I don't know if you can handle it...
Press the fuzzy select tool (it looks like a wand)! Now press the part of the image you want to be your background. Once it's selected (surrounded by blinking dashed lines) press Delete!

I'd always thought that making images transparent was way too difficult for me to even attempt, but it's actually very easy. The grey blocks are called an Alpha Channel, they are what shows up for the transparent parts of your image. As you can see. The majority of my template is now blocks, rather icky and non-button looking, yeah. Well, thankfully we don't stop yet. Go To Edit- Copy Visible and then Go to the 88x31 background we made earlier, remember.
Once you're at the background go to Edit- Paste.

It looks much spiffier with a background, right! Now it's starting to look like a button! What's left to add? Oh, right, our text. You've still got that Paint Window with your text open right? If not open it back up and continue. You've still got that bright color as it's background, so this next part is gonna be easy. While you're in Paint press Edit- Select All and then Edit- Copy. Now go to any of your GIMP windows and press File- Create- From Clipboard.

It opened right up for you, awesome! Now here is where we'll use the Color Select, which is a really fun and useful tool. First, I want you to make an Alpha Channel again for the GIMP with your text. Remember how to do that one, Layer- Transparency- Add Alpha Channel.
Since there are letters, and some of the letters have holes in them where the bright color peeks through we won't use the Fuzzy Select tool, too time consuming. Instead, we're going to use color Select. This is why we chose to keep the bright color. From the tool box, pick the Color Select Tool then choose the bright background color on your text.

Once again, we'll press Delete on our Keyboards. And voila! Our text is has a transparent background! Before we can transfer it to our button we have to press Select- All. This way we aren't copying the transparency. Now do the basic Edit- Copy Visible. And switch to your button with background and press Edit- Paste.

Feel free to move your text around if you want it in a different location than the computer automatically puts it. I'm going to leave mine where it is. To anchor it go to Layor- Anchor Layer. There you go!
If there are cutouts in your button that you want to make transparent do that now by using the Fuzzy Select Tool, like I will. Make sure you add the Alpha Channel first though, Layer- Transparency- Add Alpha Channel.

Once you're done adding any finishing touches to your button go to File- Save As.
Save the button to a place where you can easily find it, and name it something easy to recognize. You don't want to have spent all this time on a button only to lose it in a jumble of files and folders.

You MUST save the image as a PNG file. At the end of your file name type .PNG
This file type has the highest quality that Neopets allows and is the only one that works with transparency.
Before completing your save GIMP will pop up a window with settings. The default settings work well with buttons, so just press save on the pop up.

Now that our button is saved to our computer we have to upload it to the internet. As I said, I use Photobucket, but there are several other Image Upload sites that Neopets allows in their filters. Log into your Image site of choice and upload your Button.
Once it is uploaded copy the Direct Link and code the link/image where you want it. I'll post the button I made during this tutorial now.

If you want to learn some neat tricks for coding buttons and leaving the link so others can link back you can check out my 'Coding Buttons' section. I've also included a section for Animation if you want to learn how to create an Animated Button.

In this part of the tutorial I will be showing you how to Animate your button. The way I animate is by using an online gif-making site to mesh together the pieces of Animation I've made. I'll explain it in more depth, but I wanted to say beforehand that the gif-site does not recognize transparency so the backgrounds of your Animated buttons will be white. It won't make a different for the button I'll be animating today, but it will change the look of buttons like the following-

- -

This will not bother some people, but others might prefer transparency over animation. Personally, I make keep one transparent and one animated. I post both on my pages and let the person who wants to link back decide which they prefer.

When animating my buttons, I both GIMP and Paint. If you've been with me this far you should be relatively familiar with GIMP and this part shouldn't pose any problems for you.

There are many types of animation you can do. You can have single items that move, like the Hoof Animation above; you can have a few items that move together, like in Ylaxi's Animation or you can animate letters.
Some people animate their letters to flash and other animate their letters to move. The simplest animation is making your letters flash, and that's the one I'll be showing you today.

For flashing letters you'll have to color each letter individually and save it as a separate image. I number my images so that they'll stay in order when they're transfered to the gif maker.

With the gif maker you're only allowed 20 images, or frames. So think about what animation you're doing and try to judge if it will fit in 20 images or not.
For example- I have 17 letters on my Button. I have enough space to make 1 basic button, 17 frames where the letters blink individually and then a frame where the buttons blink all at once. This leaves me one extra frame, which I can use to make the end and beginning flow together smoothly.
Remember the animation will loop, so you want your beginning and ending to flow. I'll be using the 20th frame of my animation to de-light all the letters so that the end image will be the same as the beginning image. This will give extra time when the basic button is shown so that the image won't constantly be moving. This way a reader can look at the animation and then read the text clearly without being blinded by blinkie letters.
Below I'll post all the basic images before animation and then after they've been meshed together.

When you are coloring the letters individually make sure to use the pencil tool in GIMP- Opacity should be 100% and you should use Brush- Circle (01). This will make your pencil 1 pixel large and perfect for coloring in the letters.

- - -
- - -
- - -
- - -
- - -

Those are the individual frames that I've done. I saved each one as a number 00-19 in a folder called AnimatedBTButton. Now I'll go to the gif making site.
I use MakeaGif, but if you have one that you like better or know of a better one that's fine.
As I've said earlier, if you aren't subscribe to MAG they have an ugly watermark that covers up half your button. Subscribe, use a fake mail if you want. (:
When you get to the homepage press 'Add Pictures' a box will pop up. Drag your mouse to select all the images you want in your button. Then press open. It will take a minute for the site to upload them and order them. If your images are numbered they will show up in the order they are numbered. If they are not, you'll have to arrange them by hand. Now go press Continue.
You're given several options. The only one I ever change is the speed. I usually knock it down to 750ms. For this tutorial I will have all show all five options with the animation. There is also a custom setting, but I rarely use that unless I get frustrated with the Basic settings.
The speeds are in order from fastest to slowest- 100ms, 250ms, 500ms, 750ms and 1000ms.

- -
-

After the you've chosen a speed press 'create your gif'. You might have to wait a minute depending on the number of images and the speed you chose. Once it's finished, you'll be redirected to the gif page. Right click on the image and press Save As. Save it where you can easily find it, and rename it if you wish.
After that go to your desired Image Uploader Site that we used earlier, and upload the gif.

As you can see I prefer the 500ms for this particular Button.

Once you have it posted you can link it to somewhere, just let it be pretty or provide coding so that other people can take it and link back to your page.

Congratulations. You've just made an animated button!! Flaunt it, show it off. If you want to learn about coding for buttons then continue on in the tutorial, if not go ahead to The End.

If you've come this far, you ought to know how to do an image code, but I'll explain it anyways. Here is an image, and the text below is how you code it.

<img src="http://images.neopets.com/bestof/2008/sloth.gif">

When you type IMG SRC it is telling the computer where to look for the image's source. You can have a Neopets image or an image from any of the image upload sites that Neopets allows. This is the basis of coding for your button. Have your IMG SRC inside the tags and then put in the Direct URL to your button like so-

<img src="http://i62.photobucket.com/albums/h83/Mirelle_Earthshine/ButtonTutorial/BTButton500ms.gif">

Now, normally when you're making a button you'll be using it to link somewhere, that's where the A HREF coding comes in-

<a href="/~Senarei"><img src="http://i62.photobucket.com/albums/h83/Mirelle_Earthshine/ButtonTutorial/BTButton500ms.gif"></a>

A HREF tells the computer to the computer to send you to the desired URL when the image (or text) don't forget to close it with /A (:

See how that code makes the ugly border around your button. We'll add in a piece of coding to get rid of that ugly border.

<a href="/~Senarei"><img src="http://i62.photobucket.com/albums/h83/Mirelle_Earthshine/ButtonTutorial/BTButton500ms.gif" border="0"></a>

Now that we've added border equals zero, the border is no longer there. I use this on all my buttons, it makes everything look much cleaner.

Another thing I use on most of my buttons is a Hover-box (yes, I just made up that name.) Hover over this button and see what it says.

<a href="/~Senarei"><img src="http://i62.photobucket.com/albums/h83/Mirelle_Earthshine/ButtonTutorial/BTButton500ms.gif" border="0" alt="HOVER BOX"></a>

Now, another cool feature is letting people take your buttons to link back to your pages. The way to do this is to make a textarea like the ones I have above. I'll show you an example.

Link Back?
<a href="/~Senarei"><img src="http://i62.photobucket.com/albums/h83/Mirelle_Earthshine/ButtonTutorial/BTButton500ms.gif" border="0" alt="The Button Tutorial by Mirelle!"></a>

Now you can take the coding in that box and Link back to me on your userlookup, petpages, petlookups, shop, wherever. (:

Here is the code you'll need to do that.
Put textarea (in tags) in front of the code you want to give people and end it with /textarea (also in tags.)

And that's it. You're now able to make a button, make them transparent, animated, linked and all that jazz. You're awesome dude!!

Thanks to everyone who convinced me to do this. And thanks to the other Button Makers who inspirated me. (: Have fun guys!!

Link Back?
Animated
<a href="/~Senarei"><img src="http://i62.photobucket.com/albums/h83/Mirelle_Earthshine/ButtonTutorial/BTButton500ms.gif" border="0" alt="The Button Tutorial by Mirelle!"></a>

Links;;