This tutorial will teach you how to create a simple “Remote Control” which you can use as an interface for a web site, program, or anything else where a cool 3D menu might be needed.
Step 1
Start by creating a new document about 200x350. Open the Channels Palette, and click on the Create new channel icon. Press D on your keyboard to reset your colors to default. Use the Rounded Rectangle tool with Fill Pixels mode selected in the Options bar, and draw a round-edged box as in the example below (if you’re using an older version of Photoshop, please refer to the Rounded Edges tutorial to learn how to make rounded corners, and then come back here).
Step 2
Once you have a shape that looks something like the example shown below, hold Command (PC: Control) and click on the channel to load the selection (if you don’t already have it). Rename the channel outline.
Step 3
Open the Layers Palette, and create a new layer. Then fill the selection with solid gray and rename the layer base.
Step 4
Next, duplicate the channel we named outline (click on it and drag it to the new channel icon) and name the new copy of the channel shadow. Use Filter » Blur » Gaussian Blur » 4 or 5 pixels (higher may be necessary if your shape is substantially larger than the example).
Step 5
Now, switch to the Layer Palette and choose Select » Load Selection » shadow.
After that, choose Select » Modify » Contract by 3 pixels, then Select » Inverse. Then press D to set colors to default and Option+Delete (PC: Alt+Delete) to fill with black. Now choose Select » Load Selection » outline to load the original selection. Choose Select » Inverse and press Delete… your image should now look like the one below.
Step 6
Looks pretty cool so far, eh? Press Cmd+D (PC: Ctrl+D) to deselect, and go to channels again, duplicate the shadow channel, and rename it reflex.
Step 7
Now, with the reflex channel selected, choose Image » Adjust » Curves and manipulate the diagonal line until it looks about like the example screen below. The resulting image should look similar to the example (2nd image). This will distort the channel so it can be used as a reflex—the difference between shadows (own shadow and drop shadow).
Step 8
Switch to the base layer on the Layers Palette. Choose Select » Load Selection » reflex and move the selection 3 pixels up and 3 pixels left. Now, choose Select » Inverse and create a new layer. Fill the layer with white—rename to reflex.
Step 9
Now it’s time to adjust the reflex layer. Press Cmd+D (PC: Ctrl+D) to deselect. Set the layer’s opacity to somewhere between 60-80% if it seems to be too bright (depending on how you feel about it). Make sure that the reflex layer is still selected, and choose the Eraser (also select a big soft brush from the Brush Palette). Erase the left and upper sides of the reflex layer so you can see more of the (black) shadow from the base layer.
Choose Select » Load Selection » outline (with the reflex layer still active). Choose Select » Inverse and press Delete, then Cmd+D (PC: Ctrl+D) to deselect. Keeping reflex selected, press Cmd+E (PC: Ctrl+E) to merge the layer down—you should now only have just the base layer and the background layer.
Step 10
Choose Image » Adjust » Levels and adjust the your shape until you are satisfied with the color and balance between shadows and highlights.
Step 11
Select the bottom part of the base layer with your Rectangular Marquee tool. Select the Move tool, and use the Down arrow on your keyboard to split your shape into two pieces (you may have to resize your canvas to make it fit). Then, create a new layer and call it inside. Draw a rectangular selection on the new layer (see 2nd image) and fill it with light gray—check the layer’s Rectangular Marquee tool.
Check the Preserve Transparency box (necessary for upcoming step).
Step 12
Now, select the Airbrush tool and set its pressure to 25-30%. Pick out a soft brush (45 pixels wide is good) and draw 2 lines along the left and right edges while holding the Shift key so they are straight (these will be shadow lines to make the middle section appear to be round). Go to the Layers Palette and drag the inside layer so it is below the base layer, and make sure it is centered.
Step 13
Now, select the Single Row Marquee tool from the fly-out menu and switch to the base layer. Create a selection line one pixel from the edge where the layer was divided in half (mouse over the sample image below for a zoomed example). Now, choose Image » Adjust » Levels, and enter 2 in the middle “Input Levels” box. Click OK, then move the selection 1 pixel up and choose Image » Adjust » Levels and put 0.4 in the middle “Input Levels” box. This will create a beveled line on the very edge of the base layer. Repeat this process for the other edge, only move one pixel down this time. We will use this technique again later.
(Optional: You may wish to add “two” of these bevel lines to the edges to make them stand out, I have included 2 in the sample image)
Step 14
Time for drop shadows! Create a new layer, and name it drop shadows (this layer should be underneath the base layer - base on top).
Hold Command (PC: Control) and click the base layer, and then select the drop shadows layer. To create the drop shadow (the drop shadow layer should still be selected), choose Select » Feather » about 4 pixels (depending on your taste). Move the selection 3 to 4 pixels right and 3 to 4 pixels down. Now fill the feathered selection with Black. Repeat this process for the inside layer.
Step 15
Now, using the same beveled line technique (with one line selection) create lines to separate the remote into separate buttons. You will need to make them on the appropriate layer (inside or base). If you want, add some text for the buttons and a background. Add rollovers, cut up the image with Adobe ImageReady or using the Image Slicing tutorial, and you should have a remote control interface that will make all your buddies jealous!
