Dotted and dashed lines are used a great deal in web design, and if you use Photoshop for web designs, you should 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 sometimes the brushes you create aren’t always the exact proportions needed for easy translation into CSS. That’s why downloading a brush set is a safer option.
I have created a full brush set, a .abr file with brushes that are compatible with CSS. These dotted and dashed brushes are CSS friendly so you can use them in your designs for eventual smooth translation into CSS.
Table of Contents
Free Brush Set for Photoshop to create dotted and dashed lines
Note: The file is free for both commercial and non-commercial use, with no restrictions. A link credit would be appreciated 🙂
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
After downloading the brush set, you can quickly install it in Photoshop and start using your new dotted and dashed brushes after the three steps below.
Note: Screenshots are taken from Adobe Photoshop CC 2021 Mac version. Windows or other versions might look slightly different.
Step 1: Select the Brush Tool and Click the drop-down menu on the Brushes panel.
Step 2: Click Import Brushes.
Step 3: Find the file you downloaded, and click Open. It must be a .abr file.
You’ll see the new brush set in the Brushes panel.
Choose any dotted or dashed brush, and start drawing lines on your canvas 🙂
Have fun!About hannah