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.
✓ Photoshop ✓ Dreamweaver✓ Rollovers
• This tutorial is used on Dreamweaver projects to explain rollover buttons.
Step #1: Open a Picture of your Face in Photoshop ~
✗ Get a photo of your face and open it in Photoshop.
Step #2: Crop Tool
✗ Get the Crop Tool or hit the keyboard shortcut letter (c) …
✗ … 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 or hit the keyboard shortcut letter (d) …
✗ … then click the Brush Tool or hit the keybord shortcut letter (B) …
✗ … 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 …
✗ … or hit the keyboard shortcut: Cmd (⌘)+ Shift (⇧) +J.
✗ Now you have 3 Layers!.
Step #9: Radial Blur ~
✗ Click on the layer with the hole in your face …
✗ … and go to: Filter » Blur » Radial Blur …
✗ … 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…