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


  1. Well it doesn’t seem tough work. So I will try to make it. Thanks

  2. Good mini-tutorial, thanks for your help!

  3. Milind Bankar says:

    Excellent tip for choosing the colors. Always wondered how to do it. We can add gradient to the lines so as they merge seamlessly with the background.Thank you.

  4. I don’t see the need for this…you could easily do the same thing with pure CSS(2)…


    hr {width:100%;height:1px;background:#313030;border-top:1px solid #717171;}


  1. […] Read more: How to create an awesome line separator in website design using … […]

  2. […] days back i wrote an article on how to create an awesome line separator in webdesigns using photoshop . Today i will tell you how to convert it into CSS without using a single image […]

  3. […] of web design is creating an appropriate content separator. Sure it’s easy to create a simple double line separator to divy out areas of content on a page or a blog, but what happens when you need to create […]

Speak Your Mind