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. |
 |
