QuickTip: Create a dotted/dashed line in Photoshop

More and more often nowadays I am finding the need to create dotted or dashed lines in my Photoshop mockups, but what is a ten second job in CSS, could turn out to be a ten minute job in Photoshop if you don’t know how to do so easily. Before I came across the trick I’m going to show you today I would do one of two things. Either just make it solid in the design and say to myself – “that there is a dotted line”, or being the perfectionist that I am, go around drawing a line, and then using the marquee tool to delete every second pixel – I know crazy right?! But then I had a brainwave, why not just use the brush tool? I was working with creating some funky brush strokes when i hit me, and so now I am able to create a dotted/dashed line in seconds in Photoshop, here’s how.

To begin select the brush tool, and open up the brush window as seen below.

Then select the width of the brish you would like to use, in this example I selected the 1px round brush. If you would like a dashed line this is the point at which to select a square brush, also if you are wanting a dashed line you will need to alter the “roundness” of the square – bare with me here. Simply reduce the roundness value until you have your desired width, as you can see below.

To reduce the size simply select the preset you require. Now make sure the spacing checkbox is check and use the slider to increase the spacing dramatically, like so.

Then head over to your canvas, select a colour and hold down shift while you click and drag to create your line. Holding down shift will ensure you create a straight line. Now if you want to create a dotted or dahsed line, but you don’t want this line to be straight, you will need to follow a few extra steps. They are as follows. Firstly gray the pen tool and draw the shape which you want the line to follow, like so.

Then right click the path and select “Stroke Path…”.

From the Tool menu in the dialog that presents itself, select “Brush”.

And then you should have successfully managed to stroke your path and created a dotted line like so.

And that’s it! This technique is really simple and creates really nice results, and best of all, only takes a few seconds to achieve. I hope that this method will save you a good amount of time in the future when trying to design a website in Photoshop to look exactly as it will in the browser. Now if only I could create stunning designs as easily…