How to Make Buttons in Photoshop CS3
Photoshop CS3, while not the latest version of the well known Adobe product, is still a versatile and useful graphics program with a number of features for editing photos, creating animations or even working with 3D objects. But one of the most common uses for the program is in creating graphics for Web pages. In particular, you can use Photoshop CS3 to make the navigation buttons for your website. The advantage of making your own buttons rather than using generic ones you purchase or create in a Web page editor is that you get to apply the tools of Photoshop to make one particular to you.
Instructions
-
-
1
Open Photoshop. Select "File" from the menu and choose "New." In the dialog that appears, enter the pixel width and height that you want for your button. Set the "Background Contents" to "Transparent." Name the document "Button 1" and click "OK."
-
2
Select the "Round Rectangle" tool from the "Shape" tools in the toolbar. In the options at the top, set the mode to "Shape Layers" and choose the color you want for the button. Also set the radius you want for the corners.
-
-
3
Hold down the left mouse key and draw the button shape on the canvas.
-
4
Go to the bottom of the "Layers" palette and click on the "FX" button. From the listed options, choose "Blending Options." A new dialog will open.
-
5
Click on "Bevel and Emboss." Change the "Style" to "Inner Bevel." Adjust the "Depth" to about 250.
-
6
Click on "Textures." Click on the drop down arrow next to "Pattern." Then choose a pattern you would like to apply to your button. You can click on the other drop-down menu to append more textures to choose from. You want to use a subtle effect, so adjust the "Depth" and "Scale." Click "OK."
-
7
Select the "Type" tool from the top and choose font style, size and color you want for your button. Then draw a text box in the middle of the button and type in your text.
-
8
Select "File" from the menu and choose "Save for Web or Devices." In the dialog that appears, make the file type GIF and save your work.
-
1
References
- Photo Credit web site buttons image by Ruslana Stovner from Fotolia.com