Welcome to the Digital Hub of J David Macor, a financial professional in Dallas, TX.

Master the Web 2.0 Style Reflection


01.05.07 Posted in Fireworks, How To, Tutorials by jdmacor

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.’

Reflecto Logo

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.
Tutorial Pic 1

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:

Tutorial Pic 2

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:
Tutorial Pic 3

Next, hover over to your layer inspector and find the ‘Add Mask’ button and click it, making sure your inverted logo is still selected.
Tutorial Pic 4

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.

Tutorial Pic 5

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.
Tutorial Pic 6

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…



52 Responses to “Master the Web 2.0 Style Reflection”

  1. Jose says:

    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.

  2. [...] 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. [...]

  3. Keith D says:

    Nicely set out and well explained.
    Thanks for the helping hand.
    Keith

  4. Testking says:

    It’s really nice tutorials, especially the images make work so easy. Really helpful.It could be very helpful in the preparation of my certification.

  5. Imprezy says:

    Very good tutorial. Thanks for sharing it!

  6. Very Nice Shoppingtiffany

  7. wonder says:

    Very useful artical .Thank you very much .Best wishes !

  8. hobo bag says:

    Very cool article! I like your idea.

  9. thx for sharing with us ,i`ve learnt a lot

  10. m65 says:

    great share thanks

  11. george says:

    Thanks for making that statement. Technical mastery requires constant practice. Masters need to be living in the trenches where business and technology clash and/or mesh every day.

  12. Amy liao says:

    Very interesting post thank you for sharing I just added your blog to my favorites and will check back. By the way this is a little off subject but I really like your blogs layout.

  13. kevin says:

    I hope you can get the best of blessings, and a better life.
    Yesterday, my birthday, a friend received a gift.
    God, actually is a , which I have always wanted a gift of fanshion rings, than I even received flowers from her boyfriend

    happy, I will be very useful collection ring, and take good care of this beautiful friendship.”

  14. jacky says:

    very nice , i will make one for myself~~ thanks sharing!

  15. lily says:

    very nice. thanks! i got it~

  16. mike says:

    great design! i will create one by this way. thanks!

  17. hensony says:

    Wow really a great post. I like this. I just passed this onto a colleague who was doing a little research on that. photoshop can do the same job.

  18. gucci 2010 says:

    your blog is very well, benefit from you

  19. sandy says:

    how great you did

  20. I am really thankful to you for the great article. I really like it. Thanks.

  21. [...] Carl Pettersson D.A. Points John Rollins Justin Rose Rory Sabbatini [...]

  22. I don?t know if greatest practices have emerged round issues like that, but I’m positive that your job is clearly identified as a fair game. Anyway, in my language, there aren’t much good supply like this.

  23. I just wanted to leave a quick comment to say that your blog was nice.

  24. Excellent tutorials, its not that complicated like the other tutorials I read..!!I ma going to try that one now.Thanks for sharing..Good job.

  25. hmmtube says:

    Very Nice Shoppingtiffany

  26. wctube says:

    Carl Pettersson D.A. Points John Rollins Justin Rose Rory Sabbatini

  27. [...] Aaron Baddeley Matt Bettencourt Jason Bohn Michael Bradley Jonathan Byrd [...]

  28. Thanks. You could certainly make this work with some of the information here. I think it would be a bit labor intensive to model the text in a way that would be curved enough to maintain that look at a variety of angles but not be so curved as to look strange.

  29. Our animation teacher in college taught this simple animation, and we really had fun.!!We used adobe flash at that time..Nice post, .

  30. I am very much happy to write you this blog. Thanks a lot for sharing this informative site in this blog. I really liked it very much. Thanks a lot!

  31. After read your post,i have learned a lot,thank you

  32. xuemei says:

    I kept thinking Christian Louboutin Stylish Pumps, this could not help

    because the master’s mouth showing a hint of a smile .

  33. xuemei says:

    Christian Louboutin Stylish PumpsI kept thinking

    because the master’s mouth showing a hint of a smile .

  34. While I was looking for some information about various medications I have noticed this interesting post about web 2.0 functions. I really liked this information and I will definitely bookmark this site and visit it again in the future. So thanks a lot for sharing this wonderful stuff again!

  35. Kayako says:

    Thank you for the step by step tutorial, very interesting logo.

  36. Gift Ideas says:

    I love this font design.

  37. Gift Ideas says:

    I know this trick first time. Thanks for sharing.

  38. Very simple, but still nicely done, as I was told at my courses logo has to be simple but memorable.

  39. Magento templates also sometimes it is called as Magento themes deliver instant solution for your business. You can use the Magento free templates or Magento premium templates and get started in minutes! Both types of templates free and premium can be customized according to your needs. If you wish to reach the target audience and make more sales, make use of premium Magento themes it will help you to attract more customers and get a better conversions rate. Let the design of your online store become an additional tool for attraction of clients. Magento themes deliver best practices of e-commerce shopping cart to your business. Magento is one of the best e-commerce solution on the market.

  40. banzai says:

    Very good websites where I can start a blog for free?…

    I want to start a blog where i can just type anything that comes to mind. Kind of like a diary but not as personal. Any good websites where I can start my own blog for free and where lots of people see it???? Please and much thanks appreciated!! :) . …

  41. Nancy says:

    Just another useful example of making reflection, thanks! custom essays cheap

  42. X-cart says:

    Really great tuto, the only thing is missing, as for me, of course, it’s a visualization..

  43. fake chanel says:

    These watches are known not only for their beauty and high fashion appearance and price, but also for those who create them using different materials.

  44. The strap is Chanel watch one of the most interesting design features. Brought in the design of these complex and innovative blend of materials.

Leave a Reply

Search
Categories
Other Places I Roam