Make a Dotted Line in Photoshop
Making a dotted line is easy in Illustrator. You just change it in the stroke palette. Photoshop, on the other hand, is a bit trickier. There is more than one way, but I want to show you how to quickly make a dotted line in Photoshop. Ever make a Photoshop mock-up of a website design before getting down and dirty with the code? This little trick may come in handy.
1. Open your Brushes Palette
Yep, you are going to be using a brush for this quick trick. Open your brushes palette by going to Window > Brushes, or hit F5 on your keyboard. Once open, click on “Brush Tip Shape” within the Brushes palette and select a very small brush like 1-5px.
2. Uncheck Shape Dynamics and Smoothing
3. Adjust the “Spacing” to create the dots
This part is up to you in order to achieve your desired effect. Pay no attention to the waves in the preview. It’s the default preview. All you are worried about here is the amount of space between the dots.
4. Choose your brush color
If you haven’t already, choose the brush tool in the tools palette, or hit B on the keyboard. Also make sure you select a color for your brush, which would be the foreground color. ( I chose black )
5. Hold Shift and Drag
With the brush tool, hold shift, drag and bam, perfect dotted line!
This entry was posted
on Tuesday, July 24th, 2007 at 6:43 pm and is filed under Photoshop.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Great Tut. The funny thing is that I figured out how to do this approx 5 minutes before you posted this. I chuckled!
Thank you so much for this tutorial. This is cool, I have been doing the slow and stupid way, duplicating layers because I am still learning using my photoshop. Thanks, this would really help a lot in the future.
So there’s still no way to make an automatic dot leader in Photoshop?
slightly off topic but I’ve been asked by a lot of people- in Illustrator if you expand the stroke, you lose your dotted line but if you use Object>Flatten Transparency- VOILA!
Good one Bitt, thanks.
Ha – funny. I published an article on this just last week.
http://www.shapeshed.com/journal/dotted_lines_in_photoshop/
wow, thanks. very easy and useful.
Genius. I would have never thought to have done it like that. I almost never play around with brush settings. Then again, I’m the kind of web designer that only needs to know where the gradient tool is ;)
Good one.
Never thought it would be that much easy.
Do you know of any way in Illustrator to skew a dashed line so it would have a parallelogram type of look without having to Outline then skew the stroke?
never even thought about how to do this! I just copy and pasted dotted lined from illustrator.
thanks for great tip!
Ahh! Nice! This is a real frustration for me — thanks for the tutorial. Josue
Thanx alooooooot ..
I usually just use the dot from a font and keep the key pressed with the text tool selected :) Works pretty well too. Nice tip though!
I always made a pattern out of two pixels and applied that. That way I’m not stamping pixels, but leaving an editable dotted line layer. Can also work with other shapes besides one-pixel dots.
Yes…I’ll go with Andres on this one. I have used the text tool for this and it’s good.
And just as for tip if someone want’s to do grid selections, than you should check this link: http://www.users.cloud9.net/~gparet/photoshop/#grid
Don’t know if that works with CS3, test it out. :)
[...] Make a Dotted Line in Photoshop | BittBox (tags: photoshop dot line) [...]
why do people keep writing the same info over and over?
people have been posting this dotted line trick since photoshop 6 or 7.
but you left out drawing a path with the pen tool and then using the path stroke command with your dotted brush to get results as good as you’d get with illustrator.
Neat to know, especially if you want to stroke a path that’s not necessarily straight. For a straight line of dots I just use the text tool and type periods, that way it’s easy to change the length and spacing (kerning) at any time.
[...] [vía BittBox] [...]
you totally rock man, it just that i knew the tools but never thought that way. but thanks fpr the tutorial as now i can use it to save a lot of time. i am a web designer and i face lot of position where i need such lines and this will surely help. thanks for the amazing tutorial.
Regards
Web Design Mumbai
well man i need such a line in my web site and that was the reason i was looking for such a thing on google and then i landed up on your website and i should say that you are maintaining a very nice blog. the tuts are very nice.
i will keep visiting them.
chao
You can always use Css, if you are designing a site!
@ Jo: True enough, but IE6 doesn’t display them properly (surprise!), opting instead to show something more like specifying border-style: dashed;
IE7 doesn’t have the same problem, so it’s not a huge problem, but I think the little circular dots in the article look a little nicer than css dotted lines at a border-width of anything over 2px. They get a bit too blocky after that for my liking…
[...] Bilder miteinander verschmelzen lassen Retrostrahlen erstellen Wasserspiegelung erstellen Gepunktete Linie in Photoshop erstellen Texteffekte Die 80 besten Texteffekte Chromeffekt Feuereffekt Goldeffekt Hinweis Die [...]
[...] Make a Dotted Line in Photoshop | BittBox Making a dotted line is easy in Illustrator. You just change it in the stroke palette. Photoshop, on the other hand, is a bit trickier. There is more than one way, but I want to show you how to quickly make a dotted line in Photoshop. (tags: photoshop design tips guides howto) [...]
[...] has posted some good tutorials lately containing tips like how to Make a Dotted Line in Photoshop and how to Make a Perfect Triangle Path in Illustrator Illustrator Photoshop Tips and treats [...]
thanks, i always wonder how to do that, but i was to lazy jajajja. bye. thanks a lot.
Heh! I’ve been wondering how to do that in photoshop for a while now. I always just did it in Illustrator and copied it over. Thanks!
[...] Make a Dotted Line in Photoshop Useful tutorial for the vector-challenged folks. Tags:Photoshop, Tutorial Add This: These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
Love this method of making dots in PS, and adding a Fade Size setting to the brush makes the size taper down at the end of the line. Is there a way to fade out the dots in Illustrator itself? I can only get them all to be the same size. I’m always dragging paths to PS to get the graduated dotted line, then dragging it back to AI. Would love to know how to do it in AI.
Thanks for your great tutorials, who knew learning Illustrator could be so fun?
I prefer adding a 45 degree turned Scanline on a 1px line. Its not as static as a brush line. Anyway thanks for the tipp.
Thanks – I’ve been duplicating dots for far too long – this’ll save me loads of time!
[...] , Illustrator Bittbox has posted some good tutorials lately containing tips like how to Make a Dotted Line in Photoshop and how to Make a Perfect Triangle Path in Illustrator [...]
Awesome!
[...] Dotted Line [...]
gracias, me ayudo mucho, no podia hacerlo tan facil.
Thanks for this trick, much appericated =)
[...] Photoshop, Tutorial Make a Dotted Line in Photoshop Useful tutorial for the vector-challenged folks. « Scissors-Cut Curry Rice [...]
The title is “make a dotted line in photoshop” but the tutorial is for illustrator. Crazy world :)))))
LOL….what’s crazier is that you probably didn’t read the tutorial.
Hello to you all. Well… this way of making a dotted line is ok but i have another method that i think it’s better. I create a text layer and put some dots in it. Then i just mess up with the character spacing so i get diferent kind of dotted lines and voilá!
Cheers everyone!
Great tip – I never realised that holding down shift locks the cursor onto the axis for creating a line. Wonderful stuff. I’ve just in the past taken a dotted line from another image and pasted it in – this is more elegant.
thanks for the tip, really helpful :)
That a really good tutorials t y
http://www.reabo.co.uk
u r a rockstar it was so easy killer…..
Good one Bitt, thanks.
Thank you so much for this tutorial! I’ve been looking for something like that “forever”. :)
thanx so much i very like it
all time a make copy past and …………… thanx
hey great tutorial! i did it once and it worked perfectly then came back another day and the dotted line is verryy light. color is black and everything is the same as above.. im sure i played with something somewhere else and didnt realize it… any ideas? thanks again and great tutorial
[...] already have a tutorial on how to do this is Photoshop, so I’ll show you an easy way to do it in [...]
[...] already have a tutorial on how to do this is Photoshop, so I’ll show you an easy way to do it in [...]
lol
Life is so simple, thanks ;)
I NEED PHOTO SHOP LINE
THAT CAN INSTAL TO MY COMPUTER
BUT I KNOW TO WORK
IF U CAN HELP ME BE THANKS A LOT
BEST REGARD
Brilliant!
simple, quick. Thanks!
WOW! So much easier than I thought! Thanks Bittbox!!!!
Very Nice your tutorial ,thanks
I slapped myself on the forehead after reading this! Thanks, you just saved me a lot of time and bother.
[...] already have a tutorial on how to do this is Photoshop, so I’ll show you an easy way to do it in [...]
Nice tut, i thought when you select a line tool, you should get an option of dotted, double or solid line just like css.
Excellent tip. Direct and to the point, no messin’ around. If only all tutorials could be this clear…
Thanks a lot !
Nice tutorial, thanks!
great…
this is amazing!!! great tutorial!!!