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

Effects with Metallic Text in Photoshop  - or

Photoshop Curves to Make Metallic Text

category: graphics

We're going for a metallic gold web graphic, text and a button, on a white background, with a drop shadow. Later on, we can clone, resize, and sharpen these basic components for use anywhere on the site, but let's start by getting a consistent look that we like.

I started with a new RGB document, 1226 x 366 pixels, with a resolution of 72 ppi, and a white background. Type the text in black, Support Artists in my example, sized at 150 px. With the Elliptical Marquee tool, holding down the Shift key to constrain the marquee to a circle, draw a selection the size of your button somewhere below the type. Then, with the button selection still active, hold down the Shift key to add to the selection, and Ctrl-Click the text layer thumbnail in the Layers Palette. You should now have a selection around your text and your button.

Save your selection in an Alpha channel by choosing the Select menu, and then Save Selection. Just click OK, because the dialogue will default to creating a channel called Alpha-1 in the Channels Palette containing your selection converted to a mask. Press Ctrl+4 or switch to the Channels Palette, and click on Alpha-1 and switch off visibility on the RGB Channel to view your new mask in the image window. 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. Click OK.

Now, let there be light. Click on the RGB channel thumbnail, and then switch to the Layers Palette. Click on the Background layer, making it active, and switch off visibility on the text layer. Choose Filter, Render, Lighting Effects, and set the Texture Channel to Alpha-1. Click OK, accepting all other settings as defaults, and take a look. Through the magic of the History Palette, you can back up 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 and why.

Our goal now is to convert the Alpha-1 channel back to a selection and use it to copy our lighted components off the Background Layer to a layer of their own. The trick is to get enough of the textured (blurred) 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, then 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, using this selection to copy the Background by pressing Ctrl+J. Repeat this process, making new copies, until you have a good balance between clean text and textured bevel. You might want to make a temporary layer filled with black to view your choices against. Pick one to try first, and make everything else non-visible. I wound up with 2 pixel expansion using this script-like font.

Viewed from top to bottom, your Layers Palette should contain the original text layer, 6 with visibility off, your pick of the copies of the Background (lighted) layer, and maybe a black filled temporary layer for making things easier to see, followed by the Background layer with visibility off. Now make your pick of copies layers active, and, at 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. Click OK, and set the Blend Mode for the layer to Hard Light. Since this is an adjustment layer, remember you can always come back to fine tune by clicking on the layer thumbnail in the Layers Palette. It's this Curves Layer that makes the metallic look, so be sure and give it all you've got, once we've colored the text.

Finally, create a layer above the Curves Adjustment layer, fill it with a gold color from the Color Picker, and set the blend mode to Overlay. Ctrl-Click on your pick of the layer copies, and, with the selection active, click on the Color Layer in the Layers Palette, and then the Layer Mask Icon to create a layer mask for the color. Play around with shades of gold, adjust your curve until you're happy, and then set everything but the color layer, the adjustment layer, and your pick of the copies to non-visible. Stamp the layers by creating a new layer at the top and, holding the Alt key, choose Layers, and Merge Visible. Now you're ready to resize, sharpen, and place your graphic in front of the appropriate background. In my case the background was white, so I added a Drop Shadow to backup the white edges.

He said on 09.02.05 @ 05:10 PM CST