Mr. O'Connell's Technology Home Page

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
• Save your work to the psd folder you created in your image folder on you web site
• Name it extracurricular_up.psd
• Save often while you work. The future is uncertain.
• Set the display to 500% (lower left corner)
• Make sure the horizontal and vertical Rulers are visible.
  • View>Rulers (Shift+Ctrl+R)
• Make sure your Info Panel is visible
  • Window<Info
• Make sure your Info Panel is set to Pixels
  • In the Info Panel, Click the very small triangle next to + x y

*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. As always, the instructor will be the final judge of what is and what is not good contrast.

• 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.

*Note: Make sure your Layer Panel is visable at all times. Make sure you have selected the correct layer in the Layer Panel while you are working. If not, you may get a dialog box asking you to Simplify your layers, or to Flatten your layers. For the purposes of this assignment, never say yes to either of these options.

• 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)
• Change the text allignment to Center Text
• Select a font
• Change the font size to 14pt
• Place your cursor in the horizontal middle of the button (50 px), and at the vertical position of 15 px. Click.
• 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
  • Make sure the text alignment is set to Center Text
  • 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
• Set the display to 100% (lower left corner)
• Inspect your work. Adjust as needed so that your button is highly readable.
• SAVE AGAIN!

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 Four.

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