您现在的方位:主页 >  > 规划中线性图标怎样切取巨细新手必看

规划中线性图标怎样切取巨细新手必看

时刻:2018-06-12 19:16 [ ] 来历:logo吧 已被阅读733

 画过不少图标,也总结了许多大神的办法,在此概括一下简略的图标画法,期望对咱们有协助。作为一名 UI 规划师,必需求注重 icon 的效果,首先是需求大量地操练,其次是尽量不要一遇到画图标的时分就随意在网上下载,而是结合产品调性发明归于这套产品的图标。

一、图标在 UI 中的运用

在本文中所说的图标,是指界面中的 icon。icon 添加了界面的趣味性,也进步了识别性,是界面中不行或缺的部分。

1. icon 在界面中的分类

icon 在功用上来说,分为不行点击的展现图标和可点击的按钮图标:

不行点击的展现图标,是为了辅佐后边的文字内容,侧重点在于文字,一般尺度为24×24、28×28、32×32。在小尺度内为了便于辨认图画,也不要在界面中太抢眼,主张能够运用简略的线性或许面性图标。

可点击的按钮图标,常用于导航栏、操作栏、标签栏,一般尺度为44×44、48×48、56×56、64×64,这类图标能够结合产品调性进行赋有趣味性的规划。

详见图1.1.1以及1.1.2中红框部分:

uisdc-tb-20180425-2.jpg

△ 好享瘦 app 中的界面

2. icon 的尺度

icon 的尺度一般挑选4的倍数,这样有利于在成倍缩放的时分,不会形成半像素的状况。例如48×48的 icon,缩小2倍的时分是24×24;而34×34的 icon,缩小2倍的时分是17×17。在图标中应尽量防止呈现奇数。

3. icon 的风格

时下盛行的图标能够概括为:线性图标、面性图标、线面结合图标。至于 mbe 风格、断线风格、色块风格、突变风格、半透明风格、双色调配风格等等,都是依据以上三种来进行风格规划。图1.3.1为在 dribbble上看到一些比较漂亮的 icon 规划,作者 ID 均补白在右下角,在此仅供参阅。除了在 dribbble、站酷、花瓣、优设、iconfont 等找漂亮的图标以外,还能够参阅市面上干流 app 中的图标。

uisdc-tb-20180425-3.jpg

二、怎样画图标

1. 画图标的软件

常用的画图标软件有三个:AI、PS、sketch。

AI 的优点是矢量,网格比较标准,简略处理图标的线面转化,其间直角一键转圆角功用非常好用,缺陷便是调色非常的难用,操作不便利,只能处理一般色块,杂乱的色彩会消耗许多时刻。

PS 的优点是调色功用强大,形状剪切中规中矩,缺陷是做线性图标的时分需求用布尔运算,描边功用操作起来没有 AI 便利。

Sketch 的优点是矢量,调色非常智能,而且现在做界面大都用 sketch,运用起来非常快捷,缺陷是它的造型没有 AI 和 PS 谨慎,一些转角的方位不行流通,小图的时分不易发觉,扩大后就能看到不流通的线条。

我一般是三者结合来画图标:首先用 AI 结构根本的形状。如果是要发著作做展现,就拉到 ps 里边进行调色和展现;如果是放在界面中运用,就拉到 sketch 调色运用。

2. 参数设置与参阅线的制造

在这里演示的是用 AI 画图标的办法。参数设置方面:首先在首选项 – 参阅线和网格,网格线距离10px,次分隔线10,勾选显现像素网格;然后在画布框内点击鼠标右键,显现网格;最终在视图中翻开「对齐网格」「对齐像素」「对齐点」。图2.2.1为参数设置过程。

uisdc-tb-20180425-4.jpg

参数设置结束后,新建画布,我一般新建800×600(dribbble 的展现尺度),图标应小而精致,不宜建过大的画布。

参阅线是为了标准图标而存在,一般有两种参阅线画法(杂乱标准与简略标准),它们原理都是相同的,习气哪种就用哪种。不要纠结参阅线的巨细应该是多少,依据你图标运用的方位来确认图标巨细(也便是参阅线的规模),有的朋友知道了 46px 的参阅线怎样画之后,又纠结 88px 应该怎样画,其实便是相同的原理。你能够依据自己的感觉来微调,略微大点小点无所谓,重要的是不要呈现奇数的像素巨细就能够。在此以44px巨细的图标为比如。

杂乱标准

画一个44×44的正方形,色彩调为灰色,描边挑选0.25pt(在此弥补一个常识点,72ppi下的1pt是等于1px的,具体请自行百度),然后画一个42×42的正方形居于其间。这个42×42的界限为安全界限,图标不要画超越这个界限,防止在给开发切图的时分贴边切,导致图标呈现不自然的鸿沟。图2.2.2具体展现画参阅线的过程。

uisdc-tb-20180425-5.jpg

那么,以上的参阅线应该怎样运用?咱们画图标的时分,物体会有长有扁,有圆有方,在共同体量感的时分,就需求用到里边的一些参阅线。可是记住,参阅线是死的,人眼是活的,画完今后,要靠感觉微调,直至视觉上体量感到达共同。请看下图2.2.3剖析:

uisdc-tb-20180425-6.jpg

△ 图标是 iconfont 竞赛里第二名的商务计划书图标,我描摹了一遍,在此用以演示,原作者 回想的沙漏2003

简略标准

用杂乱标准的参阅线画到娴熟的时分,就能够用比较简略的参阅线去约束图标规模,由于你现已非常了解体量感的操控了。

简略的画法是只需求画三个正方形,相同线性挑选色彩是灰色,描边挑选0.25pt。这里有个小口诀:长物体上下超左右不超、扁物体左右超上下不超、方物体要比圆物体小。下图2.2.4具体展现画简略参阅线的办法。

uisdc-tb-20180425-7.jpg

3. 怎样在 AI 树立参阅线来复用?

在画布顶用描边 0.25pt 来画好参阅线,然后选中参阅线,右键 – 树立参阅线。具体请看图2.3.1。

uisdc-tb-20180425-9.jpg

4. 各种形状的图标怎样在参阅线中共同

前面提到,参阅线是为了限制图标的巨细,然后到达全体的漂亮与标准。在画了许多图标之后,我总结出两个小窍门:

当你总结出你要画的物体形状时,只需不影响辨识度,能够恰当改动一下形状,把高的或许扁的物品,画成比较丰满的姿态(图2.4.1的铅笔为例);

uisdc-tb-20180425-10.jpg

当物体形状不适合画得丰满时,能够尽量上下或许左右撑满,然后旋转45度,以添加画面的丰满感(图2.4.2的刀为例)。

本文原文地址:http://www.eguedbetk.com/photoshop/106758.html转载请注明原站地址
 1/2    1 2 下一页 尾页
猜你喜爱
网友谈论