5 Ways to Create a Settings Icon

Author: Helena Zhang

The Nuggets translation Project

Permanent link to this article: github.com/xitu/gold-m…

Translator: Jessica

Proofreader: QinRoc

Five ways to create a Settings Icon

In this article, we will learn how to use a series of Illustrator features

Gear ICONS have become standard for setting symbols.

There are many interesting ways to implement this icon. We’ll learn 5 ways to implement it using Adobe Illustrator, as well as techniques that can be applied to any vector drawing.

(Keyboard shortcuts are noted in parentheses.)

Method 1: Rounded star

This simple method can easily generate gears with sharp teeth.

Select the Star tool and click anywhere on the canvas.

Fill in the parameters.

Select the rounded corner with the Direct Selection Tool (A) and hover the mouse over the icon. Drag one of the small round handles to modify all the rounded corners. Double – click the handle to set the exact angular radius.

Use the Ellipse Tool (L) to create a small hole in the middle by drawing a smaller concentric circle.

You can draw circles of any size, or press L + click anywhere on the canvas to specify the exact width and height.

You can adjust the size in the Transform panel.

After selecting both patterns, clean up the ICONS by subtracting smaller circles from rounded stars (Pathfinder panel > Minus Front).

Look! Done!

Method 2: Zigzag

Let’s try something different to achieve a similar effect.

Draw a circle (L) with a fill and no stroke.

Select the circle and apply the Zag Effect > Distort & Transform > Zig Zag.

Set parameters with preview option turned on.

Now we’ll try drawing a smaller concentric circle to create the little hole in the middle.

Select these two shapes. Because we already used some effects, we had to expand the look before merging the shapes. Go to Object > Expand Appearance.

Why do you do that? Because effects are retractable and unbreakable, this means you can go back and change parameters at any time. Therefore, the effects need to be extended before any further operations can be performed on the graphics.

Similar to method 1, we’ll get the icon by subtracting the smaller circle from the larger shape (Pathfinder panel > Minus Front).

Method 3: Addition and rotation

This is a relatively more complex approach that allows us to customize the gears more. We’re going to take a closer look this time.

Draw a circle with a fill and no stroke.

Using the Rectangle Tool (M) at the top, draw a rectangle with the center of the circle.

“Bulge” rectangle. There are many ways to do this. You can select a rectangle and use the Bulge Effect (Effect > Warp > Bulge).

But my preferred method is to add anchors and use the Direct Selection Tool (A) to select specific anchors to operate on.

To Add additional anchors that are equidistant from the current Anchor, select an Object and use Object > Path > Add Anchor Points. You can also add points manually using the pen Tool (P).

Once the shape is selected, press the R key to select the Rotate Tool, then press the Option key + click on the center of the circle to set it as a reference point. Rotate the panel and it will appear.

Choose an Angle. A 45° Angle creates a gear with eight teeth (360° divided by 8 equals 45°).

Then something interesting happened.

Click Copy (note not OK). This will copy your pattern according to the Angle and reference point you set.

After doing this twice, you complete the circle by repeating Command + D (macOS) or Ctrl + D (Windows).

Alternatively, you might use Effect > Distort & Transform > Transform to achieve the same rotation copy.

As mentioned earlier, effects are not broken, so whenever you use an Effect pattern, you can edit it in the properties pane.

Next we add an inner circle to the pattern.

To merge all shapes, click Pathfinder Panel Composition > Unite.

Draw a smaller concentric circle.

Click Pathfinder panel > Minus Front to subtract the circle with a smaller center from the larger shape.

Keep trying! Different source graphics produce different gear results.

Method 4: Subtraction and rotation

Method 4 is similar to method 3.

Draw a circle with a fill and no stroke.

Draw a small circle aligned with the top.

Select the small circle, press the R key to rotate, then press Option and click on the center. This time we’ll try a six-tooth (360°/ 6) gear. If you type “360/6”, Illustrator will do the calculation for you.

Click Copy.

Repeat this operation by pressing Command + D (macOS) or Ctrl + D (Windows) four times.

Use the Pathfinder panel > Minus Front to subtract the smaller circles from the larger ones.

Then we add some rounded corners to the corners. Using the Direct Selection Tool (A), drag the dot to adjust the radius of the corner.

Draw a smaller concentric circle to create the small hole in the middle, subtracting the small circle in the center from the larger figure.

Get more creative (try different shapes) :

Method 5: Cross over

The final method again uses the Star Tool.

Draw a star.

Draw a concentric circle on it.

Select the two shapes. Pathfinder panel > Intersect.

Draw concentric circles on the top as shown below:

Pathfinder panel > Unite. Now we have an outline of the gear.

You already know what to do — draw a third concentric circle and subtract the smaller circle from the larger one.

There are more tricks you can do with this method:

Try to find your own way

Hopefully you learned a thing or two from this tutorial. While Illustrator is more sophisticated, a similar approach can be applied to vector UI applications such as Sketch or Figma.

From here, explore some different icon styles.

eggs

More ideas to inspire you.

2 squares = 1 star

You can create an octagonal star by drawing two squares. While holding down the Shift key, drag the Rectangle Tool (M) to create a square. Select the square, and while holding down the Shift key, drag the Rotation Tool (R) to rotate it 45°.

Ring round

In the old days, I might have rounded corners by adding strokes, but now that seems like a complicated and imprecise method. (It’s embarrassing)

The shape of graffiti

If you’re using a tablet or trackpad, you can use the quirky Shaper tool (Shift + N) to combine or subtract shapes without breaking them. Scribble like this to “delete” the desired area. In the end, the original graphics will be preserved.

🎶 Audio version of the article: Mogwai

🙏 Thanks to: Toby Fried, Tate Chow, Christine Lee, Pawel Piekarski, Monica Chang

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.