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

Keep up! Here's part 2 of our design tutorials for non-designers: http://t.co/PbiRRuYL2Q

Thursday August 21, 2014

#Google makes it easier for you to track which ads generate phone calls http://t.co/h0u5v7RR9i

Wednesday August 20, 2014

Leisure reading!: You can download @pewresearch's amazing datasets for free: http://t.co/vO2zburR5H

Friday August 15, 2014

Visit BlueprintTweets ›

Contact Us

202.681.0215

info@blueprintinteractive.com

1155 Connecticut Avenue, NW
Suite 601
Washington, DC 20036

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