Simple Image Effects

JavaScript can be used to add instant effects to your webpage images. The following effects, when applied, have a default look. That default look can be modified. The following exercises are based off free image effects found at:

glossy.js

A very easy script to implement. By default, this script adds rounded corners, a drop shadow and a glossy look to an image. This image effect, including instructions and file downloads can be found at:

glossy.js

Glossy.js is a very easy JavaScript effect to integrate into your webpage. By default, the script adds rounded corners, drop shadow and a glossy look to your image. This image effect, including instructions for use and file downloads can be found at:

In Adobe Bridge:

  1. Locate and select fx-1.jpg in the ‘site-working’ folder
  2. Right-click and choose open with Photoshop

In Adobe Photoshop:

  1. From the Menu Bar, go to Image > Image Size
  2. Set the image width value to 408 pixels
  3. Set the interpolation to Bicubic Sharper
  4. From the Menu Bar, go to View > Actual Pixels
  5. From the Menu Bar, go to File > Save for Web & Devices...
  6. Set the save preset to JPEG High (quality of 60)
  7. Save the file into the ‘site-media’ folder
  8. Close the fx-1.jpg file – do NOT save

In Adobe Dreamweaver:

  1. Open simple-fx.html
  2. Working in Design View
  3. Replace the page left image with fx-1.jpg from the ‘site-media’ folder
  4. Be sure the image is not scaled in the Properties Panel

To access the glossy.js functionality:

  1. Switch to Code View
  2. Make room the <head> section to add a link to an external .js file
  3. From the Menu Bar, Insert > HTML > Script Objects > Script
  4. Link to the external .js file: site-javascript/glossy/glossy.js

To add the glossy.js effect:

  1. Working in Design View
  2. Select the fx-1.jpg image
  3. Switch to Code View
  4. Within the fx-1.jpg image tag, add class="glossy"
  5. Save your file
  6. From the Menu Bar, File > Preview in Browser > Firefox

To modify the default look:

  1. For a different look, change to class="glossy noshadow"
  2. Save your file
  3. Refresh your Firefox page
  4. For yet another different look, class="glossy iradius40"
  5. Save your file
  6. Refresh your Firefox page

So where did this stuff come from?

Copyright © 2010 | Bill Morrison | All Rights Reserved