I'll teach you to play it easy. Photoshop path Strokes

Photoshop's path tools and pen tools are easy to overlook, powerful and low-key. A piece of chatter today how to use the path and pen, quickly draw a simple line-like icon, this can be done Oh! Even if the first day to learn PS, can do. Some people say that the UI is difficult to learn, can not touch the road, then from this lesson PS tutorial start.

Final line icon:

Background: The minimalism of flattening

The whole world has been flat since the flat of the Apple family. It seems to have been thrown away for a long time and became popular overnight. Look at the following, is not very fresh, very direct ah. Such icons apply to the bottom tab bar and to the left and right buttons on the top. Some people may say: This is also called the icon, not just some lines. Oh, can not say, now a lot of people are good this mouth. In such an information explosion, app flying in the era, efficient and concise natural market. Flattening represents efficiency, I am me, do not need unnecessary thinking.

Figure 01

Figure 02

I. Tasks

Are these linear icons hard to do? Let's analyze their structure.

Size specification: The general line is 2px, also some strengthen to 3px.

Style: The line is simple, the graphical indication meaning is clear.

2px icon

Figure 03

Figure 04

3px icon

Figure 05

Ii. Task Analysis (thinking and difficulties)

Drawing is not difficult, how to quickly draw is the key.

Think about it, how does this line icon work out?

Many students would like to use illustrator to draw graphics, but this is not convenient. In the AI may be drawn after drawing to the PS to adjust, will lead to the size of the edge line changes, easy to cause pixel alignment and so on. In the iterative process is not good to ensure that the icon stroke size uniformity, only one to the AI to make changes in the very troublesome. Toss a long day to draw a linear icon, it is a waste.

If using PS is feasible? Do not immediately deny, think about the path tool and Pen tool.

Is it a layer style? Select the tool? Someone thought of a style stroke method. Seemingly not, because the icon is not closed, with style strokes to do out but is closed ...

So the problem is, with the closed path made by the icon in the scaling of the shape will also be the corresponding scaling, which will result in the need for different sizes of graphics, because scaling also need to adjust the path edge of the icon repeatedly to ensure that the icon line consistency. Because the entire set of icons require a relatively uniform line, transfer to the transfer too wasted youth!

Well, not to beat around the bush, the following is to introduce a composition fast, a learning will, package teaching package will be the method.

Remember three points: one is the shape tool and fill, the second is the stroke effect, the third is to use the PEN Anchor Point tool to remove the unwanted path.

Using the composition method: subtraction.

In fact, after the PS CS6 has been added a new stroke function. Use this tool can make the icon to draw out very convenient, in the drawing icon mainly has the following several big advantages!

1. Improve the stroke quality of the graphic, more smooth strokes

When we draw a graph using the layer style to do the stroke effect, if we use a large number, the stroke will produce a block curve, and the edge has a jagged feeling. Then we can get the perfect result by vector stroke processing. I guess that's because the vector stroke is from the original vector shape layer data, and the stroke of the layer style is a bitmap mask for that shape. The two are completely different techniques, so we can figure it out.

Figure 06

2. Multiple angle function, more free in icon drawing

Using a commonly used stroke layer style can only be the effect of rounded corners. However, a path stroke style can be used to draw rounded corners, beveled edges, or bevel angles. This greatly reduces the amount of work you can do to draw graphics.

Figure 07

Figure 08

3. You can draw an open path icon by stroke path

When we use layer style strokes, the following conditions occur, and the strokes are closed. A discontinuous path is used when drawing an icon. The path stroke style can be used at this time to support an open path stroke.

Figure 09

Category:

• PS Getting Started Tutorial