Info:

This is nothing special. It is aimed at beginners. So if you're a newbie in the graphics world and you'd like to know how to make some basic menu buttons, you came to the right place! If you're an intermediate/advanced user, you're going to find this tutorial boring and useless. Go do something else. xP I made this in Paint Shop Pro, but the steps should be pretty similar in other programs.

1. Download and install a bitmap/pixel font. I'll be using Imagine Font for this tutorial.

2. Open up a new image, 1x11 pixels in size. The height may be different if you are using a different font. The image height should be the height of your font + 6. So if you're using a font that is 7 pixels tall, your new image should be 13 pixels and so on.

3. Use your pencil tool to put a black (or whatever border color you so desire) dot in the top and bottom pixels of the image. Fill the area between them with the gradient you want to use for the background of your buttons.


4. Open up a new image, 110x11 pixels (again, the height may be different if you chose a different font; the height should be the same we used for our last image). Select your fill tool. Go into your patterns and find the previous image. Select and fill the new image with it.


5. Alright, now edit the right corners to look like one of the following, depending on the kind of button you want, with your pencil/eraser tool(s):

Leave the left corners alone for the moment.

6. Add text! Home, New Topics, Help, Search, Members, Admin, Profile, Logout, Login, and Register are the main menu buttons of a basic Proboards skin.

7. Move your text so that it's only 4 pixels to the right. Now crop so that you have 4 pixels of space on both sides of your text.


8. Add your left corners the same way you did your right (only, y'know, reverse).

9. Save as a .png or .gif and voila!

10. Jazz hands! (Because 9 is an uneven number and I'm plagued with mild OCD. >.>)


Notes:

+Here's some other nifty pixel fonts I like:

+If your corners look off (are white/black where they're supposed to be transparent) and you saved as a .gif, chances are you exported the image inappropriately.