Mr. O'Connell's Technology Home Page
home courses biography links

Project:
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: cocurricular_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 cocurricular_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 a major amount of 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 visible 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 alignment 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 cocurricular (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 "c" in cocurricular
    • 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 cocurricular_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
  • cocurricular_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 cocurricular_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 cocurricular_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.

After you complete all of your buttons, it is necessary to convert all of them to .gif format before you can use them in your navigation bar. Here are two sets of instructions on how to do this:

Converting .psd files to .gif files

To convert entire folders:

  • open Photoshop Elements
  • Choose File>Process Multiple Files
  • Choose your source folder
  • Choose your destination folder
  • Choose convert to gif
  • Make sure there is no checkmark on Resize Images.
  • Click okay
  • All of your files are converted at once. Let the computer work, and don't click or type anything until you are sure the conversion process is complete.

To convert individual files:

  • open Photoshop Elements
  • Open your .psd document
  • Choose File>save As
  • In the Format drop down menu, choose Compuserve GIF [.GIF]
  • Navigate to your gifs folder. If you don't have a gifs folder, create one inside your psd_buttons folder now.
  • rename your file (e.g. home.gif) and choose Save
  • Repeat this procedure for all of the .psd files you wish to convert
  • You're done

Note* This method will also work for converting your files to .jpg, .png, or any other format available in the Format drop down menu.