Create the web 2.0 reflection effect with Adobe Illustrator
May 12th, 2007
Few days before, I wrote a tutorial on how you can build a web 2.0 logo with Adobe Photoshop. Here is another one for adding the reflection effect in a logo (like mine above) using Illustrator, which makes the reflection more flexible and easy to scale and manage. Open your logo in Adobe Illustrator and follow these steps:
- Duplicate your image by pressing alt (command for Mac) and clicking it. Drag it down (pressing the “shift” key while dragging helps for keeping your image aligned) so it looks like the one below.
- Select the original object and click object>lock>selection to lock it.
- Select the duplicated object and click object>transfrom>reflect. Choose horizontal with 0 angle. Move the duplicated logo exaclty below the original one.
- Select the rectangle tool and draw a rectagle that covers the reflected image like in the screenshot below (color does not matter).
- Fill the rectagle with a white-to-black gradient, set angle to -90 and point color points like in the screenshot.
- Select the gradient rectangle and the reflected image by pressing control+A (command+A for Mac) as the original object is locked and apply a transparency mask by clicking on the arrow in the upper right of the Transparency tab.
- Drop down the transparency opacity to 40-50% to make the effect more realistic and your reflection is ready!
Note that making the reflection with Adobe Illustrator has nothing to do with the background color (like in Photoshop). Follow the same steps for applying it on dark backgrounds.
Tags: adobe, beta, design, guide, illustrator, internet, logo, Photoshop, tutorial, Web 2.0
Related posts:
Gradients for shiny web 2.0 logos
Create text logos using Adobe Photoshop
Create a Web 2.0 logo using Abobe Photoshop part 2
Digg effected!
How to: Create iPhone webclip icons
Gradients for shiny web 2.0 logos
Create text logos using Adobe Photoshop
Create a Web 2.0 logo using Abobe Photoshop part 2
Digg effected!
How to: Create iPhone webclip icons
May 16th, 2007 at 1:58 pm
[...] Here are five shiny gradients to use for your web 2.0 designs. Note that colors used in these gradient are in RGB mode. The color codes are written in the screenshots. We used Adobe Photoshop CS3 to make the gradients, so if you use a different program, colors may be a little bit different due to the algorithm used by each program. The yellow gradient is the one we used for the beta logo in this post. [...]
June 26th, 2007 at 5:44 am
Thank you! I knew how to do reflection in photoshop, but not in ai.
great tutorial!
October 21st, 2007 at 9:55 am
Awesome! I have been trying to figure out how to make the reflection effect for a long time on my own but never could figure it out. Thanks for the tutorial. Found it in a google search after fiddling with ai.
November 13th, 2007 at 8:23 pm
[...] read more | digg story [...]
December 18th, 2007 at 1:00 am
thanks a ton man!! Great tute.
July 2nd, 2008 at 9:10 pm
Great! Thank you, quick and easy!
August 22nd, 2008 at 8:47 pm
Thanks a ton. Very useful indeed.
November 26th, 2008 at 12:42 am
that’s awesome. great tip. thank you!
December 16th, 2008 at 3:30 pm
Thank you for your good job!
July 20th, 2009 at 5:28 pm
Very nice and simple effect! thanks
November 23rd, 2009 at 10:37 pm
Really nice, I didn’t knew that something like that could be done.
January 19th, 2010 at 2:48 am
I’ve tried doing this in photoshop by following other tutorials and have always felt overwhelmed. This is by far the simplest method I think, and you explain it very well for laymen like me. Thanks!