Tips and Tricks: Chicago web design, copy writing, graphics, digital photography, database design, working with people, and getting a web project up and running.

Transparent Text Effect in Photoshop  - or

Make Glass Text in Photoshop Using Curves

category: graphics

We're going to create a transparent text web graphic that, combined with the right blend mode, gives a glass effect to the type. In a nutshell, this means we'll need to create a white chrome look to the text, without sharpening highlights and shadows as you normally would, and then knock out the center of the letters to provide transparency. I'm going to use this graphic to place the Tips and Tricks weblog logo, like a watermark, over the images we use in this weblog to demonstrate graphics and image editing techniques. You can get some interesting variety, depending on the image, by setting different blend modes on the glass text layer. This very blue sky has the glass text set to the Overlay Blend mode. This portrait shows the text layer set to Hard Light. OK, let's get on with it.

Start with a new RGB document 800 x 600 pixels, with a white background, and a resolution of 72 ppi. Type the text in black; in my case, Tips and Tricks was sized at 100 px and Awesomely Active at 60 px. Then, with the text layer still active, press the Ctrl key and click on the text layer's thumbnail in the Layers Palette. You should now have a selection around your type.

Save your selection as a mask in an Alpha channel by choosing the Select menu and then Save Selection. Just click OK in the dialogue, because the dialogue will default to creating a new channel called Alpha-1. Now just press Ctrl+4 to edit Alpha-1, or switch to the Channels Palette and click on Alpha-1. We'll need a bevel to bounce light against since we're going to use the mask as a texture channel for the Lighting Effects filter, so choose Filter, Blur, Gaussian Blur, and set the Radius to 1 pixel to create a bevel. Click OK.

Switch back to the Layers Palette. Turn off visibility on the text layer, click on the white Background layer, making it active, and choose Filter, Render, Lighting Effects. Leave everything in the dialogue at the default setting except to set the Texture Channel dropdown (at the bottom) to Alpha-1. Click OK, and take a look. Do you see the how the bevel gave us highlights and shadows on the edges? Through the magic of the History Palette you can back up, if you need to, and have more or less bevel, change the lighting, or even edit your text with the Character Palette to spread or squeeze the letters. For now, let's press on and you'll have a better idea what's important to tweak and why.

Our next goal is to convert the Alpha-1 channel back to a selection, and use it to copy our lighted text off the Background to a layer of its own. The idea is to get enough of the lighted bevel to play with, but not so much as to make our text look sloppy. Choose Select, Load Selection, and Alpha-1 from the drop down menu, and click OK. Then, with the Background layer still active, and the marching ants still marching, choose Select, Modify, and Expand. First, expand the selection 1 pixel and click OK. Use this selection to copy the background text to its own layer by pressing Ctrl+J. Repeat this process, expanding 1 more pixel and making a new copy, until you have a good balance between clean text and nice textured bevel. You might want to make a temporary layer, filled with black, to view your choices against. Pick the one you like, and make everything else non visible. I wound up with a 2 pixel expansion, using this script-like font.

Let's make sure we're all on the same page. Viewed from top to bottom, your Layers Palette should contain the original text layer or layers with visibility off, your pick of the copies of the Background (lighted) layer, the one with the best balance between clean text and nice textured bevel, and maybe a black-filled temporary layer for making things easier to see, followed by the Background layer with visibility off.

OK, now make your pick of copies layers active, and, with everything else non visible, go to the bottom of the Layers Palette, click the Adjustment Layer icon, and choose Curves from the popup. Click to make points on the curve, and drag them around until your curve looks something like mine, and click OK. It's this Curves Layer that makes the glassy-looking edges, so be sure to give it all you've got, but remember, you can always come back to fine tune, since this is an adjustment layer, by clicking on the Layer Thumbnail in the Layers Palette.

Finally, stamp the visible layers by creating a mew layer and, holding the Alt key, choose Layers, and Merge Visible. Now you're ready to knock out the center of the type to make it transparent. Load the Alpha-1 channel again as a selection. Expand the selection as before; this time you want to maintain a good balance in the size of your selection between the edges, with their highlights and shadows, and the largest possible area of transparency. I used 2 pixels. When you like the selection, press the Backspace key to knock out the center. Do not sharpen this layer because the edges will become too bright to look like glass; just drag it onto an image, and try different contrast blend modes until it looks best on that background. Resize, if you like, with Free Transform, and you're done.

He said on 09.30.05 @ 04:36 PM CST