| Downloaded from www.biorust.com on Sun Jul 05, 2009 00:07:54 |
![]() | |
| Inset Lines Tutorial Author - Man1c M0g (http://forums.biorust.com/member.php?s=&action=getinfo&userid=1) |
Inset lines are a remarkably versatile and simple effect used by many designers to create detail in their interfaces, separate content, highlight focal points, etc. Learning how to create them was one of the first things I did when I started designing websites, and I find myself using the same technique regularly to this day. So, read on and be enlightened... :)
Step 1 - The Backbone
Create a new document of any size and add a solid-colour background of your
choice (if you like, you can just pinch my graphic below by right clicking
on it and selecting 'save picture as' in your browser). Avoid using anything with
very bright or dark colours, though, or you won't be able to see your work.
![]()
Step 2 - Black Lines
Create a new transparent layer on top of the background and, using the
rectangular marquee tool, make a thin rectangular selection.
Fill this with black using the Edit > Fill menu command. Repeat
until your layer has as many lines as you desire.
![]()
Step 3 - The White Lines
With the black line layer selected, pick Layer > Duplicate from
the menu to create an exact copy. Now select the lower layer and
choose Image > Adjustments > Inverse. You should end up with white
and black lines on two separate layers, although you shouldn't be able to
see the white because it'll be overlapped by the black. Using the
cursor keys, offset the white lines 1px down and 1px to the left and change
the layer blending mode (using the layers palette) from normal to soft light. Et
voila - your inset lines are finished! :)
NB. It should be
borne in mind, of course, that the white lines should be displaced whilst
giving full consideration to the direction of any drop shadows you add. If
you don't you'll mess up 3D depth perception in your interface.
![]()
Alternate Method - Layer Effects
If you are the type of person who alters your designs on a very regular
basis and doesn't want to go through the fuss of duplicating changes across
two layers, a similar effect CAN be achieved using layer effects alone.
The end result is neither as sharp or effective as the 2-layer alternative,
but in a large design its impossible to tell any difference. To do
this, omit step 3 above, and instead run Layer > Layer Style > Drop
Shadow on the black lines at the end of step 2, and enter in the
settings below.

Variations
These insets appear best when used on horizontal, vertical, or diagonal
lines which are not anti-aliased. Of course, you don't have to
limit yourself to lines - a 2px by 2px square looks a lot like a small-scale
rivet when inset in this manner. Just have a play around - its often
surprising how such a simple effect can make an interface stand out from the
crowd.