|
Assignment
in Brief
- Choose
one client and create simple rollovers images for the navigation
at that site. Next week, you will add remote rollovers to the
other site, so keep this in mind in choosing which site to work
on this week.
- Slice
the file and then create sliced images and HTML code for the home
page and second level file.
- Find
an example on the web of rollovers. Analyze how it intergrates
with the overall layout. Was it easy to navigate or did it cause
confusion and distraction? Did the rollovers add a lot to the
download time? Submit the Rollover Surf Form.
Reading
Read the Rollover section of the CD
Read this Lesson 3 page all the way through
Review Chapter 10 on Slicing, read Chapter 11 on Rollovers
in Lynda Weinman's Photoshop 6 ImageReady 3 H.O.T. book
Learning
Objectives
1.
Understand the rollover concept
2. Use ImageReady to create rollovers
3. Review Slicing and add code for Rollovers
4. Review former students' rollover effects
5. Review rollover effects from commercial sites
6. Turn in your homework
Rollover
Concept
In
its simplest form a rollover is simply swapping one image for another.
Rollovers are most often used for navigational items. Let's say
I have a navigation bar which is made up of white text on a gold
background. I slice up the navigation bar into individual images,
(one slice for each item) and then create copies of the images which
have navy blue text. When the mouse rolls over the white text, the
navy blue text is displayed in its place.
The
images are displayed below.
In
this example you have a layer with the white word "student services"
and another layer with the words in navy blue. If I have 8 navigational
items I would need the following layers
- 8
layers for each WHITE navigational word
- 8
layers for each NAVY BLUE rollover navigational word
- 1
layer with the original gold navigational rectangle
- TOTAL
17 layers for 8 navigational items
A more complex rollover would involve changing the text color AND
the background color. Let's say we have 8 navigational items and
need to create rollover effects for all 8 items. I want to change
the white text to gold and the background color from gold to navy
blue. I would need the following layers.
|
original
image
|
rollover
image
|
 |
 |
- 8
layers for each WHITE navigational word in
- 8
layers for each GOLD rollover navigational word
- 1
layer with the original gold navigational rectangle
- 8
layers with small navy blue rectangles which are turned on when
a rollover occurs
- TOTAL
25 layers for 8 navigational items
If
I want to get really fancy I add even more complexity. I change
the text color, the navigation bar color, and I add a clip art symbol
like an arrow. Here is the list of layers I would need.
|
original
image
|
rollover
image
|
|
 |
- 8
layers for each WHITE navigational word in
- 8
layers for each GOLD rollover navigational word
- 1
layer with the original gold navigational rectangle
- 8
layers with small navy blue rectangles which are turned on when
a rollover occurs
- 8
layers with arrows which are turned on when a rollover occurs
- TOTAL
33 layers for 8 navigational items
As you can see, rollovers can add many layers to your PSD document.
I recommend you keep your rollovers simple. The major design feature
of your Web site should not be the rollover effect. Rollovers are
just intended to give your visitor a visual cue regarding where
the mouse is.
top
Creating
Rollovers
- Make
all your rollover layers in Photoshop
- Switch
to ImageReady
- Make
sure the Rollover window is displaying (Window > Rollovers).
In version 6, this brings up a window which has a tab for the
rollover settings. In version 7, there is a separate palette just
for Rollovers.
- Slice
the document
- Name
all slices
- Use
the slice selection tool to select the slice you want to create
a rollover effect for
- Select
the New rollover state icon (looks like a piece of paper)
- Turn
on or off the layers or layer styles which create the effect you
want
- Select
the original state for the slice before moving on to the next
rollover slice
Student
Examples of Rollovers
Charles
Kemper - Worldwide
Cruises Unlimited
Subtle button effect - dramatic photo effect.
Charles Kemper - Golden
Assets Management
Rollovers in 2 areas
Paula
Schwindeman - Saturn
Rollovers
and Remote Rollovers
Florence
Griffiths - Sunset
Manor Retirement
Rollovers and Remote Rollovers
Paul
Kaiser - Telecom
Valley Electronics
Rollovers and Remote Rollovers and Drop Down Navigation
Perry
Shoemaker - SRJC
Photo grid rollover for information
Adrea
Moss - Saturn
Simple and effective
Anne Branson - SRT
Subtle yet effective, try the buttons at the bottom
Anne Branson - Visions
Design Studios
Buttons seem to jump out at you
Anne
Branson - Apple
Simple and effective
Commercial
Examples of Rollovers
Please visit the Resources
page
Turning
in Homework
I recommend you create a new folder called either "campus-final"
or "optional-final". Save the html file and the sliced images in
this directory. Add this code to your homework page.
<A HREF="campus-final/index.html"> view my campus rollovers
</a >
|
