Summary:

Rollover Behaviors using Images in Dreamweaver

    ●  Create 2 different images exactly the same size.

    ●  Then import them into Dreamweaver and make them swap on rollover.


Learn About:

Photoshop Dreamweaver Rollovers

  •   This tutorial is used on Dreamweaver projects to explain rollover buttons.

Other People's Work:

Here are examples of work inspired by this tutorial.


Goblin Face Rollover Example Joana Brian Drawing

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



Step #1: Open a Picture of your Face in Photoshop ~

Get a photo of your face and open it in Photoshop.

image


Step #2: Crop Tool

Get the Crop Tool or hit the keyboard shortcut letter (c) …

crop tool

… and crop your Photo. You want only need your head and shoulders remaining in the image.

 

 

 

 

Or hit Enter to cut the excess image away.

Step #3: Make a Duplicate ~

Right-Click on the new face layer and make a duplicate copy.


Step #4: Quick Mask Mode ~

Click on "Quick Mask" mode or hit the keyboard shortcut (Q) …

… make sure your default colors are black and white by hitting the arrow or hit the keyboard shortcut letter (d) …

… then click the Brush Tool or hit the keybord shortcut letter (B) …

brush tool

… click to open the Brush Preset picker …

… and pick a soft round brush.

 

 

Soft Brushes have fuzzy edges!

 

Step #5: Create the Masking Area ~

Brush around the face, eyes & mouth.

 

 

Notice how in "Quick Mask" mode the brush paints red - that means the area is selected.

 

Step #6: Go Back to Standard Mode ~

Go back to Standard Mode by clicking on the same button again or hit the keyboard shortcut (Q) …

… and see the parts you brushed become selected.


Step #7: Select Inverse ~

Then hit the keyboard shortcut: Cmd(⌘)+Shift+i or go to: Select > Inverse.


Step #8: New Layer ~

Now go to: Layer > New > Layer via Cut

new layer

… or hit the keyboard shortcut: Cmd (⌘)+ Shift (⇧) +J.

cmd key + shift key + j key


Now you have 3 Layers!.


Step #9: Radial Blur ~

Click on the layer with the hole in your face …

middle layer

… and go to: Filter » Blur » Radial Blur

radial blur filter

… set to: Zoom, Quality: Best, adjust the Amount and change the Blur Center.


Adjust the "Blur Center" by dragging its center point around - thats's the most important part …


Experiment with the settings until you get a look you like …


Step #10: Cmd(⌘)+F ~

Hit the keyboard shortcut: Cmd(⌘)+F to repeat the filter …


Step #11: Hue/Saturation ~

Then go to: Image » Adjustments » Hue/Saturation or hit the keybord shortcut Cmd (⌘) +U

… and drag the marker left and right to change the color of the blur.


Step #12: Save For Web ~

Go to: File > Save for Web … & click on Image Size and shrink the image by lowering the width to approximately 350 px..

Name the file up and save it in the Root Folder of your site.


Step #13: Do the same thing with your other picture ~

Turn the visibility OFF of the top two layers …

… go to: File > Save for Web … click on Image Size and save it the same size at the other one.

Name it over or whatever and save it in the Root Folder of your web site.


Step #14: Open your Project in Dreamweaver ~

Open your index page …

… click inside your content div.


Step #15: Insert your Images ~

Go to: Insert > Image Objects > Rollover Image - select your original image for the top one and your modified image for the bottom.

View your work:


Last Step: Save and Upload your site ~

Upload your site with the work you completed, attach the link to your site where the work is located …

… and continue working…