Combining effects

In this tutorial I will show you how to combine various effects in order to obtain a really nice look, applicable in the following situation: a website in which there are galleries of images (or real photos) and tries to preserve a classic, early 20th-century-kinda-look. This effect is obtained by using Sepia and as well, on rollover, the color filter disappears in order to see an undistorted version of the original image.

Firstly I just want to remind you that, in order to be able to solve the tutorial, you will need the Creative Dw Image Effects extension installed on your computer; if you encounter any problems while doing that, please visit the “How to install an extension” tutorial.


Click here to download the source file and the required files for solving this tutorial.


1. Open Dreamweaver, create a new website and a new file; save your file. If you have problems creating your website, try reading the “How to create a website” tutorial.

2. From the Insert menu – the Image Effects section, Insert a new Simple Effects instance on your newly-created page.

Insert a Simple Image Effects instance

Insert a Simple Image Effects instance

3. I'm going to show you now a screen-shot of the fully-configured interface for this tutorial and then break it into pieces and explain all of them.

Fully configured interface

Fully configured interface

4. The first thing we need to do is to write the path to the image we want to enhance. I keep my image in the same folder with the “.html” file; for this tutorial I recommend you to do the same. Copy the attached picture into your folder; click “Browse”, locate it and then click OK.

Insert the image path

Insert the image path

5. Next we should take care of the dimensions and position of the resulting image. The Creative Dw Image Effects automatically finds the dimensions of the image but we'll have to change them, as we will use a “Perspective” effect. Increase the width to 400 and position it at 50 Left spacing and 10 Top spacing – we do this in order to see it better when we preview our work. Just for everything to be clear, leave the Link, Target and Alternative text fields empty for this tutorial, as they don't interest so much now.

Setup the dimensions

Setup the dimensions

6. Now the cool part starts – let's choose the effects we will apply. From the list of “Static effects”, select “Perspective”, “Shadow” and ”Round Corners” and add them one after the other. Do the same for the “Sepia” effect in the “Rollover effects” section.

Add the effects

Add the effects

7. In order to configure the effects, select them one-by-one and then click on the pen-like icon which says “Edit item”. Apply the following configurations:

Perspective effect configuration

Perspective effect configuration

Shadow effect configuration

Shadow effect configuration

Round Corners effect configuration

Round Corners effect configuration

Sepia effect configuration

Sepia effect configuration

8. We have finished configuring the Simple Effects module. Now we just have to preview the effect to see that everything looks the way we wanted. Either access the Preview option from the product's interface or click OK, save the file and then click F12 in order to preview in your default browser. You should see something like this:

Preview your file

Preview your file

Thank you for your time and I hope this tutorial was useful to you. I invite you to read the rest of our tutorials and check out our other products on www.extendstudio.com. If you have any questions please contact us at support@extendstudio.com.