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.

- Tutorial written by Man1c M0g

Automatic Translations: