1

RolloveRsArtist/Musician Assignment

with Photoshop & Dreamweaver

2

Start with a Main Folder for your whole project.

It will contain some Subfolders:

1 Subfolder #1 ²Working Files

➣ Contains files you gathered/liberated to create your comp

➣ Also contains your comp

2 Subfolder #2 ²A root folder for your website.

➣ Only files destined for a server will go in here.

Step 1: Organization1

Artist_main

Artist_workfiles Artist_website

3

Step 2: Open Comp in photoshop & pull guides along the slice lines2

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.

4

Step 3: Create slices with slice tool3

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 a gray tab in the upper right.

The slice tool

Areas to slice:

1 Titlebar

2 Illus

3 Ani

4 Back

5 Next

6 Textarea

7 Nav

5

Step 4: Edit Slice Options for each Slice4 {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.

6

Step 5: SliCing the nAv AreA5

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.

7

Step 6: get reAdy tO Optimize And SAve6

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.

8

Step 7: FilE > SAVE FOr WEb7

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!}

9

Step 8: ThE SAVE OpTiMiZED AS bOx 8

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.

10

Step 9: OUTpUT SETTinGS 9

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!

11

Step 10: the fileS yOu CreAted q

Artist_workfiles

images

Psy_template.html

about.jpg ani.jpg back.jpg discography.jpg home.jpg illus.jpg 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

The web page

Images folder with many images

12

the web pAgew

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.

The html(lol)

In the browser

13

CreAting buttOn hOver imAgeSeWe’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.

14

CreAting buttOn hOver imAgeS (continued)

rUsing 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.

15

SAving hOver imAgeStIn 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.

16

CreAting the rOllOverSyOpen 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

17

CreAting the rOllOverS (cont.)uTurn 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

18

CreAting the rOllOverS (cont.)iSelect 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.

19

teSting yOur rOllOveroSave 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.

20

tweAking yOur pAge - finAl StepSoTo 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.

21

fin � �