使用AI做UI设计系列教程：效果、外观面板和质感表现(中).pdf

使用A I做U I设计系列教程 ：效果、外观面板和质感表现 （中 ） 嗯 ，又到了教程时 了。本次教程继续进行关于使用 Illust rat o r 做质感表现的一些知识。在上一篇 教程 《使用 A do be Illust rat o r 做 UI 设计——效果、外观面板和质感表现 （上 ）》里 ， 曾提到说后 面的教程要剖析一个浏览器图标的质感表现是怎样做到的。不过 ，知其然不如知其所以然。不仅希 望让大家知道 ，如何用 A I 来表现质感 ，更希望让大家知道为什么要这样做。所以 ，这一回的内容主 要是介绍质感表现的一些基础知识 ，了解一些生活中常见物体所用的材质特性。关于 A I 本身功能 的介绍就相对于前几篇少一些 ，主要以知识介绍为主 ，所以这应该是一篇比较轻松的教程。如果用 过一些三维设计软件的话 ，下面的内容应该比较容易理 解。 好了 ，不多说了 ，开始正文。 1. 生活中常见材质和他们的特性 在说到材质前 ，首先要明白的是 ，为什么我们能够看到东西。我们之所以能看到东西 ，是因为太阳 、电灯这样的光源所发射出来的光线 ，打到物体上 ，发生了 类似反射、折射、散射这样的光学现 象后 ，最终到达我们眼睛里的视网膜 ，视网膜上的两种视神经细胞受到光线的刺激后 ，产生红绿蓝 三种彩色电信号 （在光线较强 时为主 ）和灰度电信号 （在光线较弱时 ）由视神经传达到大脑 ，产生 视觉。所以说 ，产生视觉的两大因素是光源和物体 ；没有光源就没有光线产生 ，没有物体光就不 会 由于发生光学现象进入到我们的眼睛里。 生活中 ，我们能看到每个物体都带有不同的材质。比如虽然都是白色 ，但白色的墙面和白色的洗衣 机看起来却不一样。产生这种现象的原因是因为不同的物 体 ，由于表面凹凸、纹理的细微不同和物 质本身的物理光学特性不同 ，光线与之交互时所发生的光学现象不同 ，导致了我们看到的物体虽然 可能都是一种颜色 ，但却 给人不同的材质感。 在本次教程中 ，我们先归纳总结材质的物理特性。日常生活中的材质多种多样 ，不过根据我个人的 经验 ，绝大多数材质 （不是全部 ）可以归纳为以下六种材质 ，或这六种材质之 的组合 ： 以上的图片就是六种不同材质的物体在不同环境下的表现 （由计算机模拟生成 ），下面逐一介绍这 些材质的物理特性。从左到右 ，从前到后 ： 最前面的左数第一个物体的材质是生活中最常见到的材质。在生活中 ，绝大多数物体的表面在微观 上并不是十分光滑 ，或者表层物质有较强的散射特性 ，因此光线在打到这些物体的表面后 ，被反射 、散射到了各个方向上 ，这种现象称之为 「漫反射」。原理大致如图 ： 类似这样的物体最典型的就是未抛光的石膏 ，纸张、墙面这些。观察上面给出的四张材质对比图片 ，可以看到这样的材质有以下几个视觉特性 ： 物体在单一平行光源照射下 （典型的平行光源是日光 ），物体显出本身的颜色、图案纹理。并在 光源照射下 ，不同部分大致形成了亮面 （直接受光源照射 ）、灰面 （光源与表面有一些角度 ）、暗 面 （光源不能直接照射到 ），之 过渡平滑、柔和。 物体的灰面、暗面稍受周围物体反光以及环境光的影响。例如物体暗部靠近地面的部分可能会比 周围稍亮一些 ，就是因为物体接受到了地面的反光 （学过素 描的都知道这点吧 = =)。看示例材质图 的例子可能会留意到 ，物体也受天光等环境光的影响 ，所以看上去稍蓝一些。如果仔细观察生活中 的一些露天物体 ，在晴好的天气下 ，会发现物 体的暗面、灰面或被阴影遮蔽的物体看上去会稍带一 些蓝色 ，是因为反射了天光的缘故。 第一排左二就是常见的镜面金属材质了。由于这样的材质 ，即使从微观上看 ，表面依然比较光滑 ， 并且几乎没有散射特征。光线打到这样的表面上后 ，绝大多数会沿按入射方向法线对称的角度反 射出 ，因此看上去有这些视觉特征 ： 物体表面的颜色受周围环境影响很大。由于发生镜面反射 ，会在物体表面形成周围环境的镜像。 如果表面不平整 ，镜像会发生畸变变形。 物体表面在光线照射下 ，不会像漫反射表面物体那样形成亮面、灰面、暗面。光源会经反射后 ， 直接形成一个物体表面上的清晰虚像。 由于一些金属对不同波长 （频率 ）的光线反射率不同 ，因此像铜、金、锌等金属会带有颜色。例 如由于金对波长短的光线 （蓝紫光部分 ）吸收较多 ，对波长较长的光线 （红黄光 ）反射较多 ，因此 会带有金黄色。 第一排第三个的材质也是生活中较为常见的 ，即 「玻璃」材质。 「玻璃」材质不仅仅包含玻璃 ，还 包括类似聚乙烯塑料、钻石这样的材质 ，甚至水也可以看作是 「玻璃」材质 ，因此在这里 「玻