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

本文概述

• Google的材料设计原则
• 你也可以做到这一点：分步演示
• 让我们开始吧。
• 改善图标集的外观

图标是我们设计不可或缺的一部分。它们是指示各种动作的视觉提示, 并且可以赋予产品唯一的标识。但是, 我们经常选择通过下载相同的图标集并让每个网站的每个图标看起来大致相同来庆祝它们的重要性。这是多么重要的事情。

为了解决此问题, 我创建了一个指南, 以帮助设计师增加图标的视觉深度, 并使它们对于所代表的产品而言是唯一的。本教程的灵感主要来自颇具影响力的Google材料设计。

Google的材料设计原则

正如Google所说, “材料是隐喻”。它借鉴了物理世界的视觉提示, 并创建了一种新的视觉语言来标准化它们的所有界面。可以使用材料设计原则, 并且可以快速应用它们来改善界面的吸引力和用户体验。

1.使用简单的几何形状和粗体颜色

平面设计趋势启发了Material Design, 该设计也基于基本的平面形状。仔细选择最能代表图标描绘元素的形状。

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

阴影是欺骗眼睛并给设计增添深度感的好方法, 因为它可以激发投射到对象上的光的效果。

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

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

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

你也可以做到这一点：分步演示

我们将应用简化版的Material Design样式, 并且对于每个图标, 我们将仅使用相同颜色的三种阴影, 并保持阴影平坦短小, 而不是常见的”长阴影”效果。

资源资源

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

让我们开始吧。

1.螺栓图标

将原始图标一分为二, 并使顶部显得抬起。你可以通过在两个形状的交点处创建阴影效果来实现此目的。使用三种黄色阴影-顶部变浅, 底部变暗, 并保持阴影最暗。

2.聊天图标

在原始图标上, 我们会在两个气泡之间的间隙中有阴影效果的提示, 你将在此处创建阴影。

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

复制顶部气泡, 然后将副本向下和向右移动。选择副本和下部气泡形状, 使用”路径查找器”创建一个分割, 并仅保留与上一个副本的交集。

现在, 你可以应用三种蓝色阴影, 并在顶部提供最浅的颜色, 在中间提供最深的颜色, 并在底部提供第二个最深的颜色。

3.复选标记图标

我们将创建折叠纸效果。

复制该图标, 然后删除右上角的多余两个点, 然后删除最左边的两个点。

复制左折, 然后将其移动到右折的顶部。

将两个形状相交以创建阴影效果。然后应用三种颜色的阴影, 同时使阴影保持最暗, 长片保持第二暗, 顶部保持较浅的阴影。

4.标记图标

首先使边缘变圆, 然后提取标志的底部。

要创建折叠效果, 请绘制两条对角线相交的线。使用”探路者”, 将旗形用线划分, 并在旗基保持灰色的同时将三个绿色阴影应用于旗。

5.心形图标

复制心脏图标。

隔离形状的左半部分。

从右上角点向下绘制一条对角线。

将产生的形状与心脏重叠, 然后将其向右移动以减去阴影形状。涂上三种深浅的粉红色。

6.山图标

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

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

将较小的副本向右移动, 并将得到的相交提取为阴影形状。

保持最浅的左侧为三个阴影, 第二个最大的三角形保持最浅, 中间的阴影为最暗, 以应用三种阴影。应用一些拐角半径以柔化结果。

7.人形图标

选择并将该人的下部复制到左侧。将该副本与右边的人对齐。现在, 选择三个重叠的形状, 然后从”路径查找器”面板中应用”划分”工具。现在, 实现颜色完成。

8.浮动方形图标

选择较低的形状, 然后向上移动其中上点, 直到看起来像菱形。

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

选择下面的两个形状, 然后从”路径查找器”面板中应用”划分”工具。

从生成的相交形状中, 仅保留两个下部, 并删除所有多余的点。

通过应用三个红色阴影将其包装起来, 同时在中间分配最暗的颜色。

9.字母图标

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

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

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

选择所有内容, 然后在”路径查找器”面板中应用除法。将顶部纸张形状与信封分开, 然后在应用三种蓝色阴影之前, 将信封部分复制到纸张顶部以切去阴影形状。

10.蛋糕图标

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

向内移动左右边缘以使其宽度变窄。

将结果形状移到原始图标的顶部, 然后扩展较高的点以覆盖糖霜形状。

使用”路径查找器”创建所有重叠形状的划分, 并删除你之前创建的窄蛋糕基旁边的多余点。

通过在结冰和蜡烛上涂上浅橙色, 在底部上涂上深色, 在火焰形状和阴影边缘上涂上更深的橙色, 完成蛋糕的制作。

改善图标集的外观

创建具有Material风格的图标的过程非常简单。你只需要考虑周到的几何形状, 大胆的颜色阴影和阴影效果的良好组合。

好消息是, 你甚至不需要像本教程中一样从头开始创建所有图标。你可以从现有的免费平面图标开始, 然后应用刚刚学习的简单技术。

我很想知道你能想到什么。随时分享你的评论和自定义图标。