Illustrator simply draws linear icons commonly used in web pages

Today’scourseExcept for one linearIconThe most important thing is to help students understand the UIDesignThe teacher must have the ability to simplify the complex and peel off the cocoon. Students who are beginning to learn icon drawing absolutely need the method mentioned in it.


For beginners, we can understand that anything can be combined with these four kinds of figures:

<a>Illustrator</a>简单绘制网页常用的线性图标,PS教程,” width=”459″ height=”125″ src=”/d/file/2017/0829/1503969087110.png” style=”width: 100%; margin-bottom: 20px;”></p>
            <p style=When I want to use icons to represent an object, I will carefully observe it first, and then try to split it into the simplest shape. For example, a water drop can be composed of a triangle and a circle.

The heart icon can consist of two circles and a triangle.

I usually use Adobe Illustrator to make these graphics. The line thickness, nodes and the relationship between graphics of vector graphics are very easy to control. In Illustrator, the mutual conversion between graphics and lines is also very convenient. This information may be veryBasicsBut it is the way I make most, even complex icons. The following example has a little more details. It is the icon I made for bill of rights recently. I also use the same method.

Interface icon

I’m currently working on a set of icons for Parker Planner, a great iPhone app. I like this project very much. The main point of this group of user interface icons is that they are easy to understand and functional, and at the same time, they are beautiful, helping users navigate in this slightly complex application.

Now, let’s take a closer look at these icons and analyze my production steps. Let’s take the trash can icon as an example. It is composed of three rounded rectangles and three lines.

1. Select Rounded Rectangle Tool

2. Drag the mouse to draw a shape

3. Adjust line thickness as required

I usually choose one or two thick and thin lines in the whole set of icons.

This maintains the integrity and consistency of all icons.

4. Draw another rounded rectangle as the cover.