Ben Partch

RSS Image with Reflection

By: Ben Partch » On: August 21st, 2007

I am sure there are lots of neat tools and online ways to create a reflection for an image and I am sure there are a few tutorials on how to manually create this effect already as well, but none the less I am going to publish my way of doing it too.

Things you will need to create this effect:

A graphics program (photoshop, fireworks)
An image or an icon of some sort

I am going to be using Fireworks for this, but I am sure this can also be done basically the same way with Photoshop or another graphics/image software that you may have.

Examples:

This effect looks better (at least to me) on black (or a dark) background. I have also created this effect on a light background so I know it will work, but cannot guarantee that it will work with all colors.

In my example files I am using the standard RSS icon available from feed icons. Though my image looks alot like theirs, I did not swipe it, I promise!

I was however inspired by it, and thus created mine based on how theirs looks. You can use any image you would like as it should have no effect but if you want you can download a sample file to use (Adobe, Fireworks CS3 .png).

The Steps:

Open Fireworks and import (file > import or ctrl + r) the rss image/icon
Copy the image (crtl + c) and paste (ctrl + v) it, move it below the original
Right click the newly pasted image and choose transform » rotate 180°
Then choose transform » flip horizontal
Then fade the pasted image to like 36 or so
Next select the rectangle tool and with the same color as the background selected draw a small rectangle over the bottom half of the pasted image
Then select the brush tool, again select the same color as the background set it to soft rounded and it’s tip size to 13 and brush a small line across the visible bottom portion of the pasted image
Fade this brush bitmap to like 55 or so
That is pretty much it, position and fade the 2 until it looks good to you.

Hope this is helpful to someone. Here is the finished source file if you want to look at it download the finished source file (Adobe, Fireworks CS3 .png). If you have tips or a better way altogether post it below.

This article was posted in: the Tutorials category. If you have an opinion about this article, you can contact Ben Partch, or leave a comment below. You can also follow comments made by others via the RSS 2.0 feed.

2 Responses to “RSS Image with Reflection”

Sara Says:
August 24th, 2007 at 11:54 am
Very cool Ben!
Boatlady Says:
September 30th, 2007 at 4:48 pm
Ben, I saw a banner that had this effect on it and thought it was so cool. I wondered how they did it. Thanks for sharing as I am going to use this technique in my next project.