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:
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)
10 dashed horizontal brushes ranging from 1px to 10px widths
10 dashed vertical brushes ranging from 1px to 10px widths
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.