Let's start with a background image to put our text on. I've quickly made this background that looks like some sort of distorted stand, it's going to be a good place to put the text on. Save the image below and open it in Photoshop:


Create a new layer on top of the background and name it text shape. Select a text tool from the tools palette and define the following settings for the font:


Now pick a white color and write some text. Since it's a small background, you can only write a few letters so i've decided to write FX:



Right-click on the text layer and choose Convert To Shape from the popup menu. Now press CTRL+T to start transformation process and, while holding your CTRL key, drag the corner handles until you get this transformation shape:


OK we have a basic shape, let's do something with it. First, right-click it and select Rasterize Layer. Then make this layer invisible by clicking on the eye icon next to it. We don't really need this text, we will only use it to load the selection of the text's shape. Press CTRL+J to duplicate this layer and unhide the duplicate. Now set its fill to 0% (a setting next to the opacity in the layers panel). Also rename this new layer to stroke. Double-click the layer and add a 1 pixel white outer stroke:


Create a layer below the stroke layer, select them both and press CTRL+E to merge them together. Now press CTRL+J to duplicate the stroke layer. Reselect the original layer (the one below) and select the move tool from the tools palette. Now press the left cursor button on your keyboard (the one that moves the caret to the left :) once. Duplicate the current layer and once again press the left cursor button. Do this 4-5 times. You will notice the stroke thickening with every operation. Select the topmost stroke layer and keep pressing CTRL+E until you merge all the duplicates to the stroke layer. The only layers left should be the background, an invisible text shape and the stroke. And the picture should now look like this:


Now CTRL+CLICK on the stoke layer's thumbnail. This will select the white outline (stroke). If you look closely, you'll notice some unwanted artifacts in the outline and to remove them, we simply need to select the outline and fill it with white color. We've already done the selection part, it's time to fill, so press ALT+BACKSPACE to do it. You can now deselect (CTRL+D) and the outline should be a little smoother. The next part is probably going to be a little fictional :) We will create a shadow. I'm not sure if a very clear glass can cast a shadow, but let's imagine it can. Here's where our hidden layer comes in: create a new layer below the stroke and name it shadow. Now CTRL+CLICK on the text shape layer's thumbnail and select shadow layer. Press D to default color values and ALT+BACKSPACE to fill the selection with foreground color (in this case it will be black). Deselect (CTRL+D). Now go to Filter > Blur > Gaussian Blur ... and apply a 4 pixel blur. Then press CTRL+T and, once again, holding the CTRL key, drag the corner handles to make the following shape:


Set the shadow's opacity to 20%-30% (whatever looks best). Create a new layer on top of all others and call it reflection. We will need something for the glass to reflect so let's imagine it will reflect a room. That means we need a picture of a room. I've used this one from sxc.hu website. Open it in Photoshop, paste on the document and resize to fit. I've also flipped the room horizontally (Edit > Transform > Flip Horizontal). Decrease the opacity a little so that you could see the text outline through:


Since there's no highlights on the X letter, i've decided to add some. I grabbed the clone tool from the tools palette and, using a soft partially transparent brush, cloned some highlights from the letter F to the X:


You can now change the opacity of the reflection to 100%. With reflection layer selected, CTRL+CLICK the hidden text shape layer to load its selection. We only need to leave the reflection on the text and dispose of everything else. So far we have the text selected and hitting DEL would do exactly the opposite. That's why we need to press CTRL+SHIFT+I to invert the selection. Now we can press DEL and watch all the unnecessary parts go away:


So far this is not a good reflection and we need to tweak it a little. We need to make our glass reflect only the lightest parts of the reflection texture. That's where levels adjustments come in: press CTRL+L to bring up levels dialog. Now drag the middle slider to the right until you reach a decent result like the one below. You can also play with the left slider as well too. This operation will darken the shadows and midtones and only the highlights will remain intact. That's how your texture should look after the levels adjustment:


Now change the reflection's blending mode to lighten and set its opacity to about 20%. And here's how it looks like now:


Select the stroke layer and grab the burn tool from the tools palette. Set its exposure to a lower than 10% number and range to highlights. Also pick a small soft brush:


Burn some areas of the outline to make it look less plain. This is a minor tweak and you would probably not notice any difference without looking into both images at the same time to compare. Here's how mine looks:


As i've mentioned, not much of a difference from the original, but we'll tweak this a little by decreasing the intensity of the whole outline. Press CTRL+U to open hue/saturation dialog and drag the lightness slider to the left until the value is about -30. And now there's a little bit more contrast original and burned areas, thus resulting in more detail:


One last thing we might do is add an aditional reflection. This is an optional part: some of you might like the result as it is now, some as it will become after adding an additional highlight so let's give you a chance to decide. Create a new layer on top of everything and name it highlight. Draw a selection with an elliptical marquee tool from the tools palette:


Now pick the gradient tool from the tools palette, press D and X on your keyboard (default color values and exchange them) and use the following settings for the gradient:


Draw a gradient from top to bottom like so:


Deselect the gradient with CTRL+D. Now press CTRL+T and with the CTRL key pressed, distort the gradient like this:


CTRL+CLICK the hidden text shape layer to load its selection, press CTRL+SHIFT+I to invert and DEL to delete the unneeded parts of the gradient. Lower the opacity of the gradient to about 60%-70% and you'll have a final result. So let's compare the two results:


Use the one you like best. Hope you liked this tutorial, see you next time :)

Article written by: Marius S.
This article is an intellectual property of its respective author. All images, used here are property of tip-kit.com if not stated otherwise.

Share this article

Leave a reply

Your name:

Message:


Please enter the above code: