Relflections, a Web 2.0 Staple
April 23rd, 2008Web 2.0 means a lot of things to a lot of people. Since I’m a designer I tend to think of a certain set of design styles when someone mentions Web 2.0. I also gag from hearing the term all the time.
A staple of web 2.0 design are reflective surfaces. You see them everywhere. When done right it’s a cool looking effect, but there are some simple rules to using the reflections effectively. I stumbled upon the Playstation Store graphic and it looks a little off.
This doesn’t look like a real reflection, the bag is way off, it’s not realistic. It’s best to stay away from images that drop below the baseline of your reflection.
Here are a couple examples. Sample A has a descender (the lowercase p) and it takes away from the effect. Sample B changes that by aligning the bottom of the p with the baseline. That makes it look realistic but it also changes the effect. Sample C is in all caps and it gets rid of the descender that was giving us so many problems. The Playstation Store logo suffers from the same problem that Sample A does, the image drops below the baseline. So if you have an image like that bag how do you make it look good? Below is a quick and dirty step by step on how to fix it.
First, in Photoshop, I cropped out the bag and put it on it’s own layer, then I duplicated the layer and reversed the image (edit > transform > flip vertical). Then I positioned the flipped back under the original like in step 2. Next I used the polygon lasso tool to create an outline of the left side of the bag in step 3. Next I needed to transform the selection, I selected the Move Tool (V) and hit ctrl+t. When you transform something you will see small boxes appear around the image. I grabbed the one the left side in the center and moved it up (a little tip, if you hold the shift key while moving things in Photoshop it moves just on the x or y axis). I repeated these steps on the other side of the bag so it looks like step 6. Now we have a more realistic looking bag reflection so I set the layer transparency to around 20% and added mask to the layer and used the gradient tool to make a smooth transition.
Bad reflections are a pet peeve of mine. Now that I’ve pointed them out, you’ll see them everywhere and you can be annoyed too. You can thank me later.
liam_uk7
April 23rd, 2008 at 6:00 pmVery good point. It’s quite dificult to understand how the reflection will look when it drops below the baseline so this is a great way of explaining it. Brilliant!
Jacob Cass
April 23rd, 2008 at 10:30 pmWhat happens when there is a descender. ie. try to make a reflection on. Have a Good Day. Where does the reflection go on the Y? I always found this a bit tricky to look right. You have no subscribe to comments button?
liam_uk7
April 24th, 2008 at 6:00 am@ Jacob.
I’d love to hear if anyone have a better/correct suggestion for this common problem can be solved.
The one way I usually get around it is to fade the parts that drop below the baseline.
Here’s a quick example: http://img410.imageshack.us/img410/8396/haveagooddayhk8.jpg
It’s more of a cheat than anything, because realistically the reflection would have to look like Brad’s “Sample B” But I think the method I use looks better, although technically not realistic I think it’s a nice cheat. And if you have a play with the idea you could get something which looks quite nice.
You can subscribe to the responses using http://colbowdesign.com/blog2/?feed=rss2&p=123 – It’s mentioned just above the responses.
Brendan Cullen
April 24th, 2008 at 9:11 amGood post, if you had written this 2 years ago you might have saved a lot of sites from sloppy reflections.
@Jacob, if it must be lowercase and you’ve got a descender, You could try cheating a little bit and bump up the y to the baseline, or maybe small caps.
brad
April 24th, 2008 at 9:19 am@Jacob, it’s tough if you have a descender like that. If I know I’m going to be using reflections on a site I use all caps on my headlines to avoid the problem.
As far as the subscribe to comments button, I’ll make a note of it and ad it to my wanted features list for my upcoming redesign. Thanks for the feedback, and I love the logo on your blog.
Candis
April 24th, 2008 at 2:23 pmCool! This is helpful. I’m a bad reflection creator.
Jacob Cass
April 24th, 2008 at 9:52 pmNo worries. Hmm I wonder if anyone has a real solution without cheating. I have found if I make the reflection the same length as the small caps (ie. not the full descender reflection but only up to where the reflection from the smaller letters go) it works quite well. It’s hard to explain in writing.
kailoon
April 25th, 2008 at 3:38 pmya, u r right. Sometimes they just can’t make it right
Josh Walsh
April 25th, 2008 at 10:48 pmI’m amazed at how well OSX’s automatic reflections work, even when characters are below the baseline. Really some ingenuity from their design team.
Thanks for sharing this process Brad.
Tim
April 28th, 2008 at 10:28 am>>A staple of web 2.0 design are reflective surfaces.
Not to mention pointy little stickers with the edge folded up and two tone curvy backgrounds that look like metal.
I was using these techniques years and years ago but resolutely refuse to drop them in nowadays since they are done to death.
Nice article nevertheless
Websites you shouldn’t have missed in April 2008
April 28th, 2008 at 8:06 pm[...] 7)Relflections, a Web 2.0 Staple [...]
Tom
April 29th, 2008 at 11:05 amGreat tips, the web is full of wrong reflections.
Cleo
April 29th, 2008 at 2:12 pmCongrats, this is a great tutorial!
Erika
April 29th, 2008 at 2:43 pmYou should show the bag and the text with the new adjustments!
Lee
April 29th, 2008 at 6:46 pmNice tutorial Brad. Very simple and straight forward but you’ve definitely pointed out an easier way to how I’ve been doing reflections. Cheers!
Top Best Graphic Design Articles of April 2008
April 29th, 2008 at 11:05 pm[...] Web 2.0 Reflections – How to do them properly- from Colboy Design A rant from a Brendan about web reflections and how they are meant to be done. A great article. [...]
Nout van Deijck - Blog
April 30th, 2008 at 9:20 amThank you for the information!
Great article!
Nout van Deijck – Blog
(about (web)design, science, typography, news)
==> http://www.noutweb.com/bog
Sketchee
May 6th, 2008 at 1:33 amGreat tutorial. Once I did this kind of reflection on a banner (a physical printed banner, 7′ long). Although the client approved the proof, she freaked out seeing it on the banner. It was a tough situation! I still like the reflections but I’m scared to use them after than incident. Who knew they could be so controversial!
Websites you shouldn’t have missed in April 2008 | SEO & Web Design
May 6th, 2008 at 4:19 am[...] 7)Relflections, a Web 2.0 Staple [...]
Websites you shouldn’t have missed in April 2008 | SEO & Web Design
May 6th, 2008 at 4:19 am[...] 7)Relflections, a Web 2.0 Staple [...]
faxdrecebra
May 7th, 2008 at 6:43 pmi am gonna show this to my friend, man
GLENN
June 9th, 2008 at 10:36 pmWhat do you know, I’m surfing the web looking for a good designer in Cleveland and I stumble across a great designer in Cleveland! Great tutorial Brad.
DON’T MISS: The Best Graphic Design Articles from April 2008 | Dalton Trent's Blog
July 1st, 2008 at 11:04 am[...] Web 2.0 Reflections – How to do them properly- from Colboy Design A rant from a Brendan about web reflections and how they are meant to be done. A great article. [...]
Danh ba web 2.0
July 17th, 2008 at 3:59 amThanks for share. It useful !
boby
January 17th, 2009 at 7:21 amNice tut. I found this tutorial to be one of the best for photoshop reflection using text http://eztutorial.co.uk/tutorials/photoshop/reflection/reflection.html