Create Reflections in PS

written by Web designers London on September 19, 2012 in Tutorials with 3 comments

reflections

Now we have our new computer we thought we would use all that power to bring you great web design tutorials. Today we thought we would show you how to create simple yet effective reflections in PhotoShop. We will be using PhotoShop CS6 but this can be done in previous versions.

Let’s take a look at the final piece

final

If you prefer to view this reflections in PhotoShop video you can view it below

So let’s begin

Firstly we start by opening a new document 800px x 600px we have also added a dark background.

We then need to take our image that we will be wanting to apply the reflection too, in this case we are using a PNG image of an iPhone. When we have the image where we need it we click on the Marquee rectangle tool (highlighted in pink) and select about 25% from the bottom of the image. Once it is selected click CTRL + J this will duplicate the selected image on to its own layer.

tut1

We now have this section on its own layer, we now need to flip it vertically to do this on the layer press CTRL + T to enter free transform, you then right click inside the section and click on flip vertical press enter than drop the layer to the desired position.

We then need to create a layer mask (highlighted in pink)

tut-2

To get the faded look for the reflection with our layer mask selected we need to click on the Gradient tool (highlighted in pink) making sure our gradient is set to foreground to transparent making sure black is the foreground colour. We start by clicking at the far bottom while holding SHIFT, then drag the cursor up to above the image about 20%

tut3

To give the final effect we can drop the opacity of the layer to around 70% then click on the layer so the layer image is highlighted not the mask, at the tabs on the top click on filters then hover over blur then click on Gaussian blur. Set the blur to around 1.1 this should fine but of course change this to your heart is content until you get the desired effect.

tut4

That’s it, in the video I also threw in a little shadow in the video. Well we hope you have enjoyed this PhotoShop tutorial and have learnt a little bit, as always feel free to comment.