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!
Networking is a huge part of computers these days. Those who are interested in it should take up 350-001 to enhance their knowledge. And for some part-time income create a blog or a general information sites that provides information on networks or networking. Besides since web domain registration can be done at low prices and web hosting can be found for free, a site like this shouldn’t cost too much. Make sure search engine submission is done so users can find the site when they search for similar sites. With the help of internet marketing business company you can perform search engine marketing and through reading tips online search engine optimization can be performed to increase the traffic to the site. And for efficient maintenance of the site a fast connection can be leased from internet service providers, preferably a wireless dsl.
Related Posts:
- Design Resources Search Engine
- Wicked Illustrator Brush Effect
- How to Make a Custom Illustrator Brush
- Illustrator Brush-Making Tip: Colorization Method
- Fix A Broken Photoshop Without Re-Installing
- Illustrator Quick Tip: Faster Gradient-Color Adjustments
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.