Reflective Image Effect in Adobe Fireworks

Welcome to my blog, please feel free to subscribe to my RSS feed, join me on Twitter or leave a comment.

Original Image

I just wrapped up a tutorial of how to create a reflective image in Photoshop but then I got thinking how much I love Adobe Fireworks so why don’t I have a tutorial for it as well?

So, the first thing that we’re going to need to do this tutorial is an image. Luckily there are 49 stunning images left to choose from, so I’m going to  use an image from Zach to accomplish my tutorial. I used another great image in the Photoshop version of this tutorial so I thought it was only fair to use another.

Setting the Canvas Size

Working with Fireworks is a lot different than Photoshop, so this tutorial is actually easier to follow for new users.

First, let’s load the image into Fireworks and increase the canvas size to be 500px x 500px, remembering to keep the image centered at the top of the new canvas.

Once this is done, our image will have a large checkerboard pattern along the bottom of it. This represent an empty area in the document and will be saved as either Transparent in a PNG file or white in a JPG file.

Use your mouse to selected the image, you’ll see that the image is selectable because a red line with small red boxes will appear. When the image is selected, the red line will appear blue.

Next Copy (Control-C) and Paste (Control-V) the image to make a duplicate of the image.

To flip the image, use the Modify > Transform > Flip Vertical option from the menus which will flip your image upside down. I’ve seen a lot of student try rotating the image to do the same thing, it’s not the same thing so don’t try it. We want to create a mirror image not a rotated image.

Mirror Image

You’ll have to drag the image down a little to line it up with the bottom of the first image, this will create a mirror that we need to lighten and create a white gradient with.

Lightening the picture is pretty easy, all you need to do is alter the opacity of the image. You can find the opacity on the Properties panel (Apple-F3) over on the far right hand side. Change the number 100% to the 50% in order to lighten the image and cause the background checkerboard to bleed through.

Adding a white gradient mask in Fireworks is also very easy, let’s create a new box using the Rectangle tool option found on our Tools panel (Apple-F2) to draw a box over the bottom image. Remember, you can resize the box using the corners to drag and grow or use the numerical values in the Property panel to resize and reposition the box.

Linear Fill

We want to set a Linear Gradient from the Property panel. This option is a little hard to find at first, you have  to click the menu labeled Solid by default and pull down to Gradient, over to Linear. Don’t worry about the color at this point we’re going to change it at the next stage.

Now, surprisingly we’re already at the final step of our tutorial.

We need to edit the settings of the Linear fill to accomplish two things:

1. First, we want to ensure both the colors in our fill are white. This is done by setting the two bottom colors to white.
2. Secondly we need to edit the opacity of our fill using the two top options. By setting the start fill to an opacity of 0%, the white box will fill only the area we want.

If you’ve done everything right, what you should be left with is a reflective tree, perfect for use on your website.