如何快速将无聊的图标变成原创杰作

图标是我们设计中不可或缺的一部分。 它们是指示各种动作的视觉线索，它们可以赋予产品独特的身份。 但是我们经常选择通过下载相同的图标集并使每个网站的每个图标看起来或多或少相同来庆祝它们的重要性。 处理如此重要的事情的方法是什么。

为了解决这个问题，我创建了一个指南来帮助设计师为他们的图标增加视觉深度，并使它们对他们所代表的产品来说是独一无二的。 本教程很大程度上受到了有影响力的 Google Material design 的启发。

谷歌的材料设计原则

正如谷歌所说，“材料是一种隐喻。” 它借鉴了物理世界的视觉线索，并创建了一种新的视觉语言来标准化其所有界面。 Material Design 原则易于理解，可以快速应用于改善界面的吸引力和用户体验。

1.使用简单的几何形状和大胆的颜色

扁平化设计趋势启发了 Material Design，它也是基于基本的扁平形状。 仔细选择最能代表图标所描绘元素的形状。

2.通过微妙的阴影添加深度

阴影是一种欺骗眼睛并为您的设计赋予深度感的好方法，因为它会激发光线投射在物体上的效果。

请注意，自然光通常被模拟为来自左上角。

3.使用颜色阴影替换阴影

每种颜色都用于多种色调以模拟视觉深度。 例如，在 Gmail 图标中，您可以看到 M 的形状使用了不同深浅的红色，而信封盖下方则使用了较深的灰色阴影。

你也可以这样做：分步演示

我们将应用 Material Design 风格的简化版本，对于每个图标，我们将只使用三种相同颜色的阴影，并保持阴影平坦而短，而不是常见的“长阴影”效果。

资源

• 在此处查看来自 Google 的完整免费图标集。

让我们开始吧。

1. 螺栓图标

将原来的图标一分为二，让顶部看起来是抬起的。 您可以通过在两个形状的交叉处创建阴影效果来实现这一点。 使用三种黄色阴影 - 顶部较浅，底部较深，并为阴影保留最暗的阴影。

2.聊天图标

在原始图标上，我们在两个气泡之间的间隙中有一点阴影效果，这就是您将创建阴影的地方。

在下部形状上，选择在间隙中形成直角的点，然后将其向上移动到左侧，直到在左上角形成直角。

复制顶部气泡并将副本向下和向右移动。 选择副本和较低的气泡形状，使用“探路者”创建一个分区，只保留与之前副本的交集。

现在您可以应用三种深浅的蓝色，并在顶部涂上最浅的蓝色，在中间涂上最深的蓝色，在底部涂上第二深的蓝色。

3.复选标记图标

我们将创建一个折叠的纸效果。

复制图标，并删除右上角多余的两个点，然后在最左边取出两个部分。

复制左侧折叠，并将其移动到右侧折叠的顶部。

将两个形状相交以创建阴影效果。 然后涂上三种颜色，同时保持阴影最深，长片第二深，顶部浅色。

4. 标志图标

首先将边缘修圆，然后提取标志的底部。

要创建折叠效果，请跟踪对角相交的两条线。 使用“探路者”，将旗帜形状与线条分开，并在旗帜上应用三种绿色阴影，同时保持底色为灰色。

5. 心形图标

复制心形图标。

隔离形状的左半部分。

从右上角向下追踪一条对角线。

将生成的形状与心形重叠，然后将其向右移动以减去阴影形状。 应用你的三种粉红色。

6. 山脉图标

原始图标内的空白表示我们可以放置阴影的位置。

从每个选择中创建两个三角形。

将较小的副本向右移动，并将生成的交叉点提取为阴影形状。

应用三种深浅的棕色，左边最亮，大三角形第二亮，中间阴影最暗。 应用一些圆角半径来柔化结果。

7.人物图标

选择并复制左侧人物的下半部分。 将该副本与右侧的人对齐。 现在，选择三个重叠的形状，并应用“路径查找器”面板中的“分割”工具。 现在，实现颜色以完成。

8. 浮动方形图标

选择较低的形状，然后向上移动它的中点，直到它看起来像一个菱形。

复制上面的菱形，并将副本向下移动 10 或 20 像素。

选择两个较低的形状，并从“探路者”面板应用“分割”工具。

从产生的相交形状中，只保留两个较低的部分，并删除任何多余的点。

通过应用三种红色阴影将其包裹起来，同时将最暗的部分放在中间。

9. 字母图标

使用“直接选择工具 (A)”，选择信封形状的第二个较高点。

使用“钢笔工具”在段的右侧添加一个点。

现在你有了一个额外的点，你可以通过抬起两个上面的点并将它们左右移动，如图所示，将负空间重塑为看起来像一张纸。

选择所有内容，然后从“探路者”面板中应用一个分区。 将顶部纸张形状与信封分开，然后将信封部分复制到纸张顶部以剪下阴影形状，然后再应用三种蓝色。

10. 蛋糕图标

隔离蛋糕底部的重复版本。

通过向内移动左右边缘来缩小其宽度。

将生成的形状移动到原始图标的顶部，并延伸较高的点以与结冰形状重叠。

使用“探路者”创建所有重叠形状的分割，并删除您之前创建的狭窄蛋糕底座旁边的额外点。

通过在糖霜和蜡烛上涂上浅橙色，在底部涂上较深的阴影，为火焰形状和阴影边缘涂上更深的橙色来完成您的蛋糕。

改善图标集的外观和感觉

可以通过简单的方式创建具有 Material 风格的图标。 您只需要考虑周到的几何形状、大胆的色调和阴影效果的良好组合。

好消息是，您甚至不需要像我们在本教程中所做的那样从头开始创建所有图标。 您可以从现有的免费平面图标开始，并应用您刚刚学到的简单技术。

让我们知道您的想法！ 请在下方留下您的想法、评论和反馈。

• • •

进一步阅读 Toptal 设计博客：

• 设计原则及其重要性
• 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
• 探索完形设计原则
• Adobe XD 与 Sketch – 哪种 UX 工具适合您？
• 顶级设计师使用的 10 个 UX 可交付成果