How to Create a Website Button With Photoshop CS3
Adobe Photoshop CS3
Other People Are Reading
Things You'll Need
- Adding well-designed buttons to a webpage can be a great way to entice users to continue navigating within the website. Starting in childhood, most people are taught to press buttons; therefore, buttons have become a standard for webpage navigation. Using Adobe Photoshop CS3, you can quickly create a button image for a website that can be saved for the web directly from Photoshop. The layer styles provide opportunities to create fancy and elegant buttons that will attract the website users' attention.
Instructions
-
-
1
Open Photoshop CS3. Select "File>New." Set the dimensions for the size of the button; for example, enter "200" in the "Width" box and "50" in the "Height" box for a button that is 200 pixels by 50 pixels.
-
2
Draw the button. Select the "Rounded Rectangle" tool from the "Tools" menu. Change the radius as desired to determine how the corners of the button look. Select the desired color for the button from the "Foreground" color picker. Then draw the button.
-
-
3
Style the button. Select "Layer>Layer Style>Blending Options." Apply styles as desired. Make sure that "Preview" is selected to see how the button will look. For a typical button effect, select "Bevel and Emboss" and "Gradient Overlay." Adjust each style as needed.
-
4
Add Text. Select the "Type" tool from the "Tools" palette. Select the desired font and font size from the drop-down menus. Select the desired text color from the the "Foreground" color picker. Click on the button and type the button label. Apply layer styles to the text as desired.
-
5
Save the button. Select "File>Save for Web & Device." Save the button in the webpage's image folder.
-
1
Tips & Warnings
Photoshop CS3 has included some button styles within the "Styles" palette. After drawing the button, select "Buttons" from the submenu in the "Styles" palette. Click on the desired style to apply a predesigned button.
