Lesson 2: Creating Navigation Buttons

Overview:

In this lesson you design the buttons which will serve as links to the major sections of your web site.

Learner Outcomes:

At the completion of this exercise, you will be able to:

  1. Use PhotoShop to make a basic shape and fill it with color.
  2. Select complementary colors.
  3. Use layer effects to create a 3-D effect.
  4. Use gradients to create a 3-D effect.
  5. Create and align text layers.
  6. Read and watch an automated tutorial and be able to apply the skills demonstrated.

Activities

  1. Preview the evaluation rubric that describes in specific terms what successful completion of this assignment looks like.
  2. Follow this link to a button creation tutorial. Have PhotoShop open along with the tutorial. Use the controls at the bottom of the tutorial window to pause at each step and apply what you learn.
  3. Make at least five of your own buttons all of the same size, shape (round, oval, rectangle or whatever) and colors.
  4. As for the color of the buttons, chose colors that are complementary to the color theme of your personal web site.
  5. Incorporate both the bevel and gradient effects.
  6. Add text to label each button. Make the text ornate, so it contributes to the aesthetic of the button. Consider using the Transform function to change the angle of the text.
  7. Incorporate something you learned from at least one other tutorial at Webmasterbase.com.
  8. Resize the button and save for the web.

Resources/Online documents

All done?

Review the evaluation rubric.