PDA

View Full Version : How do you create the mirror effect?




dalvin200
Apr 20, 2006, 04:11 AM
if you have seen the TUAW.com logo (http://www.tuaw.com/media/logo.gif) you can see what I mean about the "mirror" effect..

How is this done? As it's also done in iWeb too, but I want to do it freehand.

Is it just flipping a copy of the image and then using a linear gradient or something?

Or is there any easier way?

Thanks

PS: I'm not a whizz with photoshop or anything :o



munkle
Apr 20, 2006, 04:23 AM
This Photoshop action set (http://twinsparc.com/a/wetfloor/) will do the grunt work for you (assuming your using Photoshop) :)

dalvin200
Apr 20, 2006, 04:37 AM
This Photoshop action set (http://twinsparc.com/a/wetfloor/) will do the grunt work for you (assuming your using Photoshop) :)

Thanks for that, although I don't have photoshop on my mac. Will this work on photoshop for pc?

Thanks

munkle
Apr 20, 2006, 06:17 AM
Have no idea but I guess it should...

mark_wilkins
Apr 20, 2006, 03:56 PM
Yeah, for that effect, flip and use a gradient.

-- Mark

ChicoWeb
Apr 20, 2006, 06:47 PM
Works great on the web, but if they ever want to take that to print, its a whole new logo.

mac.FINN
Apr 21, 2006, 10:20 AM
A cast shadow AND a reflection! Now there's something.

Best use of ridiculously cliched and needless effects in a logo... EVER!

:D

dornoforpyros
Apr 21, 2006, 11:37 AM
A cast shadow AND a reflection! Now there's something.

Best use of ridiculously cliched and needless effects in a logo... EVER!

:D


no no, they still forgot a few cliches'

the sad thing is I could probably sell this for a reasonable sum of money to certain companies...probably the same companies who have "industry leader" on their website

mac.FINN
Apr 21, 2006, 12:32 PM
lol - nicely done.

ATD
Apr 21, 2006, 12:47 PM
A cast shadow AND a reflection! Now there's something.

Best use of ridiculously cliched and needless effects in a logo... EVER!

:D



One or the other but not both. Highly reflective surfaces tend not to show shadows. Reflections and shadows tend to fade and BLUR over distance, here's a very quick example.

Le Big Mac
Apr 21, 2006, 01:22 PM
One or the other but not both. Highly reflective surfaces tend not to show shadows. Reflections and shadows tend to fade and BLUR over distance, here's a very quick example.





interesting observation, although isn't the blur simply an effect from photography, where depth of field is insufficient? Nothing in the mirror I look at at home seems blurry, if I focus on it.

ATD
Apr 21, 2006, 01:49 PM
interesting observation, although isn't the blur simply an effect from photography, where depth of field is insufficient? Nothing in the mirror I look at at home seems blurry, if I focus on it.


A mirror is different but very few surfaces are prefect mirrors. Surfaces have 3 surface components, Diffuse, Glossy and Specular. Diffuse surfaces scatter light in all directions, because the light rays bounce in unfocussed direction there will be no reflection. A piece of chalk is a good example of this, the fine texture is rough. A Glossy surface will scatter light in a more focussed direction, giving it some reflective properties. These surfaces have a slight texture, like a painted surface. A Specular surface like a mirror is very smooth and will bounce light in one very focussed direction. Most surfaces that reflect are not 100% Specular. ;)

dogbone
Apr 22, 2006, 01:36 AM
It should also be pointed out that it is different photons that are reflected to the ones that went in. Not that this makes any difference. ;)

EDIT:

Another peculiarity of reflections is that you can see a very diffuse reflection like that from the surface of a wacom tablet but if you view it at a very acute angle it appears to be a mirror finish.

ATD
Apr 24, 2006, 03:04 AM
It should also be pointed out that it is different photons that are reflected to the ones that went in. Not that this makes any difference. ;)

Should we start a discussion of QED here? My minor was Physics :D ;)

Another peculiarity of reflections is that you can see a very diffuse reflection like that from the surface of a wacom tablet but if you view it at a very acute angle it appears to be a mirror finish.

I think that can be explained. The surface you are looking at is a smooth surface with very fine pitted texture on it. If you turn it on end you will only see the top smooth surface and not the pitting. The reflection rays will have a focused bounce to them like a Specular surface and will give you a mirrored look.

dogbone
Apr 24, 2006, 03:22 AM
Should we start a discussion of QED here? My minor was Physics :D ;)


Sounds like a plan. While not QED this (http://video.google.com/videoplay?docid=-4237751840526284618&q=wave+particle&pl=true) is fun.

EDIT: I forgot to mention I liked the idea of having the reflection on a bumpy surface. Was the surface rendered in a 3D app as well?

nothing to see here folks.

dalvin200
Apr 24, 2006, 04:58 AM
no no, they still forgot a few cliches'

the sad thing is I could probably sell this for a reasonable sum of money to certain companies...probably the same companies who have "industry leader" on their website

so how did you do this? that's EXACTLY what i'm looking to achieve..

i've not got GIMP installed, so any instructions would be greatly appreciated :)

thanks

dogbone
Apr 24, 2006, 05:26 AM
Dalvin, you got it right in your first post. It really is as simple as flipping it and fading.

Some things that can cause a problem though are letters that extend past the normal heigh of letters in order to counter the illusion caused by curves. So an 'S' will be lower at its lowest point than a letter with a flat bottom.

As you are trying to achieve a realistic effect of the letters sitting on a surface they obviously cannot extend *into* the surface. So there might be a bit of juggling involved (which I didn't do in my sample). Also chunky letters are better suited for this mirror effect.

You can just flip it and use a layer mask with a gradient to fade it. That is the basic effect but it's the little details that make it work better. You can also cmd click on the layer mask that you used to load it as a selection that you can use to apply a blur. In the sample I've posted I did that to apply a graduated blue. but then I made a copy of that layer and applied a motion blur at 90º as well. Then I reduced the opacity of the layers till they were right. Then I used another layer mask on the layer with the motion blur to remove the top part so it would be sharper at the beginning of the reflection. Finally I added a gradient background increase the effect of of a surface. Then I applied a bit of a lighting effect to the background and faded it.

dalvin200
Apr 24, 2006, 05:49 AM
hey dogbone - thanks for that..

i'll give it a try tonight using GIMP..

it's actually not for text, but for a photo image

PS: it's "Rubbish" :-)

dogbone
Apr 24, 2006, 05:59 AM
PS: it's "Rubbish" :-)

:o

er I meant that.:o

dornoforpyros
Apr 24, 2006, 10:16 AM
so how did you do this? that's EXACTLY what i'm looking to achieve..

i've not got GIMP installed, so any instructions would be greatly appreciated :)

thanks
:confused: your kidding right? please tell me your kidding and your not missing the irony of that image...

In case your not Gimp Reflection (http://www.gimptalk.com/forum/topic/Reflections-484-1.html)


ps. google is great :p

EDIT:Oh I misread that, I thought you had gimp, I used photoshop, but the technique is the same.

ATD
Apr 24, 2006, 12:38 PM
Sounds like a plan. While not QED this (http://video.google.com/videoplay?docid=-4237751840526284618&q=wave+particle&pl=true) is fun.

LOL, cartoon Physics.

EDIT: I forgot to mention I liked the idea of having the reflection on a bumpy surface. Was the surface rendered in a 3D app as well?

The Gs and the surfaces were rendered in Maya.

dalvin200
Apr 24, 2006, 02:37 PM
OK,

I've finally managed to achieve this in GIMP.. took me a while to get used to the controls etc.. and learn how to work with the layers etc..

so it's not the best, but i managed to do it, and with more practice can get things quite nice!!

but here we go :)

thanks for all the help..

cekim
Apr 17, 2009, 06:35 AM
if you have seen the TUAW.com logo (http://www.tuaw.com/media/logo.gif) you can see what I mean about the "mirror" effect..

How is this done? As it's also done in iWeb too, but I want to do it freehand.

Is it just flipping a copy of the image and then using a linear gradient or something?

Or is there any easier way?


That's pretty much spot-on. I used to do this manually in Gimp and if I recall correctly you duplicate the layer of the object you want to mirror, then reduce the opacity of that layer and apply a transparent linear gradient to the layer mask.

I say "used to" because it became quite tedious when trying to apply this effect to a large number of images for websites, so I switched to ResizeMe to batch reflect images (http://resize-me.com/mirror-reflection-effect.html) and have been satisfied.

opeter
Apr 17, 2009, 06:56 AM
OK,

I've finally managed to achieve this in GIMP.. took me a while to get used to the controls etc.. and learn how to work with the layers etc..

so it's not the best, but i managed to do it, and with more practice can get things quite nice!!

but here we go :)

thanks for all the help..

Could you please post it?

dalvin200
Apr 17, 2009, 07:41 AM
Could you please post it?

wow.. that post was almost 3 years back!!

anyway, i can't for the life of me remember, but there is a link with the steps in post 20 (http://forums.macrumors.com/showpost.php?p=2343235&postcount=20) (above)

hope it helps :)

opeter
Apr 19, 2009, 04:47 AM
wow.. that post was almost 3 years back!!

anyway, i can't for the life of me remember, but there is a link with the steps in post 20 (http://forums.macrumors.com/showpost.php?p=2343235&postcount=20) (above)

hope it helps :)

OMG, didn't see the date... :eek: Sorry.

Anyway, thanks for the link.