How to add a caption and a watermark to an image

In this tutorial I will show you how to add a watermark and a caption to an image; these two very useful tools are available with Image Effects and, moreover, their implementation is a matter of seconds.

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 Creative Image Effects instance

Insert Image Effects instance

3. Below is a screen-shot of how the configuration panel will look like after we finish the tutorials. In the next steps, we will take each option and discuss it over.

Final configuration panel

Final configuration panel

4. The first step is to insert the path to the image; firstly download the image „collage.jpg” from the attached archive and copy it in your website folder (I prefer keeping the image in the same folder with the „.html” file, like this the path is direct and simple).

Insert the image path

Insert the image path

5. As you saw, the width and height of the resulting file are automatically inserted; leave them as they are and do the same for the link, alternative text and target options (as they are not the object of this tutorial).

6. Insert „Watermark” as a static effect and „Captions” as a rollover effect. Their configuration panels are displayed below:

Watermark effect configuration

Watermark effect configuration

Captions effect configuration

Captions effect configuration

7. We have finished configuring the Simple Effects instance. 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.