Lighting Effects Texture Channel

HOW TO USE A CHANNEL AND THE LIGHTING EFFECT FILTER TO CREATE A UNIQUE STYLE OF BEVELING

Okay, this is going to look like a tutorial on creating high-tech interfaces, and I guess on some level it is, but this is really about how the Texture channel in Photoshop's Lighting Effects filter works. Now, this Texture channel technique is particularly popular in creating high-tech interfaces for the Web, so that's what we're using as our example, but don't let it throw you offthis is about the Lighting Effects. However, I can't just have you open a pre-made interface basenope, that's cheating (well, it's not really cheating, I just hate tutorials that start with all the hard work already done for you. I think it's a good learning tool for you to have to build it all from scratch). So, that's exactly what we're going to dobuild an interface from scratch.

Now, if after looking at the first three steps of this tutorial, you start to think "Ya know, there's no possible way I could draw those two kidney shapes, and knock a few holes out of them," I will make a layered version available of the first three steps on the photo downloads page for this book (www.scottkelbybooks.com/channelsphotos). So, you can cheat and do that, but you will definitely feel some level of guilt knowing you "wussed out" on building the base.

Step 1.	ADD A BLANK LAYER, DRAW TWO KIDNEY SHAPES LIKE THE ONES SHOWN HERE, FILL WITH BLACK We're going to build the base of a high-tech interface to illustrate how the Texture channel in the Lighting Effects filter works. This really isn't a full-fledged interface tutorial (that would take a chapter by itself), but we have to start somewhere. So, start by creating a new layer. Next, use whichever selection tool you're comfortable with to create two kidney shapes similar to the ones shown here, which were created with the Pen tool and converted into selections by pressing Command-Return (PC: Control-Enter). Once your selections are in place, set your Foreground color to black and press Option-Delete (PC: Alt-Backspace) to fill your shapes with black. Now you can Deselect.
Step 2.	DRAW SELECTIONS INSIDE THE BLACK SHAPES, PRESS DELETE TO KNOCK OUT HOLES Now, you're going to cut holes out of your interface, so again, use the selection tool of your choice to make selections inside your black kidney shapes. Then press the Delete (PC: Backspace) key on your keyboard to knock holes out of your shapes, like the ones shown here. Once your holes are knocked out, you can Deselect.
Step 3.	MAKE SELECTIONS FOR BUTTONS (LIKE THE ONES SHOWN HERE) AND DELETE THOSE, TOO To finish off the base of our interface, you'll need to add a knocked-out area near the top of the top kidney shape (again, I did that one with the Pen tool). Then add three buttons on the bottom shape, as if we were going to use them for navigating an MP3 player (so, one button for rewind, one for play/pause, and one for fast forward, all added with the Pen tool. They're just for looksthey're not really going to do anything, but when you think about it, this whole interface is just for looks, so it's worth knocking those little button-shaped selections right outta there).
Step 4.	COMMAND-CLICK (PC: CONTROL-CLICK) ON LAYER TO LOAD AS A SELECTION, THEN SAVE AS ALPHA CHANNEL Now that the basic shape for our interface is done, we need to turn this shape into an Alpha channel. You do that by pressing-and-holding the Command key (PC: Control key) and clicking once directly on the interface layer's thumbnail in the Layers palette. This puts a selection around your entire interface. Next, go to the Channels palette and click the Save Selection as Channel icon (as shown here) to save your selection as an Alpha channel. Once that's done, you can first Deselect, then go back to the Layers palette and drag your layer (Layer 1) into the trash because you don't need it anymore.
Step 5.	GO TO ALPHA 1 IN CHANNELS PALETTE AND ADD BLUR, THEN RETURN TO RGB COMPOSITE CHANNEL Go back to the Channels palette and click on the channel named Alpha 1 (your saved selection of the interface shape). This is where you're going to add a slight blur to your interface. So, go under Filter, under Blur, choose Gaussian Blur, and apply just a 0.5 (half a pixel) blur. Interfaces are usually made for use on Web pages, which means they only need to be low-res, 72 ppi files, so we can get away with a 0.5-pixel blur. If, for some reason, you were creating a high-resolution version of this interface (hey, it could happen), then try applying a 2-pixel blur. Click OK.
Step 6.	OPEN LIGHTING EFFECT FILTER, FOR TEXTURE CHANNEL CHOOSE ALPHA 1, AND CLICK OK Once the blur is applied, press Command-~ (PC: Control-~) to return to your RGB Composite channel. Now, go to the Layers palette and all you should see is the Background layer. Next, go under the Filter menu, under Render, and choose Lighting Effects. When the dialog comes up, you only have to do one thingat the bottom of the dialog, where it says Texture Channel, choose Alpha 1 from the pop-up menu, and you'll see your interface appear in the Lighting Effects preview window on the left side of the dialog. Click OK to apply the effect. By loading your Alpha channel, it uses the Lighting Effect to create a unique beveling to the edges of your interface.
Step 7.	THE FILTER IS APPLIED TO THE BACKGROUND LAYER. LOAD YOUR ORIGINAL ALPHA 1 SELECTION Now that you've clicked OK, you'll see that the Lighting Effect filter has been applied to your Background layer, and you can see the beveling it added. However, we need to have your interface up on its own layer, so you're going to load the Alpha 1 channel as a selection on your Background layer. Go under the Select menu, choose Load Selection, then from the Channel pop-up menu choose Alpha 1, and click OK to load your selection. Of course, if you know the keyboard shortcut to load Alpha 1, do that instead. If you forgot, it's Command-Option-4 (PC: Control-Alt-4).
Step 8.	PRESS COMMAND-J (PC: CONTROL-J) TO PUT INTERFACE ON SEPARATE LAYER. FILL BACKGROUND WITH BLACK Press Command-J (PC: Control-J) to copy your beveled interface up on its own layer. In the Layers palette, click on the Background layer, make sure your Foreground is set to black, then press Option-Delete (PC: Alt-Backspace) to fill the Background layer with black (as shown here). Well, there you have itthe base of your interface is complete, and now you can add text, wires, buttons, and all that other cool interface stuff that usually winds up on interfaces. Oh, I get it. You want to take things a little further here. Okay, we'll go a little further, but you understand that the channels part of this tutorial is already over, right? Okay, just checkin'.
Step 9.	SELECT CELLS WITH MAGIC WAND, ADD LAYER BENEATH INTERFACE, FILL WITH BLUE, ADD LAYER STYLE To add the insides of your interface, on Layer 1, first get the Magic Wand tool (W), then click it once inside in the main kidney's large knocked out (black) area to select it. Press-and-hold the Shift key, then click in all the other black areas inside your interface. Now, add a new blank layer and drag it below your interface layer. Choose a medium blue for your Foreground color, and then fill those selected areas with blue (as shown here). Next, choose Inner Glow from the Add a Layer Style pop-up menu at the bottom of the Layers palette. This will put a soft-edged shadow inside all those blue areas, and that will help add some depth to the inside shapes.
Step 10.	SET INNER GLOW, ADD LAYER, THEN ADD WHITE-TO-TRANSPARENT GRADIENT ON EACH CELL When the Inner Glow dialog appears, you have to do just three things: (1) set the Color of Glow to black, (2) change the Blend mode to Normal, and (3) increase the Size setting to 9, then click OK to add the inner glow you see here. Well, there is one more thing going on hereand that's the white-to-transparent gradient that's been added to each blue section. So, create another new layer, set white as your Foreground color, get the Gradient tool (G), and choose the second gradient in the Gradient Picker (white to transparent). Use the Magic Wand to select a section, switch back to the Gradient tool, and drag it from the top to about halfway down that section, then do the next section.
Step 11.	ADD INNER GLOW IN BLACK, SET TO NORMAL, TO WHITE GRADIENT CHANNEL, ADD FINAL ELEMENTS Once your gradients are in place, drag the Inner Glow effect from the blue layer right up onto the white gradient layer to get the glassy effect you see here (this works in CS2, but in earlier versions, you'll have to use the flyout menu to move the effect). The final part is adding all the final touches and text. The text up top is in Eurostyle Extended, as is the main text on the bottom. The center text is in Helvetica Regular. I added tubes, inset lines, and wires using techniques from back in the Photoshop 7 version of my Down & Dirty Tricks book, but you can find tutorials on wires and tubes on the Web in about 30 secondsjust do a search on Google.