Embedding In Stone: Intro To Industrial Effects

MonkeyLek · April 7, 2003 9:58 am

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: Graphic714.jpg 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. Graphic715.jpg Graphic716.jpg For a bit more contrast, I ran the same lighting effect twice on the same layer. Here is where I sit thus far: Graphic717.jpg 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. Graphic718.jpg Graphic719.jpg 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%. Graphic720.jpg 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: Graphic721.jpg 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.

Article Comments

Jepessen ( posted at 12:00AM Mon, 14 April 2003

This is a good tutorial. Thaks to Al to sharing this.

Privacy Notice

This site uses cookies to deliver the best experience. Our own cookies make user accounts and other features possible. Third-party cookies are used to display relevant ads and to analyze how Renderosity is used. By using our site, you acknowledge that you have read and understood our Terms of Service, including our Cookie Policy and our Privacy Policy.