sidelanes.com

Download a printable PDF of this Tutorial Here.

This reflective type effect we will be doing is often seen on the web and it can help give a sleek, glossy look to a website. You will need a semi-recent version of Photoshop to follow along with this tutorial. I’m using Photoshop CS2 in this tutorial but the shortcuts should be the same for all versions.

(Final Image)

1. First, create a new photoshop document. In this case I made it 300 pixels high by 300 pixels wide at 72 dpi.

(fig. 1)
Now Select all by typing “command-A”  if you’re on a mac and “control-A” on a PC.

We’ll make our background layer blue by clicking on the top square at the bottom of the palette.(Fig-A)

Figure A – The Photoshop Pallete

I chose a blue, #000066 hexidecimal color but feel free to choose whatever color you want. Hit “option-delete” if you’re on a Mac or “Alt-delete” on a PC to fill your selected area with the foreground color that you chose.

(Fig. 2)

2. Next we’ll make a surface for the text to sit on. (Fig. 2) Select the Marque tool, it’s the one shaped like a square at the top of the palette.(Fig A)  Make a selection by clicking and dragging just outside the left side of the document. Fill this new selection with the color of your choice, in this case we used #9999cc. (Hit optn/alt-delete to fill the selection)

(Fig. 3)

3. Type in the text you want to display. Hit the (T) key on the keyboard or click on the type tool,(the one shaped like a T about midway down the palette) and type the text “4Life IT”. (Fig 3) I used the typeface Trebuchet MS, 60 point, white. Drag the text into the position so that it’s just sitting on top of the surface we created in step 2.

4. Duplicate the type layer that you just created by putting your cursor over the text and holding option on a Mac or alt on a PC. (You will see your cursor turn to two arrows to indicate that you are duplicating the layer.
(Fig. 4)

5. Flip the new layer you created by going to the top menu and selecting Edit/Transform/Flip Vertical. Move the new layer in position right below your type. For a hovering effect you can leave some space between the text and the reflection. For this tutorial we won’t leave any space between the text and the reflection.(Fig. 4)

Make the new layer 40 percent transparent by dragging your opacity at the top of your layers palette to the left.

Figure B – The Layers Palette

(By default the layers palette in Photoshop is located to the bottom right of your screen) (Fig. B)

A good shortcut for this transparency/opacity effect is to make sure your move tool is selected (V key), make sure your on the correct layer, and hit the number 4 for 40 percent opacity.

(Fig. 5)

6. Now make the new reflection fade by using the gradient tool with a layer mask (Fig. 5). Make sure your reflection layer is selected. At the bottom of the layers palette, click the rectangle with a circle in the middle.(Fig B) This will add a layer mask to the selected layer.

Now select the gradient tool (G) on the keyboard and hit (D) on the keyboard to make sure your colors are set to default. This will ensure your gradient goes from a solid black to white. Put your cursor at the bottom of the reflective text, hold the shift key to constrain the effect and drag upward.

Hit cmd/ctrl z to undo the change if you don’t like it and try again until you get the effect you’re after. I found the effect I liked was when I dragged the cursor all the way from the bottom to the very top of the reflective text.

WaLa! That’s some sleek and glossy reflective type!

Download a printable PDF of this Tutorial Here.