 |
|
|
|
|
|
|
|
|
|
|
|
|
|
 |
|||||||||||||
1. The school’s web site http://www.arps.org/hs needs a navigation bar. Your assignment is to design navigation bar buttons for the following headings: Classes | Schedule | Library | Offices | Calendar | News | Directions | Sports | Clubs | Contact Us
These navigation bars could be better
2. Start by creating one button. Open a new document in PhotoShop that is .5 inches tall by 2 inches wide. The Resolution must be 72, since it is for the web. The mode must be RGB. The background must be transparent.
3. Immediately save the document in your folder on the G drive. 4. You need to use colors that go well with the existing web site. Choose colors from the school web site and save them in the swatches palette.
5. Create a background that is interesting but not too busy. Try starting with a gradient or clouds (render filter) and apply filters, textures and effects until you find something you like. The background below was created by combining two two textures. The left bluish one was on one layer and the greenish yellow was on another layer.
6. You might want to give each button a border. To do that, press control-A. Choose stroke from the edit menu. Stroke it 2 or 3 pixels on the inside. Choose your color.
7. Once you have a background you like, increase your canvas size so it is 5 inches tall (Image Menu- Canvas Size).
8. Duplicate your background layer (right click on the layer palette and choose duplicate.) (and move the new layer just below the first one using the move tool) so you now have two buttons.
9. You may decide to flip the second one horizontally or vertically. Choose Transform-Flip Horizontal in the Edit Menu.
10. Merge the two layers together by choosing Merge Visible from the layer menu. Select the merged layer in the layers palette and duplicate by right-clicking it. Move the duplicated layer down so that you have four buttons. Merge those layers. Duplicate the merged layer so that you have 8 buttons. When you have 10 buttons, merge them all together.
11. Add text to your navigation bar. Start by typing the words Contact Us with the type tool. Make sure your TEXT BOX extends from one side of your button to the other. Choose a font that is easy to read, appropriate for a school web site. Avoid using fonts with serifs, like Times New Roman. Decide on a text size that is large enough to read, but small enough to fit on the button. Choose a COLOR for your text that compliments the colors on your background. Choose the CENTERING button to align the text. 13. Make sure the anti-aliasing is set on SMOOTH or STRONG.
12. Choose a layer style to use on the text (drop shadow, outer glow, bevel and emboss, etc.).
14. Copy the Contact Us layer and move the new layer copy up so that it is centered on the second button. Change the text on the copied layer to read Clubs. Continue copying the text layers and change the words so you have the following words: The words must be in this order. Classes | Schedule | Library | Offices | News | Calendar | Directions | Sports | Clubs | Contact Us.
15. Make sure all your words are centered vertically and horizontally. You may choose to right align or left align your words. 16. Choose Save for Web in the File menu. Save as a JPEG file, and save it in the Finished Buttons folder. Save it as your last name. This project should take 2 days to complete. Assessment criteria:
|
