Photoshop Basics Tutorial: Creating dashed lines in web design

In web design, dotted lines are essential cosmetic effects, such as area strokes, news list text bottom line, and so on, although there are many ways to draw a dotted line in Photoshop, there are people each time in the illustrator and then go to PS, But the way to draw is not cumbersome is to make the dotted line hazy, it does not look exquisite fine, then, in Photoshop to draw a dashed line, there is no simple point and once and for all method?

To ask Baidu, will get the N method, but here for you to introduce, is a few quick and accurate and very exquisite method. For fine web design, if the use of the dotted line, then it's fine degree of impact on the effect is great, do a good job, can bring unexpected effects, nonsense not to say, the following detailed map for you to introduce a number of web design commonly used in Photoshop dotted line.

1, the way to draw a straight line in Photoshop

In a Web page model or effect diagram, a line of dashed lines with many, such as horizontal and vertical segmentation, roughly divided into dotted lines (dotted) and dashes (dashed), as shown in the following figure:

This line is very simple, we only use Photoshop (PS) in the text tool can be simulated, set as follows:

If your line is vertical, just rotate the layer 90 degrees, is that convenient and fast, and the appearance is exquisite?

2, Photoshop (PS) to draw the right angle rectangular border method

If you're not just drawing a straight line, you'll need to add a dashed line to the outer border of the rectangle.

First, it's a dotted line (dotted), you need to create a 2x2 pixel White base file, press CTRL+0 to maximize the canvas, without creating a new layer, directly in the canvas to fill the wrong, the following figure:

Next, press CTRL + A to select this pattern, click on the top of the PS menu to edit the-> definition pattern command, the figure is defined as a pattern.

Next, when you need to add the dotted square box (note: Must be right angle, not rounded rectangle is not circular) of the layer double-click, the Layer Style window, select the last stroke, the following figure set:

This time, the sideline is black and white alternating, you must sometimes need white, sometimes need black, you can do this:

When Black is required, the blending mode of the stroke is set to multiply, and white is filtered out.

When White is needed, the stroke's blending mode is set to filter to remove the black color.

Such a 1px dotted border is done, can be very convenient for multiple reuse, PS leave such a pattern is very convenient.

If you need a dashed line, then it is very simple, you just need to make the pattern of the stroke larger, I usually do a 4x4 design, the effect is as follows:

If you still need a larger dotted line, you can adjust the pattern size of the students themselves.

3, Photoshop (PS) The method of drawing the dotted border of the rounded rectangle

The new CSS3 standard is to support the rectangular fillet, if the simulation of such a rounded rectangular dotted border, then the above method is not very applicable, how to do it, in fact, it is very simple, you only need to fill the pattern into a circular lattice, the smallest size for 4x4 pixels, the following figure:

The basic simulation of the sorta, hehe ~

The 4x4 pixel itself is very small, it is very difficult to draw a recognizable circle, the meaning of the circle is to use the feather edge of the circle to make the rounded edge of the simulation is not so hard. So just use the round selection tool to draw a wrong 4x4 image, and remember to select the Anti-aliasing option. If you find it difficult, change the 4x4 to 6x6 or 8x8, and so on.

4, Photoshop (PS) to draw a special shape of the dotted border method

Fellow students, if you need to add a dotted border to a specially shaped shape, then I suggest that you still draw it in the illustrator to import Photoshop, or you can use the proprietary software of the Web design directly--fireworks, Because the above method is only applicable to the design of the structure of the Web page, rather than the design of the topic or banner and so on, is the so-called surgery industry has specialized WOW!