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.

When you purchased your webset, you were sent a zip file which contains a folder named images. 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". You will also have a file named Readme.txt. In this file, you have information for the font text that was used on your button.

1. Open Photoshop.
   
   
2. Click File – Open and browse to the button.psd file to open it into the workspace. You will also want to open the Home button (homebtn.gif). We will use this as a guide.
   
   
3. If you want the text font to match the other buttons in the webset, check the email that you received with the webset. At the bottom of this email you will see information about what fonts were used to create the buttons. For example:
   
   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
   Duplicate text layer - Yes or No
   
   
4. 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.
   
   
5. 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.
   
   
6. 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.
   
   
7. 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.
   
   
8. With the next drop-down list, set the size of the text.
   
   
9. The next drop-down list is for the anti-aliasing setting. Set this to None, Sharp, Crisp, Strong or Smooth. Choose the one you need.
   
   
10. 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.
    
    
11. 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.
    
    
12. Now type the label for your new button onto the blank button.psd.
    
    
13. From the Options Bar, click the Checkmark to save your text on the button.
    
    
14. If your button information has a Yes for Duplicate text layer, you will want to add another layer of text. This is usually to make the text a little darker. From the Layers panel, right-click on the text layer and choose Duplicate Layer. This will give you a second text layer on top of the first.
    
    
15. Now we will save the file in a format that is ready for the web.
    
    
16. 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.
    
    
17. To use your new button, use the directions for your website builder for uploading and adding it to your store. If you are a DIYeStores customer, you will want to use the upload form in the Picture Utilities section. Log into your store account and click File & Picture Utilities - Product Pictures.
    
    

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.