How do I make custom buttons?

[djchaos667]

I have the adobe cs4 master collection, lots of great renders and a small amount of knowledge regarding working my new software. I would like to make custom buttons as well as post bit and other icons related to the anime theme of my forum. I've gotten pretty good at designing the basic look, color and feel of the forum skins themselves, however this has taken me better than a year to get to this point on my own. This time, rather than blunder through the trial and error of self teaching, I am hoping to get a bit of help from some people who know a bit better than myself how I can do this. Any help that could be given would be a great benefit and very much appreciated. Just a basic walk through of what to do should suffice, and if possible, checking back from time to time in case I am not entirely clear on any part of the walk through and have to ask specific questions. Thank you all for your time and consideration in this matter.

Chaos

 

[Grinderhand]

I don't know how others do it, but when I create buttons I use Fireworks and create them in .png format much larger proportionally than they will be eventually. This way I only have to make one or two buttons, either one long or one long and one short. I get them to look the way I want without text, then add the first line of text using center alignment, position the text where I want it, then duplicate that layer, turn off the first layer, edit the text of the second layer for another button, duplicate that layer, turn off the second layer, etc. until I have one file that has all the the text for all the buttons I need. I shrink the button down to the size I need and turn on one of the text layers and save out that button in the format I need, turn off that layer and turn on another, etc. until I have all the buttons I need in the format I want. Doing it from one file makes them all look alike and all the text lines up from one to the next. I tried doing the same in Photoshop, but was unhappy with the results I got when shrinking them down to the size I needed. PNG format gives better results IMHO. Hope that helps.

 

[bluescorpion]

I use Photoshop usually but in a tutorial I just got, I discovered that Fireworks is an excellent tool for "optimizing" and converting PSD images to png format. It allows you do to 2 up screen displays so you can get exactly what you want all in one fell swoop essentially. In the tutorial it took a psd image that was more than 40 megs and reduced it to an impressive 67K with very little loss in quality, or minimal I should say. Really cool stuff. I think the Photoshop may manage the "creation" of the image somewhat better and has a lot more tools but for optimizing Fireworks seems like its the way to go on the final production pass.

 

[djchaos667]

I used photoshop to make all the renders I'll be using for the buttons and other icons. Basically I am hoping to make buttons similar to these ones, however when I try creating a vector for the button in fireworks I just get the basic box, which I can use to make the text part of the button however I can't seem to work out how to add the image to it. Any ideas or advise?