Creating Simple Rectangular Buttons in
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
- 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:
- If you have additional web pages not listed above, create buttons for them.
Part Three: Creating "over" versions of the same buttons
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.