How to create an awesome line separator in website designs using photoshop

I may be the last one but yet ” Happy New Year 2011 ” . Today i was creating a line separator on one of my designs using photoshop and thought of writing a detailed tutorial on how to create one . This tutorial is short but its clear .

New Document

Create a new document of size 500 x 200px and fill it with #535353 .



Creating a line

Create a New Layer and name it as line separator . Select Marquee Row Tool from the tools palette , left mouse click ( x1 )on the background and zoom the document to the maximum ( 3600% ) with the help of navigator . If the navigator is disabled then enable it by going to WINDOWS > NAVIGATOR . After zooming in fill the selected area with #717171



Creating line shadow

With Marquee Row Tool selected nudge the marquee row tool selection using arrow keys untill it falls right below the line and fill it with #313030


Final Image

After zooming out the line separator looks like


How to choose colors

Choosing colors is very important and its a easy task when you understand how to do it . Line color and Line Shadow color totally depends on the background color of the site.

Line color should be lighter and Line Shadow color should be darker than the background color.

Example :

If we consider the colors used in the above tutorial . Line color ( #717171 ) is lighter than Background color ( #535353 ) and Line Shadow color ( #313030 ) is darker than Background color ( #535353 ) .


Don’t give up after trying one color combination but try until you find the right one

I hope you enjoyed this simple tutorial . Feedbacks and Questions are appreciated

Share on Facebook

Comments (4)

  1. Rakesh Kumar February 14, 2011
  2. DiseƱo Web Tenerife January 5, 2012
  3. Milind Bankar July 18, 2012
  4. Michael Tunnell March 26, 2013

Leave a Reply