How to draw a linear icon from scratch (actual combat)

Today's tutorial In addition to a linear icon operation demo, it is more important to help students understand the UI designers must be simple, cobwebs ability. Beginners icon to draw the students, absolutely need to mention this method inside ~

　　Geometric

For starters, we can understand that anything can be combined with these four kinds of graphs:

When I want to represent an object with an icon, I look at it carefully and split it into the simplest shape possible. For example, water droplets can be made up of a triangle and a circle.

A heart-shaped icon can consist of two circles and one triangle.

I usually use Adobe Illustrator to make these graphics. The relationship between the line weight of vector graphics, nodes, and graphics is easy to control. In illustrator, the conversion between graphics and lines is also very convenient. This information may be very basic, but it is the way I make most, even complex icons. The following is a slightly more detailed example of the icon I recently made for Bill of rights, and I have used the same approach entirely.

　　Interface icon

I've been making a set of icons for a fantastic iphone app Parker Planner. I like this project, the main point of the user interface icon is easy to understand and functional at the same time, has a beautiful, to help users in this slightly complex application navigation.

Next, let's take a closer look at these icons and analyze my production steps. Let's take the Trash can icon for example, it's made up of three rounded rectangles and three lines.

1. Select the rounded corner Rectangle tool

2, drag the mouse, draw the shape

3, according to the need to adjust the line thickness

I usually use one or two thick lines in the whole set of icons.

This will preserve the integrity and consistency of all icons.

4, draw another rounded rectangle, as a lid.

5, then use a rounded rectangle to draw the lid of the handle.

6. Erase the half rounded rectangle at the bottom of the handle.

7. Now, draw three straight lines on the barrel.

8, OK, a dustbin icon was born! You can adjust the color and the thickness of the line to suit your needs.

Other useful tools are helpful for making icons-pathfinder: You can cut, assemble, and merge shapes.

Line/Fill tool: a transition between a shape's line color and a fill color.

And then there's my favorite tool--line panel: Converts a graphic turning point from a right angle to a rounded corner.

When I'm done with a whole set of icons, I usually put them in a row, and I'll check to see if any of them are really weird and adjust.

Finally, I'll put them in the application and check to see if they work well.

To sum up, making excellent icons is not only the use of learning Illustrator, of course, the mastery of software is also essential. More importantly, you have to practice breaking down the things you see into simple graphics. This key skill is the secret to helping you become a master icon designer!

Category:

• PS Getting Started Tutorial
• PS Icon Production Tutorial