Dotted lines in Photoshop

Designing for the web in Photoshop has one thing missing - dotted lines. Here's how to create dotted lines so you can show clients how links will look.

No dotted line preset

It is a little surprising that no dotted line preset exists in Photoshop - even in CS3. It is easy enough to do though but requires a bit of tweaking to get the desired effect. This is what we want to acheive. It is a one pixel dotted line that will appear under links.

Getting the effect

To create this you first need to select the pencil tool (seeing as we want the edges of the dots to be square). In the brushes options click on the arrow to the right of the brush to bring up the brushes library. You should see the Master Diameter and Hardness as well as the brushes below. Click on the flyout arrow to the right of Master Diameter and you should see the following:

Click new brush preset and give your brush a name. I've called mine "Link 1px Dotted Line". Now bring up the brushes palette by going to Window > Brushes. Click Brush Tip Shape and then change Spacing to 200%. This will give you a 1px dotted line.

Now with the Pencil tool selected you can draw dotted lines onto the canvas.

Comments

Spencer Jun 14 2008

Hello, I have Photoshop CS3 on Windows, and I don’t see the option to change spacing between the dots. I pushed F5 on my keyboard, and the Brushes windows pops up, but the only slider option I can see is Master Diameter. Do you know how to add spacing?

Thanks!

George Ornbo Jun 14 2008

Hi Spencer. Firstly make sure you have the Brushes tool selected (shortcut B). Then bring up the Brushes Palette (F5). You may need to reset your brushes - in the top right hand corner of the palette under the cross there is a little down arrow with three lines to the right of it. Click this and there is a flyout menu. Choose “Reset Brushes…”. This resets the brushes to the default and you should see the 1 pixel wide brush that we want. This will give you the options in the graphics above.

joe Jul 21 2008