Glass-like Reflecting Text

It seems that this type of text is becoming more and more popular on the web. Not just with text, either – images are being displayed in a similar way. Being reflected as though they were set upon a shiny glass surface. This article will show how we can replicate this effect using text.

We will start off with a document of 400×300, and a font size of 68pt, using Impact.

The first thing we will do to our text is to duplicate the text layer, by right-clicking it or dragging the layer onto the New Layer button.

Next, we will select the duplicated layer and then goto Edit > Transform > Rotate 180 degrees, and then Edit > Transform > Flip Horiztonal. Then we can position the text below the original, like so:

We will now goto the Layer Properties/Styles of the reflection by either double-clicking the layer or right-clicking and going to Properties. We want to add a Gradient Overlay. We need the bottom color to match the background. In this case, that’s white. The top color will need to match the color of the reflected text. If your text and/or background is not a solid color, we will show how to achieve the same results at the end.

So in this example, we will choose a simple black to white gradient. We may need to reposition it on the text so do this by simply dragging it around on the document whilst the properties window is still open. We will end up with something like this:

Next, we will reduce the opacity of the reflected text to 15% and add a custom Gradient Overlay to the original text. The custom gradient looks something like this:

Then the image will look something like this:

Now, if we have a background that is not a solid color, and text with a pattern, we could use this method. Let’s say we have an image like this:

We will duplicate the text in the same way, and rotate it the same. Then we want to rasterize the text, to make it an image: Right-Click the text layer we just rotated and mirrored and choose Rasterize Type. Then we can choose the eraser tool and select a soft brush that is around the same size as the text height. For example:

Now we want to erase the bottom half of the mirrored text. We can do this by holding shift to keep our brush in a straight line, and then erase the bottom half of the text. You can take off as much or as little as you like. Then we can adjust the layer opacity again and we should end up with something like this:

Using this as a guide, you can tweak the settings to provide different results. Experimenting with Photoshop is very much advised, as many many results are possible.