Where can I find...

[jig]

Where can I find forum buttons? With dark colors, or colors that would work for a vampire roleplay forum.

Is there some simple post like the code datebase post where I could find these?

[alterheld]

as a matter of fact there's the Premade Graphics Database, over in the Graphic Design Requests Board. Not sure if they have the kind of buttons you're looking for - if not, you could always post a request in the Graphics Design Requests board.

[jig]

Alright. I'm thinking I might just end up giving a shot at making my own.

[Former Member]

Are you talking about menu buttons? I just made a menu button tutorial the other day for a design forum I'm on. I could post/PM it if you wanted.

I have a few menu button sets lying on a USB drive around here somewhere, too. I might check for some darker sets.

EDIT: I have a dark red and dark grey set. I thought I had a dark green around here somewhere, too, but I'm not seeing it. What colors were you looking for?


-Chani

[jig]

looking for a more dark gray and black set. I'd show you the board but it's on maintenance so here's a screenshot instead,
i55.tinypic.com/20jpxkj.jpg
But I am interested in that menu button tutorial you made since I kinda would like the forum to have it's own graphics. I just never made menu buttons before.

[Former Member]

The dark grey set I have is still a little light for that particular skin. I'll just post up the tutorial.


-Chani

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 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 select the other image we just made 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! Here's a list of all the buttons you'll need for a basic Proboards skin:

Home
New Topics
Help
Search
Members
Admin
Profile
Logout
Login
Register
Inbox
Outbox
New Message
Delete All
Mark As Read
Preferences
Backup Messages
New Thread
Add Poll
New Poll
Reply
Share
Print
Quote
Modify
Delete
Bookmark
Remove Bookmark
New Event
View All Events
Search
View Poll Voters
Make Announcement
Remove To Announcement
Delete Post
Report Inbox

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:
I didn't see one up yet, so I thought I'd write this up real quick. I use Paint Shop Pro, but the steps should be almost identical in other programs. There may be easier ways to do this, but this is currently how I do things. If you have any suggestions, le'me know! I'll get around to posting a couple different other styles soon.

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