Campus Services Flat - Second Level Lesson
I began in Photoshop where I had previously created a second level mock up for my campus client. That file had been designed to represent the "admissions" page, now I want to make another copy of this page which will be the "Student Services" page. I need to decide which graphics will remain the same, and which elements would change.1. The logo is the same on each second level page.
2. I decided to keep the images along the top exactly the same from one page to the next.
3. The name of the section (such as "admissions" or "student services") will change on each page. Note that the word "student services" was larger than the word "admissions", so I changed the font width so it would fit in the space.
4. The campus name remains consistent from one page to the next.
5. Within the main navigation bar the button for the page we are on will not be a "hot link" and the image will have a dark blue background. All other navigational buttons will remain the same.
6. The sub navigation along the left side of the screen will change for each section. There will be images and rollover images for each link.
7. The content for each page will change.
8. The lower navigation and campus URL remain the same on each page.
Here are mock ups of 2 second level pages.
To achieve these distinct looks I needed to make the following changes.
1. Create a new layer for the name of the section, in this case "STUDENT SERVICES". If I were creating the entire web site I would need to produce 6 images which contained the section names "STUDENT SERVICES", "ADMISSIONS", "PROGRAMS", "FACULTY/STAFF", "ADMINISTRATION" and "NEWS". Two of these images are displayed below.
Remember - For purposes of this class, you are only creating mock ups for 2 pages.
2. The next graphic which needed to change was the main navigation bar.
- I added a layer with dark blue which sat behind the word "student services"
- Turned off the drop shadow on the "student services" text
- Turned off the blue box which had sat behind admissions
- Added a drop shadow to the admission text.
Make sure you label the blue layer which sits behind the "student services" button or you will get confused about which blue layer goes with which word. Since there are so many steps involved in modifying the navigation bar, you may want to make a list so you don't forget a step as you create each image.
3. The sub-navigation text is placed on a new layer. Since my rollover effect simply requires me to add
blue boxes around each navigation item I can place all the text for the links on one layer. The rollover boxes will each be placed
on their own layer.
Now you may be thinking that I only need to create one set of blue boxes which surround the sub-navigation, well not exactly. As you view the sub-navigation for the 2 pages, you can see that the words are not in the same location, since the admission page has 2 categories below the word "register".
I actually created 2 sets of blue boxes, one for the "admission" page and another set which worked for all other
second level pages. The layers were layers box 1, box 2, etc... Below I have shown the sub navigation for the
"student services" and the "faculty/staff" pages. Notice that not all of the boxes are used on the faculty page.
After creating the layers you need for the "student services" second level page File >
Save for Web > Optimize as a GIF or JPEG.
This creates one large image of the entire page. When flattening the second level pages I like to show one button with the rollover effect so the client can anticipate
what the rollover will look like.
Next you load the image onto the Web and then create a link from your homework file to this image. Here is an example of the flattened student services page.
As you will see as the CD progresses, you have just gotten off pretty easy.
In the real world you would need to create a template for all second level pages and then describe what changes are made on each second level page. Details on completing this task are found in the "CSS and tables" lesson.
I have included an example of the working version of the admission page to illustrate the difference between a working second level page and a flattened mock up.
You only need to flatten the image of your "student services" second level page. Check with your instructor to see if they want you to slice up the "admissions" page.
To learn how I sliced the admissions page access the next section of the lesson.