Tutorial:
Creating Simple Rectangular Buttons in
Photoshop Elements

Part One: Creating the initial buttons in Photoshop

• open Photoshop Elements
• select file>new> blank file
• Fill in these parameters
  • Name: extracurricular_up
  • Width: 100 pixels
  • Height: 22 pixels
  • Resolution 72 pixels/inch
  • Color Mode: RGB
  • Background Contents: Transparent
  • click Ok
• Set the display to 600% (lower left corner)

*Note: When selecting colors, apply this basic design principle: If you select a dark background color, choose a light text color. If you choose a light background color, select a dark text color. This is called contrast. One example of poor contrast is to use a black background with red text, or black text with a red background. Do not use black and red! Both are dark colors! Students who disregard this part of the assignment will receive a zero. If your design is not high contrast (such as perhaps two shades of dark blue), you will loose major credit. The desired result: choose contrasting colors for the background and text when you design your button.

• Select a foreground color (lower left hand corner). This will be used for the background color of your button.
• Be sure you have Only Web Colors checked.
• Select a contrasting background color (lower left corner). This will be used for the text.
• Select the Paint Bucket Tool, and then click inside your document
• Switch Foreground and Background colors to Background (small curved double headed arrow, lower left corner of screen)
• Select the Horizontal Type Tool (T)
• Click in the middle of the button, and type extracurricular (warning- there is no spell check in Photoshop. Make sure you spell everything correctly. Spelling ALWAYS counts, in school and in life).

*Note: When editing in Photoshop, you must select the proper layer on the right hand side of the screen in the layers palette first.

• Select the text, and adjust the font, style, and size as needed
  • Make sure the text layer is selected on the right side of the screen
  • Change the text alignment to center
  • Put your cursor directly to the left of the "e" in extracurricular
  • Click and drag to select
  • Change the parameters as needed in the button bar
    • Do not use the Times New Roman font
    • Use fonts that contain standard english characters. Do not use fonts such as Wingdings that don't use standard english characters.
    • Do not turn off Anti-Aliasing
    • Do not Simplify your layers if a dialog box comes up.
• Select the Move Tool in the upper left hand corner
• Use the arrow keys or your mouse to position the text
• Save your work to the psd folder you created in your image folder on you web site
• Name it extracurricular_up.psd
• Set the display to 100% (lower left corner)
• Inspect your work. Adjust as needed so that your button is highly readable.
• Create a new folder called psd_buttons inside of your network folder, and save your work inside this folder.

Part Two: Generating new buttons based on the first button

• Open extracurricular_up.psd
• Select the Horizontal Type Tool
• Select the text
• While selected, type over the text with the word home
• DO NOT CHANGE THE VERTICAL POSITION OF THE TEXT! Use your Move tool and your arrow keys if you need to reposition the text horizontally.
• Use File>Save as to save your work to the psd_buttons inside your network folder.
• Name it home_up.psd

Continue using the same method, and create buttons for each of the web pages on your personal website. Be careful not to horizontally reposition the text. This will insure that the text on all buttons is aligned the same way. When you are done, you should have the following files:

• home_up.psd
• resume_up.psd
• community_up.psd
• academics_up.psd
• extracurricular_up.psd
• references_up.psd
• If you have additional web pages not listed above, create buttons for them.

Part Three: Creating "over" versions of the same buttons

• Open Photoshop Elements

• Open the extracurricular_up.psd button

  • file>open>navigate to your psd_buttons folder>double click the file to open it

• Using the skills you learned in the previous tutorial, create a new and different version of your button. This version will be used as the "over" state of your navigation bar. In other words, this is the version the end user will see when they move their mouse over the button on the navigation bar.
  • The text must remain in exactly the same place and use the same font.
  • Consider swapping your colors- use your text color for the background color, and your background color for your text color.
  • Consider using the filters you learned about earlier in the course
  • Experiment. Come up with some new skills, and apply them.
  • Be creative, but make sure that the text is still easy to read
• Once you have your new version completed, select file>save as. Save it as extracurricular_over.psd
• Using the same concept, create new _over versions of all of your buttons
• Once you have these buttons completed, you're ready to move to Part Three.

Part Four: Creating "down" versions of the same buttons

• Open Photoshop Elements

• Open the extracurricular_up button

  • file>open>navigate to your .psd folder >double click the file to open it

• Using the skills you learned in the previous tutorials, create a new and different version of your button. This version will be used as the "down" state of your navigation bar. In other words, this is the version the end user will see when they click the button on the navigation bar.

  • The text must remain in exactly the same place and use the same font.

  • Consider using different colors for your text color and background colors.

  • Consider using the filters you learned about earlier in the course

  • Experiment. Come up with some new skills, and apply them.

  • Be creative, but make sure that the text is still easy to read

• Once you have your new version completed, select file>save as. Save it as extracurricular_down.psd in your psd_buttons folder.
• Using the same concept, create new _down versions of all of your buttons