超简单的图标画法动态详解

2016年12月19日

BY TIDJANE TALL – FREELANCE DESIGNER @ TOPTAL

工作中经常用到矢量图标,TIDJANE TALL 用动态展示我们常用图标的 简单画法

Eye Icon

Center-align four circles, going from largest to smallest with altering colors, as shown. On the largest circle, toward the back, pull the left and right points away from the center. Finally, move the smallest, inner circle to the edge of the following one to create a lighting effect on the iris.

Tip: Instead of using a white circle, simply subtract (using the Pathfinder panel) the two circles from the circle beneath each of them. It creates a cleaner result on the background.

Arrow Icon

It’s all about where you add those extra points on the edges of the initial square. Tip: As an alternative, you can simply draw a thin line shaped like an arrow.

Battery Icon

Using one square with a stroke and two with fill. Simply play with proportions, while including one filled square into the stroke shape and keeping the second one outside to form the battery tip.

Tip: Play with stroke thickness and padding to maintain a good visual balance.

Bullet List Icon

Start with a simple square; duplicate it once to its right; and reshape it as a long rectangle. Select the entire thing, and duplicate twice while keeping one square size space in between.

Tip: Replace the square with circles to create a softer look.

Cloud Icon

Draw three different size circles. Bottom-align the two smallest circles to have a base, and put the biggest circle in between, at a higher position. Create the base of the cloud by deforming one of the small circles.

Tip: Use different circle sizes to get a more organic-looking cloud.

Forward Play Icon

Draw a long rectangle. Add a point to the left edge center, and remove the top and bottom point. Now that you have one triangle, simply duplicate that shape once to the right to complete the icon.

Tip: To do this even faster, simply start with a triangle instead of a square.

Funnel Icon

 

Play/Pause Icon

Start with three long rectangles in parallel. Reshape the widest rectangle to a triangle.

Tip: Alternatively, simply draw one triangle, followed by two parallel rectangles.

Position Arrow Icon

This one is a remix of Morgan’s location service icon. Simply draw one square, then pull the bottom left point in a diagonal direction, moving upward until you pass the opposite point.

Tip: In Illustrator, pressing the Shift key while dragging the point helps keep the symmetry while keeping the diagonal angle right.

Position Pin Icon

Knock out a circle inside a bigger one (using the Pathfinder panel). Drag the lowest point straight down, and sharpen the formed angle – switch to the “Pen Tool (P),” then while holding the “Shift” key, click on the point.

Tip: Use rounded corner on that tipping point to soften the look – adjust the “corner radius” value in the “Transform” option panel while the point is selected.

Sound Icon

Just like the funnel icon but at a 90 degree rotation.

Tip: Simply copy and paste the funnel icon, and rotate it clockwise.

Wave Icon

Draw a straight line, and add points at an equal distance over its length. Drag down altering points, and round out every corner to the max, until it’s all smooth.

Tip: Round out the line tips for an even smoother look.

Toptal Icon

This is the bonus icon.

Leave a Comment