How do you create the mirror effect?

Discussion in 'Design and Graphics' started by dalvin200, Apr 20, 2006.

  1. macrumors 68040

    Joined:
    Mar 24, 2006
    Location:
    Nottingham, UK
    #1
    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:
     
  2. macrumors 68030

    munkle

    Joined:
    Aug 7, 2004
    Location:
    On a jet plane
    #2
  3. thread starter macrumors 68040

    Joined:
    Mar 24, 2006
    Location:
    Nottingham, UK
    #3
    Thanks for that, although I don't have photoshop on my mac. Will this work on photoshop for pc?

    Thanks
     
  4. macrumors 68030

    munkle

    Joined:
    Aug 7, 2004
    Location:
    On a jet plane
    #4
    Have no idea but I guess it should...
     
  5. macrumors member

    Joined:
    Aug 26, 2003
    #5
    Yeah, for that effect, flip and use a gradient.

    -- Mark
     
  6. macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #6
    Works great on the web, but if they ever want to take that to print, its a whole new logo.
     
  7. macrumors member

    Joined:
    Feb 16, 2006
    Location:
    Canada
    #7
    A cast shadow AND a reflection! Now there's something.

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

    :D
     
  8. macrumors 68040

    dornoforpyros

    Joined:
    Oct 19, 2004
    Location:
    Calgary, AB
    #8

    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
     

    Attached Files:

  9. macrumors member

    Joined:
    Feb 16, 2006
    Location:
    Canada
    #9
    lol - nicely done.
     
  10. ATD
    macrumors 6502a

    Joined:
    Sep 25, 2005
    #10


    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.



     

    Attached Files:

  11. macrumors 68020

    Joined:
    Jan 7, 2003
    Location:
    Washington, DC
    #11
    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.
     
  12. ATD
    macrumors 6502a

    Joined:
    Sep 25, 2005
    #12

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


     

    Attached Files:

  13. macrumors 68020

    dogbone

    Joined:
    Sep 16, 2005
    Location:
    S33.687308617200465 E150.31341791152954
    #13
    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.
     
  14. ATD
    macrumors 6502a

    Joined:
    Sep 25, 2005
    #14
    Should we start a discussion of QED here? My minor was Physics :D ;)

    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.



     
  15. macrumors 68020

    dogbone

    Joined:
    Sep 16, 2005
    Location:
    S33.687308617200465 E150.31341791152954
    #15
    Sounds like a plan. While not QED this 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.
     
  16. thread starter macrumors 68040

    Joined:
    Mar 24, 2006
    Location:
    Nottingham, UK
    #16
    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
     
  17. macrumors 68020

    dogbone

    Joined:
    Sep 16, 2005
    Location:
    S33.687308617200465 E150.31341791152954
    #17
    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.
     

    Attached Files:

  18. thread starter macrumors 68040

    Joined:
    Mar 24, 2006
    Location:
    Nottingham, UK
    #18
    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" :)
     
  19. macrumors 68020

    dogbone

    Joined:
    Sep 16, 2005
    Location:
    S33.687308617200465 E150.31341791152954
    #19
    :eek:

    er I meant that.:eek:
     
  20. macrumors 68040

    dornoforpyros

    Joined:
    Oct 19, 2004
    Location:
    Calgary, AB
    #20
    :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.
     
  21. ATD
    macrumors 6502a

    Joined:
    Sep 25, 2005
    #21
    LOL, cartoon Physics.

    The Gs and the surfaces were rendered in Maya.


     
  22. thread starter macrumors 68040

    Joined:
    Mar 24, 2006
    Location:
    Nottingham, UK
    #22
    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..
     
  23. macrumors newbie

    Joined:
    May 2, 2008
    #23
    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.
     
  24. macrumors 6502a

    opeter

    Joined:
    Aug 5, 2007
    Location:
    Slovenia (EU)
    #24
    Could you please post it?
     
  25. thread starter macrumors 68040

    Joined:
    Mar 24, 2006
    Location:
    Nottingham, UK
    #25
    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 (above)

    hope it helps :)
     

Share This Page