When I draw lines or borders in Photoshop for my web design work, they are usually not beautiful and seem to me to not be aesthetically appealing. I don't know why, as drawing a line seems to be a very easy concept. I mean it shouldn't matter who how draws a line. A line or a border is a simple thing. But I really see that lines and borders in many websites are more beautiful than my lines and borders.

Is there any special technique I should know while drawing lines and borders in Photoshop, to make them beautiful?

  • 3
    can you show us how your border and line looks?
    – Jack
    Aug 27, 2011 at 7:54

2 Answers 2


In my experience, one of the main reasons a border looks ugly is it's too heavy. "Heavy" is created by thickness, of course, but also by too much contrast. A black line on a white background must be thinner than a light grey line to avoid looking too severe (unless you're trying for the "prison camp" look).

Another reason that a border (or a rule) will seem wrong is if it is almost-but-not-quite the same weight as the text on a page. If your text characters are one pixel thick, your rule should be the same.

Finally, the number one reason a border looks ugly is it's unnecessary. It's almost a hallmark of untrained design to stick boxes around everything. In 99% of cases, like explaining a joke, they are redundant.

The borders on this page are thin, light, and usefully define the space.

  • Good points @Alan, I liked the idea of contrast. However, I think the OP asks about the tool. Maybe OP wants to know what tips and tricks should be followed in Photoshop to draw good lines. For example, I've seen that when you draw a line in Photoshop, when the design is not in 100% zoom, then your line would have some kind of shadow around it which results in uglier lines. I think this is the bug of Photoshop. Thus I see designers always working in 100% zoom when drawing lines or borders. Aug 29, 2011 at 19:17
  • 1
    It's not a bug. A line is crisp on screen only if it falls on exact pixel boundaries. Otherwise, anti-aliasing kicks in and blurs the lines a bit. Viewing at something other than 100% forces Photoshop or the GPU to render the line using the screen pixels available and anti-aliasing, which can have some odd effects. The same thing is true in vector applications such as Illustrator: screen rendering depends on the pixel pitch of the screen and the anti-aliasing smarts of the program. Aug 29, 2011 at 20:43

Okay this is what i understood..may be i am wrong..

If you are manually drawing your borders and lines(its wrong),this answer can help you.

For Lines:

Photoshop have line tool which automatically draw the line the way you want to,Please see the Attach SS (open image in new window for clarity)

Line image

For borders :

double click on the layer on which you want to apply border.apply stroke 1px,2px whatever you want, you can change its color also....

For borders

Hope this will help..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.