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

为了解决这个问题, 我创建了一个指南来帮助设计师增加他们的图标的视觉深度，使他们在他们所代表的产品中独一无二. 本教程很大程度上受到谷歌Material设计的启发.

b谷歌的材料设计原则

As 谷歌 他说:“材料是一种隐喻.“它借鉴了物理世界的视觉线索，创造了一种新的视觉语言来标准化所有的界面. 材料设计原则有 可访问的 并且可以快速应用于改善界面的吸引力和用户体验.

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

平面设计趋势启发了材料设计，这也是基于基本的平面形状. 仔细选择最能代表图标所描绘的元素的形状.

2. 添加深度与微妙的阴影

投影是一个很好的方法来欺骗眼睛，给你的设计一种深度感, 因为它激发了投射在物体上的光的效果.

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

3. 使用颜色阴影来代替阴影

每种颜色都使用多种色调来模拟视觉深度. 例如, 在Gmail图标中, 你可以看到不同深浅的红色被用来表示M的形状, 在信封盖下面使用更深的灰色.

如何做到这一点:一步一步的演示

我们将应用一个简化版本的材质设计样式, 对于每个图标, 我们将只使用三种相同颜色的阴影，并保持阴影平坦和短, 而不是常见的“长阴影”效果.

资源

• 检查谷歌的完整免费图标集 在这里.

让我们开始吧.

1. 螺栓的图标

将原来的图标分成两部分，并使顶部看起来是抬起的. 您可以通过在两个形状的交叉处创建阴影效果来实现这一点. 在顶部使用三种颜色的淡黄色, 下面是一个颜色较深的, 把最暗的阴影留给阴影.

2. 聊天图标

在原始图标上, 我们在两个气泡之间的空隙中有一个阴影效果的提示, 这就是你要创建阴影的地方.

下面的形状, 选择在缝隙中形成直角的点, 然后向上向左移动，直到在左上角形成一个直角.

复制顶部的气泡，并向下和向右移动副本. 选择副本和下方的气泡形状, 使用“探路者”创建一个部门, 只保留与前一份的交点.

现在你可以应用三种深浅的蓝色，把最浅的放在上面, 中间最暗, 倒数第二暗的位置.

3. 选中标记图标

我们将创造一个折叠纸的效果.

复制图标, 然后去掉右上方多余的两点, 然后在最左边取出两块.

复制左边的折叠，并将其移动到右边的上面.

将两个形状相交以创建阴影效果. 然后应用三种颜色，同时保留最暗的阴影, 长片第二暗, 上面用浅色的.

4. 国旗图标

首先将边缘磨圆，然后提取旗帜的底部.

要创建折叠效果，描摹两条对角线相交的线. 使用“探路者”,“用线条划分国旗的形状, 在保持底色为灰色的同时，给国旗涂上三种深浅不同的绿色.

5. 心的图标

复制心形图标.

将形状的左半部分隔离.

沿着一条对角线向下画，从右上方的点开始.

将生成的形状与心形重叠，然后向右移动以减去阴影形状. 涂上你的三种粉色.

6. 山图标

原始图标内部的空白表明我们可以在哪里放置阴影.

在每个挑上创建两个三角形.

向右移动一个较小的副本, 并提取结果的交集作为阴影形状.

使用三种深浅的棕色，保持最浅的在左边, 第二个最轻的大三角, 最黑暗的是中间的阴影. 应用一些角半径来软化效果.

7. 人图标

选择并复制人的左下部分. 将该副本与右侧的人对齐. 现在，选择三个重叠的形状，并从“探路者”面板中应用“分割”工具. 现在，实现颜色来完成.

8. 浮动方块图标

选择较低的形状，并向上移动它的中点，直到它看起来像一个钻石.

复制上面的菱形形状，并向下移动10或20像素.

选择下面的两个形状，从“探路者”面板中选择“分割”工具.

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

用三种深浅的红色把它包裹起来，同时把最暗的红色放在中间.

9. 信图标

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

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

现在你多了一分, 你可以重塑这个负空间，让它看起来像一张纸，方法是抬起上面的两个点，像图中那样左右移动它们.

选择所有东西，并从“探路者”面板中应用分割. 把最上面的纸和信封分开, 然后在纸上复制信封部分，在应用三种蓝色之前剪出阴影形状.

10. 蛋糕图标

分离出蛋糕底部的复制版本.

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

将生成的形状移动到原始图标的顶部, 并延伸较高的点重叠的糖衣形状.

用“Pathfinder”创建所有重叠形状的分区,，然后把你之前做的蛋糕底旁边多余的点去掉.

在糖霜和蜡烛上涂上淡橙色，完成蛋糕, 底部较深的阴影, 火焰形状和阴影边缘用更深的橙色.

改善你的图标集的外观和感觉

创建具有Material风格的图标可以简单地实现. 你只需要巧妙地结合几何图形, 大胆的色调, 还有一个投影效果.

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

---

让我们知道你的想法! 请在下面留下你的想法、评论和反馈.