diff --git a/TODO1/5-ways-to-create-a-settings-icon.md b/TODO1/5-ways-to-create-a-settings-icon.md index cc2ac295d90..5bf12f2c490 100644 --- a/TODO1/5-ways-to-create-a-settings-icon.md +++ b/TODO1/5-ways-to-create-a-settings-icon.md @@ -2,276 +2,276 @@ > * 原文作者：[Helena Zhang](https://medium.com/@minoraxis) > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) > * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO1/5-ways-to-create-a-settings-icon.md](https://github.com/xitu/gold-miner/blob/master/TODO1/5-ways-to-create-a-settings-icon.md) -> * 译者： -> * 校对者： +> * 译者：[Jessica](https://github.com/cyz980908) +> * 校对者：[QinRoc](https://github.com/QinRoc) -# 5 Ways to Create a Settings Icon +# 5 步创建一个 Settings icon -> Learn to use an array of Illustrator features through this exercise +> 通过这篇文章我们可以学习如何使用 Illustrator 的一系列功能 ![](https://cdn-images-1.medium.com/max/4000/1*KXjeemJInI5xQg7HpC2Z9g.png) -The gear has become a ubiquitous symbol for **settings** in our digital applications. +齿轮图标已经成为了**设置**符号的标配。 -![Left to right, top to bottom: Google Calendar, Lyft, Dribbble, Facebook, ClassPass, Seamless, Telegram, Reddit, Duolingo, Dropbox, Instagram, Headspace, PayPal, Transit, WeChat](https://cdn-images-1.medium.com/max/4000/1*wu3FKUzPxQhjf4Wk_uCJIw.png) +![自左向右，从上到下分别是：Google Calendar、Lyft、Dribbble、Facebook、ClassPass、Seamless、Telegram、Reddit、Duolingo、Dropbox、Instagram、Headspace、PayPal、Transit、WeChat](https://cdn-images-1.medium.com/max/4000/1*wu3FKUzPxQhjf4Wk_uCJIw.png) -There are many interesting ways you can create this icon. We’ll walk though 5 of them in Adobe Illustrator, to pick up techniques you can take forward to any vector drawing. +有许多有趣的方法可以实现这个图标。我们将学习使用 Adobe Illustrator 实现的 5 个方法，同时还可以学习到适用于任何矢量绘图的技术。 -(**Keyboard shortcuts** are shown in parentheses.) +（**键盘快捷键**备注在括号中。） -## Method 1: Rounded Star +## 方法 1：圆角星 -This simple method is effective for a gear with pointed teeth. +这种简单的方法能很方便地生成带有尖齿的齿轮。 ![](https://cdn-images-1.medium.com/max/3200/1*nUCNYG_c9hNEnMm66rd2zQ.gif) -Select the **Star Tool** and **click** anywhere on your canvas. +选择**星型工具**，然后**点击**画布上的任意地方。 ![](https://cdn-images-1.medium.com/max/4002/1*qR6U11bjhUffWP7yLvFf9Q.png) -Play with the parameters. +填入参数。 ![](https://cdn-images-1.medium.com/max/4000/1*gQtrRMFzcjAEudBS1SdQnw.png) -Round the corners—with the **Direct Selection Tool** (**A**) selected, hover over the shape. **Drag** one of the little circular handles to modify all corners. **Double click** a handle to specify a precise corner radius. +用**直接选择工具**（**A**）选中圆角，将鼠标悬停在图标上。**拖动**其中的一个小圆形手柄来修改所有的圆角。**双击**手柄可以来定精确的角半径。 ![](https://cdn-images-1.medium.com/max/4000/1*KgDXl0u5M1WbrAn5MHPWzQ.png) -Draw a smaller concentric circle with the **Ellipse Tool** (**L**) to create the eye. +用**椭圆工具**（**L**）画一个小一些的同心圆来创建中间的小洞。 ![](https://cdn-images-1.medium.com/max/4000/1*tmhumNqUD265crJuT7wsCQ.png) -You can draw the circle free-form or **L** + **click** anywhere on the canvas to specify the exact width and height. +你可以绘制任意大小的圆圈，或者在画布上的任意位置按**L** + **单击**以指定确切的宽度和高度。 ![](https://cdn-images-1.medium.com/max/4000/1*o4LZ-p6BMnXDuuHoth-4sw.png) -Use the **Transform** panel to make any adjustments to the dimensions. +可以在“**变换（Transform）**”面板对尺寸进行调整。 ![](https://cdn-images-1.medium.com/max/4000/1*taP3_LzZS0jakCB8K2Cg3w.png) -With both shapes selected, clean up the icon by subtracting the smaller circle from the rounded star (**Pathfinder** panel > **Minus Front**). +在选中两个图案后，通过从圆角星上减去较小的圆来清理图标（**路径查找器（Pathfinder）** 面板 > **减去前面的图案（Minus Front）**)。 ![](https://cdn-images-1.medium.com/max/4000/1*OXarwXairILpFXYEXZ-6IA.png) -Voilà. +瞧！完成了！ ![](https://cdn-images-1.medium.com/max/4000/1*tmhumNqUD265crJuT7wsCQ.png) -## Method 2: Zig Zag +## 方法 2：锯齿形 -Let’s try something different to get to a similar effect. +让我们尝试一些不同的方法来达到类似的效果。 ![](https://cdn-images-1.medium.com/max/3200/1*2tdaBuJsgIuzQgoX2i7EpQ.gif) -Draw a circle (**L**) with a fill, no stroke. +绘制一个有填充（fill），没描边（stroke）的圆（**L**）。 ![](https://cdn-images-1.medium.com/max/4000/1*0SnYSS0olXodPNhr4LjCPQ.png) -Select the circle and apply a **Zig Zag Effect** (**Effect** > **Distort & Transform** > **Zig Zag**). +选择圆并应用**锯齿形效果**（**特效（Effect）** > **扭曲 & 变形（Distort & Transform）** > **锯齿形（Zig Zag）**）。 ![](https://cdn-images-1.medium.com/max/4000/1*iHGSBfduKeAKL8BB8ScORw.png) -Play with the parameters with Preview toggled on. +在预览选项打开的情况下设置参数。 ![](https://cdn-images-1.medium.com/max/4000/1*IpiYKyL7OyyznM4QcVfCwQ.png) -Now we’ll try a smaller eye. Draw a concentric circle. +现在我们要试着画一个小一些的同心圆来创建中间的小洞。 ![](https://cdn-images-1.medium.com/max/4000/1*Dvsus1_nX3QpU7E3Db8Akg.png) -Select both shapes. Because we have used an effect, we’ll have to expand the appearance before we merge shapes. Go to **Object** > **Expand Appearance**. +选择这两个形状。因为我们已经使用了一些特效，所以在合并形状之前必须扩充外观。点击**对象（Object）** > **扩展外观（Expand Appearance）**。 -**Why? Effects are dynamic and non-destructive, which means you can go back and change the parameters at any time. Because of this, effects need to be expanded before performing further shape manipulation.** +**为什么要这样做？因为特效是可回退的、不会被破坏的，这意味着你可以随时返回并更改参数。因此，在对图形执行进一步的操作之前，需要对特效进行扩展。** ![](https://cdn-images-1.medium.com/max/4000/1*TpvBycrleLcrPgQhobWR2g.png) -Similar to Method 1, we’ll clean up the icon by subtracting the smaller circle from the larger shape (**Pathfinder** panel > **Minus Front**). +与方法 1 类似，我们将通过从较大的形状中减去较小的圆来得到图标（**路径查找器（Pathfinder）** 面板 > **减去前面（Minus Front）**）。 ![](https://cdn-images-1.medium.com/max/4000/1*Dvsus1_nX3QpU7E3Db8Akg.png) -## Method 3: Additive Rotation +## 方法 3：加法和旋转 -Here’s a more complex method that’ll allow us more customization in the gear teeth. We’ll go for a sharper look this time. +这是一个相对来说更复杂的方法，它允许我们对齿轮进行更多的定制。这次我们要看得更仔细一些。 ![](https://cdn-images-1.medium.com/max/3200/1*GzTAZ69HhqNh9bRO_iaifQ.gif) -Draw a circle with a fill, no stroke. +绘制一个有填充（fill），没描边（stroke）的圆。 ![](https://cdn-images-1.medium.com/max/4000/1*JYSKqVx1RvG33CGiDOKtbg.png) -Draw a rectangle with the **Rectangle Tool** (**M**) on top, centered to the circle. +使用在顶部的**矩形工具**（**M**），以圆心为中心绘制一个矩形。 ![](https://cdn-images-1.medium.com/max/4000/1*WZZJpZZOQakA5P9-tmCWhw.png) -'Bulge’ the rectangle. There are many ways to do this. You can select the rectangle and use the **Bulge Effect** (**Effect** > **Warp** > **Bulge**). +“凸出”矩形。有很多方法可以做到这一点。你可以选择矩形并使用**凸出特效（Bulge Effect）** (**特效（Effect）** > **变形（Warp）** > **凸出（Bulge）**)。 ![](https://cdn-images-1.medium.com/max/4000/1*BrNsh1yHIYKrDaMqbYD4iQ.png) -My preferred method is to add anchor points and use the **Direct Selection Tool** (**A**) to select specific ones to manipulate. +但我的首选方法是添加锚点，并使用**直接选择工具（Direct Selection Tool）**（**A**）来选择要操作的特定锚点。 ![](https://cdn-images-1.medium.com/max/4000/1*B1LwQLNXeZwpBAS6qSiE5w.png) -To add additional anchor points that are of equal distance from the current ones, select an object and use **Object** > **Path** > **Add Anchor Points**. You can also use the **Pen Tool** (**P**) to manually add points. +若要添加与当前锚点距离相等的其他锚点，请选择一个对象并使用**对象（Object）** > **路径（Path）** > **添加锚点（Add Anchor Points）**。你也可以使用**钢笔工具**（**P**）手动添加点。 ![](https://cdn-images-1.medium.com/max/4000/1*8ipZwTSEe0OYrNY1Ux21zA.png) -With your shape selected, press **R** for the **Rotate Tool** then **option** + **click** the center of the circle to set that as the reference point. The **Rotate** panel will come up. +选定形状后，按**R**键选择**旋转工具（Rotate Tool）**，然后按**option**键 + **单击**圆心将其设置为参考点。**旋转**面板就会出现。 ![](https://cdn-images-1.medium.com/max/4000/1*ogbTsoIyKr2kYnQjKBe71g.png) -Choose an angle. A 45° angle will create a gear with 8 teeth (360° divided by 8 is 45°). +选择一个角度。45° 角会创造出有 8 个齿的齿轮（360° 除以 8 等于 45°)。 -Here’s the fun part. +接下来有趣的事情发生了。 -Press **Copy** (**not** **OK**). This will copy your shape with the angle and reference point you specified. +点击 **复制（Copy）** (**注意不是点击** **OK**)。这将会按照你设定的角度和参考点复制你的图案。 ![](https://cdn-images-1.medium.com/max/4000/1*CaoipHnbmfFitWDLsSlO_A.png) -Repeat the action by pressing **Command** + **D** (macOS) or **Ctrl + D** (Windows). Do this twice to complete the circle. +通过按 **Command** + **D**（macOS）或 **Ctrl** + **D**（Windows）的重复操作，这样做两次后，就可以完成这个圆。 ![](https://cdn-images-1.medium.com/max/4000/1*4IyH9hCk6usy8IAmJhuTSA.png) -Alternatively, you can use the **Transform** **Effect** (**Effect** > **Distort & Transform** > **Transform**) to achieve the same rotational copies. +或者，你可以使用**变换特效**（**特效（Effect）** > **扭曲 & 变形（Distort & Transform）** > **变换（Transform）** 来实现同样的旋转拷贝。 ![](https://cdn-images-1.medium.com/max/4000/1*8JoVfMIcd7fUc4A72VS1PQ.png) -Effects are non-destructive; whenever you apply one, you can edit it in the **Properties** panel. +刚刚我们说到，特效（Effect）是不会被破坏的，所以每当你用了一个特效图案，你就可以在**属性**面板中编辑它。 ![](https://cdn-images-1.medium.com/max/4000/1*kfB214QfGr1BEvDu6Pg5vQ.png) -Time to clean up our shapes and add the inner circle. +接着我们给图案添加内圆。 -Combine all shapes with **Pathfinder** panel > **Unite**. +点击**路径查找器（Pathfinder）**面板组合 > 合并**（Unite）**，来将所有图形合并。 ![](https://cdn-images-1.medium.com/max/4000/1*BJVbsvvgcKtWpKjAH3AEmw.png) -Draw a smaller concentric circle. +画一个小一点的同心圆。 ![](https://cdn-images-1.medium.com/max/4000/1*Vo4vsPYqBJVfb-IinHiwFw.png) -Use **Pathfinder** panel > **Minus Front** to subtract the smaller circle from the larger shape. +点击 **路径查找器（Pathfinder）** 面板 > **减去前面的图案（Minus Front）** 来从较大的形状中减去中心较小的圆。 -Experiment! Different source shapes yield different end results. +不断尝试！不同的源图形会产生不同的齿轮结果。 ![](https://cdn-images-1.medium.com/max/4000/1*ZBAsEntImNjJ4m_GuoMlbw.png) -## Method 4: Subtractive Rotation +## 方法 4：减法和旋转 -Method 4 is similar to Method 3. +方法 4 与方法 3 类似。 ![](https://cdn-images-1.medium.com/max/3200/1*cujGoMTZXBrhMfm4WoLMaA.gif) -Draw a circle with a fill, no stroke. +绘制一个有填充（fill），没描边（stroke）的圆。 ![](https://cdn-images-1.medium.com/max/4000/1*wpX-ymZRcOULMhAEcltU6A.png) -Draw a small circle aligned to the top. +画一个与顶部对齐的小圆。 ![](https://cdn-images-1.medium.com/max/4000/1*Gd3D7WDFPhMBAjY6R4il5Q.png) -Select the small circle, press **R** for **Rotate**, then **option** + **click** the center of the circle. Let’s try 6 teeth this time (360°/6). Illustrator will do the calculation for you if you type “360/6” directly. +选择这个小圆，按 **R** 键进行**旋转**，接着按下 **option** 并同时**点击**圆心。这次我们尝试一下 6 颗齿（360°/ 6）的齿轮。如果直接输入 “360/6”，则 Illustrator 将会自动为你计算。 ![](https://cdn-images-1.medium.com/max/4000/1*vRGHB4sIUoU43OuFBOv1ZQ.png) -Press **Copy**. +点击复制（**Copy**）。 ![](https://cdn-images-1.medium.com/max/4000/1*xkpTHE3W9Y4JcYZ_aV1fyg.png) -Repeat the action by pressing **Command** + **D** (macOS) or **Ctrl + D** (Windows) 4 times. +通过按 **Command** + **D**（macOS）或 **Ctrl** + **D**（Windows）4 次重复该操作。 ![](https://cdn-images-1.medium.com/max/4000/1*hGWMbewTlFDoxs_B--RICw.png) -Use **Pathfinder** panel > **Minus Front** to subtract the small circles from the big circle. +使用**路径查找器（Pathfinder）** 面板 > **减去前面的图案（Minus Front）**，从大的圆中减去小的圆。 -Let’s round the corners. With the **Direct Selection Tool** (**A**), **click** + **drag** the little dots to adjust the corner radiuses. +接着我们给拐角加一些圆角。使用**直接选择工具（Direct Selection Tool）**（**A**），拖动小圆点来调整圆角的半径。 ![](https://cdn-images-1.medium.com/max/4000/1*ZmT0d39tbi01GCVK9lV1Gg.png) -Draw a smaller concentric circle for the eye and subtract the smaller circle from the larger shape. +画一个小一些的同心圆来创建中间的小洞，从较大的图形中减去中心的小圆。 ![](https://cdn-images-1.medium.com/max/4000/1*Gtie3FaqFE4zPLpSUZLyiA.png) -A few more ideas (try different shapes): +可以尝试更多的创意（尝试不同的形状）： ![](https://cdn-images-1.medium.com/max/4000/1*KThz-U48zcTbttXMSAqE8Q.png) -## Method 5: Intersect +## 方法 5：交叉贯穿 -For the last method we’ll bring back the **Star Tool**. +最后一种方法又会用到**星型工具（Star Tool）**。 ![](https://cdn-images-1.medium.com/max/3200/1*06OYxdrlLjWHY1_7szWRSQ.gif) -Draw a star. +画一个星形。 ![](https://cdn-images-1.medium.com/max/4000/1*ptztuAZB-wBoq9DjIpnHtg.png) -Draw a concentric circle on top. +在上面画一个同心圆。 ![](https://cdn-images-1.medium.com/max/4000/1*Zqu7DDvt0TVfV2rmlYqJLQ.png) -Select both shapes. **Pathfinder** panel > **Intersect**. +选择这两个图形。**路径查找器（Pathfinder）** 面板 > **相交（Intersect）**。 ![](https://cdn-images-1.medium.com/max/4000/1*GvWwEYCuXHmZ7lzpp0nZnQ.png) -Draw another concentric circle on top like so: +再如下图所示，在上面画一个同心圆： ![](https://cdn-images-1.medium.com/max/4000/1*NclTXoSkV7L1ESDlALrGAg.png) -**Pathfinder** panel > **Unite**. Now we have a silhouette of a gear. +**路径查找器（Pathfinder）** 面板 > **联合（Unite）**。 现在我们得到一个齿轮的轮廓啦。 ![](https://cdn-images-1.medium.com/max/4000/1*9kHuhbQmdzgV6HPRi07jAA.png) -You know what to do — draw a third concentric circle and subtract the smaller circle from the larger shape. +接下来怎么做你应该都已经知道了吧 —— 绘制第三个同心圆，然后从较大的形状中减去较小的圆。 ![](https://cdn-images-1.medium.com/max/4000/1*5f7m7XfibpX337PGdK2k4A.png) -More with this method: +用此方法还可以创造出更多花样： ![](https://cdn-images-1.medium.com/max/4000/1*Sg4yaJDl5jo2CDaNe5BMUw.png) -## Experiment to Find Your Flow +## 尝试找到自己的方法 -Hope you learned a trick or two from this exercise. Similar methods may be applied in UI-focused vector software like Sketch or Figma, though Illustrator is more precise. +希望你能从这个教程中学到一两招。虽然 Illustrator 绘图更精密一些，但文中类似的方法也可以应用于一些 UI 制作的矢量软件中，如 Sketch 或 Figma。 -From here, explore different icon styles. +从这里，探索些不同的图标风格。 ![](https://cdn-images-1.medium.com/max/4000/1*L3xu6HufPN2eJMFwNwWQMQ.png) -## Bonus +## 彩蛋 -Some more food for thought… +更多给你带来灵感的创意。 -#### 2 Squares = 1 Star +#### 2 个正方形 = 1 个星 -You can create an 8-pointed star by drawing 2 squares. **Shift** + **drag** with the **Rectangle Tool** (**M**) to create a square, select and **shift** + **drag** with the **Rotate Tool** (**R**) to rotate in 45° increments. +你可以通过画两个正方形来创建一个八角星。按下 **Shift** 键的同时，拖动 **矩形工具（M）** 创建一个正方形，选中这个正方形，按下 **Shift** 键的同时，**拖动旋转工具（R）** 来旋转 45°。 ![](https://cdn-images-1.medium.com/max/4000/1*4KOU3XYdLAiaWe33ipWsNg.png) -#### Roundabout Rounding +#### 环形圆角 -Once upon a time, I may have hacked rounded corners by adding a stroke — overcomplicated and imprecise. Oof. +在以前，我可能会通过添加笔触（stroke）来完成圆角，现在看来但这实在是一个复杂又不精确的方法。（真是令人尴尬） ![](https://cdn-images-1.medium.com/max/4000/1*l11n93ZXg-wrMYtKyeh-nQ.png) -#### Scribble to Shape +#### 涂鸦的造型 -If you’re using a tablet or touch interface, you can use the wacky **Shaper Tool** (**shift** + **N**) to non-destructively combine or subtract shapes. Scribble over like so to ‘delete’ the desired areas. The original shapes will be preserved. +如果你使用的是平板电脑或者是触控板，你可以使用古怪的 **Shaper 工具**（**Shift** + **N**）来对图形进行不会被破坏的组合或删减。就像下面这样乱涂乱画来“删除”想要的区域。最后原始的图形会被保留下来。 ![](https://cdn-images-1.medium.com/max/4000/1*O-W5KyVHqmUgO4TWnvO0nA.png) --- -🎶 **Written to the sounds of: [Mogwai](https://open.spotify.com/artist/34UhPkLbtFKRq3nmfFgejG?si=QsV-S2PuTlKKJTzlRF1uDw)** +🎶 **文章的音频版：[Mogwai](https://open.spotify.com/artist/34UhPkLbtFKRq3nmfFgejG?si=QsV-S2PuTlKKJTzlRF1uDw)** -🙏 **Thanks to: Toby Fried, Tate Chow, Christine Lee, Pawel Piekarski, and Monica Chang** +🙏 **感谢：Toby Fried、Tate Chow、Christine Lee、Pawel Piekarski、Monica Chang** --- -More about iconography: +更多关于图像设计的文章: -* [7 Principles of Icon Design](https://medium.com/@minoraxis/7-principles-of-icon-design-e7187539e4a2) -* Icon Grids & Keylines Demystified **(coming soon)** -* Pixel-Snapping in Icon Design: To Snap or Not to Snap **(coming soon)** +* [关于 icon 设计的 7 个准则](https://medium.com/@minoraxis/7-principles-of-icon-design-e7187539e4a2) （[译文连接](https://juejin.im/post/5e5dbd3e6fb9a07cd323dd2b)） +* icon 网格 & 关键线大揭秘 **（即将推出）** +* icon 设计中的像素捕捉：捕捉或不捕捉 **（即将推出）** > 如果发现译文存在错误或其他需要改进的地方，欢迎到 [掘金翻译计划](https://github.com/xitu/gold-miner) 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 **本文永久链接** 即为本文在 GitHub 上的 MarkDown 链接。