15

3D Object, Web 2.0 Reflection

Posted Monday, July 7th, 2008

In this simple tutorial, I am going to create a web 2.0 reflect effect in photoshop. We have all seen the effect dotted around, in fact it has become a very common style applied on logos, icons, images and so on.

Websites such as Apple, Vodafone and Pepsi are all using the effect somewhere on their sites. There are even scripts and sites out there to create the effect for you. http://h-master.net/web2.0/ for example, allows you to enter a piece of text, and then will automatically generate a web 2.0 reflect effect on the imputted text… Clever huh! but still, it is applied on a 2D object.

But what about 3D objects?

What these auto generators do not take in to consideration is a 3d object. They will still generate the effect but it will look incorrect.

Image to show Incorrect example of Web 2.0 Reflection

What it will do is take the lowest point of the image and create the reflection from there.

So even though these effects are extremely clever, they do have their limits. What I am going to do is look at a couple of simple ways to create a reflection effect, which can be created in photoshop or any vector editor, which will reflect the 3D object correctly.

The Skew method

In this method we take a duplicate of the original image and skew it on a reverse mirrored angle to the original. Taking into account the 3D plane of the original object.

Step 1: Duplicating your object

The first step is to duplicate your 3D object or group. Right Click or Control Click on the layer or group and select ‘Duplicate Layer’ or ‘Duplicate Group’, call this new layer ‘Reflection’.

Please note: if you have duplicated a group rather than a layer, you will need to merge the group before we move on. This is done by Right Clicking or Control Clicking on the ‘Reflection Group’ and selecting ‘Merge Group’

Step 2: Mirror the layer

The next step is to mirror the new layer. Make sure you have the ‘Reflection’ layer selected, and select the ‘Move Tool’ or press ‘V’ Now click on one of the top Transform nodes surounding the object, and drag it vertically down until the image reverses itself.

Step 3: The Skew

This is where we correct the simple 2D reflection by skewing the reflection to correctly mirror the original object.

We need to decipher where the lowest point of the image is and split the reflection at this point. On the example used the lowest point ‘Touching Point’ is the bottom corner of the house.

We firstly with our Rectangular Marquee Tool or ‘M’ select all the reflected object that appears to the left of this point. We then go to Edit > Transform > Skew. This will bring up some transform nodes around our selection. We then click and drag the left center node upwards. This will align the reflection up with the base of the original image.

Once happy with the angle, we press Enter to complete the skew. This process is the repeated with the other side of the reflection.

Step: 4 Touch ups

After we have successfully skewed the reflection so that it sits nicely underneath the original and all the planes match up, we need to do some small Touch ups. With this particular example it is around the door area, but this will be different depending on your example.

I simple select the area which needs filling on the reflection layer and fill it to the same colour as the door.

Step 5: Creating the Fade

There are many ways to create a fade in photoshop, but I am going to use a simple ‘feathered lasso’ to get rid of any excess reflection we don’t want. If this was a complicated image and you did not want to delete an information you could always mess around with masking off layers. But for this example i am going to keep things simple. Select your Lasso tool or ‘L’ Make sure the anti alias is selected and add a Feather, for this I added 10px.

I then selected a V shape running along the faces of the reflection.

This selection then gets deleted. We then drop the opacity of the reflection layer down to whatever suits your image. For my example I have dropped the layer opacity down to 40%.

Other Example

Tags: Icons, Photoshop, Web 2.0