Photoshop Lesson 6

How to Create Web Buttons

Objective: To create one or more simple buttons to be used on the web for linking in a web page.

1. Start a new file with a size of 150 X 35 pixels.
   You can make it smaller if you like
2. On the Layers palette, double click "Background" to make it a regular layer.
3. Change the Foreground color by clicking the "Set Foreground Color" button on the toolbar.
4. Then fill entire canvas by clicking on the Paint Bucket tool or by pressing ALT-Backspace.
5. To create button effect:
   • Click on Layer 0 (from the Layers palette)
   • Choose LAYERS/Layer Style/Bevel & Emboss
   • For Style, choose Inner Bevel 
     If necessary, change the Size and the Soften options
6. Choose the Text tool. Change the text color. Then type your text.
   Text size will probably be between 10 & 16pt, depending on your font.
7. To align text horizonatally and vertically,
• Simply eyeball it.
• Resize and move as necessary until the text and button look even .
8. Save your file twice:
   - once as a photoshop file
   - then again as a jpeg format.

To create the remaining buttons:
- type some new text
- save again as a new jpg file

Extra Information Only For CSCI-114, Fall 2012

In the end, you will have 5 buttons, labeled as shown below.

To submit them as your Test#2, upload all buttons to OAKS under the Dropbox called "Test #2"

The deadline is Friday, Nov. 16, 2012 by the end of your class period.