Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

How do you create the mirror effect?

D

dalvin200

macrumors 68040
Original poster
Mar 24, 2006
3,473
69
Nottingham, UK
if you have seen the TUAW.com logo 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 :eek:
 
A cast shadow AND a reflection! Now there's something.

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

:D
 
mac.FINN said:
A cast shadow AND a reflection! Now there's something.

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

:D
Click to expand...


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
 

Attachments

  • cliche'.gif
    cliche'.gif
    6.2 KB · Views: 4,050
mac.FINN said:
A cast shadow AND a reflection! Now there's something.

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

:D
Click to expand...



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.



 

Attachments

  • gblur2.jpg
    gblur2.jpg
    155.5 KB · Views: 227
ATD said:
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.



Click to expand...

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.
 
Le Big Mac said:
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.
Click to expand...


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. ;)


 

Attachments

  • Surfaces.jpg
    Surfaces.jpg
    50.7 KB · Views: 153
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.
 
dogbone said:
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. ;)
Click to expand...

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

dogbone said:
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.
Click to expand...

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.



 
dornoforpyros said:
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
Click to expand...

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

Attachments

  • rubbish.jpg
    rubbish.jpg
    6.4 KB · Views: 135
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" :)
 
dalvin200 said:
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
Click to expand...
:confused: your kidding right? please tell me your kidding and your not missing the irony of that image...

In case your not Gimp Reflection


ps. google is great :p

EDIT:Oh I misread that, I thought you had gimp, I used photoshop, but the technique is the same.
 
dogbone said:
Sounds like a plan. While not QED this is fun.
Click to expand...

LOL, cartoon Physics.

dogbone said:
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?
Click to expand...

The Gs and the surfaces were rendered in Maya.


 
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..
 
dalvin200 said:
if you have seen the TUAW.com logo 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?
Click to expand...

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 and have been satisfied.
 
dalvin200 said:
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..
Click to expand...

Could you please post it?
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back