I went through a phase when I was trying to create some nice looking buttons using Photoshop and spent some time looking for a decent tutorial that was easy to follow. I thought I found one or two but when running through them I'd hit a dead end, mainly because what I should have seen on the screen never appeared. Another thing I didn't like in some tutorials was having to flatten or rasterize layers to carry on - I like to be able and go back and change things if I need to. Please don't be daunted by the length of this guide as I've done my best where possible to explain everything in as much detail I can without throwing too much information at you. I'm presuming you've got the basic knowledge of Photoshop.
After starting a comprehensive on-line scan of my PC (www.nanoscan.com) I noticed their nice green buttons and thought of a way to recreate them. Not only have I written this tutorial, which I hope everyone will be able to follow) but I've attached the PSD file used to create the above "DarksideRG" button...
Ingredients
Adobe Photoshop CS2 (some support for earlier versions)
Preparations
First you need to decide how big you want your button. There's two ways you can go about this and that's having each button dynamic in size to the text or have the buttons all uniform in size. Having independently sized buttons means more work as you've got to follow each step for each button. Having one size button for all the text means you only have to change the text.
Constant Width
1. List all the text you want to appear on your buttons and find the longest
2. Create a new document a little wider and taller than your text - your button needs to surround everything
3. Make a note of the size of this document as we'll need this info for later (for example purposes we'll use 150x26)
Variable Width
Follow the above procedure for constant width bearing in mind that you want to keep the surrounding edges of the text constant to help keep everything looking like it fits. Buttons all odd sizes with text all over the place (eg. misaligned) can look awful. Put differently, if on one button you have a 10 pixel gap on either side of the text then make a 10 pixel gap on all buttons.
Method
We've got our new document open and it's an empty 150x26 box. Looks pretty small so let's zoom in. Hold down CTRL and press + to zoom in as far as possible while keeping the entire document visible. On my PC I can zoom in 700% but this will be different depending on what resolution you're running and how Photoshop is set up.
The Subtle Border
First we'll create the border of the button by using the "Rounded Rectangle Tool" (press U to cycle through the rectangle tools). Start in the very top left and drag down to the bottom right as far as you can go - this is important to get this right otherwise the button may appear lop-sided. Once made you can change the color of it at any time by double clicking the colored rectangle in the layers window. Make sure this rectangle is solid with no blending options set. I've used 008800 which is a mid green.
Adding The Guides
Now we'll create the inside of the button and before we can make this we need to add 4 guides (View>New Guide) and position them like this:
* Left: 1px, Vertical
* Top: 1px, Horizontal
* Right: 149px, Vertical
* Bottom: 25px, Horizontal
Note that we've gone one pixel short for the right and bottom guides. Now make sure you're locking to these guides:
* View>Snap To>Guides (ticked)
* View>Snap (ticked)
The Button Itself
Now, using the "Rounded Rectangle Tool" again, draw another this time at the boundaries of the guides. This second rectangle needs to be white (ffffff) so you can match the colors easily we'll add with a gradient.
You should now have in your document 4 guides and two rounded rectangles although it'll look like you've got 4 guides and an outline to a rounded rectangle. Next is a gradient to give it that 3D look. If you right click the second rectangle in the layers window you'll see "Blending Options" in the context menu - select it to open the blending options window and make sure "Gradient Overlay" is ticked. Unless you want to get fancy you don't have to change any other settings or play with any settings for the gradient except changing the palette and possibly the way the gradient fades from one color to the other.
Changing The Button Colors
To change the colors click the image of the gradient itself where it says "Gradient:" and the gradient editor will open. Just below the centre you'll see a sample of your gradient with four grips, two above and two below either end - don't move any of them as all four need to be at the very end of the gradient and leave the top two alone - we're going to be changing the bottom two.
Click the bottom-left grip to activate it and click the color box that is underneath it - this opens the palette editor where you can select the base color. I've used mid green again (008800). Now click right bottom-right grip and change the color of that. Using an almost white color will give a good sheen to the button and I've gone for e4fce1.
Notice the small hollow black diamond between the bottom two grips? I've dragged this slightly to the right so my sheen appears mainly in the upper part of the button for that extra touch.
Adding Text
Now we can add the text. Make sure the top-most layer is selected and create a new layer (Layer>New>Layer) and keep it empty.
Select the "Horizontal Type Tool" (T to cycle) and first check your font size isn't too large - change to something like 18 as changing this after typing large text can be tricky to rectify. You can also select your font and the color you want your text to appear in. Click in your document and add your text.
Centre The Text
To centre the text nicely we first need to select the background layer in the layers window. Next hold down CTRL and click the text layer - both layers should now be selected. If you're using CS or earlier select the bottom layer and click the icon to lock the layers together.
Now with the "Move Tool" (V) selected you'll see the settings panel below the menus have changed - click "Align vertical centers" and "Align horizontal centers" and your text should now be nicely centred. If you hover the mouse over the buttons along the top you'll get the tool-tip text appear on your mouse pointer.
Creating a Button Group
This is primarily to make it easy to drag the button onto existing documents without having to copy and paste everything. First click the text layer. This should be the top-most layer. Next, hold down SHIFT and click the bottom layer (not the background!) and all layers we've created should now be selected. Now we create a new group comprising of these 3 layers (Layer>New>Group From Layers)
Almost Finished
At this point if you haven't saved it I recommend you do because we're pretty much finished although I recommend saving regularly as you go just to be safe.
Depending on where you want to put your buttons you may want to change the background which shows up on each corner. This is amazingly simple yet can make all the difference especially when matching it exactly with your website. Notice the background of my button image at the top of this guide is the same as the forum.
Select the background layer ("Background" in the layers window should be in italics) and create a new solid layer (Layer>New Fill Layer>Solid Color) then simply select the color you want to use and OK it.
Job done!
If you want to make a second button for a rollover effect just change something to highlight it like the "subtle border", text attributes (color, bold?) or even the button color itself. The great thing with this guide is that you can change all the colors at any time should your site design change.
I understand this guide isn't going to be perfect and someone somewhere will have difficulties following it. If you are one of these people then don't worry, you certainly won't be alone. Just post a question and I'll help wherever I can!
Here's an example I made adding a couple text effects...
For The More Adventurous
If you split the button into three files (two ends and a short middle) you can create dynamic buttons that'll adjust how you need them. Just don't add the text and your text effects for a rollover could be handles via HTML/CSS.
