Teach you a minute to play the PS path stroke

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 linear 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 start from this lesson.

(impatient classmate, turn directly to the middle and lower position, the tutorial part can, practice practicing first)

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.

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.

2 px icon

3 px icon

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.

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.

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.

Three, PS Draw line icon detailed process

Tools to use when drawing paths:

Pen Tool--Draws a path.

Path selection Tool-Adjust path size usage.

Direct Spear Point Selection tool--adjust spear point position.

Corner Tool--Adjust path fillet and angle use

Incidentally, learn a few shortcuts, easy to use in the drawing. After selecting the Pen tool, you can use Shift/ctrl/atl to switch back and forth the direct selection tool, the Anchor point selection Tool, and the chamfer tool that you need to use.

Here's a step-by-step lesson to draw a line icon. In order for beginners to see, I try to write more details.

1, create a new canvas in PS. (shortcut key: Ctrl + N)

2, with a rectangular path to draw two rectangles (shortcuts: Draw a rounded rectangle, and then hold down the ALT key to drag the layer to copy).

3, using the-Path selection tool-box Select all the paths, find the PS right corner of the fill and stroke, the fill hidden, stroke set 2 pixels.

4, use the direct selection tool to remove excess path anchor points, thereby removing redundant path lines.

Interrupt reminder: When you need to delete the middle section of the path, you need to use the pen tool to add the anchor point, and then use the direct selection tool selected for deletion.

What if I want to delete a section of the red area?

Let's Go!!

5, using the Oval tool to draw the sun (hold down the SHIFT key while drawing the positive circle), the pen tool to draw the mountain section.

6, after the completion of the adjustment path stroke end of the style is rounded corner or right angle.

7, select the corners you want to adjust, and then use the corner points in the stroke options to rounded corners to make the graphic more rounded.

Such an icon is done.

With the path of the stroke can also distinguish between the three-dimensional image. The combination of shapes with different thickness strokes makes the icons richer.

Four, late modification: Make the line more smooth

The path edge correction will give the entire icon the exquisite feeling, especially appears the individual line and the corner angle, appears especially important.

Path strokes can also be based on your needs for the selection of its mode, the path of the stroke, or the middle, or internal strokes. This is used frequently in the path stroke drawing.

Summary:

Sometimes we really think more, always want to learn some complex advanced things, and the foundation is often overlooked.

Small homework after class:

Find a set of linear UI icons, one for imitation. Here, there is always a you like: "Icon material where to find?" 1000+ icon resource pack free download!

Weather-Line Draft icons can be downloaded from PSD, which only provides learning oh.

Category:

• PS Mouse Painting Tutorial