HTML5 Image Enhancer Manual

The Basics: Adding Real-time Effects to Images with HTML5 Image Enhancer

In this tutorial we will show you how to add amazing real-time effects to the images on your pages using HTML5 Image Enhancer.

*You can also check out the video here.

How to do it

1.Define your site in Dreamweaver and create a new page - We've already created our page layout. Now we are going to add three images and apply different effects to them.

2.Applying the extension – Choose the  icon from the DMXzone object bar to apply the extension.

The HTML5 Image Enhancer dialog opens:

 

 

3.Adding images – Click the Browse button to add an image, select it and click OK.

4.Adding Effects – Select tge Reflection checkbox (1) for the reflection effect with a -5 value for the distance (2), add GrayScale and Blur filter (3) with default 1 value (4) and click the OK button when you're done.

5.Now, we're going to add the second image – Click on the HTML5 Image Enhancer icon, browse the image and click the OK button when you're done.

 

 

 

6.Adding Effects to the second image – For this image we will use the same reflection (1) effect with Sepia filter (2).

 

4.Adding the third image - Click on the HTML5 Image Enhancer icon, browse the image and click the OK button when you're done.

5. Adding Effects to the third image – For the last image we will only use the Tint effect with a #FFFFFF color and 0.8 amount.    

Now, you can save your work and preview the result in the browser!