I'm in the middle of conquering Baldur's Gate II. Ok, the cat's out of the proverbial day. I really don't spend all my time in Photoshop. But I'm finding that when I'm away from the computer, playing some nifty game, even reading magazines I see effects that bring Photoshop to mind. I find myself judging the amount of time spent on an ad image or a game interface, even calculating the number of layers they could have used. Is that sick or what? I consider it part of the learning process. When a guitar player hears a particularly catchy lick, don't they practice to duplicate it? How many times have you heard your friends practicing Dust in the Wind, Stairway To Heaven, or the opening bars of Freebird? For old folks like me, too often to mention. Back to the topic. Baldur's Gate II has a fantastic interface that appears to be made of chipped granite. The buttons mesh as though carved from the same stone, complete with a grating sound when they are depressed. Though the artist spent a great deal of time working on the interface, I can show you a quick way to achieve similar results. To begin with, open a rock texture of some sort. Go to Edit>Define Pattern. We will use this a few times for both our buttons and background. Open a new image and fill it with the pattern. Create a new layer and, with the Shapes tool set to make your shape a path, then convert the path to a selection. Fill the selection with the pattern also. In the channels palette, create a new channel. Fill your selection with white. Make black your foreground color, and apply a 4 pixel inside stroke. Now we will run 4 gaussian blurs on the selection, first set at 7, next at 4, next at 2 and lastly at 1. Here's what your channel should look like thus far: Go back to Layer 1. If you haven't already fill the selection with the pattern. We will now apply lighting effects to this layer. Go to Filter>Render>Lighting Effects. This will help pull our buttons off the background, as right now they appear invisible against the background. For a bit more contrast, I ran the same lighting effect twice on the same layer. Here is where I sit thus far: Now the point was to make these buttons look embedded, but we aren't quite there yet. Reselect you buttons (Control/Command>Click on layer 1). Expand your selection by 4 pixels. Create a new layer below layer 1 and fill the selection with the pattern. Go to your Layer Styles. On this layer I want to apply an outer bevel with the following settings, though you may do so to taste. The key here is subtlety don't go too crazy and it will look a bit more realistic. Ok, it still needs a bit of tweaking so the buttons look recessed. Repeat the process of selecting the layer 1 buttons again. Create a new layer, make black your foreground color and do a 2 pixel outside stroke on the new layer. Drop the opacity of this layer to 75%. This is just one little trick for creating these effects, and I'll do more in the future. This also works for text, and as you know how I love working with fonts, here's an example using text and a different texture: I look forward to continuing this series. Until next time, take care and come see me at Action Fx!

---

Special thanks to www.planetphotoshop.com for allowing us to reprint their Photoshop tutorials here at Renderosity. You can e-mail Al Ward, the author of this article, at al@actionfx.com.