[Webpage design] How do I draw dotted lines in Photoshop?

Recently, someone asked me how to draw the dotted lines in Photoshop. Every time I drew the lines in illustrator and then transferred them to PS, the dotted lines were broken, looking at it is not delicate at all. Is there a simple and permanent solution?

In the face of this situation, he was wise enough to let him go to Baidu. However, I still want to explain what I did here.

Du Niang's results also provide a lot of methods to draw dotted lines. Passionate people can search for them. However, for the fine web page design, if the dotted line is used, its fineness will have a great impact on the effect. If it is done well, it will bring unexpected results, the following describes the dotted lines used in web design.

1. Straight Line

In the building of a webpage, there are many straight dotted lines, such as horizontal and vertical, which are roughly divided into dotted and dashed, for example:

This line is very simple. We can simulate it with only the PS text tool. The settings are as follows:

If your line is vertical, you only need to rotate the layer 90 degrees. I have been doing this all the time.

2. rectangular border

If you do not just draw a straight line, you also need to add a dotted line to the border of the rectangle.

First, it is dotted. You need to create a 2x2 pixel white background file, press Ctrl + 0 to put the canvas to the maximum, no new layers are required, and fill the canvas with the wrong lattice directly, for example:

Then, press Ctrl + A to select all the patterns and click the top menu of PS.Edit-> define a patternCommand to define this image asPattern.

Next, you need to add a right-angle box (Note: it must be a right angle, not a rounded rectangle or a circle) to the layer.Double-click, Called outLayer styleWindow, select the last itemStroke, By settings:

At this time, the edges are black and white. Sometimes you must be white or black. You can do this:

1. YesBlackSet the hybrid mode of strokeStacked front sliceThe white color is filtered out.
2. YesWhiteThe hybrid mode of stroke is setFilter colorTo filter out the black.

In this way, a 1px dot-line border is ready, which can be easily reused multiple times. It is very convenient to leave a pattern like Ps.

If you needDotted LineYou only need to make the stroke pattern larger. I usually make a 4 × 4 pattern, and the effect is as follows:

If you still need a larger dotted line, you can adjust the pattern size on your own.

3. dotted border of the rounded rectangle

The new css3 standard supports rectangular rounded corners. If you simulate such a rounded rectangular dotted border, the above method is not applicable. What should I do? It is actually very simple, you only need to change the filled pattern to a circular grid, with the minimum size of 4x4 pixels, such:

Basically, the simulation is no different from the ten, hey ~

4. dotted border with a special shape

Dear students, if you need to add a dotted border to a special-shaped graph, I suggest you draw it in illustrator and import it to Photoshop, because the above method is only applicable to structural and graphical design in web design, rather than specialized design such as theme or banner!

that's almost all you can think of. If you have a better solution in the future, I will try again, haha!