4 dotted line drawing methods in Photoshop

Tutorials Shared by the Internet Community


4 dotted line drawing methods in Photoshop

Since a lot of dotted lines will be used in practical drawing, I would like to share here 4 dotted line drawing methods that I have concluded by mysel


  • Total Hits - 33588

  • Total Votes - 134 votes

  • Vote Up - 60 votes

  • Vote Down - 74 votes

  • Domain - 4-designer.com

  • Category - Photoshop/Drawing

  • Submitted By - wuhui

  • Submitted on - 2013-05-06 22:42:44


Since a lot of dotted lines (such as splitters and borders in UI design) will be used in practical drawing, I would like to share here 4 dotted line drawing methods that I have concluded by myself.<br /><br /><strong>The first one:</strong> the most straightforward and time-consuming drawing method.<br /><br />We take the tool “pencil” as an example. Here is an amplified pixel grid to help explain. Because the pencil tool is edge-sharpened and will not leave extra trimmings when drawing, so it is suitable for drawing lines that require high pixel accuracy, but not fit for drawing straight lines.<br /><br />Step 1, Draw the dotted line part. Draw a 4xl line segment here.<br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-1-Step-1.jpg"><img class="alignnone size-full wp-image-29616" title="Drawing-methods-1-Step-1" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-1-Step-1.jpg" alt="" width="309" height="122" /></a><br />Step 2, Use “Marquee tool” frame to select drawn pixels.<br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-1-Step-2.jpg"><img class="alignnone size-full wp-image-29617" title="Drawing-methods-1-Step-2" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-1-Step-2.jpg" alt="" width="309" height="122" /></a><br />Step 3, Press "Ctrl+Alt+T" to get an option bar as shown in the following picture. Now make sure the triangle is in the state of being selected and input shift values into the X value input box. If you want the clearance part of the dotted line as 3px, input 7 (because the length of the dotted line is 4px). At this point, the line segment will move 7px to the right when copying. Then press “Enter” completes the change.<br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-1-Step-3.jpg"><img class="alignnone size-full wp-image-29618" title="Drawing-methods-1-Step-3" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-1-Step-3.jpg" alt="" width="660" height="178" /></a><br />Step 4, Now make sure it is still in the state of box and continuously press down "Shift+Ctrl+Alt+T" to copy the line segment infinitely and attain a dotted line with a 4px solid line segment and 3px clearance.<br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-1-Step-4.jpg"><img class="alignnone size-full wp-image-29619" title="Drawing-methods-1-Step-4" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-1-Step-4.jpg" alt="" width="659" height="120" /></a><br />Step 5, You can have many variation by using this method.<br />PS: select pixel with “Marquee tool” before making changes so as to keep only one layer when making duplicate transformation and reduce the number of layers.<br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-1-Step-5.jpg"><img class="alignnone size-full wp-image-29620" title="Drawing-methods-1-Step-5" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-1-Step-5.jpg" alt="" width="659" height="121" /></a><br /><br /><strong>The second one:</strong> it is a more flexible and time-saving drawing method.<br /><br />This method is especially for the “pencil” tool and the diameter of the brush should not exceed 2px.<br /><br />Step 1, If you want to draw dotted lines with only dots, press F5 to open the brush plate; set the “Spacing” value as more than 200% and in round figure in the “Shape Dynamic” option; now let’s set a value to test the effect.<br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-2-Step-1-1.jpg"><img class="alignnone size-full wp-image-29621" title="Drawing-methods-2-Step-1-1" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-2-Step-1-1.jpg" alt="" width="345" height="298" /></a><br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-2-Step-1-2.jpg"><img class="alignnone size-full wp-image-29622" title="Drawing-methods-2-Step-1-2" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-2-Step-1-2.jpg" alt="" width="389" height="567" /></a><br />Step 2, If you want to draw a 2px dotted line with 2px clearance, draw a dotted line with 400% spacing at firstly; shift to the state of selecting tools; press down “Alt” and "→" at the same time to copy the line segment; meanwhile, move 1px to the right, and combine the two layers.<br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-2-Step-2.jpg"><img class="alignnone size-full wp-image-29623" title="Drawing-methods-2-Step-2" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-2-Step-2.jpg" alt="" width="697" height="265" /></a><br />PS: This method is also applied to drawing dotted lines with different sizes of solid lines and clearances.<br /><br /><strong>The third one:</strong> use dual brush; it is especially for the brush tool.<br /><br />Step 1, Press F5 to open the brush plate and set values as shown in the following graphic.<br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-3-Step-1.jpg"><img class="alignnone size-full wp-image-29624" title="Drawing-methods-3-Step-1" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-3-Step-1.jpg" alt="" width="387" height="568" /></a><br />Step 2, Set “Dual Brush” as shown in the following graphic.<br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-3-Step-2.jpg"><img class="alignnone size-full wp-image-29625" title="Drawing-methods-3-Step-2" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-3-Step-2.jpg" alt="" width="387" height="568" /></a><br />Step 3, Please see the drawing effect as shown in the following graphic.<br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-3-Step-3.jpg"><img class="alignnone size-full wp-image-29626" title="Drawing-methods-3-Step-3" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-3-Step-3.jpg" alt="" width="651" height="46" /></a><br />Step 4, To understand the above parameters straightforwardly, I have drawn a diagram here.<br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-3-Step-4.jpg"><img class="alignnone size-full wp-image-29627" title="Drawing-methods-3-Step-4" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-3-Step-4.jpg" alt="" width="347" height="225" /></a><br />PS: this method is flexible and easy to take control. It can also be used in stroke. When the dual brush is set, the line can also be stored as “Brush Presets” to facilitate using in future.<br /><br /><strong>The fourth one:</strong> use Photoshop CS6; this method is most straightforward and easiest to understand.<br /><br />Step 1, Use the shape tool or the pen tool to draw a frame.<br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-4-Step-1.jpg"><img class="alignnone size-full wp-image-29628" title="Drawing-methods-4-Step-1" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-4-Step-1.jpg" alt="" width="322" height="183" /></a><br />Step 2, Select the frame, set the “Fill” as null, the “Stroke” as white and the stroke width as 1px, as shown in the graphic:<br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-4-Step-2.jpg"><img class="alignnone size-full wp-image-29629" title="Drawing-methods-4-Step-2" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-4-Step-2.jpg" alt="" width="636" height="412" /></a><br />Step 3, The key step; click “Stroke Options”, select dotted line pattern and click “More Options” to get options of the stroke; input values of the dotted line and the clearance.<br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-4-Step-3.jpg"><img class="alignnone size-full wp-image-29632" title="Drawing-methods-4-Step-3" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-4-Step-3.jpg" alt="" width="688" height="354" /></a><br />Step 4, Finally, draw the effect drawing as shown in the following graphic.<br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-4-Step-4.jpg"><img class="alignnone size-full wp-image-29634" title="Drawing-methods-4-Step-4" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-4-Step-4.jpg" alt="" width="308" height="174" /></a><br />PS: to get richer patterns, please continue to set other values of the dotted line and the clearance. You can also draw lines through drawing non-closed shapes.<br /><a href="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-4-Step-5.jpg"><img class="alignnone size-full wp-image-29636" title="Drawing-methods-4-Step-5" src="http://4-designer.com/wp-content/uploads/2013/05/Drawing-methods-4-Step-5.jpg" alt="" width="352" height="110" /></a><br /><br />Every method has its advantages and disadvantages. You should select according to designing requirements. Thank you for reading.<br /><br />Anyone is welcomed to redistribute and quote the content only if he or she notes its origin. <a href="http://4-designer.com/2013/05/4-dotted-line-drawing-methods-in-photoshop/">http://4-designer.com/2013/05/4-dotted-line-drawing-methods-in-photoshop/</a>    More detail...

Broken  |   Tweet  |   Facebook  |     |   Save  |   Liked  |   Down