Inset Lines

Inset Lines Skill level: Basic Programs used: Photoshop 6
We all want our interfaces looking sharp and crisp, with as much detail as possible. I've noticed that a lot of sites these days make use of inset lines with this technique. It's a very simple technique which can be put to good use.
1. Create a new canvas, 400 x 200 pixels, with a transparent background. Create a new layer by pressing the "Create new layer" button . Call this layer "Pipe".
2. While the "Pipe" layer is still activated, select the rectangular marquee tool and select a portion of the canvas, about 50 pixels high, from the very left to the very right of the canvas. Select the gradient tool and left-click on the large gradient (as shown below) at the top of the tool bar.
This will allow you to edit your gradient. Create a gradient like the one below, The dark grey has a hex value of #333333 and the lighter is #CCCCCC. the light grey is positioned at 50% and each of the stops are also at 50%.
3. Drag a straight-line gradient from the top to bottom of the selection (holding down [SHIFT] will ensure that your gradient is restricted to 45 degree angles), and press [CTRL] + [D] to deselect.
4. Now you have a 3D pipe, you need to decide which direction the light will be going in. Most 3D images made by Photoshop have the light direction coming in from a 120 degree angle. That is, the light will hit the object from the top left, and leave a shadow in the bottom right of a raised object, and vice versa for a depressed object (see below). For the purposes of this tutorial, I used the default 120 degrees.
5. Create a new layer called "Shadow", above the "Pipe" layer. Since you are making insets which are depressions, the light will pass over the left side of the inset, resulting in shadow. This shadow can be made by selecting the pencil tool and selecting pure black as your foreground color. also make sure that your brush size is set on 1 pixel wide, at 100% opacity. Now drag a straight-line from top to bottom of your pipe as many times as needed.
6. We have lost the depth of the pipe, because the lines don't match the 3D realism of the pipe. We have to blend it into the pipe by changing the blending mode to "Soft Light". This is a little too soft, so this is easily fixed; duplicate the layer, by dragging it into the "Create a new layer" button .
7. Now for the highlights... if the light is coming from the top-left, and these are depressions, the light will hit the right side of the inset. Create another layer called "Highlights", and select pure white as your foreground color. Use the pencil tool and make some 1 pixel wide lines on the right of each black line. Set the blending mode of the highlight layer to "Overlay".
There you have it: simple, but highly effective inset lines. I'll leave you to experiment with other 3D objects.

Inset Lines Skill level: Basic Programs used: Photoshop 6

Inset Lines
Skill level: Basic
Programs used: Photoshop 6