Making dotted borders in Photoshop
I posted this earlier on Twitter, but figured I should make a more permanent home for this tip.
- Create an alternating checker board pattern (different sized patterns will make different sized dots/dashes)
- Apply a “Stroke Layer Style” to the desired layer
- Change “Fill Type” to “Pattern” and select the pattern you created in step 1.
Comments
I personally use InDesign for quick wireframing, but that’s only because that’s what I’m most comfortable with. I’m sure there are better alternatives out there.
This is one of those “Why didn’t I think of that” posts. Thanks for sharing!
I got to agree with Eric, this is definitely one of those “why didn’t I think of that” posts. Thanks for posting it up. It sure beats the way I was doing it – dot by dot, copy/pasting layers.
This is great, thank you for sharing. Do you also know a technique for rounded corners rectangles?
Nice little trick, thanks for sharing.
This is a design secret, and you ruined the magic trick. Another reason why designers can not be good magicians :) lol
Great tip!
When you first mentioned this I was working on an idea of my mine already (involving custom pencil brushes), but I liked how yours could be used with vector shapes. Then I started digging around Photoshop further and found that in CS4 at least (might have existed in earlier versions) Adobe includes a “Dotted Strokes” style for vector shapes. Here’s a screenshot of where you can access those styles: http://drp.ly/2Bom There are a bunch of presets and they’re applied as a pattern stroke like your method.
@Phil Wow… works in CS3 too. I suppose I just never expected to find those options there. Thanks for the tip. Renders mine useless!
Ha! Well, it’s one of those wonderful inclusions that Adobe spent time adding but hid from all rational view. I love those.
Phil, link is broken
Dave Cross already show that in PSUser TV a long, long time ago…
Help Wanted
Hey! Just noticed you were referenced in {http://webdesignledger.com/tips/the-four-key-components-of-a-great-web-design}, and was a’wondering what you use for wire-framing as far as software..
I’ve been using simple HTML/CSS, but would be interested in, well, simpler alternatives.
Do you just use Photoshop, as in this tutorial?
Thanks mate :)
-Christian
Christian Jacobs - November 24, 2009