Last Updated on Sunday, 03 May 2009 01:06 Written by Laurine Virgilli Sunday, 03 May 2009 00:58

In Photoshop create a new document using File > New. Set the size of the button. In this example 120 x 25 pixels. Resolution for web is 72 dpi.

Zoom in to 400% by clicking 3 times Ctrl together with +. Select the Rounded Rectangle tool from the tools bar.

In the Option bar make sure that the first icon is selected (Shape layer). Type a Radius of 10 pixels. Select a dark red by clicking the color box.

Click exactly on the top left corner of your artwork and drag your mouse all the way to the bottom right corner. The red Rounder Rectangle should appear when the mouse button is released. In the Layers palette you should see a shape layer above you Background. Click and drag your Background in the small trash bin at the bottom of the Layers palette. You can skip this step if you have selected Background Transparent when created the new document.

Now it is time to add some effects. From the menu Layer select Layer Style > Bevel and Emboss. A nice bevel effect can be created by un-checking the Global Light for Shading and setting the Altitude value to 70º. Note that to be able to edit style settings, must click the correspondent word. Clicking just the checkbox won’t display the style settings.

Add other effects as a white Inner glow. Also add a Inner shadow. This one may look nicer if you set the light angle from bottom right. In the example -66º. Remember to un-check  Global Lighting every time you change a specific style, unless your intention is to change the light for all the layers in the document.

Let’s add some text to the button. Create a new empty layer using Layer > New > Layer. Rename the new layer “Home”. A new layer has been added above the button. Select the Text tool in the Tool Bar and click into the artwork. Type “HOME” and press Enter on your numeric pad (NOTE: do not press Return in the main keyboard).
Go to Window > Character. Set color white by clicking the small color box. Set size 14. Go to Window > Paragraph and set the alignment to Center text.
To move the text in the middle of the artwork, select the Move tool (the first tool on the top, the black arrow) in the Tool Bar. Your text should snap in the middle of the artwork. If it does not, make sure that Window > Snap is enabled.

While the Home layer is still selected, go to Layer > New > Layer via copy (shortcut Ctrl+J). That is how you can quickly duplicate a layer. In the stack of layers, you should see Home Copy on top. With the Move tool still active, double click the correspondent thumbnail (it displays a letter T) and type ABOUT. Press again Enter on the numeric pad to commit the text. You should see ABOUT overlapped to HOME. In order to temporary hide a layer, click on the correspondent Eye that indicates the visibility.

You can add as many labels as you need. To rename a layer, double click the name of the layer in the Layers panel. Try to be accurate when do this. If you double click just outside the layer’s name, the Styles window will open instead. You can also decide to apply a small Drop Shadow style to the text. Once in a while, remember to save your work as PSD file. The advantage of PSD is that layers are preserved. JPEG files instead, do not support multi-layers. Once that all the labels that you need are prepared, get ready to export them.
Hide all the layers except the first on top and the “Shape 1″ layer. Go to File > Save for Web and Devices.

From the right panel of the File > Save for Web and Devices window select the format GIF or PNG. These two formats are quite similar. They count the number of colors to save. In this case 128 can be enough. The maximum number available is 256. The major advantage of using GIF or PNG is that both support transparency. Make sure that the Transparency check box is selected, so that the round corners will not have any matte fill around.
Repeat this step as many times as the layers created.

A button have normally three status: Up, Over and Down. Up is the normal status of the button when appears in the web site. Over is the status displayed when the mouse cursor moves on it. Down is the appearance when the button is clicked. The file that you just saved should be named after the Up status of the button. Again, remember to not use capital letters and spaces. A good way name a Up button is: bn_home_up.gif, bn_contacts_up.gif, bn_products_up.gif, and so on.
To change the color for the Over status, double click the “Shape 1″ color thumbnail in the layers palette. For up status can be a good idea to select a color slightly brighter.

Repeat the exporting part for all the text layers, so you will have files named as: bn_home_over.gif, bn_contacts_over.gif, bn_products_over.gif, and so on. You can double click one more time the “Shape 1″ color thumbnail in the layers palette and select a darker color. Repeat the exporting part for all the text layers, so you will have files named as: bn_home_down.gif, bn_contacts_down.gif, bn_products_down.gif, and so on.

TrackBack URI for this entry

Comments (0)

Subscribe to this comment's feed

Name

Email

Website

Title

Comment

smaller | bigger

Subscribe via email (registered users only)

I have read and agree to the Terms of Usage.

Write the displayed characters

Add Comment