How to add perspective and reflection to an image

In this tutorial I will show you how to combine the perspective and reflection effects in order to obtain a very good looking effect; as well, I will describe the parameters we have to set for these effects, as they are not obvious. Nevertheless, after this tutorial, you will be able to create plenty of fantastic images – different camera angles and perspectives.

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. Below I placed a screen-shot of the configured interface of Creative Dw Image Effects; as we go through the tutorial, I will break that image into pieces and explain every step in detail.

Fully configured interface

Fully configured interface

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. The first step is to insert the path to the image; firstly download the image „balloon-ride2.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

4. From the Static Effects section, add Perspective and Reflection. We could always add a dynamic effect as well, for an enhanced visual effect, but let’s concentrate on these two effects for now. Like this, we will accentuate the properties of the effects that make the object of this tutorial.

Add static effects

Add static effects

5. Below you can see the configuration panel for the Reflection effect. As you can see, I set the Intensity to 70% and the Mirror Elevation to 30, so that will definitely have an effect on the height of our resulting “.swf” file – something we’ll have to take care of, if we want to show everything properly.

Reflection configuration panel

Reflection configuration panel

6. Leave the Width as its initial value but increase the Height to 550 pixels.

Configure the dimension

Configure the dimension

7. The configuration panel for Perspective is displayed in the image below; now I will explain a bit the parameters so everything is clear. I want a rotation only around a vertical axis, so I set 0 the Horizontal and Transversal rotations; the value -45 will have the following effect: it will rotate the image with 45 degrees to the left (as right is considered the default sense and we inverted that using “-”).

Perspective configuration panel

Perspective configuration panel

8. As the image rotates, it goes a bit off the screen upwards, so we’ll bypass that by adding some Top spacing; I think 25 pixels might do the trick.

Configure the spacing

Configure the spacing

9. That was all the work for the insertion of these effects; slick, right? Now you can click OK, save your file and preview it in a browser 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.