Calvin’s Hub

I’ve been seeing a lot of this “reflection” effect popping up in different websites but I think Apple was the one who popularized it when they launched iPod years ago.

Basically, you just make a copy of your image, flip it and apply gradient opacity. The effect is so sleek and sexy and it works well in different backgrounds. It fits well for product shots, icons, lone objects, etc.

Here’s a 5-step guide on how you could apply the image reflection effect on whatever you want using Macromedia Fireworks, my choice of software for web graphics. I’m using Fireworks CS3 but I think it would still be the same for Fireworks MX.

This would work well if the image object has no background. For our example, I would be using this bouncer dude.

Now, go ahead and create your canvas, Ctrl-N and paste the object there. I would be using a 200 x 200 canvas.

Here we go:

1. Copy, and paste bouncer dude to create a duplicate. Ctrl-C, Ctrl-V.

2. Flip the second copy vertically. Modify > Transform > Flip Vertically.

3. Position the second copy below the first one. Just use your keyboard to move the second copy down.

4. Then apply the Fade Gradient on the bottom copy. Commands > Creative > Fade Image. Choose the upper right most selection then click Ok.

5. There you go. Almost done, just adjust the gradient line to suit your liking.

White or black background goes well with this effect but different colors can be used as well. Here’s how mine turned out when I used a blue gradient as background.

Hope you had fun trying it out.

• Creating a Web 2.0 Glossy Text Effect in Fireworks
• Creating the “Aqua Sphere” effect in Fireworks
• Creating a Web 2.0 Shiny Text in Fireworks
• Creating a Web 2.0 style badge in Fireworks

Filed under: Fireworks Tutorials