前面已经说完了工具图标相关的设计规范和方法，本章就开始进入下一个主题，关于装饰图标的设计。

在装饰图标中，就没有工具图标那么严谨的规范需要遵循，也就意味着自由度越高，可以任意发挥。显然，想要通过一篇文章掌握所有的装饰图标视觉设计方法，并不现实，新手只要将精力聚焦在最常用的几种图标风格的设计上即可。

装饰图标最主要的应用区域，集中在首页的快速入口上，也是今天多数应用中会使用的组件。下面，我们会通过讲解国内主流应用中的几种装饰图标的设计。

8.1 扁平插画风格

装饰图标的主要作用是丰富视觉体验，对于识别性的要求较弱，所以我们可以在这里应用更复杂的图形和添加更多的细节。在这里的扁平插画风格设计更具象，而不是像工具图标一样的抽象化，所以完整的采用扁平插画的设计是没问题的。

例如在肯德基客户端首页的服务分类中，使用的图标就是依据扁平插画的形式设计的，有较多的色彩和完整的细节。

这类图标设计的并不困难，只要具备了工具图标的设计基础，就可以很快学会并运用。它的设计特征是这样的，先通过绘制具体的图形轮廓，然后为这个轮廓内添加细节，并对不同的面填充不同的色彩进行区分。

下面，我们通过讲解几个图标的设计过程，帮助大家学习这种设计风格。

1. 优惠券图标

通过模拟现实世界的优惠券样式，确定出基本的线性轮廓。

但作为装饰图标来说，这样的设计目前有点简陋，左侧空出了大量的留白，所以我们要考虑如何增加细节来丰富这个区域。于是，使用 % 号就可以比较好的标示折扣。

最后，开始为图标填色。因为在这套图标中，红色是主要基调，所以我们不能大面积的使用其它颜色，于是就将其中一侧进行留白处理，只修改了它描边的色彩。并且还在票据两侧的连接处添加了一个用来标示阴影的竖线。

2. 店铺图标

3. 我的卡包图标

8.2 渐变几何背景风格

和其它风格比较，在快速入口中，线上案例应用得最多的风格其实是渐变几何背景的设计方案，即在一个应用了渐变色的背景上帖了一个线性或面性的图标。

这种风格的设计，主要在于背景渐变色的应用上，通常，在一组彩色快速入口的图标中，要让它们的渐变色看起来自然和谐，是需要技巧的。

例如有四个图标，首先要定义出不同的色相，然后再对它们应用相同的渐变模式。例如，使用相同的渐变角度，然后在渐变的起始色使用该色相，在结尾使用不同明度、饱和度的色彩。

之后，再在上方置入图标的图形，并为它们添加适当的阴影即可。

如果在这个基础上，还想再添加细节，那么就可以在上方的图形中添加一些折叠的阴影效果，强化立体感。

8.3 炫彩渐变风格

这是一个比较奇特的设计风格，在过去只存在于飞机稿中，是一种单纯为了追求视觉表现力的设计形式，通过高饱和的渐变、撞色，抓取浏览者的眼球。

这类风格的设计，在确定了图形以后，就是为它们填充高饱和度的渐变色。和扁平插画比较不同的是，色彩的填充不是用来描绘物体的颜色，而仅仅是视觉表现的一种方法，所以颜色的添加追求的不是 “合理”，而是纯粹的 “好看”。

并且，通常这类图标还会使用前两年开始流行的彩色投影，增加界面本身的层次感。下面，我们也通过 3 个案例，为大家演示一下这类图标设计的过程。

案例1：

案例2：

案例3：

8.4 实物贴图风格

最后，讲讲实物贴图的图标风格。这种图标出现在涉及到实物产品的应用中，例如电商应用，智能硬件控制应用等等。

这类设计看起来很简单，只要画出一个几何的背景，并建立蒙版将实物图置入进去即可，但还是有不少新手会犯的错误，下面我们主要说说常见的问题有哪些。

第一，就是物体的透视。和工具图标一样，我们要尽可能的保证整组图标中图形的形状和透视可以统一，如果实物图采用的透视不一致，那么空间的对立感就更强，也有更容易被用户觉察到的违和感。

第二，形体和比例。当我们采用实物照片时，该物体完整的形状我们往往不能控制，但切记的是，不是物体本身是什么形状我们都要完整的置入进去。

比如如果入口中有口红和香水两种，口红是细长的而香水是圆形，那么我们可以做的就是要放大口红，最终只展示它的局部，否则它们的对比会完全失衡。

第三，图形的质感。实物的图形，还有一个非常重要的细节，就是它们的质感。这种质感指的不是物体本身的材质，而是摄影、后期产生的质感。如下图的对比，同一件商品，手机直出的图，和经过商品精修的图，展现出来的质感是完全不一样的。

如果强行将有精修痕迹和普通照片抠出来的商品放到一起，也只能给用户产生巨大的违和感。所以，如果提供给我们的素材本身质感不同，那么我们就要在 PS 中对它们进行调试，尽可能保证它们的一致。

第四，前后对比。因为是摄影图，所以图形本身包含的细节会非常丰富，而且色彩也可能比较多。在采用了几何背景时，就要保证它能更好的衬托主体物。如果使用较强的颜色，或是太多细节，就会导致前后元素的分离度不足，无法凸显物体本身。所以，多数采用这种风格的设计案例中，背景用色都使用饱和度偏低的配色。

只要能保证不犯上面 4 种错误，那么设计这类图标时，就能保证最终的效果不会太差。

本节我们开始讲解最后一种类型的图标——启动图标。在第一章我们已经对启动图标有了基础的认识，所以下图再简单回顾一遍。

想要在启动图标设计上入门，就要先从规范开始学习，然后了解不同的风格以及对应风格的设计过程。如果没有比较明确的学习目标，就会和学习 LOGO 设计一样无从下手。

9.1 启动图标的设计规范

说到启动图标的规范，首先会想到的，就是 iOS 提供的图标栅格。通过这个栅格，会规范图形的尺寸，以及所处的位置。

这个模板和工具图标的使用方法类似，我们在后面的案例进一步讲解。接着，来说明一个更重要的问题，就是启动图标画布的尺寸。

默认的情况下，我们使用 1024 * 1024 尺寸来设计启动图标，这个参数在 iOS 和 Android 中都适用。

之所以使用这么大的尺寸，是由屏幕分辨率的差异和使用场景导致的。

第一，在手机硬件中，根据屏幕规格的不同，展示图标的实际像素量也不同，即图标的尺寸会发生改变。

例如在 1x 的屏幕中，图标使用 60×60px，在 2x 的屏幕中，就使用 120×120pt，3x 则是 180×180。

第二，不同设备和显示场景里，应用的图标尺寸也不一样。对于一个真实的项目来说，图标不是只放在手机上运行，无论 iOS 和 Android 的 APP 都可以在 PAD 上安装，图标尺寸规格就不同。并且，在网页或者手机应用商店里，也需要展示启动图标，显示的规格和真实应用列表中又不同。

所以，在 iOS 官方的图标模版中，我们会看见里面罗列了非常多的图标尺寸，我们只需要设计第一个 1024 规格的，将这个图标置入到 PS 的智能对象，或者 Sketch 的 Symbol 中，就可以一次性生成所有尺寸，不需要我们自己手动调整各种规格的图标输出。

应该有同学这时候还会产生疑问，模版里的画布就是一个正方形，但是大多数手机的 APP 图标使用的是圆角，所以，应该如何制作这个圆角，以及它的相关参数呢？

真实项目中，除非项目的特定要求**，只需要提交正方形的图形即可**，之后无论是 APP Store，还是多数安卓应用商店，都会自动对该图形进行裁切，生成符合自己系统的圆角图标。

如果我们想要在设计出正方形图形后预览真实的效果，就可以用我们准备的 PSD 模版，将正方形置入到模版中即可。

在设计已经确认以后，我们就要导出这些图标。因为启动图标有很多拟物的设计或会使用真实的摄影素材，所以应用商店提交的格式会选用位图格式而不是矢量格式，所以导出启动图标，只需要导出对应尺寸的 PNG 即可。

在规范中我们提到的这些素材和模版，我们提前整理出来了，获取方法：

在公众号 超人的电话亭 中回复 “启动图标” 即可。

9.2 启动图标的设计演示

9.2.1 图标形式

在一些比较基础的应用类型中，通常会直接使用工具图标的图形设计启动图标。因为基础的 APP 服务大多有表意极其清晰的工具图标与之对应，例如邮箱、计算器、音乐、地图等类型应用，企业往往在使用一些抽象的品牌化图形与表意更清晰的工具图标中选择后者。

工具图标的设计其实很简单，就是在画板中完成两种元素的设计，一个是背景，一个是上方图标。

背景的设计，有比较常见的就两种类型，纯色、渐变。而上方图标的设计里，包含的类型就是我们前面讲过的几种常见的工具图标。所以你看，只要将它们组合，就可以很轻松的设计出符合主流特征的启动图标。

所以，如果我们要设计一款笔记应用，那么就可以先画一个线性的笔记图标，然后再将它置入格线模版中确认大小，再分别为它们上色，就可以完成设计了。

9.2.2 文字形式

文字形式的设计，背景和上方一样，也只使用纯色和渐变，但这种设计的主要难点在与字体的设计上。

想要放文字，大家首先想到的肯定是直接用字体打进去，但是切记，字体的商业版权问题是不能视而不见的。选择字体前，一定要关注该字体是否是免费，百度或者官网都可以查询。或者一开始就在免费字库中挑选，如思源黑、思源宋、王汉宗系列等等。

如果觉得直接使用字库文字太没有设计感，那可以选择做一次字体的二次创作，对于新手来说简单一点。即一开始挑选一个合适的字体，然后在 AI 中对该字体进行临摹，再对细节进行重新加工，比如衬线的调整，壁画粗细的调整等等。

比如要设计一个我的应用，那么我可以取 “超人的电话亭” 的第一个字——超，作为图标上方的文字。然后我选用 “方正兰亭大黑” 作为基础字形，对它进行重构即可。

最后建议，如果不是一些比较严肃或是传统的题材，尽量不要选用宋体或是楷体进行设计。

9.2.3 拟物形式

虽然现在整体设计环境中，拟物已经被扁平取代，但不代表它已经消失，或是在形式上不合理。适当的拟物设计会让我们对应用功能的认识更清晰，且更有趣味性。

还是老惯例，我们从简单的拟物设计入手。目前拟物的领域中，使用最普遍的风格也是新手最容易学习的风格，即 “轻拟物” 的设计。这种风格需要刻画的细节相对较少，更易于我们掌握，只要能用好渐变即可。

比如，iOS 的官方应用——文件，图标的形式就符合轻拟物的特征。简单分析一遍，即在确定完轮廓后，通过渐变填充来表示物体本身的高光和阴影，并添加投影来制造立体感。

如果要设计一些更复杂的拟物图形，可以通过多做拟物图标的教学会更有帮助。在今天扁平化图形当道的环境中，设计得精良的拟物图标往往可以在满屏的扁平图标中脱颖而出，助于吸引用户启动应用。

前面的章节，已经系统的讲解了图标的设计方法，相信认真学习并实践的同学，已经可以设计出优秀的图标了。

但是，在 UI 设计中，图标不是孤立存在的。我们学习图标的设计，不是为了画一组套图，然后上传到设计平台中分享或求赞，而是要在真实的项目中发挥作用。如果不了解图标应用到项目中的知识点，那么真实的图标设计水平就会在项目设计过程中被损耗。

所以，最后一章，说的就是工具图标在项目中应用的方法，我相信这是在网上很难找到的分享，建议仔细阅读。

10.1 一套应用中的图标规格

图标是一个应用不能或缺的组成元素，在应用的界面中随处可见。也因为图标的常见性，我们往往需要在一个应用应用多套图标，这和崇尚简约的第一印象是有背离的。

很多新手，都以为我们只要设计一套大而全的图标，在项目中对应提取即可。但有很多场景，如果只使用一种图标类型，那么效果会非常差劲。比如 ，我们看看下面的淘宝设置页，前后包含了 6 种以上的图标。是太复杂了没错，但如果我们把图标都替换成同一套呢？

可以看见，右侧替换后的案例，效果非常的不理想，缺乏对比和趣味性。交互规则中说：如无必要，勿增实体，但对于图标的使用来说，这就是必要。

应用内的图标规格不同，可以用两个属性来划分，大小和风格。

10.1.1 图标的尺寸

大小就是图标的尺寸规格，有些界面的元素权重低，图标的尺寸就小，有些权重高的则反之。比如在 Apple Music 的播放界面，播放快进等按钮，作为页面最重要的按钮，尺寸非常大，其它可以点击的图标次之，而表示音量的两个按钮则最小。

确定图标尺寸，是我们在项目中进行图标设计的第一件事。但尺寸的确定，不是我们凭空制定出来的，我们要先构建出实际的 “场景“ 进行分析，即先完成了界面的高保真原型或交互原型。

下方是我自己课程中给学生做的原型演示，在构建了这样的页面以后，我会在原型中检查，我总共用了多少种图标的尺寸，它们分别会应用在哪些场景中，然后整理出来。如果出现了一些觉得没有必要的，可以将它们进行调整合并成一种尺寸。

所以，在这个案例中，我整理出了 4 种图标的尺寸：

• 48pt：分类、快速入口大图标

• 32pt：底部 TabBar 图标

• 24pt：常规工具图标

• 16pt：小型提示图标

定好了这 4 种规格，我们在后续的设计上才有明确的设计方向。再复习一遍，为什么我们需要先定尺寸再设计，而不是统一设计一套很大的图标进行缩小。

因为图标要尽可能满足像素对齐的要求，通过缩小的图标往往在细节上会发生错位、模糊、丢失等问题。且在大画布上设计图标和一开始就在小画布中设计，两者在过程中得到的视觉反馈是完全不一样的，先在大画布画完，再缩小到 16pt、12pt 的规格时往往会显得太复杂，或描边太粗。

所以，新手尽量不要犯这种初级的错误。

10.1.2 图标的风格

图标风格确认完以后，下面就是确认图标的风格了，和尺寸一样，我们要应用什么风格的图标，是需要在已经具备视觉雏形的页面中对比确定的，而不能提前开始设计。

在我的设计流程中，通常会将图标放在项目的最后再开始设计，原因就是图标的视觉样式风格是取决于所处位置和环境的，是先有界面样式，再有图标风格的。

在常规情况下，如果一个应用中有多套图标，那么普通的中小尺寸图标使用一般的线性或面性风格即可。而在分类、快速入口这些具备装饰性、大尺寸的类型中，就应该使用一些更激进的设计风格。比如下图是 58 同城客户端应用图标案例：

通常，一种风格会应用在一种 “类别“ 的图标种。上放案例属于比较理想的状态，一种类别的图标对应一种尺寸，但是在一些更复杂的环境种，往往会同一种尺寸下还会包括不同类别的图标。这点大家知道即可，我们会在后面的章节中有所涉及。

10.2 图标的不同状态

图标在一个产品中，除了充当装饰以外，往往也可以作为按钮来使用。每个应用中都有大量的图标可以进行点击和交互，比如底部导航栏，头部的消息图标、发布图标等等。

当一个图标能被操作后，那么我们就要注意到它的状态变化。从导航栏图标举例，常规的选中状态是更换色彩，但也有越来越多的应用会在选中状态采取不同的设计风格，通过更丰富的样式表现来提升可看性。比如淘宝、QQ 的底部导航栏。

还有，一些包含在控件内的图标，也会跟随控件状态的变更发生变更。例如在账号输入框中，如果选中了输入框，那么图标的色彩也得到变更，如果输入框目前处于不可输入状态，那么图标也会对应置灰。

合格的 UI 设计师会充分考虑到图标所变换的各种状态，并在提交给开发的过程中会进行详细的说明、归类。以及，充分运用 Sketch 等软件中的组件功能，提升项目的效率和最后的产出成果。

10.3 图标的标注和切图

在我们完成了界面和图标的设计以后，要提交我们的设计给开发人员。其中，包含我们的标注和切图。抛开其它设计元素不谈，我们就讲讲图标的切图需要遵循哪些规范，它和字体都是在这个过程中最容易出错的地方。

应用图标的导出我们已经在上一章提到过，所以下面还是以工具图标的说明为主。

10.3.1 图标的边界

我们要回到第二章工具图标的规范中，当我们确定出图标的尺寸时，不是要把图形设计得正好撑满这个尺寸，而是利用格线系统来定义它们的大小。

很多新人会在这个过程中产生疑惑，那么在标注的过程中，我们标注的到底是图形到其它元素的距离，还是图标外轮廓到别的图形的距离。所以，要重点强调：

图标的距离是根据外部轮廓进行计算的！虽然这个轮廓我们肉眼不可见，但它包含的内在规律可以帮助我们忽略一些不必要的小问题。

所以，要让标注有效，就一定不要偷懒只把图标置入画布中，而没有透明矩形背景。

10.3.2 图标的画布

现在有很多帮助我们进行标注和切图的协作工具，比如蓝湖或是 Zeplin 等。我们只要将设计稿上传，程序员可以自行获取图标对应的切图。

在这裁切一些特定元素时很好用，但通过线上页面导出图标的方法，是非常不牢靠的。我们说过，一个应用中可能出现多种规格的图标，所以合理的图标切图，要根据不同的规格进行导出和整理 (如下图)，而不是让程序员自己在线上工具中下载，这样不仅操作起来困难，而且图标间不同的状态难以被轻易获取。

所以，要在项目设计过程中，创建不同规格的画布（Symbol）并将它们分类排列，不仅利于我们对以后图标的调用，也方便在最后批量导出切图到对应文件夹中。

10.3.3 图标的命名

涉及到切图的导出，我们也就不得不提图标命名相关的规范了，我之前写过一篇关于命名相关的文章中有比较详细的提到图标命名的方法，大家有空可以扩展阅读：

https://www.zhihu.com/question/20800182/answer/522552729

下面我们简单讲讲图标的命名规则。有很多新手和刚入职场的 UI 设计师会不明就里的强调图标一定要用英文命名，并且各种收集常见的英文命名词汇，我首先要指出这种做法是错误的。

因为涉及到整个应用的图标系统时，会出现大量寓意 “抽象” 的图标，比如在我上方案例中，有一个启动图标的中文名是 “中二”，那么这个词应该如何翻译？即使不受制于英文水平的发挥，但是你写的英文不代表开发人员能看得懂，而大量抽象词汇的堆积最后导致命名无法成为有效的索引条件，因为没人看得懂，开发每次需要查找一个图标的时候依旧是通过缩略图而不是命名。

所以，在内部没有具体的命名规范，亦或是程序员没有特殊要求的情况下，我更建议使用中文命名系统，因为国内多数程序员的习惯会将获取的图标进行二次命名（所以你做的英文命名到头来还是会被改掉），所以不要做无用功，学会 “说人话”。

命名的格式可以分成 3 级，格式大致为：模块_名称_状态@1x，比如下面的案例：

• 设置_钱包_高亮@1x.png

• 动态_评论_默认@1x.png

• 登录_按钮_点击@2x.png

当然，这不是唯一准确的命名方式，我们可以根据实际场景自由调整，但大家要牢记，图标的命名是为了方便我们查找、检索的，而不是使用一堆英文和简写感动自己。

最后，图标 Symbol 的命名，要和图标的命名保持一致，这样才能起到事半功倍的效果。

10.3.4 图标的格式

上一章启动图标的导出格式，会根据不同设备、场景导出不同的尺寸，并且使用 PNG 的格式。不要担心，工具图标虽然也面临设备不同的问题，但不需要导出这么多的规格。下面讲讲两种图标的导出类型。

位图格式

最常用的导出格式就是位图 PNG 格式，因为显示器显示倍率的不同，所以我们要导出 1x、2x、3x 三种倍率规格的图片，即设计了 16pt 的图标的话，我们需要导出 16pt、32pt、48pt 三种尺寸。并在导出的文件名后缀上标有 @1x、@2x、@3x 的标注。

这个规格对于 iOS 还是 Android 都是通用的，虽然还有 3x 以上的设备，但是那些设备只要调用 3x 的规格即可。

虽然后面会提图标可以使用矢量格式导出，但对于使用了渐变、投影或者拟物风格的图标，必须使用位图的格式，否则无法完整记录图形的细节元素。

矢量格式

导出 3 种规格的图标很麻烦，而且位图占用的空间往往较大。所以，iOS 和 Android 为了优化这个问题，在之前的系统更新中都默认支持了矢量格式的切图文件：

• iOS 使用 PDF 的 1x 切图

• Android 使用 SVG 的 1x 切图

当然，如果使用矢量格式导出，那么切记在分类文件夹的时候 ，要将 iOS 和 Android 分开保存，而不是混合在一起。

完成以上步骤，我们就完成了一个项目中所有和图标相关的工作，可以放松一下了…

这里就是本系列图标相关文章的真正结尾了，虽然还有不少干货可以写，但实在是写不动了，真的一滴也没有了…前后耗费的时间加上助手至少超过 100 小时，有大量配图是独立设计的。

相信这已经是全网最完整最详细的图标教学了，希望各位能有所收获，并能掌握入门图标设计的正确姿势。如果喜欢我们的内容的话，请多多分享和点赞对我们进行一些微小的鼓励。

后面，我们还会将本系列文章合成成一篇完整的 PDF 文件提供下载和保存，以及录制对应的系列教学视频，敬请关注"超人的电话亭"获取后续更新以及其它干货。

谢谢各位！

在 UI 的设计体系中，图标是最重要的组成部分之一，是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念，以及正确绘制的方法，是入门 UI 设计的必备条件。

网上现存不少关于图标绘制的文章和教学，但不是太笼统，就是太片面。即使看了很多这种碎片化的知识，也很难在我们的认知中对它有比较全面、系统的认识，所以大多数初级的 UI 设计师，始终画不好图标。

针对这个问题，我希望用一篇长文来讲清楚图标设计的所有要点和具体的设计方法，让所有设计新人更快的上手图标设计。

本文共分为以下5个部分：

1. 图标设计详解：先对图标有个整体的认识，了解图标总共有哪些类型和应用场景。

2. 工具图标设计：最常见的工具型图标的相关规范，以及对应的设计案例演示。

3. 装饰图标设计：近年来使用越来越广泛的视觉型图标设计认识，以及对应的讲解。

4. 启动图标设计：讲解启图标的相关规范，如何高效的进行设计。

5. 图标应用详解：介绍在一个UI项目中，要应用多少种图标规格，并如何设计出正确的图标

图标，是一种图形化的标识，它有广义和狭义两种概念，广义指的是所有现实中有明确指向含义的图形符号，狭义主要指在计算机设备界面中的图形符号，有非常大的覆盖范围。

对于 UI 设计师而言，我们主要针对的就是狭义的概念，它是 UI 界面视觉组成的关键元素之一。

在当下最常见的扁平化设计风格中，界面的实际视觉组成只有 4 种元素，图片、文字、几何图形、图标。

可以说，图片、文字、几何图形的运用，都只用到排版的技巧，而图标，是 UI 设计中除了插画元素以外唯一需要我们 “绘制”、“创作” 的元素，一涉及到这两件事，难度就直线上升了。

本来往界面里丢一些方方圆圆、贴几张图、填一些字，就可以把界面做出来了，比如下图中的 Clear APP，不仅工作量少，而且还符合极简原则，为什么还要吃力不讨好地设计图标？

这就涉及对图标作用的探讨了，为了节约篇幅，更快进入大家最想看的重点干货，我就不长篇大论从上古时期人类与图形符号的纠葛开始写了！就谈对于图形界面本身，为什么图标有这么重要的地位，没它不行。有两个原因，第一就是，文字虽然也是一种图形符号，但相对于图标而言，文字实在太复杂了，在识别效率上有先天的劣势！再者，不同的语言，文字的长度也不同，如果换成阿拉伯语或者俄罗斯语，或许一行还装不下所有文字。图标可以以一种更高效的方式，将我们想要传递的信息进行浓缩，不仅易于识别，也能让界面更简洁，利于排版，比如下方案例。

第二点， 就是关于视觉的观赏性上。有些页面中，如果把图标去掉了，也丝毫不会影响我们的操作效率，以及对内容的理解。但没有图标，缺少这些点缀，我们就会觉得这个页面看起来总感觉太枯燥了，不得劲，最好的例子就是应用的设置页了，见下方案例。

既然知道了图标的作用和重要性，那么接下来，就要进一步了解在工作中我们要设计哪些图标。

可以先划分成三种大类：

    • 工具图标

    • 装饰图标

    • 启动图标

下面，我们将为对它们分别进行介绍，以及展示相关的设计类型，方便读者在开始学习具体设计前，对 UI 设计会创作的图标有更全面的认识。

1.1 工具图标

首先，我们要说的是工具图标。这是我们在日常讨论中提及最频繁的图标类型，即应用内有明确功能、提示含义的标识。作为最常见的图标类型，我们就不需要做太多的说明了。

虽然理解起来容易，但是它所包含的设计样式却并不少，可以把它们归纳成线性、面性两个大类，再分别进行细分。

风格1：线性风格

线性图标，即图形是通过线条的描边轮廓勾勒出来的！多数人对它样式认识的第一反应应该是使用纯色的闭合轮廓，比如上图案例，线性图标的创作空间看似不多，但实际上有非常多的调整空间。

下面我们把它们统一罗列出来。

风格2：面性风格

面性图标，即使用对内容区域进行色彩填充的图标样式。同样，在这类图标中，也不是只能应用纯色的方式进行填充，还有非常多的视觉表现类型。

风格3：混合风格

当然，在设计图标类型的时候，也不一定非线性和面性不可，有一些热衷创造和尝试的设计师，还创作出了混合型的图标，既有线性描边的轮廓，又有色彩填充的区域。常见的样式类型如下。

1.2 装饰图标

和工具图标比起来，装饰图标的视觉性作用更多。对于一些比较复杂的应用来说，过分的简约并不能弥补信息过多的信噪问题，我们要通过丰富视觉体验的方法来增加内容的观赏性，减少一屏内显示内容的数量。

比如在分类列表里，是可以只使用线框和文字把大量内容浓缩到一屏以内，但实际浏览效率并不会增加，而且并不美观。

还有，就是国内的界面设计环境，会根据运营的设计需求进行特殊化处理，尤其在电商领域，首屏的图标都会改成首页风格的样式，增加活动氛围。

装饰性的图标设计，虽然没有明确的规范该怎么做，效果怎么好怎么来，但最常见的类型有四种，下面分别进行介绍。

扁平风格

扁平风格的装饰图标，通常可以理解成是用扁平插画的方式画出来的图标，除了继承扁平的纯色填充特性以外，也相对于普通图标有更丰富的细节与趣味性。

拟物风格

拟物风格的图标现在出现的频率越来越高，集中在大型的运营活动中，通常这些活动会通过拟物的方式将头部设计成有故事性的场景，所以自然顶部的相关图标使用拟物的设计形式会更贴合。

2.5D 风格

2.5D是一种偏卡通、像素画风格的扁平设计类型，在一些非必要的设计环境中，使用 2.5D 会比较容易搭配主流的界面设计风格，有更强的趣味性和层次感。

炫彩渐变

这是一个拗口的原创名词，找不到更合适的，还是觉得浮夸点符合它的气质。这种图标，就是通过一系列非常激进的渐变和撞色实现，通常还会使用彩色的阴影。

使用这样图标的区域，通常都会呈现出一副五彩斑斓的景象，只有在内容非常丰富且用户偏向年轻化的产品中可以使用，是一种非常难驾驭的设计风格。

实物贴图

最后一种，就是采用了真实摄影物体的设计风格。虽然它不属于完全依靠我们创作和绘制出来的，但想想还是放进来合适。因为这种图标的出现频率非常高，有必要再后面掌握它的做法。

1.3 启动图标

最后，就要说说启动图标了！启动图标的设计比前面两种类型的图标说起来更难，因为它实际上就是把 “LOGO嵌套进系统图标模版” 的图标。

除了必要的规范掌握以外，启动图标的主体物设计就是 LOGO 的设计，已经超出了图标绘制本身的知识点。所以，在后面我会针对这个问题讲解一些比较套路易懂的设计方案供新手学习，这里我们先来了解一下它有哪几种设计形式。

文字形式

适用了文字作为图标主体物的类型，通常是这类应用本身的品牌 LOGO 就使用了文字，所以这里就把字体照搬过来。

图标形式

对于一些偏工具，适合用简单图形传达应用功能的启动图标，就会采取使用工具图标的方式设计。

图形形式

图形形式看起来和图标形式很接近，但实际上完全不属于同一类型，之所以它不是图标，是因为这类图标的主体图形是一种经过高度抽象化的标识，传达的是品牌性，而不是图形的含义。

插画形式

对于一些比较纯粹的应用，如读本、漫画、幼儿类应用，就热衷于采用卡通形象作为图标的主体进行设计。

拟物形式

虽然现在扁平化的设计占据主导地位，但依旧有很多应用的启动图标是通过拟物的方式设计的。因为对于这些应用来说，拟物设计所传递的信息往往更直观和准确。

当然，还有其它的数之不尽的启动图标设计方式，比如明星大头照、摄影图、游戏原画等，但理解上面这些类型就够了！

前面介绍的三种图标，就是今后在进入 UI 行业设计的内容。虽然图标看起来简单，但可以玩出的花样不少。除了正确设计出图标以外，高低阶的 UI 设计师之间的区别也包含图标设计类型掌握的多寡。

所以，在开始学习前，不要将设计图标的目标局限在最简单的图形绘制上，还有很多有趣的设计形式等待你们去尝试。

了解了图标的类型，就要开始了解做出这些图标应该使用哪些软件了！通常，UI 主要使用的设计软件包含 PS、AI、Sketch、XD 四款，理论上，它们都包含了图标绘制的功能，如果我直接告诉大家去精通这 4 款软件那么画图标就一点难度都没有了，这是非常不负责任的，所以为了对新人更友好一点（如果已经全部精通了，就直接略过），我会分析一遍这四款软件对于图标设计的优劣，以及需要掌握的部分。

Sketch/XD

这两款软件是我们设计 UI 界面的主力。但大家一定要记得，它们主要的功能是用来完成 UI 界面元素的排版，而不是创作和绘图。

虽然它们都包含路径、钢笔、布尔、等功能（Sketch 相对 XD 更完善一点点），想要绘制一些非常基础的线性或面性图标时没有问题，但只要涉及到比较复杂的图形，往往就束手无策。

所以，我建议所有学习 UI 的新人，都不要从这两个软件中入手，而是先掌握 PS 和 AI，后面想要快速实现一些简单的图标时，自然懂得如何使用 Sketch 和 XD。

可以说，PS 和 AI 的应用决定了我们图标设计的上限，而 Sketch 和 XD 是下限，所以，把上限拓展得越高越好。

Adobe Photoshop

PS 是一款无论什么东西都设计得出来的设计软件，但是，它本质上是一款 “位图软件”。后续的文章中会提及，在界面中采用矢量格式的图标是最理想的，而 PS 针对矢量的操作并不便捷，比如将矢量图层复制到其它软件中。

实际项目中，我们会用 PS 设计一些视觉表现相对复杂的图标，例如启动图标、拟物图标、实物图标等等。

绘制图标需要用到的 PS 功能并不太多，需要在前期学习这个软件的过程中加以筛选，重点是以下知识点：

    • 路径创建和调整

    • 钢笔工具和锚点

    • 路径图层

    • 布尔运算

    • 图层属性

虽然 PS 在实际项目中是用来画复杂的图标，但并不妨碍我们使用 PS 从最基础的图标开始画起，因为想要熟练掌握上方的知识点，简易的工具图标是最好的磨刀石，之后再学习 AI 的操作，就可以更快的上手。

PS：最近在准备一套 PS 教学，就会比较完整的讲解一遍这些功能和对应操作。

Adobe Illustrator

AI 也是 UI 设计必学的一款软件，它的功能异常丰富，主要用来设计矢量图形。对比 PS，它有更好的矢量操作支持，对于路径细节的调整上，是最全面最细腻的软件，并且 AI 中的图形还可以直接复制黏贴到其它应用的画布中。

如果掌握了上方提及的 PS 基础，那么学习 AI 也就轻松了不少，其中，AI 设计图标中有三个特殊的功能是需要重点掌握和学习的：

    • 形状生成器

    • 轮廓化描边

    • 路径查找器

花几个晚上，掌握了 PS 和 AI 的相关知识点以后，就可以为我们后续的学习提供良好的支持！

但是现在还不要迫不及待地打开软件，在实际上手操作绘制图标之前，我想先讲讲规范。

是的，现在还不到实操的时候，规范之于画图标，就好像音标之于学英语，都是基础中的基础，也都是大家最容易忽略的东西。

如果对规范没有一个清晰的认知，那也是无法独立画好一套图标的！希望读者千万不要跳过这部分的讲解直接去看演示了。

3.1 表意的准确性

在第一部分中，我们知道图标的主要作用之一就是作为文字的替代品，具有明确的寓意。比如看见一个放大镜，我们会当成那是搜索，看见钥匙或者锁，我们就会理解成是密码，比如下面这些图标，每一个指代的功能和寓意都是非常直白、清晰的。

表达的寓意清晰，是工具图标最基本的要求，否则它只会传递错误的信息，造成用户的困惑。

在常见的图标类型里，如通知、设置、用户、分享之类的图标，对于任何手机用户来说都没有认知和选择压力。但表意准确麻烦的地方在于，一些非常规的寓意，极难用图标表现出来，这才是我们使用工具图标的首要麻烦。

比如下方这些图标，如果我不加上文字信息，大家能理解它们是什么吗？

https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=12507

那么，我们再把文字信息补充进去，是不是就会觉得图形挺贴合内容的。

在这种案例中，我们要关注的就是，面对这样不常见的内容，设计师是怎么把图形的创意和样式想出来的！如果自己遇到一样的问题怎么办？

所以，除了知道每个工具图标都要表意准确这样 “正确的废话” 以后，我们该看看如何通过合适的创意将图标样式确定出来。

一般抽象的图标，难点在于寓意信息是非实体的，所以我们很难直接构建对图形样式的联想，所以首先我们得想办法将抽象的内容 “实体化”。也就是说，我们可以先把这个词写到纸上，然后把和这个抽象信息相关的所有实体物写下来。

然后，我们可以挑选出某个合适的实物，以它作为原型开始绘制。如果对这些挑选出来的实物要以什么图形表现还是没概念，那就可以借助网上的图标素材网站，比如 iconfont、iconfinder 等，在搜索框中输入这些词语，通过别人的设计收获灵感。

如果本身拥有比较好的手绘基础或是平面基础，也可以直接通过对照片进行提炼的方式，设计出图形内容。

所以，在设计图标时符合表意准确的概念，需要设计师不断收集图形，并提升对词汇联想的能力。很多图标图形优秀的创意，就是在这些基础的积累之上逐渐形成的，而不是一撮而就。

3.2 图标的一致性

第二个规范，叫图标的一致性。即一个或一套图标中，应该保持一致的细节。首先看看下面的反面案例。

在上面的案例中，不同图标间有很大的割裂感，完全不像处于同一套设计体系之下，这就是缺乏一致性的表现。这也是新手在设计一整套图标最大的难点，要让所有图标保持视觉细节上的一致。

下面对工具图标要保持视觉一致性有哪些细节进行详细的说明。

类型一致

前面说过，工具图标有线性的、填充的类型，在正常的情况中，同一套图标应该在类型中保持相同，如果使用了线性图标那么后续就不要设计填充以及混合的类型。

风格一致

每一套图标都有自己的设计风格，不同风格在细节中都有不同的表现，需要让这些风格特征保持高度的统一，看看下面这些案例。

第一，为图标添加缺口的设计风格，我们要保证这个缺口的大小是一致的，并且每一个图标中有且只有一个缺口，而不是靠感觉随意添加。

第二，在设计一套偏圆润可爱的设计风格中，外轮廓使用了较大的圆角，那么我们尽可能保证圆角的大小是一致的，而不是有的用 4pt，有的用 2pt 或者直接使用直角。

第三，采用了填充色偏移的设计风格中，首先要保证填充色的一致，并且偏移的距离和方向也要保持固定的规律，不能随喜好任意制定。

透视一致

透视关系是在平面中对物体空间性质的表现方式，当我们应用了透视时，物体就有了一定的 “立体感”。

透视的表现不是绘制图标时必须使用的风格，但是如果我们在图标中应用了透视，就要确保我们使用的视角是一致的。要极力避免同一套图标中既用了正视图又包含了斜视图。

粗细一致

在图标中我们会应用到矩形线段或是描边，我们要尽可能保证它们的粗细是一致的。

比如，在线性的设计中，路径的描边尺寸要保持一致，不能这个图标用 2pt，那个图标用 1pt。

在填充图标中，我们会在一个矩形或是圆形中增加矩形的镂空，比如下图的几个图标，在这种情况下也要保证它们的粗细是一致的，而不是各不相同。

大小一致

大小一致，就是让图标的视觉大小保持一致，而不是它们字面上的长宽属性保持一致。

因为这是一个比较复杂的知识点，需要我们对几何图形的视觉差有比较完整的认识，我会在下一部分做出介绍。这些和一致性有关的特征，是一套图标看起来专业、有整体感的必要条件。但是，在真实的设计场景中需要灵活变通。

如果有一些特定的图标，在保证了一致性的所有要求后却极难被人理解，且找不到更好的设计方式，就可以差别对待。比如在一套线性的图标中，播放、快进等图标往往都是填充类型的，这并不会造成视觉或是使用上的困扰。

3.3 几何图形的视觉差

几何图形的视觉差，是对于工具图标来说最重要的细节，在上一节图标一致性中已经提及，它也是平面基础理论中不可忽视的内容，这个理论要解决一个核心的问题，即

怎么让不同的图形看上去一样大？

可能有的读者看到这里会轻蔑一笑，这有什么难的，通过软件的参考线或者属性设置，把它们的长宽设置成一样不就完事了，比如下图这样。

嗯，画起来轻轻松松，参数上完美无缺。但等等，怎么看上去这些图形大小有点不一样，为什么正方形看起来这么大，三角形看起来这么小？

恭喜你们，发现了这个问题的根源，不同几何图形带给我们的视觉大小是不同的。而要解决这样的问题，就要对它们的尺寸做出额外的调整，比如下图这样。

适当调整完圆形和三角形以后，是不是觉得大小的感觉一致了？这就要牵扯一个更基础的视觉规律，占据面积越大的图形，给视觉的感受就越大，所以给我们感受越小的元素，就要放的越大。

并且，这个问题在一个图形的内部也会产生影响，比如知乎 APP 下面的点赞、反对按钮，都有三角形图标对吧，但图形其实对于外部举行是非居中的，我们看看下面的演示。

如果一个图形其中一部分面积远大于另一部分，那么就会让这个图形的重心产生偏移，必须要往较小的部分的方向移动才能产生平衡。

所以，在设计一整套的应用中，如果没有对这个理论的理解，只定义一个矩形出来，把所有图形的尺寸于矩形对齐，那么最终看到的图标效果一定是极度不平衡的。

3.4 工具图标的栅格

其实，针对图标的规范，新人第一个想到的应该就是参考线了，也就是所谓的栅格模版。但之所以放第二个，是因为工具图标的栅格规范，是根据几何的视觉差特性衍生出来的，而不像后面会提到的应用图标由官方提供出来。

我们先简单看看，常见的工具图标栅格是什么样的。

里面包含了正方形、长方形、圆形对不对，那我们把它们分别罗列出来看看。是不是就发现这些图形的视觉尺寸是非常接近的？然后再通过这样的尺寸设计对应的图形，也就看起来都一样大。

所以，应用图标的栅格系统对于图标的设计来说，是一个用来应对几何图形视觉差的“参照物”。

之所以要说参照物，原因在于，一套图标，不会只存在这几种图形的样式，还有很多千奇百怪的形状，但大体上我们可以识别出来它的类似轮廓或者重心方向，于是就可以通过参照图形来判断我们设计出来的图形尺寸是否符合标准。

如果设计图形和参照图形的类似，那么尺寸就不能大于参照图形，如果设计图形的宽大于参照图，那么高就要小于参照图，反之亦然。如果图形的重心有偏移，那就要往重心偏移的反方向移动，比如搜索按钮，Wifi 图标等。

最后，说说栅格系统的画法，和大家想象的不一样，想要画一套图标，栅格系统是我们自己画出来的，不是到网上下载下来的，所以怎么画也是这个知识的重点。

如何绘制图标栅格系统

如果我们定义一套 28pt（如果看不懂可以当成 28px） 的图标，那么我们首先要画一个 28pt 的正方形，然后确定一个 2-4pt 的内边距，正所谓四边留一线，日后好相见。

然后就要开始绘制其中正方形和圆形，正方形通常在整个图标尺寸 1/2 的比例，可以使用 14 或 16 的偶数 （为了可以居中）。然后再确定圆形的尺寸，圆肯定比正方形大 2-4 pt，于是就得到下方的图形。

之后，我们再确定横竖长方形的尺寸，可以直接顶到内边距的边缘。它的尺寸不是通过数值计算的，而是要我们先画出来，把它们和前面的圆、正方形置于一条水平线上，调整出一个平衡的视觉尺寸，再和并进栅格系统中，就完成了栅格系统的绘制，如下图的案例。

这一步也旨在检查我们的参考线系统是否在基础结构上经得起考验，是非常关键的一步。因为不同尺寸的图标中，参考线系统都是有区别的，我们不能直接按一个固定的比例来设置，要根据实际场景做判断。

当然，为了进一步方便大家的学习，我特意准备了一套现成的栅格素材，包含 16、24、28、32、36、48 等六个尺寸。大家可以进入我的主页关注公众号并回复 “图标素材” 获取。

3.5 像素对齐

在栅格的绘制中，细心的读者肯定发现了几个关键字，“对齐”、“偶数”，这就是在这一部分要提及的内容。关于显示器的倍率问题是 UI 基础知识点之一，可能有的同学不太了解，不过没关系，直接看下面的内容即可。

我们都知道像素是屏幕显示中的最小单位，一个像素只能显示一种颜色。小时候玩过的 GBA、FC 游戏机，都是通过像素画的形式呈现，人物锯齿是无法避免的。

而随着技术发展，像素密度是降低了，但如果依旧是按过去这种一个萝卜一个坑的方式显示内容，那锯齿感无论如何是无法消除的。于是，开发了次像素渲染（Subpixel Rendering）的技术。一个在显示器中让我们觉得平滑的圆，一直放大，就可以发现它的周边充满了饱和度较低的其它方块色彩。

这项技术，让像素可以用特有的方式来显示非完整的色块，即尽可能还原我们对元素定义的小数点。但为什么我们还要提这个概念呢？

因为工具的图标太小了，而且 UI 的元素对精细和准确度的要求都不低，如果我们没有尽可能满足像素对齐的要求，那么就可能导致元素边缘的模糊。

所以要满足像素对齐的要求，就要符合元素本身的尺寸为整数、描边为整数、XY 轴坐标为整数的特性。

AI 中的像素对齐设置

在 AI 中，我们可以通过两个设定来查看和保证像素对齐，即网格的设置显示，以及对齐到点的设置。

像素的对齐主要表现在横线和竖线上，虽然现在手机显示精度越来越高，但并不意味着我们可以无视像素对齐的规律！在线性图标中，类似对于 1pt 或者 2pt 描边的应用，觉得不是太细就是太粗，可以用 1.5pt 的数值（1.5 pt 在 2x 中就是 3px），但切记不要出现类似 1.23、2.16、3.46 这种小数。

像素对齐是一个专业 UI 设计师对于极致追求的表现之一，是每一个一线大厂 UI 设计师的基本职能，所以，想要冲刺更高的段位，就不要忽视这个规范的使用。

这是图标系列文章的第一篇，信息量不算少！所以我们在结尾再总结一次，方便大家记忆。

    • 知识点1：在 UI 的界面中，图标的主要作用是用来高效的传递信息，以及起到美化界面的作用。

    • 知识点2：UI 会涉及的图标类型主要有三种，工具图标、装饰图标、应用图标。

    • 知识点3：工具图标，是界面中用来传递信息的图形符号，主要包含线性、面性、混合三种设计风格。

    • 知识点4：装饰图标，是界面中用来提升视觉体验的图形，主要包含扁平、拟物、2.5D、炫彩渐变等风格。

    • 知识点5：应用图标，是用来启动应用的图标，主要包含文字、图标、图形、插画、拟物等设计形式。

    • 知识点6：学习绘制图标，优先学习 PS、AI 的路径相关功能，而不是 Sketch 和 XD。

    • 知识点7：图标首先要表意准确，能被用户识别并契合想要表达的寓意。

    • 知识点8：设计整套图标的时候要符合一致性原则，包含类型、风格、粗细、透视、大小等特征。

    • 知识点9：不同的几何图形会打给我们不同的大小视感，不能只看元素的参数。

    • 知识点10：我们根据视觉差的方式定义出栅格系统，作为图标尺寸设定的重要参考。

    • 知识点11：图标的绘制要保证横竖的直线对齐到像素，线性图标尽量采用整数粗细，如果一定要用小数的话就使用 0.5 递进的。

原文链接： https://dmnydn.com/

品牌致力于通过玩具、插画、视觉设计、媒体艺术等多个媒介传递勇气、爱和探索新世界
的冒险精神，带给人们温暖和治愈。

CIQI RABBIT 是一只兔子，手套使它赋有力量穿越到不同空间维度，带着梦想和好奇心体
验不一样的生活，而这些经历成就了它的“奇妙人生”。
希望通过CIQI RABBIT 的奇妙故事，可以给购买玩偶的人们带来鼓励和正能量，通过这些
玩偶的形象，我们想鼓励人们去关心他们自己，从生活中找寻快乐。

喜欢吃高热量的食品 充斥着味蕾 享受着甜味
直到有一天进化成工业食族人

人马族是一个富有勇敢、忠诚为象征的守护者

NONONO，飞在天上的羽族人可是一位严谨、每天认真工作的小精灵

快乐的海星 充满童趣的小海星
最爱大海和小伙伴了

性情温和又有些古怪的斯摩族人
身上穿着毛茸茸的大棉袄似的装扮
在寒冷的冰极有着他们的一片天地

性情火烈的岩石族人是力量型选手
可千万不要惹它哦小心它变强壮

人族的起源好似一个文化奇迹
来到这个空间的次奇化身成女孩

其实，它并不神秘它像极了生活应有的样子
生活是什么样的？

一、因为平时工作海报设计比较少，不同类型的、不同行业的涉及的也都很少，不能全面发展和接触，也很少尝试设计;

二、因为可以提升自己的设计能力呀，这一点当然是毋庸置疑的，只要多看、多练、多想、那么结果一定不会太差

不过都是自己休息时间做做，挤出来的时间哦！

ok,接下来给大家讲讲做海报设计注意事项吧！

没办法，我就是这么善良，恨不得把知道的都告诉你们呀！

首先需要知道的是不同主题的海报设计需要渲染的气氛是不一样的，中心思想也是不一样的，海报设计版式是体现海报的形象和美观，版式设计既需要美观又需要井井有条，需要有自己的特色，才能吸引用户在你设计的海报上面停留目光，

一张成功的海报设计离不开海报版面的机构编排和设计，海报的版面设计需要注意以下几点：

一、海报版面设计——简化字体

目前版面设计趋势流行为大标题，小文章，大图片，轮廓分明(块面结构)的阳刚直率之美，行文上很少拐弯，不化整为零，字体较少变化，线条又粗又黑。

二、海报版面设计——板块化

相同层级的信息划在相同板块，板块与板块之间留白需要适当，不。然就会给人一种层次不分明的感觉，看不到重点，找不到目标。

三、海报版面设计——“货架式陈列”

分门别类地“陈列”海报信息，也会减少流览的时间，尽可能快地从版面上得到自己所需要的信息。

说到这里，我分享一下我个人设计海报一般的步骤吧：

1.明确需求

不管做什么，动手之前我们都要明白一件事情，那就是做什么？目的是什么？我们在做事情的时候只要明白这两点，朝着这个方向做一般就不会偏移主题，不至于一次又一次的改稿，

比如：

假如甲方让你设计一张海报，海报是针对新产品水杯优惠活动，某某时间段可享受优惠，就给到这点信息，我们就要明白，这次海报的是做什么，

第一点：要明白是新产品，肯定是要宣传新产品

第二点：要知道有优惠，肯定要放大优惠，吸引用户

第三点：目的—目的就是宣传新产品，吸引用户购买欲望

2.明确主题风格

这里我们知道了做什么和目的，接下来就要明确设计的主题风格方向啊，既然要达到宣传新产品又要达到有优惠的活动的效果，那么我们也不能喧宾夺主，不能只看重一方面，新产品的特点既要放大，优惠的活动起到吸引用户的作用也不能减弱

3.找素材，做设计

明确风格后我们要找合适的素材，不能随机找一张产品图片应付啊，产品图片肯定得表现新产品的特点，至少不能缺角模糊吧，所以选素材也是很讲究的，素材确定好后，开始动手做设计，做海报无非就是排版，怎么好看怎么排啊，但是还得注意主题明确，呼吸感要强，层次分明。

下面是我设计的一些海报：

一：母亲节海报

首先配色上我选择了和图片接近的色彩，但是又没有图片色彩那么单，因为是母亲节，而且是做的一个母亲节活动的海报，我第一时间想到的是要温馨而且要有活动的感觉，所以选择温馨典雅紫和暗淡柔和红，

字体排版我选择竖排和横排两种方式，英文字体排版直接显示主题占据位置适中，主题背景色和内容背景色有明显的区分，层次分明，一目了然，内容活动文字放大处理，叙述文字只做简单排版使用，使画面更丰富，且不凌乱

图片的选择，因为是母亲节活动主题海报，所以我选择了母亲和孩子在依偎在一起的画面，温馨且画面唯美。

这种排版方式是我很喜欢的一种排版，如果把文字换成英文会不会有一种国际海报的feel呢！哈哈哈，不过可以试试哦，感觉还不错呢~~~

二：化妆品海报

这张海报我也是超级喜欢的一张，哈哈哈~~~

主题是化妆品活动海报，明确主题，用户对象和想要表达的氛围，

化妆品大多数是女性用户，当然也不排除部分男性

不过我做的是主要针对女性用户美眉的啦！一个手持化妆品的插画唯美女孩的形象，让人一看就喜欢呢，有木有，嘻嘻~~~，对于女性来说，基本都不会排斥这种唯美的少女般画面吧，反正我是控制不住我自己呀！会忍不住多看两眼美美的少女，也许是作为丑女爱美的的本能吧，

好吧，让我缓一缓、、、、、、继续

采用圆润长条状的标题文字，个人亲和温柔易接近的感觉，画报活动内容明显，金额加粗处理，一目了然，活动时间也是活动的主要信息，采用背景颜色处理，醒目且起到提示的作用，剩下的就是活动主办方的信息，这些也都是用户所需要知道的信息，不可忽视。

背景采用卡片式本本的样式，让画面显得不会死板，且有层次感，底部背景采用温馨的紫色，添加笔刷黑板的效果，给人一种梦幻少女般的气息，和前面的女孩相呼应，一些花和叶子做点缀，让整个画面显得更加丰富，且有春天般少女美好的时光的feel

三：音乐节海报

音乐可以是舒适、温柔、悦耳的，也可以是劲爆、活力、欢乐的，这里是需要的音乐节，当然需要的氛围是活力奔放的，给人一种看到画面就知道场景的样子，就有种跳跃尖叫的感觉，

所以画面整体我选择渐变橙，活力的象征，背景采用圆形图形叠加增添活力的氛围，字体奔放，人物听音乐享受的画面，以及元素的点缀都采用渐变活力，嘻嘻，整体有没有一种身处音乐现场的感觉呢~~~

四：世界读书日海报

这张海报用时间最短，不过效果也还不错，读书是知识的海洋，所以我选择深蓝色，排版剧中对其，插画也和读书主题完全融合，这个应该不需要做太多的描述，中间云朵的形式主要起到层次分明的效果。

主题文字“世界读书日”我选择棱角分明貌似和书本一样的样式，且有字形变化处理。整体居中对齐

好啦，今天先到这里啦，几张海报介绍希望可以学习分析设计思路，个人愚见，只是自己做海报的思路！！！！

最近项目大量用到字体图标，大家也知道，字体图标任意缩放不会失真，也大大减少请求数量，非常好用。以下将讲解本人如何根据美工提供的.svg文件生成字体图标并应用。

借助一个在线生成工具：https://icomoon.io/app/#/select

1、进入网址：主页面

2、新建一个图集

3、添加.svg图片（可以使用现成的，也可以使用自定义的）

使用现成的点击页面红色的Add Icons...

使用自定义的直接拖拽进图集即可添加

4、生成字体文件

（1）选择好要生成的图标（自由选择）

（2）点击底部的："Generate Font F"

可以自由命名

5、修改完成后，点击生成Font

下载到压缩文件：

运用：将fonts文件夹全部内容和style.css文件放到相应的项目中。

根据css文件下面生成的class类的名称添加到html对应的节点上即可添加字体。

当然添加字体还需要设置font-size，也可以根据实际情况设置color改变其颜色。

原文链接：http://blog.csdn.net/u013938465/article/details/50680468

相应实例下载地址：http://download.csdn.net/detail/u013938465/9434357

前面啰嗦了那么多，到这篇开始就要进入到大家最喜欢的操作演示环节了！这一部分演示的是线性风格的设计，包含 8 个图标的绘制，如下图所示。

线性图标是所有图标中最基础的设计形式，也是最入门和最简单的。在我们设计后续的其它风格图标前，首先要通过线性图标的练习来打下坚实的基础！

什么是图标的基础呢，有两个方面：

    • 制图的规范性

    • 图形的合理应用

只要图形的设计上能达到这两个要求，才能在进一步的创作中施展拳脚。并且，我们的案例演示，也会在每种类型的设计中，通过最基础的风格演示，一层层递进演示其它设计风格的设计过程，充分展示任何设计风格与基础之间的关系。

通过上一篇文章我们知道，线性图标的设计首先要确定图标的尺寸、描边的粗细、还有绘制图标的栅格系统，所以我们先确定图标的规格为 28pt * 28pt，使用 2pt 的内描边 (pt 可以等同 于 Ai 中的 px)，然后再画出栅格，并进行编组。

5.1 线性图标设计演示

5.1.1 搜索图标

搜索图标是 APP 中最常见的图标，绘制原理也很简单，就是一个圆和圆角矩形的结合。

步骤1：在案例中，设计的风格主要是偏圆润一点的，那么镜片的比例就要较大。我们使用了尺寸为 20pt 的圆，和一个宽 2pt 高 9pt 的圆角矩形。

步骤2：将矩形和圆形进行连接并垂直方向居中、编组，然后旋转 45 度。之所以要先垂直再旋转，是因为直接画出一条倾斜的矩形再去连接镜片，那么矩形的中轴将很难移动到和圆心相交的位置（简单理解就是和下面对齐后的效果一致的状态，你们可以自己试试看）。

步骤3：调整搜索图标在模版中的位置，因为几何视觉差的关系，要让图标重心平稳，那么就要向右下角偏移，最终效果见下图。

5.1.2 聊天图标

聊天图标的设计和搜索图标一样，需要通过几何图形的组合完成，但不同于搜索的是，该图标需要应用到路径查找器面板的相关功能。

步骤1：首先要画出聊天的气泡外轮廓，我们可以看出它是由一个圆角矩形和三角形组成，所以第一步要做的就是画出这两个元素。

步骤2：将它们连接并垂直方向居中，然后使用路径查找器面板的 “联集” 选项，将它们合并成一个图形。

步骤3：在轮廓内部画一长一短两条 2pt 宽的矩形。

步骤4：调整图标在模版中的位置，根据视觉差要将图标向下偏移，最终效果见下图。

5.1.3 查看图标

查看图标的设计也需要应用路径查找器的功能，实现过程也非常简单。

步骤1：画两个 2pt 描边垂直方向对齐并相交的圆，并使用路径查找器中的 “交集” 功能获取它们相交的部分。

步骤2：将这个图形置入到模版中，然后可以通过拖动图形大小的方式，更改它的的左右两边，到像素对齐的位置（这个形状的比例发生变化是没问题的）。

步骤3：在中央位置添加一个 8pt 大小的圆，就完成了最终的效果。

5.1.4 心形图标

心形图标如何绘制，对于新人来说是一个非常常见的问题。很多人都不知道具体该怎么画出这个图形，而心形图标又几乎被使用在所有应用中，所以我们就要巧妙运用用几何图形的组合。

步骤1：画两个矩形，一个竖直一个水平放置，并将上方和右侧的两个边缘进行圆角处理。

步骤2：将两个图形进行移动相交，并保证上方和右侧的两个半圆正好紧贴在另一个矩形的边缘，然后使用路径查找器中的 “联集” 功能，就可以得到一个躺着的心形。

步骤3：将心形进行旋转，并置入到模版中，添加圆角细节，略微向下偏移，就可以得到下图的最终效果。

5.1.5 卡券图标

卡券图标有一个外轮廓和内部的虚线部分，外轮廓在上下有两个半圆的凹槽，要通过两个圆进行裁切。

步骤1：画一个 28pt * 24pt 的圆角矩形，并在上下方各画一个 4pt 大小的圆，与矩形的边缘相交。

步骤2：确认两个小圆图层顺序在矩形的上方，然后选中三个图层，使用路径查找器中的 “减去顶层” 操作即可得到外轮廓。

步骤3：最后，就是画出卡片中的两条 “虚线”，再置入到模版中，就可以得到下图的最终效果。

5.1.6 房屋图标

从房屋图标的形状中，我们可以看出它包含了三角、圆和矩形这三个形状，主要的难点就是如何通过三角形和矩形画出外部的轮廓。

步骤1：首先画出一个 28pt10pt 的等腰三角形，再画一个 22pt16pt 的矩形，将它们边缘进行重叠。

步骤2：设置三角形三个尖角的圆角依次为 3pt、1pt、1pt (上、左、右)，再为矩形下半部分的两个直角添加 4pt 圆角。

步骤3：执行 “联集” 操作，生成完整的外轮廓。之所以先做圆角再执行联集，是因为提前合并两个形状，会导致一些尖角无法使用圆角工具。

步骤4：画出房屋中间的圆形，然后将图形置入模版中，就可以得到下图的最终效果。

5.1.7 齿轮图标

齿轮在 UI 中一般作为设置的图标使用，也是常用图标中最难画的图标之一。

步骤1：画一个 28pt 的大圆，然后再画 1 个 8pt 的小圆，置于圆的左侧。然后使用 “旋转工具”，将小圆旋转中心固定到大圆的圆心中，按回车键，在弹出的对话框中选择 60° 然后点击「复制」按钮，生成第二个圆。之后再按 Ctrl / Command+D 重复操作 4 次，就可以得到完整的圆环。

步骤2：保证周围的 6 个圆在大圆的上层 (一般来说，新画的六个小圆必然在大圆上层) ，并将 7 个圆全部选中，执行“减去顶层”操作。

步骤3：最后，将所有内圆角改为 2pt，再画一个直径 8pt 的内圆，然后在模版中调整到正确的位置即可，就可以得到下图的最终效果。

5.1.8 文件图标

文件图标也是一个很简单，但是大多数人就是做不好的图标，右下角的折角难倒了很多新手，在这里我们用一个简单的方法进行实现。

步骤1：先画一个 20pt*23pt 的圆角矩形（高不是偶数，后面会解释），然后要先把右下角的缺口做出来。这里如果要使用减去顶层的方法做也可以，但我们要用一个更简单的操作，在右下角顶点上方和左侧 6pt 的位置各添加一个锚点，然后使用 “删除锚点工具” 删除右下角顶点的锚点，就可以得到一个倾斜的切口。

步骤2：在右下角画一个圆角为 4pt 的矩形，然后将其中一个边与上个步骤的缺口相交，相交的部分即为折角的部分。这时候选中两个矩形，使用 “形状生成器工具” （快捷键 Shift+M），点击一下图示的部分，就会生成一个新的形状组，接着取消它们的编组，再选中多余的图形进行删除，就可以得到一个完整的折角效果。

步骤3：最后，设置大圆角 (4pt) 和小圆角 (2pt)，并在内部添加 3 条圆角矩形，再根据几何的视觉差将图标置入模版中向下移动一个像素，就可以得到下图的最终效果。

5.2 线性图标操作总结

作为图文教程，没办法精细还原每一步操作，即使我们对第一部分的图标设计理论已经有了深刻的认识，但在实际操作阶段还是有很多小细节会阻挠我们设计的进度。下面，我们会列举一些具体的问题，帮助大家更好的认识和解决操作过程的难题。

5.2.1 栅格的使用

就是针对栅格的使用了，为了便于演示，我都给出了具体的数值，在最后一步才置入到模版中。实际上，我们应该在一开始的绘制中就在模版中进行，而往往刚开始画的图形尺寸是不能代表最终效果的。

比如最后一个文件图标中，为什么是 23pt，并且偏下 1pt。是因为一开始创建 24pt 高的矩形，在完成最终效果以后会发现重心上移，而且整体偏大了 (下图第一行) ，这时候缩减高度才能保证视觉的稳定性 (下图第二行) 。而房屋屋顶的三角形，我们使用的是 28pt 撑满画布，这也是经过了不断地尝试了，测试了多种宽度和圆角效果后才确定出来的，并不是一蹴而就的。

5.2.2 图形的调整

图形不同角度、尺寸、比例，都会影响图标最后呈现的效果，需要我们在制作的过程保持对图形优化的态度，通过持续调整和比对找到最合适的结果。

就像搜索图标，重点就在于圆和矩形的比例，不同比例会带给我们截然不同的感受。

以及在查看图标中，圆形相切的比例不同，也决定了最终呈现出来效果的差异， 相交越少那么感觉越尖锐，相交越多则越圆润。

5.2.3 多种操作方法

实现同一个效果，可以有非常多的操作方法，殊途同归！虽然软件只是实现设计的工具，但对工具的理解越全面越好，很多时候我们都可以尝试使用不同的方法来实现相同的效果，而不用太拘泥于一种固定的套路。

比如在房子图标的绘制中，我们用的是三角形和矩形合并的形式制做的外轮廓，但因为网格的存在，还可以直接通过钢笔工具绘制，自由度更高，但对图形把控能力的要求也更高。

再比如文件图标的步骤 2 中，用的是 “形状生成器工具” ，但如果将两个图形轮廓化，再使用路径查找器中的 “分割”，也能够达到相同的效果。

这部分教学的目的不是为了让大家跟着我的步骤画一遍凑一个小作业出来，而是要从更多的纬度去思考设计过程中操作的细节。因为它们看起来实在是太容易了，从而使新人缺乏敬畏，直接跳过这个阶段，开始设计一些更复杂、花哨的图标，比如下图案例，这种做法对图标水平的提升没有任何作用。

新手想要开启图标的练习，就要从这些最基础的线性图标入手，不断练习和思考如何通过正确、规范的操作制做图标。如果实在不知道要画什么，通过临摹微信、QQ 等成熟应用的工具图标即可。

基础线性图标的演示部分就到这里结束了，软件基础比较弱的同学，可以看我后面补录的演示视频，会对常见的疑难杂症做比较全面的分析。

在上一节中，我们讲解了线性图标的绘制方法，在本节，我们就可以从它的基础中延伸出其它线性风格的设计过程。包含：

    • 多种粗细风格

    • 描边缺口风格

    • 多色描边风格

    • 渐变描边风格

    • 描边叠加风格

6.1 多种粗细风格

通常多种粗细风格的线性图标，会在图形内部选择某条线段，修改它们的描边值。例如在之前的演示中，我们使用了 2pt 粗细的描边，那么通过将图形内部的线段修改成 1pt 的描边，就能制造这种效果。

然而在这种风格中，如果图形只通过外轮廓展现，就无法融入这个风格的特征，比如点赞的心形图标、搜索图标等。所以设计图形时就得保证它们的内部有线条元素。常见的做法就是在原图标的基础上，进行一些 “复杂化” 的处理，为它们增加内部的线条样式，比如下面的案例。

有时候为了强化线条间的对比，会降低内部线条的透明度或饱和度，来增加视觉观赏性，比如我们将案例中的图标进行对应调整，那么最后的效果如下。

6.2 描边缺口风格

先给初学者浇盆冷水了，这种风格看起来简单，实际在细节处理上有很多麻烦，有哪些问题呢，我们来看看实际的操作和解决方案。

首先我们要做的是搜索图标的缺口，通常开口是在原型的镜片边框上。那么，就可以先画一个矩形，并将它进行旋转，用来确定我们要裁切的区域。多数新手会以为只要用这个矩形，和底部的圆进行减去顶部图形操作就可以得到目标图形，这个想法是没考虑周到的。

布尔运算不会改变图形本身的闭合状态，即使裁切了，缺口的部分也会被连接起来了。所以，要实现真的缺口，就得换种做法。

6.2.1 方法1

第一种，是使用路径锚点删除的方法。即使用添加锚点工具在两个图形交汇点上打点，然后再在中间随意添加一个锚点，再删除它，就可以获得缺口的效果。

这时候，只要在描边设置中，将边缘设置成圆角，就可以获得圆润的切口边缘。

但是咦？好像不对劲。

是的，问题就出在描边上面。圆形本身作为一个闭合路径，删去锚点后变成了非闭合路径，那么无论原本使用外描边或者内描边，都会转化为居中描边。

在工具图标设计演示中，我们应该知道，使用内描边是最容易控制图形实际大小，以及符合像素对齐规范的，但在这类风格的使用上我们要尽可能在一开始设计时就使用居中描边。而居中描边的使用需要在画布中开启 ”对齐到像素“ 的选项，并关闭另外两项，才能保证操作的规范性。

通过文章的形式这个问题很难描述清楚，大家可以自己动手尝试一遍，或者在之后的视频分享中查看具体的操作演示。

6.2.2 方法2

应用方法 1，理论上可以解决大多数问题了，但还有一些说不清道不明的原因，会导致演示 1 中的方法失效！所以，在第 2 个演示中，我们来应用另一种方案。

这种方案要重点使用的功能是 “轮廓化描边”，也就是一个将所有路径格式转化成完整的比例路径图形的操作。它具体的操作方式是，选中任何矢量图形，然后点击工具栏的 ”对象“ —— ”路径“ —— ”轮廓化描边“。

通过这个方法，就可以将描边的图形转化成一个完整的矢量图形，而原本路径的描边就失效了，变成了路径填充色。

当这个图形变成了一个完整的闭合路径以后，我们就可以用大家心心念的布尔进行裁切了！

到这一步，操作看起来都很简单，一片和谐，但不和谐的地方，就在切口边缘的调整上。如果设计的风格使用尖角，那么不用做什么处理，如果使用圆角，那么这个半圆就非常棘手。

通常，要制造这个圆角，需要我们画一个直径和描边相等的圆，然后关闭所有对齐的选项，再将圆移动到这个边缘中，使它可以和边缘的两侧对齐。

这一步操作是依靠目测完成的，不够严谨，虽然可以通过一些特殊的几何辅助线手段来得到这个圆具体的坐标位置，但往往操作起来太复杂没有可行性。

并且，路径查找器会破坏原本路径的特征，将描边的状态变成了填充状态，会增加我们对整个图形细节调整的成本。所以，尽可能不要这种方案。

有了这两种方法，就不把其它图标再操作一遍了，大家可以自己尝试着动手做做看！

6.3 多色描边风格

多色描边的风格，设计起来非常简单，就是更改图标其中一个线段的色彩。和粗细不同的风格一样，如果图标图形没有比较合适的线段来添加一个新的颜色，那么也可以对其进行 “复杂化” 的处理，多增加一些线段出来。

如果想有一些更有趣的表现，也可以将图标强行拆分成若干线段，然后再替换其中一条的颜色。比如在优惠券图标中，我们可以将虚线左侧的描边修改成其它颜色，而不是调整虚线的色值。

6.4 渐变描边

渐变描边其实就是为描边填充渐变色，这也就需要我们提前先将图标的图形进行轮廓化描边，然后将所有线段进行 “联集”，然后才能统一进行渐变色的处理。

在渐变描边中，要遵守一个规则就是我们要保证渐变的方向和强弱关系是一致的。比如我们使用 45° 倾斜的渐变角度，并且左上颜色较深，那么所有图标就都应该遵守这个规律。

只要在做出第一个图标的渐变以后，通过吸管工具吸取渐变，就可以轻松完成渐变的复制。在这个规则下，既可以使用相同的渐变色，也可以使用不同的渐变色。

6.5 描边叠加风格

最后，我们来讲讲描边叠加的设计风格。在图例中应该发现了，我们将圆角改成了直角，之所以有这样的调整，是因为直角在相交的过程能比较好的进行拼合，更适叠加风格的设计。

在设计这类风格的过程中，主要的难点在于拼接的方式，因为有的图形看起来是一体成型的，需要我们额外为它创造出拼合结构。比如心形图标，在制作过程中就可以通过路径查找器的相关功能将它拆分成两个部分。

在完成了图形的编辑以后，下一步才是填充色彩，在这种风格中可以使用渐变也可以使用纯色，但是我们要为不同的图层添加透明度，才能制造出叠加的效果。如果是在 PS 或是 Sketch 中，除了使用普通透明度的方式，还可以通过调整 “图层混合模式” 来呈现出更好的叠加效果

最后，要注意的是，如果使用了图层混合模式，那么要把这个图形导出成 PNG 以后再在实际的项目中使用最佳，否则图标应用背景不是白色的情况下可能效果与预期不符。

从这些案例演示中，可以看见只要设计出了基本的线性图形，那么在进一步切换风格的时候是非常容易的。有了这些风格的设计经验，在真实的设计中就不会只禁锢在最基本的基础线性图标设计，可以尝试给它们增加新的视觉样式，丰富界面的视觉体验。

前面用了比较长的篇幅讲了线性风格的图标要如何设计，再讲解面性风格的图标时，就不用这么长篇大论了。只要熟悉了线性图标的绘制方式，那么面性图标的操作就没有难点，并且面性风格的实际操作难度比线性图标更低，所以我们用一小节来讲完面性图标的设计。

面性图标在操作中和线性图标的最大差别就在于描边和填充模式，我们知道为了满足像素对齐的要求，线性描边会在操作中产生很多不可控的因素，要用很多额外的操作步骤去弥补。在面形图标中，就不需要使用描边，并且应用相同的图标模版即可。

7.1 基本的面性风格

如图所示，我们采用线性图标中使用的样式，设计成面性效果。具体的操作步骤就不需要再完整演示一次了，只需要将所有线性风格演示中的描边替换成填充，再使用对应的路径查找器功能即可。

需要注意的是，有很多 1pt 宽的直线，可能我们会习惯于使用线条工具绘制，这是错误的做法，我们需要使用矩形工具画出一个完整的闭合图形，再样在使用路径查找器工具或者对图形进行批量操作时才能保证统一。

还有，面性图标不代表完全不能出现 “线性” 元素，在一些特定的情况下，我们依旧要通过线条的形式展示图形轮廓，比如搜索图标的镜片，使用全填充的样式显然效果不理想，所以镂空镜片区域是不可避免的。

虽然我们不可避免要使用 “线性” 的元素，但在面性风格中，这些图形的描边元素不能太细，应该使用不小于 4pt 以上的宽度 (在我们这次的网格中) 。并且，为了保证图标的一致性，整套图标的线条都要尽可能使用相同的粗细，而不是这里使用了 4pt，在别的图标中就是 6pt。

7.2 扁平插画风格

扁平插画风格实际上是一个自由度非常高的图标风格，可以设计出很多有趣又极具创意的插画式图标。在本案例中，我们只讲解其中一种最基础的设计方式，便于新人入门。

最基础的扁平插画，就是在面性图标的基础上，将图形拆分成不同面的组合，然后分别为这些面填充纯色即可。比如心型图标，看起来像是只有一个面的图形，但我们可以人为居中将它分割成两个面，然后填充色系相同明度不同的色彩，就可以得到一个扁平插画风格的图标。

类似搜索或消息图标这样有镂空区域的图标，那么我们就可以为镂空区域填充不同的色彩，作为独立的面呈现，也能获得相同的风格效果。

最后一种，就是将图标 “拟真” 化，比如眼睛图标，我们可以用接近真实眼睛的样式来创作，为它增加瞳孔、高光等细节样式，只要依旧使用纯色填充，且将细节数量保持在合理的范围内，就不会与其它图标产生冲突。

7.3 彩色渐变风格

在面性图标的彩色渐变中，也有多种更细致的设计类型，比如整个图标采用一段渐变，或者图标中不同的面采取不同的渐变方式。

采用整个图标使用同一渐变色的做法，和线性的渐变方法几乎一样，只要在开始填充渐变前将所有图层进行合并即可。我们来讲解一个比较特殊的基础渐变风格——不同透明度渐变。

比如心形图标，我们把它划分成了两个不同的面的组合，然后都使用了红色的渐变色，一强一弱。通常，我们只要先设定出较强的渐变，然后再复用这个渐变色到另一个面中，然后降低它的透明度即可。

在使用了透明度的图形中，要注意的是为了在实际使用中不让图形背面的元素影响到图标色彩本身，我们要将这些图形复制一层填充成白色并置于底部，才能保证正常的使用。

7.4 透明叠加风格

最后，就是这类透明叠加的设计风格了。和线性图标中的叠加设计方式一样，我们需要将图形拆分成若干面，才能创造出重叠的区域。

在这个方案中，尽可能使用纯色，会比使用渐变的效果更好，原因在于我们对重叠区域色彩的控制上。可能很多同学看到这个风格，会以为叠加的区域只要使用透明度就可以了，但这种效果通常很不理想，尤其在撞色的配色上，相交部分的色彩就会有 ”朦胧“ 感，缺少通透的舒适性，并且图形本身的饱和度也会受到影响，比如下面的演示。

通常，相交区域的色彩要另外配置。也就是在绘制好了图形的所有轮廓以后，将它们一起选中，然后使用 ”图像生成工具“，再为相交的区域独立选择配色。下图就是独立挑选的两个配色和透明度的方式对比。

面性风格的设计到这里就讲解完毕了，相对于线性设计来说，面性工具图标的设计就简单得多，虽然设计风格有非常多的延展性和可能性，但大家始终要记得它们依旧是 ”工具图标“，识别性是优先于视觉风格的，所以切勿过度强调视觉性而将它们做成了装饰性图标。

～五一小长假最后一天～

是不是已经拍摄了大量的好照片

泼辣修图继续为大家提供摄影超赞秘籍

同时请大家投稿泼辣有图

下期TOP10作品将颁发丰厚奖品

活动规则：请挑选出你认为优秀的五一旅行照片提交至泼辣有图网站（点击阅读原文），题裁不限，拍摄设备不限，最终经泼辣有图评委投票选出TOP20作品，再经公众号公示投标选出TOP10作品。

活动时间：即日起至下周二（5月7日）为投稿期，5月11日公布TOP20作品并开始微信投票。

抽奖时间：5月13日公布最终TOP10结果

活动奖品：除了泼辣熊和会员，我们还将提供北京大学出版社精品摄影图书作为奖品，在此向北大出版社表示感谢！TOP10作品将获得以下奖品（根据名次依次挑选）：

全球限量泼辣熊玩偶

泼辣修图1年订阅会员

《手机摄影：从小白到大师》

《人间时节: 跟镜头走进中国24节气》

《成为摄影高手》

《从全世界路过：旅行摄影完全攻略》

《摄影美学1+2》 

《手机摄影手册1+2+3》

高原：全球限量泼辣熊玩偶

 生如夏花：泼辣修图1年订阅会员

 Bruce成：《手机摄影：从小白到大师》 

领路教育-潘老师Peter：《成为摄影高手》

Semine´･ᴗ･：《旅行摄影完全攻略》

 心在远方jk：《人间时节》

无所求必满载而归：《摄影美学1》 

 阿朱：《摄影美学2》 

麦穗：《手机摄影手册1+2+3》

这一个方法适用于画面构成比较简单的场景，例如下面这一张照片：

提高对比度让画面更加通透：

然后提高色温值到+100，提高色温可以让画面偏向于暖色；降低色温可以让画面偏向于冷色，我们这里希望得到更加温暖的场景，因此需要提高色温值：

经过这样简单两步的调整，我们就将一张冷色调的照片渲染成了暖色调风格。

刚才我们讲的方法一适用于简单的场景，但是在有些场景中，因为前期拍摄或者环境色彩的影响，画面色彩是存在偏向性的，而我们首先要做的就是纠正这种偏向性。例如在下面这张照片中：

这一张照片是一张的色彩偏向于洋红色，因此我们可以通过降低色调值为画面加入绿色实现色彩的平衡，让画面呈现出更加中性的色彩：

可以看到，这时候画面中的洋红色就得到了明显的抑制。同理，如果画面偏向于绿色，我们可以通过提高色调值为画面加入洋红色来实现色彩平衡。接下来我们的操作就和前面一样了，提高色温值为画面加入暖色调：

提高对比度让画面更加通透：

经过这样的调整，这个场景我们就渲染完成啦！

这一种方法适用于一些画面构成更加复杂的场景，例如在下面这张照片中，既存在水面，又存在天空，它们二者的亮度差异比较大，因此我们要分别调整。

首先我们进入全局调整的光效菜单，将去雾值提高到最大，这一步的操作可以让天空的形态更加明显：

然后我们进入局部调整工具：

新建一个渐变调整，勾选反转，这样它影响的区域就是水面；提高曝光，这样可以让水面更加明亮，从而显示更加丰富的细节：

然后我们再提高色温值，为水面加入一些暖色调：

最后我们再进入全局调整，提高整体的色温值：

经过这样的调整，我们的效果就完成啦！有没有get到这三个方法呢？