Create a Reflection effect using Fireworks in 5 simple steps
- Posted by Tengku Zahasman on June 10th, 2007 filed in Web Design, Fireworks, Tutorial
- (4,789 Views)
One of the usual designs around Web 2.0 includes having texts or images to appear reflected as if they’re on a shiny-clean surface. Last month I provided some simple tips on creating a decent Web 2.0 logo (which applied the reflection technique) but since it wasn’t a tutorial post, I didn’t explain step by step of how to actually do it using an image editing tool. It ain’t that hard if you’re a fast learner…. only 5 steps to go through. But before we do anything, let’s see the example end result that we’re trying to create in this tutorial (btw, this tutorial uses Fireworks 8 as the image editing tool):
Looks good enough to you? Now let’s get started!
Step 1 : Write the text
Obviously you need *something* to apply the reflection effect to. So open up your Fireworks application and write some texts on the canvas (using the Text tool). It doesn’t matter what fonts or colour you wanna use, just get some texts on the canvas quickly.
Step 2 : Duplicate the text
We’re going to use the duplicated text as the reflection later. So if you’re wondering how to duplicate the text, here’s how: Copy and paste. Just select the text (use the Pointer tool) and then press CTRL+C (to copy) and CTRL+V (to paste). This will paste the very same text on top of the original text, so it’ll look as if nothing happened.
Step 3 : Flip the duplicated text vertically
This shouldn’t be painful. Just go to the toolbar menu and find Modify -> Transform -> Flip vertical.
By now you should see the original text behind the flipped duplicated one. It’ll look something like this:
Step 4 : Move the flipped text below the original text
Push the *downwards* arrow button on your keyboard until the flipped text is placed just below the original text.
Alright…. the reflection is now in place. What you need to do next is have the bottom part faded so that it looks more realistic… let’s proceed.
Final Step : Fade out the bottom part of the duplicated (and flipped) text
To do this is easy. There’s a build-in Fireworks command that can do the fade out for you. Simply go to the toolbar menu and click on Commands -> Creative -> Fade Image. A new dialog box will pop-up giving you options of where you want the image to be faded out; either top, bottom, sides, etc. We want to fade out the bottom part, so use some common sense and choose the right option 
By doing that, the reflection is now faded out. If you find the reflection to be revealing too much, just drag the controller pane up a bit and adjust until you’re satisfied.
Done! Wasn’t that hard was it? Having this steps mastered adds you another graphic design skill that you can apply in many things (logos, menus, buttons, etc). Now go repeat everything again with different fonts and colours, add some gradients or anything so that you can remember the steps like the back of your hand. 
If I've provided some info that you find to be useful, don't hesitate to 
June 10th, 2007 at 8:14 am
[…] You can use either of this, or better still, you may even apply both. For now, I’ll just apply a reflection to my logo so that it looks like this. Oh!… isn’t that a nice looking logo? Only three […]
June 10th, 2007 at 12:19 pm
Awesome! Who said you need to have PhotoShop to create awesome image stuff, right?
June 10th, 2007 at 2:56 pm
Exactly! In fact, IMHO, Photoshop or Illustrator is suitable for hardcore graphics design.. like when designing posters, digital arts, etc.. not really suitable for Web graphics which requires more optimization. That’s why they’re more sophisticated and consume more of ur PC’s resources.
Fireworks on the other hand is designed strictly for Web graphics (altho nothing stops u from using it for other purposes).. it’s powerful but lighter than Photoshop, clean, and it’s more user-friendly… what’s important is that it gets the job done.. and it does it with style
June 13th, 2007 at 3:14 pm
Hey, did you try inkscape? Look equally impressive. here is a similar tutorial to create this all-too-familiar reflection effect in inkscape.
Another dog-ear sticker tutorial is quite interesting as well.
June 16th, 2007 at 3:41 pm
Hi bro, Thanks for complete and easy tutorial. At the moment im cracking my head to learn Adobe which seems kind of “hard” for me. Downloading Fireworks now . Will link my image soon!
.. Thanks again!. Learn alot from ur web!
Sincerely,
Novinthen.K
Ipoh
June 16th, 2007 at 3:51 pm
@kahfei: I haven’t tried Inkscape before.. I probably will in the future. But as of now I’m sticking to Fireworks as it’s what I’m currently comfortable of using at the moment. But Inscape and GIMP does look pretty promising
@Novithen: No problem buddy. Glad you found my tutorial useful
Looking forward to your image link 
June 17th, 2007 at 3:12 am
HI there cikgu :p
this is my image link
http://novinthen.com/blog/img/novinthencom.png
Added some “STYLES” . Never knew imaging could be this easy
.. yippe 
July 9th, 2007 at 5:07 am
what is a name the font
July 9th, 2007 at 9:19 pm
that was one most fav thing and i wanted to learn… it was so easy thatnsk
July 21st, 2007 at 4:16 am
[…] Re: Help!! Fireworks Text reflection effect. I have written a simple tutorial on how to create a reflection effect using Fireworks. Check it out here: How to create Fireworks reflection effect in 5 simple steps […]
July 23rd, 2007 at 2:45 am
@Novinthen: Nice one! Congratulations!
@scar: oops.. i can’t remember the font name.. could be Trebuchet MS i guess..
@gefadi: learn all the way you can…
March 9th, 2008 at 2:25 pm
If you want quick and easy canned image reflection, with online generator, look here:
http://effectgenerator.com/blog/?p=11
March 17th, 2008 at 10:08 am
Thanks for such a simple an easy explanation of how to do this… I’d previously found another site who had explained a much more complicated way using masks, etc… but yours is much easier! Thanks