Master the Web 2.0 Style Reflection

Friday, January 5th, 2007 12:05 am by
J David
Print this page Share This
This tutorial will show you how to create that great reflection effect that is so popular right now (at least at the time of this posting…). On top of that, I am going to be using Fireworks to do it! Now, I have said it before, but all I can really find are Photoshop tutorials, but I am personally very happy with Fireworks. So, without wasting more of your precious time, let’s get started!
Step One: Break International Law
You heard me! I want you, my faithful (but rare) reader to commit a crime that some call the biggest moral misdeed a human can perpetrate; clone. Ok, maybe it is not that big of a deal… Either way, open up your favorite fancy logo (check out how to create a Web 2.0 style logo, if you don’t already have one) and select it. Then simply hit ‘Ctrl+Shift+D’ on your keyboard, or click ‘Edit > Clone.’

Now, I know what you are thinking. “That didn’t do crap! It looks the same!” But actually, I personally psychically transposed a duplicate of you logo precisely on top of the old one… Fine, I didn’t really do anything, but the software did. If you take a look at your ‘Layers’ inspector, you will see the clone.

There you go! Now, go on to the next step, you graphic making fiend!
Step Two: Flip and Mask
While your logo is still selected, click on ‘Modify > Transform > Rotate 180′ and then click on ‘Modify > Transform > Flip Horizontal.’ You should now have something that looks somewhat like this:

The next few steps involve a lot of keystrokes (hehe, I said strokes…). Now, with that inverted logo still selected, use your arrow keys to position it slightly below the logo. Each tap of the key moves the image 1 pixel and holding ‘Shift’ while hitting an arrow key moves the image 5 pixels. So, just work it around until it looks more or less like this:

Next, hover over to your layer inspector and find the ‘Add Mask’ button and click it, making sure your inverted logo is still selected.
Step Three: Apply Mask Gradient
We are almost done! Now, make sure your mask is selected (it will appear on the ‘Layer’ Inspector, next to the inverted logo mini-preview, and it will have a green highlight around it when it is selected) and select the gradient tool. Now, check to be sure that the gradient goes from white to black.

Ok, with the gradient tool, click somewhere above the original logo, and drag it down into the inverted logo. The higher you start, the duller the reflection and the lower you end the gradient, the more of the reflection that you will see. Just play around until you like the results. Here is what I came up with.

And remember, you can use this technique on flat objects as well, so get out there and start reflecting things! Ok, well, don’t go too crazy, because this fad may be ending soon…
asas
Thanks that was an easy tutorial… I just used it on my site (SEoptimizacion) you can check it out here let me know what you think I’m really new at this.
[…] Make the images you use unique. One of David Airey’s tips was to use images in your post. I absolutely agree, but would like to take it a step further. If you can (in other words, if you have the software/knowhow), you should customize an image that you are putting into a post; give it a polaroid look; make it have a subtle reflection; change its perspective. These little details will add a nice flair to your post. […]