�ݺ�ߣ

Artist/Musician Assignment

Rollovers
with Photoshop & Dreamweaver

1

1 Step 1: Organization
Start with a Main Folder for your
whole project.
Artist_main

It will contain some Subfolders:

1 Subfolder #1 ²Working Files
➣➣Contains files you
gathered/liberated to
create your comp Artist_workfiles Artist_website
➣➣Also contains your comp
2 Subfolder #2 ²A root folder for
your website.
➣➣Only files destined for a
server will go in here.

2

Step 2: Open Comp in Photoshop
2 & pull guides along the slice lines

If you turn on
View>Snap to>Guides
your slices will snap
right to the guides.

Make sure Back, Next and Nav are in the resting
(non-hover) state.
3

Step 3: Create slices with
3 slice tool
The slice tool

The slices you make
are User Slices.
They’ll have a little
blue tab in the upper
right corner.

Photoshop will
create Auto Slices
for all the areas you
don’t slice. They have Areas to slice:
a gray tab in the
upper right. 1 Titlebar 5 Next
2 Illus 6 Textarea
3 Ani 7 Nav
4 Back
4

Step 4: Edit Slice Options for each Slice
4 {Right click the slice > Edit slice options}

Enter the name of
the image per the
Musician Map

Double check that the
slice is the right
distance from the
top and left

Double check that the
slice has the correct
dimensions per the
Musician Map.

5

5 Step 5: slicing the nav area

1 Make one big slice from the navbar.
2 Right click ² Divide Slice.

3 Choose Divide Vertically.
4 Adjust slice divisions if necessary.
5 For each new slice, use Edit Slice
Options to give the slice a name.

6

Step 6: Get ready to optimize
6 and Save

Make sure to turn off the
MusicianMap.ai layer if you
used it - you don’t want
it to appear in your
optimized images.

Make sure that the Navbar
images and the Back and
Next slices are in their
resting (non-hover) states.

7

7 Step 7: file > Save For Web

You’ll end up here, at
the Save for Web screen, where
you optimize your slices prior
to saving them.

This is pretty familiar by now!

When you click Save,
Photoshop takes you to the
Save Optimized As dialog box.

There, you can direct Photoshop to create an html page and CSS at
the same time it’s creating your slices.

{ZOMG!}

8

8 Step 8: The Save Optimized As box

The Artist_website folder
you created in Step 1 should
be here.

Select HTML and Images here
Select All Slices here

When you have the above 3 options in place, select Custom in the
Settings dropdown.

In the Custom dropdown,
select Other.
9

9 Step 9: Output Settings

Select Slices from this
dropdown

Select Generate CSS
Referenced by ID in this
button/dropdown area.

Select OK>Save>Save AND THE MAGIC IS COMPLETE!

10

q Step 10: the files you created

Psy_template.html The web page
Artist_workfiles

about.jpg
ani.jpg
images
back.jpg
discography.jpg Images
home.jpg folder with
illus.jpg many images
next.jpg
Psy_template_08.jpg
Psy_template_10.jpg
Psy_template_11.jpg
Psy_template_13.jpg
Psy_template_15.jpg
Psy_template_16.jpg
Psy_template_17.jpg
Psy_template_18.jpg
textarea.jpg
titlebar.jpg

11

w The web page
In the browser

The html
(lol)

Photoshop creates a web page with an
absolutely positioned div for each slice.

All the divs are contained in a div called
#Table_01. It, too, is absolutely positioned at
the top left of the body element. Thus, the
page is not centered and is jammed up at the
top left. We’ll take care of that later.

First, we’ll make the rollover buttons.
12

e Creating Button Hover images

We’ll create and save a new image for the hover state of each
navbar button and for the back and next buttons.

Go back to your Photoshop comp.

Turn on the hover state for each of the navbar buttons and for
the back and next buttons.

I gave mine a lovely pink
glow using layer effects.

13

r Creating Button Hover images
(continued)
Using the Slice Select Tool,
select each navbar slice.

Right click > Edit Slice Options.

Rename each navbar slice. The
name should be something
like Home_hover or
Home_mouseover.

Do the same with the back and
next buttons.

Next, we’ll go through the Save for Web process again, but just for
these images.
14

t Saving hover images

In the Save for Web Optimization
screen, select only the navbar slices
and the back and next slices.

In the Save Optimized As box:

The Artist_website folder you created
in Step 1 should be here.

Select Images Only here.
Select Selected Slices here

Select OK > Save > Save and Photoshop will send the new images to the
images folder.
15

y Creating the Rollovers

Open your html file in Dreamweaver.

Make sure that the Dreamweaver
Show Code and Design view
is selected, so you can see
both versions.

Also, select
Window > Workspace Layout >Classic

16

u Creating the Rollovers (cont.)

Turn on Window > Behaviors

The Tag Inspector/Behaviors
panel will open in the panel area
on the right.

In the design view, click on one of the
navbar button divs to select it.

Under Behaviors, click the + sign

17

i Creating the Rollovers (cont.)
Select Swap Image

In the Swap Image dialog box,
select browse and navigate
to the “_hover” image for the
navbar button you selected.

When the image file’s name
appears in the Set Source to
box, select ok.

18

o Testing your Rollover
Save your html page:

To Preview in Browser, select the globe icon from the toolbar at
the top of the screen and choose a browser.

Repeat steps 16 and 17 with all the rollover divs.

19

o Tweaking your page - Final Steps
To add text to the text area

1 Delete the image from inside <div id=”Textarea_”>.
2 Add the image as a background image to the #Textarea
selector in the CSS.
3 Returning to the div itself, add in your text.
To center the page (if you wish)

1 Photoshop creates a div called #Table_01 that’s a container
for all the divs inside it.
2 Change the CSS of #Table_01 so that it behaves like the
#wrapper div we have used in other assignments.
3 Visit http://bettyopolis.com/announcements/
centering-an-html-page/ for more information.
Gif animation

1 Create the Gif animation separately. Insert the image in the
appropriate div in your html page.

20

�ݺ�ߣ

Slicing+rollovers

More Related Content

Slicing+rollovers