Firelily Designs

Home Sites Gallery Clients Opinions Tutorials About Contact
Firelily Designs

Chrome 1

This page will show the basic techniques used for the lettering in my web pages. This is a very flexible technique; in part two we'll melt the type in a flash of light, and in part three we'll make some of the basic effects independent of their background.

Thanks to Jason Whittington for posting the original version of this in comp.graphics.apps.photoshop.

adding type

Add the type you want to chrome as a new layer. Call this new layer "type."

For those who are curious, the typeface is Sho, which is available from Adobe as part of type package 375. (The package also includes two other script typefaces which are very nice.) However, any heavy typeface will work well in this tutorial.

---------

adding layers

Duplicate the "type" layer twice. With the "type copy 2" layer active, fill with white; make sure that "preserve transparency" is set on. Set the layer attribute to "exclusion."

---------

blurred and embossed

Make "type copy" the active layer (this should be the middle of the three type layers), and hide the other two type layers. Do a Gaussian blur with a medium setting (this was 3.8 pixels), and be sure that "preserve transparency" is set off. Next, apply the emboss filter.

---------

after applying lighting effects

Render lighting effects. This is a critical step in the process; it adds lots of gray shades for later use, and although you can't see it very well yet, it adds a directional slant. Unfortunately, you have to go a few more steps before you see how effectively this step has worked. Very subtle differences in the lighting setup can cause considerable variation in the results. These aren't always good or bad; you simply have to develop a feel for what you want in the final result.

render lighting effects dialog

This is my typical setup for lighting. Key factors include the lighting intensity and the spread of the light. You want to be sure that all the text is within the light's coverage. You don't want the light to overpower things. Distance from the light is critical, and it is important that the light come in at an angle so that the intensity will vary across the text.

(While this is "typical" lighting, in this particular series the light comes from the lower right. The next step obscures the light direction, at least along this axis; the main difference is that the end of the word closer to the light source does get more illumination. The next step can play games with that, too, depending on light intensity.)

---------

altered curves, more-or-less solarized

This is the key step in the process. From the Image menu, adjust curves. The curve needs to be set in a double sine wave, as shown below.

Yes, the strange curve does strange things. It brightens highlights, shadows, and the midrange, but drops out things in between. Now you can see the influence of the lighting direction. Ideally you will have a very soft liquid-metal effect here.

adjust curves dialog

---------

with black background

Let's set the background color to black. There's no other change in this frame. By comparing to the previous step, one other important fact comes out: this image has some partial transparency. This can be very useful in some variations later on.

---------

with exclusion layer

We prepared the "type copy 2" layer ealier; now make it visible. It restores the letter shapes, and by applying its exclusion attribute, the liquid-metal effect from before now becomes a very molten sort of chrome shading.

---------

gold coloring

With "type copy 2" as the active layer, add an adjustment layer of the "color balance" type. (This is on the layers menu of the layer palette.) In the midrange only, set for a yellow value of -70 and a red value of +35.

Save your image before going any further; we'll want to revert back to this point later on.

---------

clean-up

There is a residual from the earlier blur step; it now shows up as a bit of fringing around the letters. This isn't always good or bad, but in this case we'll get rid of it. Load the transparency mask for the "type" layer (control-click on the layer in the layers palette). Make "type copy" the active layer. Invert the selection, delete, and deselect. Now the letters are very crisp on the black background.

---------

This is the basic lettering for the "digital nirvana" pages. Some text is in a silvery-blue; for those, the only setting in the color adjustment layer is to set the midrange blue to +40.

We'll look at a couple of variations on this technique in parts two and three, but first it might help to go through the fire tutorial.