XNA Image Reflector. Easily create web 2.0 reflected images

  noviembre 15, 2007      
In the last months or years, every single power point I see, with a decent design and look, includes pictures that have been "reflected" vertically, as if they where in the top of a reflecting table or so... it´s the so-called "web 2.0 reflection". Just like this one:


This kind of effect can be easily done with Photoshop or whatever, just reflecting the image and aplying a distort and a gradient mask, but hey! those 5 minutes per image are priceless! So I decided to make a small app that allows you to create this kind of effect in 5 seconds.

Probably there´s already something similar out there (see below), but I do it just for fun and to practice some new things I´m explaining below. I will upload the source code here or at TheCodeProject, so you all can check how it´s done.

Specs:
  • Automatic reflection using a reflection polygon to specify the shape of the form to reflect
  • Automatic reflection distortion
  • Automatic alpha gradient with different gradient modes
  • Image resizing and re-locating
  • Post-processing effects for reflection: Blur, Alpha Texture, ...
  • Supports following formats: BMP, JPEG, TGA, PNG, DDS, DIB, HDR, PPM, PFM

Technical info:

  • Developed in Visual C# Express
  • All the maths and graphics done with XNA
  • Shows integration between XNA and Windows Forms

An example:

1.- Take the original picture:


2.- Apply my XNAImageReflector: with blur post processing turned on

As you can see, the cool thing of all this stuff (appart from the post-proc effects) is that you can build a path that will define the shape of the reflection. Not just vertical or horizontal reflections, which are Ok for non-perspective objects, but that doesn´t work well on logos like this one.

3.- Save the final image:

Other examples created with XNAImageReflector:



This one shows the Alpha Texture post processing effect too:

Similar projects and tutorials I´ve found:


Cheers!