Creating a button using Photoshop CS 3 (09/08/08)

1. The File menu, New dialogue box here shown making a 300 pixel by 75 pixel Photoshop canvas. The buttons do NOT have to be 100 pixels by 50 pixels.

2. What color for your button: Photoshop Toolbar, Alt+Backspace, Ctrl + +, Ctrl + -, Foreground color, etc.

3. Color Chooser: Picking the Color is a really fun challenge.

4. Making a new Channel: The Channel will be named Alpha 1 by default. This is different from older versions of Photoshop. Note: Ignore the Eyedropper tool until it is explained in class.

    

   What do you do with the new Channel named Alpha 1
   1. Click on the default Foreground and Background color icons for the Alpha 1 channel. Remember, the world is REVERSED here, so this alpha channel will have White as the foreground color and black as the background color after you click on DEFAULT colors icon.
   2. Use the Alt + Backspace technique to "Paint" the entire Alpha 1 canvas WHITE (paint with the foreground color). It should change from Black to White.
   3. Select menu, All command will select the entire canvas of the channel.
   4. Choose a light gray color from the Foreground color selector. Note: You can do this within the Edit menu, Stroke dialogue box instead, if you like.
   5. Edit menu, Stroke command. Width = 8, Color = light gray, Location = Inside are the settings. Click OK and the entire button canvas will have an 8 pixel wide light gray boundary area.
   6. Repeat the above two steps with Width = 6, Width = 4 and Width = 2 but each time the gray will be DARKER than the time before.
   7. Now, you need to click on the RGB top level layer in the Channels group so the Alpha 1 layer is deselected. You should see the color again on the canvas. There are 5 layers to choose from: RGB, Red, Green, Blue and Alpha 1 are the names.
   8. Switch to the Layers tab instead of the Channels tab. Click on Background, which is the name of the only layer in your Layers group.
   9. Render unto Caesar. Julius Caesar. Filter menu, Render..., Lighting Effects is the command you want to do now.
   10. Here is what that Lighting Effects dialogue box will look like AFTER you choose the Alpha 1 channel.
   11. Look at these making a button using Photoshop instructions carefully and you should be able to do everything except for the CAPTION on the button. The Caption is UNI Panthers! or OK or My Hobbbies or whatever text you like. That will be covered in class on Wednesday. Text techniques MAY be covered on this web page BEFORE Wednesday, if I get time.
   12. To be continued... ...

• Here is an older version of these making a button using Photoshop instructions. Probably late 1990s or thereabouts!
• Here is the older version of adding a Caption (Text) to the command button. This one is more out of date, as Photoshop has changed more dramatically regarding the text tool functioning.