Getting Started Tutorial

In this tutorial I would like to present you a few of Creative Dw Image Effects's features, effects and use-cases and as well, apply them step by step; this way, you will get familiar with the product, see how simple and user-friendly the configuration interface is and how fast you can transform an image from its regular look to a flashy, attractive one.

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. Make sure Design View is active; click anywhere in the design view window and insert a table – either by following the top menu Insert>Table or by pressing Ctrl+Alt+T. Create a 2 by 2 table.

Create table

Create table

3. Select the cells on the second row and right-click, Table Properties>Merge Cells, or press Ctrl+Alt+M.

Merge cells

Merge cells

4. Select the table and redimension it to 450 pixels; as well, redimension each of the cells on the first row to 225 pixels.

Insert table dimensions

Insert table dimensions

5. Select each cell of the table one by one and select center alignment in the „Horz” parameter.

Center-align the cells

Center-align the cells

6. Select the first cell by clicking inside it; from the Insert menu – the Image Effects section, Insert a new Simple Effects instance inside this cell.

Insert a Simple Image Effects instance

Insert a Simple Image Effects instance

7. Modify the configuration panel in the following way:

First Simple Effects instance configuration panel

First Simple Effects instance configuration panel

You can find the image in the attached archive; the dimension parameters are automatically detected by the Creative Image Effects instance. I inserted two static effects, Glossy and Round Corners. In order to configure them, select the one you want and click on the green pen-like icon. Their configuration panels are displayed below:

Glossy effect configuration

Glossy effect configuration

Round Corners effect configuration

Round Corners effect configuration

8. Let's insert the second instance of Creative Image Effects now, an image with a dynamic effect applied on. Its configuration panel is displayed below.

Second Simple Effects instance configuration panel

Second Simple Effects instance configuration panel

As well as for the first instance, the image is in the attached archive, and the static effects are configured in the same way (the only difference is given by the corners selected to be rounded). The difference is the rollover effect, „Luminosity”; in order to configure it, click on the green pen-like icon next to it.

Luminosity effect configuration

Luminosity effect configuration

9. Now for the last part of this tutorial, click in the last cell (which in fact, is formed by the merged two cells), and insert a Rollover Image Effects from the Insert bar on the top.

10. Below you can see a screen-shot with the final version of this Creative Image Effects instance''s configuration panel; I will break it in parts and explain step by step what I have done.

First Rollover Effects instance configuration panel

First Rollover Effects instance configuration panel

11. In the main settings section, insert the two images which you already took from the enclosed archive. The width and height attributes will be automatically detected.

Insert images paths

Insert images paths

12. Next insert the address in the link field, with „_blank” target and the indicated alternative text. Because you are testing locally, you might get an error generated by the Flash Player. To learn how to fix it, please refer to the „How to test locally” tutorial.

Insert linking path

Insert linking path

13. For our last step, configure the static effects as we did before (enable all the four corners this time in the round), and the rollover effect as in the next image:

Reveal effect configuration

Reveal effect configuration

14. Save your file and preview it (by pressing F12).

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.