如何从零开始设计一个简易图标
最后更新时间 2022-08-22 19:51
小小的图标能表达很多东西。如今,它们无处不在,在用户界面、网页、PPT等地方都发挥着巨大作用。无论你是一个平面设计师,还是想学习一些视觉设计技巧,图标设计都是你不可缺少的一个技能。在本指南中,我们将学习图标设计。首先,我将向你展示在从头开始设计图标时需要记住的七个关键考虑因素。然后,我们将把我们的理论付诸实践,从头到尾设计一个图标。
当涉及到为一个新项目从头开始设计一套新的图标时,必须为这个过程分配足够的时间。还有一些准则需要牢记,这将有助于确保你的图标是可识别的和用户友好的。
一、图标设计7条黄金规则
1. 注意网格
数字设计中的许多东西都受网格的制约。图标也不例外。在设计图标时,你要密切关注像素网格以及你的图标如何与之相适应。
确保你的图标与像素网格紧密相连的最简单方法是坚持使用整数。不惜一切代价避免使用小数点--这些家伙会产生模糊的边缘。让我们来看看这在实践中是什么样子的。
2. 寻找灵感
想设计一个全新的、疯狂的新奇图标或套装是很诱人的。我们毕竟是创意者!我们有自己的标准。然而,我们有我们希望遵守的标准。我们已经熟悉了标志着标准功能的特定图标。
考虑一下我们随处可见的写着 "搜索 "的小放大镜。放大镜并不是唯一可以表示 "搜索 "的物品。然而,我们如此频繁地使用它们,以至于它们现在已经成为标准的搜索图标。使用不同的图标需要用户学习新的东西,结果使他们的速度变慢。这并不那么有利于用户体验的顺利进行!
在设计你的图标之前,环顾四周,找出你在工作中可能需要记住的任何标准。如果这个图标不代表受标准约束的功能,我们就可以让我们的创意汁液流动起来。如果它是,我们仍然可以给它一个创造性的转折。只要图标和它的功能仍然是可识别的,添加你自己的设计风格是完全可以的。
3. 不要疯狂追求细节
我们经常把图标贴在很小的地方,比如iPhone的标签栏。当事情变得很小的时候,太多的细节就会被丢失。
当你设计时,对你选择的细节种类要有策略。尽量少用小部件,并确保你的图标读起来很清楚,即使是在小尺寸下。
4. 保持一致
当我们设计一套图标时,它们应该感觉像一个家庭。它们不会看起来都一样,但会有类似的视觉属性,使它们感觉有关联。
当你设计时,做出一致的风格选择。例如,如果你在一个图标中使用了圆角和结尾,请确保你在其他所有的图标中也这样做。造型、尺寸和细节的程度都应该是一致的。这有助于形成一种连贯的视觉语言--这是品牌建设的一个关键部分。
5. 注意差距
要注意小细节或元素之间的距离太近。在小尺寸下,没有仔细间隔的项目会很难阅读,并开始失去意义。
6. 测试
确保你的图标能清晰快速地与用户沟通的最好方法是测试它们。一旦你完成了图标的设计,进行一次快速测试是很好的做法。
把你的图标给你的朋友或团队中的其他人看。请他们告诉你,当他们看到这些图标时,首先想到的是什么。如果它与你想传达的内容一致,你就会有好的结果。
7. 用简单的形状
一切都可以分解成基本形状。还记得我们上面的房子图标吗?我们用两个长方形和一个三角形来设计。
一旦你确定了你的图标将是什么,试着把它分解成简单的形状。这是开始构建和简化你的图标的最好方法。
二、如何从头开始设计一个图标
我们已经介绍了在设计一个图标时需要考虑的问题。现在,让我们把它付诸实践。为此,我们将经历建立一个简单的相机图标的过程。
我将会使用Sketch。不过,你也可以在其他设计软件中复制以下步骤,比如美图秀秀。如果你不能决定使用哪种工具,可以看看美图秀秀和Sketch的比较。
第1步:熟悉你的主题
首先,让我们熟悉一下相机的样子。一个简单的方法是谷歌一下你要设计的东西。我在谷歌上搜索 "相机"。
我的结果显示了各种相机,都有不同的形状和大小。然而,它们有几个共同的决定性特征。
我们要确保在我们的设计中包括相机的特征,因为它们将使我们的相机图标很容易被广大观众所识别。
第2步:分解它
接下来,我们将开始寻找基本形状。是否有任何圆形、正方形或长方形我们可以用来构建?通过一些草图和迭代来帮助你识别它们。
第3步:开始构建
有了所有这些信息,我们就准备好在电脑上操作了。首先创建一个24x24px的艺术板,将其命名为 "相机图标",并打开像素网格。
开始绘制构成我们之前确定的三个决定性特征的基本形状。确保所有的形状都能紧紧地贴在像素网格上,就像我们在下面的例子中做的那样。
如果你的像素没有扣在网格上,看看你的边界设置。确保你把你的边框设置在形状的外面或里面,而不是中心。如果你把你的边框设置为中心,你就有可能出现像素网格之外的元素。
组合任何形状,以简化你的工作。假设我们想通过在中心的小圆圈周围添加一个更大的圆圈来增加镜头的细节:我们可以把较大的圆圈从相机的机身上剪下来,把它们变成一个形状。
第4步:测试
为了确保我们的作品读起来很清楚,我们要对它进行测试。与同事或朋友分享你的作品。问他们看到了什么。他们是否立即认出你的图标是一个相机,或者你还没有完全达到目的?
第5步:修改
在你最终确定你的图标之前,仔细检查是否有任何小数点。看看检查器中的数字,确保它们都是整数。
第6步:导出
保存你的作品,并将其导出。
我们已经完成了一个简单的图标设计,你可以随时增加你的设计和风格。祝你设计愉快! 如果你想设计更多图标,不妨来美图秀秀的素材库看看,说不定能找到一些设计灵感。