Need a Dotted Stroke That Can Scale for Retina Display Designs?

photoshop / retina / web design   Posted on Mar 19, 2013 by Erin Malick Thompson

I've been using Photoshop CS6 for several months now. And yet, a really nifty feature evaded me until this past week, when I needed to find a way to make the dotted strokes on my Photoshop map graphic scalable for retina display purposes. I thought I'd share in case this feature has evaded you, too, or in case you are looking for reasons to upgrade to CS6!

When I first created my map, as part of our redesign of Blueprint's own website (coming soon!), I made the dotted lines "the old way" (using Photoshop's brush tool, with my "spacing" set to 300%). This way used to be sufficient, albeit painful if you need to change anything about the lines you've already drawn — which is nearly always the case, from my experience. I've grown accustomed to using color overlay layer styles to change the color of my dotted lines, creating masks to shorten lines that I inadvertently drew too long, etc. It's all doable, but not super-efficient. And these steps feel like work-arounds. Sound familiar?

And nowdays, even with these work-arounds, a major issue is that lines made with the brush tool are raster, so they can't easily be scaled-up for optimal viewing on retina displays.

Enter Photoshop CS6...

Screenshot of Photoshop CS6 window showing vector shape options

It's quite simple really. The ticket is the new settings CS6 offers for the vector shape tools (like the rectangle, rounded rectangle, ellipse, etc. -- see orange arrow, above). With CS6, when you select one of those vector shape tools, the options bar will offer you a Fill and Stroke color-picker (see pink arrow). I use these constantly, but what I overlooked until this week is the select menu to set the shape stroke type (see green arrow). The default is a solid stroke, but you can change the type to be dotted or dashed and then set even more detailed options to dictate the dash size, gap size, etc. And if you want to create just a single line with two end points (rather than a closed shape), you just use the pen tool and those same shape stroke type settings. Just be sure you set your stroke size to something more than zero or else you won't be able to see the line you create. For me, setting the stroke to 1.5 made a crisp, thin, dotted stroke for my illustration.

The result looks nearly identical to (and actually more crisp than) the version I made with the old-school brush tool method, but now, when I enlarge my new CS6 vector stroke map, it scales beautifully with the same crisp, thin stroke effect. Hooray!

Search the Blog

Blueprint Tweets

RT @kyledcheney: Rep. @justinamash has officially become the 2nd Republican cosponsor (199th overall) on a bill creating an independent com…

Saturday May 13, 2017

Are you effectively tracking what your users are doing on your website or app? Download our sandbox and learn how:

Tuesday May 09, 2017

RT @CecileRichards: Women's health experts in action.

Thursday May 04, 2017

Visit BlueprintTweets ›

Contact Us


1155 Connecticut Avenue, NW
Suite 601
Washington, DC 20036

Or submit your info and let us know what we can do for you!