Add Labels to Blank Buttons - Digital Art and Design

If you have purchased a web graphics webset from the popular DIY web site builders, you will get a set of buttons to use for your online store. These buttons are already labeled with names for common buttons such as Home, Shopping Cart and etc. However, each store is different in what products are sold and you may wish to make more product and header buttons for yourself. This tutorial will show you how easy it is to do this in Photoshop^R CS4.

Open Photoshop.
The images folder is where you will find all the graphics in the webset for your new store. You will also find a blank button that has no name or label. If you are using one of my websets from DIYeStores, this graphic for the blank button is called "button.psd" and for the blank header it is called "blankheader.psd".
Click File – Open and double-click on the button.psd file to open it into the workspace. You will also want to click on the Home button (homebtn.gif). We will use this as a guide.
If you want the text font to match the other buttons in the webset, check the email that you received with the webset. In the Graphics Folder section of this email you will see information about what fonts were used to create the buttons.

Button font name is Arial
Button font style is Regular
Button font size is 18
Button font alignment is centered
Button font color is 000000
Select the Horizontal Type tool from the Tools panel (looks like a T). First we need to format the text. Formatting text in Photoshop is very similar to Microsoft^R Word. We will want to set the font name, style, size, alignment and color. At the top of the workspace is the Options Bar that has some controls that we will use for making these choices.
Click on the button in the center or left side, depending on the type of alignment used for your original button. Use the homebtn.gif button as a guide. You will get a blinking cursor.
The first drop-down list in the Options Bar is the font list. When you click on the small downward arrow, you get a preview list of fonts. Choose the font that you need.
The second drop-down list in the Options Bar gives you your style choices. Depending on the font that you have chosen, you might have several choices including Regular, Italic, Bold and Bold Italic. Choose the one you need.
With the next drop-down list, set the size of the text.
Now set the alignment of the text. You will see three small icons representing Left, Center and Right alignment. Click on the icon you need.
The last thing that we need to do is to choose a color for our text. Click on the color square next to the alignment icons to open the Select Text Color dialog box. Type the color code into the box and click OK.
Now type the name for your new button onto the blank button.psd.
From the Options Bar, click the Checkmark to save your text on the button.

Now we will save the file in a format that is ready for the web.
From the Menubar, click File – Save for Web and Devices. Set the Preset drop-down menu to GIF and click Save. You will want to give your new graphic file a name. I usually use the name of the button. For example, if the name we put on the button was "candles" than I would name the file "candles". This will give you a file named candles.gif in your images folder.

To use your new button, use the directions for your website builder for uploading and adding it to your store.

Join us in the Digital Art and Design forum.