Reflections in Photoshop

Reflections in Adobe Photoshop
Sep
10

Since the dawn of what people have dubbed Web 2.0, a series of common design elements have sprung up on many sites. One of these popular trends is to have objects having reflections as though they were standing on a shiny surface.

Although quite often effective, it does not mean that reflections are a particulary hard task for most users of Photoshop - though it is not necessarily obvious how it can be done.

As a starting point, create a new document and make sure there is plenty of space for the text and it's reflection. It is possible to use this tutorial to do the same with an image, but for the purpose of simplicity this is using text. Once your document is created, use the text tool (press T) and type your text.

Step 1

Once your text is in place, duplicate the layer . This can be done on the PC by pressing either Ctrl-J or using the icon in the layer palette. On the Mac, this can be done also by the icon, or by using Command + J. Make sure the text is now selected, and enter transform mode by either pressing Ctrl-T on the PC, or Command+T on the Mac. Next, right click on the image, select "Flip Vertically" and then make sure the bottoms of the two text layers line up as shown below. Once you are satisfied with positioning of where the reflection is, press enter or click on the tick in the toolbar to keep the changes. During this transformation stage you may also want to use "skew" from the context menu in order to have a reflection at a slight angle.

Step 2 Step 3

Now that what will be the reflection is in place, you will want to move the copied layer to below the main layer in the palette. The reason for this is that the reflection does not appear to overlap the actual text being reflected. Once the layer has been moved it will need to be rasterised. In windows, this can be done by right clicking on the layer, and selecting "Rasterize Layer".

For this final part, a gradient will be applied to a mask so that only so much of the reflection shows through. To create the mask click on the mask icon in the layer palette whilst the copied text layer is selected. With the gradient tool selected (press G, or click on the tool from the palette) you will now need to click and drag from somewhere near the top of the image to the bottom of the image. By dragging from different points, different angles, and different lengths, you will change the effect that is produced. This is something that can be messed around with until you reach a result you are happy with.

Step 4

One thing worth noting is that when creating the gradient on the mask, that the default colours (black and white) must be selected - this can be reset to default by pressing D on the keyboard. With a few changes this method for creating reflections also works well for creating shadows from a backlit source.

Summary
  • Create Document
  • Add text
  • Duplicate layer and arrange before first text
  • Rasterize layer, flip it, and move it below other text
  • Add mask layer
  • Use gradient fill in the direction the gradient should go

your comments - Post a comment

Anonymous

great, but I have an other problem I've done a 3 model text with a perspective, so how to use the reflection effect with a natural aspect of the 3D element which can restitute the volume ?

Anonymous commented 3 years ago
David G. Paul

Guess I'll write a follow up to this article then ;)

David G. Paul commented 3 years ago

Have your say

Please feel free to leave comments! Please note that at present it can take up to 24 hours for your comments to appear on the site - I hope to have this sorted soon though.