Dotted and Dashed Lines in Photoshop

by hannah 22,528 views6

Dotted and dashed lines are used a great deal in web design, and if like me you use Photoshop for your web designs, you will know that creating these lines in Photoshop isn’t as easy as in other programs such as Fireworks.

You can create your own brush styles to give you the same effect but I often find that when you create your own brushes they aren’t always to the exact proportions needed for easy translation into CSS.

To overcome this, I have created a full brush set; a .abr file with brushes which match their CSS counterparts exactly. Use these brushes in your designs for eventual smooth translation into CSS and know that your dotted and dashed designs are CSS friendly!

Free Brush Set for Photoshop to create dotted and dashed lines:

Download Now

In the .abr file you will find:

10 dotted brushes ranging from 1px to 10px widths
(the grey lines below are from a print screen of dotted lines created in CSS, the blue lines use the Photoshop Brush Set)

dotted line brushes
dotted line brushes

10 dashed horizontal brushes ranging from 1px to 10px widths

dashed line brushes (horizontal)
dashed line brushes (horizontal)

10 dashed vertical brushes ranging from 1px to 10px widths

dashed line brushes (vertical)
dashed line brushes (vertical)


Please note:
To use the brushes for dotted or dashed straight lines as above you need to click on the canvas where you want the start point to be and hold shift as you drag the cursor to the end point of the line.

Download the brush set now

Follow me on Facebook, Twitter and Pinterest.

Comments (6)

  1. Thank you so much! I found the perfect brush to use. Web Designer here 😉

  2. Perfect, thanks a thousand!

  3. thank you so much 🙂

  4. Thank you for sharing!!

  5. Thank you so much,really helpful.

  6. Thank you so much!! so kind of you to share it. God Bless you.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>