【Icon】设计大法

作者: 一个三有青年 | 来源:发表于2019-08-19 09:34 被阅读0次

图标是设计中最基础的元素,就和写作文一样,我们必须先背诵大量的文字,因此图标是考验一个设计师最基础的点,虽然现在各种开源文件很多,很多时候都可以直接下载一些图标改改,作为一名设计师,绘制图标是一个必不可缺的技能,今天给大家带来一篇绘制基本图标的个人技巧,希望能设计师朋友有所帮助。

▲ 首先,我们需要明白,复杂的图形,都是由一些简单的图形进行组装的,比如以上图标。

因此我们需要做的,就是将现有的形状进行相应的组合以及排列,然后调整形状曲线,在这里我推荐使用Al工具,因为Al绘制图标圆角以及在形状切割这块有着较大的优势,再者可以很好的对图标进行调节统一。

制作步骤

打开Al,按Command+K调出首选项,选择单位,将所有属性调整为像素。

▲ 然后,为了保证图标在移动端的适配性,所以我们尽量的将图标大小设置为4的倍数,这样图标能更好的适配不同的分辨率,更容易贴合像素点。因此在网格选项中,需要把网格线间隔跟次分割线设置为8。

▲ 按快捷键Command+”键调出网格系统,并点击勾选AI窗口右上角的对齐到像素网格按钮。

▲ 双击矩形工具,画出一个56x56px的图形,为了保证图标大小的一致性,需要设定一些辅助尺寸,来保证视觉大小的统一性

▲ 将所有图形居中对齐打组,并使用描边1px显示,调节相应的透明度,Get一个辅助图形框。

▲ 复制出多个图形框,对齐网格线后,可以适当把不透明度调低一点,然后按Command+2锁定住图形框,另外描边粗度选择4px。

▲ 然后我们就可以使用路径工具,进行对图标的绘制啦,我们先来一个比较简单的「赞」吧。先用基本的工具,将赞的形状绘制出来。

▲ 使用AI的直接选择工具对圆角进行统一,最好将所有的圆角弧度都设置统一, 这里我设置的是6px,也可根据爱好实际调整。

▲ 然后将图标使用形状选择器( Command+shift+F9)将形状合并一下, 为了让图标更有趣,我们可以在较小面积的区域上,使用别的颜色,来提升差异化。

▲ 然后再使用钢笔工具以及路径工具画出其它的形状的初稿。

▲ 再将所有的图标圆角调整到统一的6px, 并对图标大小的比例进行微调,直到合适为止,这个过程需要一定的经验积累,所以可以不用着急,慢慢来,是个循序渐进的过程。

▲ 再对颜色进行调整,调整最终效果。

Wang/原文链接

相关文章

  • 【Icon】设计大法

    图标是设计中最基础的元素,就和写作文一样,我们必须先背诵大量的文字,因此图标是考验一个设计师最基础的点,虽然现在各...

  • 【Icon】设计大法-2

    填充图标设计大法,码了…… 填充图标的运用场景 填充图标在APP界面中较为常见,一般作为很多功能分类,或者是功能入...

  • 素材网站

    图标设计 图标学习方法 绘制功能性图标 系统学习功能图标 icon尺寸 icon规范 icon画法 金刚区设计规范...

  • ui复习总结-icon设计及banner图设计思路归纳

    (1)icon设计及绘制注意要点:①icon设计的产品背景→目标人群(目标对象,产品差异化)→设计思路(如何吸引用...

  • icon设计

    1. 类型 (1)应用、网站的标识(2)具有明确含义的功能标识 2. 样式 (1)线性图标 ---- 纯色描边、多...

  • ICON设计

  • 用PS绘制超漂亮的相机UI图标

    此教程为相机图标icon设计,非常的不错,是一个经典的icon设计教程,主要使用Photoshop设计灰色渐变风格...

  • 先锋队-设计组每日设计分享(2016/10/28)

    今天带来的分享是两款icon设计: 第一款是卡通icon,以多啦a梦为主题的icon设计 我非常喜欢这款,我...

  • 作品集

    1、icon图 2、banner设计 3、插画设计 4、界面设计

  • 作品集

    1、icon图 2、banner设计 3、插画设计 4、界面设计

网友评论

    本文标题:【Icon】设计大法

    本文链接:https://www.haomeiwen.com/subject/oqvjsctx.html