Assignment in brief: (please look on the homework page to see detailed explanations of assignments)

• Create two layout mock ups for the campus client, home page and 2nd level page
• Optimize as a flattened GIF or JPEG
• Make a link from your homework page to both pages
• Fill in and submit Surfing Form 1, critiquing a site for inspiration

Reading:
Read the Campus Mock-Up section of the CD
Read this Lesson 2 page all the way through

Recommended Reading:
Ch 6 - Non-Designers Web Book, Robin Williams

This week it is very important to spend time with the examples pages for Lesson 2 and the Campus Mock-Up section of the CD.

Learning Objectives:
1. Learn about the campus client
2. Produce two layout mock ups for the campus client
3. Creating shapes, text, and layers
4. Add this mock-up to your homework page

Learn about the campus client
You will be designing Web sites for 2 clients. All students are required to create a campus Web site. The second client will be discussed in the next lesson. As you proceed through the course, the concepts covered in lessons 4-7 will be applied to the campus clients.

Campus Web site
The look should be simple, sophisticated and high tech. You will create two mock-up Photoshop files, one for the opening screen, and another for the second level pages. These are the required elements for each psd file:

Opening Screen Requirements:
• Background color or image
• Name of site
• Main Navigation for site, 7 links:

	Student Services
	Admissions
	Programs
	Faculty/Staff
	Administration
	News and Events
	Site Map (optional)

• Area where sub navigation can display during a rollover
• Logo
• Photos or collage
• 2-3 paragraphs of text

Second level page Requirements:
(Admissions)
• Background color or image
• Name of site
• Name of section - Admissions
• Logo
• 6-10 paragraphs of text
• Main Navigation for site, 8 links (same as opening screen + home)
• Sub navigation (Additional navigation area placed on 2nd level pages to access 3rd level pages).

Admissions sub navigation, 10 links:

	Apply Online
	Register Online
	Telephone Registration
	Residency
	Academic Calendar
	Dates & Deadlines
	Transcripts
	Download forms
	Faq
	Contact

top

Creating a layout mock-up
It's time to create a Photoshop document which lays out the major elements on the opening screen and a second level page.

Here are some recommendations before you begin:

* Visit competitor's Web sites FIRST so you can begin to form ideas, I have a few listed in the www examples section
* Visit the jc examples section NEXT to see what other students who have produced "A" quality work have done
* Avoid "blank screen syndrome" print out examples of campus Web sites from the Web and from former students and piece together your design.
* Sketch out your ideas with a paper and pencil first, since it can so easily be changed.
* Remember the most basic of all design principles KISS (keep it simple sweetie).
* If you need design guidelines, I recommend you purchase "The Non-designers Web Design Book" by Robin Williams.

Create a separate layer for each of the elements listed above. The layers can be named "campus name", "navigation", "logo", etc...

Once you have some ideas, open Photoshop and begin creating the layers for each of the items listed above. You can draw rectangles, circles, or rounded rectangles to simulate the elements. A circle can represent the logo, a rectangle the navigation, a square where you think the photos or collage will go. Label each shape with descriptive text. For example the word "navigation bar" would go over the rectangle which represents navigation.

At this point you need to concentrate on the shape and placement of elements, as well as where the white space is found. This is a primitive outline of what the page will become. As the class progresses you may need to modify the layout with minor or major adjustments. That is FINE. This is just a first attempt at the design. All of the items you include in your mock-up will not be completed by the end of the 8 weeks, you may also change your mind along the way. However, I feel it is essential that you create a plan before you start creating images.

You do not need to identify a color scheme - we will be covering color in lesson 4.

Creating shapes, layers, and text
Photoshop changes so quickly it is difficult to keep up.

Previous versions of Photoshop used the Rectangle and Elliptical Marquee tools to create a selection, and then the Paintbucket or Fill command to fill the selection with color.

Photoshop 7 has drawing tools which make it easy to create circles, ovals, squares, and rectangles, which are editable objects similar to those found in Illustrator.

In this lesson the step-by-step instructions found on the CD will concentrate on the Rectangle and Elliptical Marquee, and the Lasso tools. Lesson 3 will cover the Shape tools first introduced in Photoshop 6.0. You may use the traditional Marquee tools or skip ahead and use the Shape tool discussed in lesson 3.

Layers underwent many changes in version 6 of Photoshop. Many things are the same however, so don't let the newer look worry you. The CD has extensive instructions for working with layers and has been updated to include the minor changes made in Photoshop 7.0.

Create a layer for each Web site element. This allows you to move the navigation layer without affecting the position of the logo. You will find as the class progresses that you will need to add additional layers to the document. The name of the college is now represented in one layer. You may decide to place a rectangle of color behind the text (which will go on its own layer), then create a text layer, and finally create an Adjustment Layer which modifies the text. This would result in 3 layers where you now have one. That is fine. Just remember in this lesson you are creating a single layer for each element, and a text layer which labels the element.

Starting with Photoshop 6.0 the Text tool has changed dramatically. This week you create a simple layer which labels a circle as the "logo" or a square as a "collage". You will explore the Text tool in further depth in lesson 5.

Adding the mock-ups to your Homework page
Save a copy of the 2 mock-up Photoshop files as "campus-open.psd" and "campus-second.psd". Place these files on your zip disk or hard drive. DO NOT load them onto the web.

At the root directory of your Internet account, create a web-graphics directory/folder. Inside this folder place 3 sub directory/folders: campus, optional, and templates. Flatten the "campus-open.psd" file and name the GIF or JPEG "campus-open.gif" (or jpg). Flatten the "campus-second.psd" file and save as "campus-second.gif" (or jpg). Place these gif or jpeg files on the web.

Add links from the homework page to these images.

If you follow the naming conventions and folder structure recommended on the CD you will use this code:

< A href="campus/campus-open.gif">campus opening layout < /A>

< A href="campus/campus-second.gif">campus second level layout < /A>