Easy to draw icons! One minute to play PS path strokes

Blue Design (www.lanlanwork.com) is a dedicated and in-depth interface design company to provide an effective UI interface design, BS interface design, CS interface design, ipad interface design, packaging design, icon customization, user experience, interactive design, web site for the desired outstanding domestic and foreign enterprises. Construction, Graphic design services

Source: http://www.ui.cn/project.php?id=32915

if you want to subscribe to this blog content, automatically sent to your mailbox every day, please click here.

Wang Duo (Micu design) \

Photoshop's Path tool and Pen tool are easily overlooked, powerful and always low-key. Today we have a piece of chatter how to use the path and pen, quickly draw a simple line-like icon, this look can do!!!! Even if the first day to learn PS, can also do.

Some people say that the UI is difficult to learn, can not touch the road, then start from this lesson.

(impatient classmate, the direct page to the middle and lower position, the tutorial section can, first practice practiced hand)

Background: Minimalism under flattening

The whole world has been flat since the Apple flat. It seems that the minimalism that people have been throwing away for a long time has been popular overnight. Look at the following, is not very fresh, very direct ah. Such icons apply to the bottom of the tab bar, and the left and right buttons on top of it. Perhaps some people will say: This is also called the icon, not just some lines. Oh, don't say, now a lot of people are good this mouth. In such an explosion-free, app-flying era, efficient and concise nature has a market. Flattening represents efficiency, I am me, and I do not need extra thinking.

I. Mission

Are these linear icons difficult to do? Let's examine their structure.

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

Style: The lines are simple and the graphics indicate meaning clearly.

Icon for 2px

Icon for 3px

Ii. Task Analysis (thinking and difficulty)

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

Let's think about it, how does this linear icon work?

Many students will want to use illustrator to draw graphics, but this is not convenient. The AI may appear after drawing and drag into the PS to adjust, resulting in the size of the edge line changes, easy to cause pixel misalignment and so on. In the iterative process does not guarantee the icon stroke size uniformity, can only one to the AI to make the change very troublesome. Tossing a long time to draw a linear icon, there is a waste.

Is it possible to use PS? Don't deny it right away, think about the path tool and the pen tool.

Is the layer style used? Select tool? Someone thought of a way to style strokes. Seemingly not, because the icon is not closed, with style strokes made out is closed ...

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

Well, don't beat around the bush, the following will introduce a quick composition, a school will be, package to teach the method of the package.

Remember three points: one is the shape tool and fill, two is the stroke effect, three is to delete the useless path with the pen Anchor Point tool

Read the full text >>

Easy to draw icons! One minute to play PS path strokes