页面载入中...

如何表现输入法皮肤的质感

xingphotoshop, 2016-04-130

1.jpg

来源:站酷  作者:timur

这篇文章总结了最近做质感皮肤的经验以及之前的一些积累,正好趁搜狗在举办皮肤大赛之际,分享给大家,希望能够给刚开始做皮肤的童鞋提供帮助,也希望针对本文不正确或者不全面的地方能够得到大神们的指正与建议。

一、在使用图形软件时需表达的质感元素

接触过3D渲染的童鞋应该了解,不同材质是通过若干个参数调节来表达的,每个参数都控制着对应着质感元素,不同于3D渲染工具,平面图形软件主要通过各个质感元素的绘制来表达质感。3D普通实体材质(其他材质还包括透明材质与发光材质等,有机会的话会另外发)的主要调节参数包括:漫反射,反射强度,高光虚实度等等参数(不同渲染器的参数名称也不同)对应着材质元素的颜色,反射以及高光,当然,在材质在环境中,光与投影也是重要表达材质的元素之一。

bf4657045fdf32f875a9445f0104.jpg

1、颜色

fd9b57045fe66ac72579482bbe68.jpg

在使用图形软件表达材质时,不同的材质需要不同的颜色打底,如图,左侧金属材质需要用深灰色表达,当然,不同颜色的金属同样需要不同颜色来打底,右侧木质材质就需要用褐色打底,本人还没见过蓝色或者灰色的木头。

PS绘制方法:我的习惯是在PS中用钢笔工具勾出对应的填充形状,方便修改颜色与形状。

2、反射

870f57045fe932f875a9446d7f95.jpg

在上述材质球中,包括光源的正面反射以及地面反射,但在正常反射元素的绘制中,周围的物体都能够对物体造成反射,所以在皮肤设计过程中,每一块材质表达都需要结合周围的物体。反射元素的不同明度对比能够表达出不同的质感,如图所示,同等光强下,在其他元素相同的情况下,正光面与被光面的颜色对比度越强,材质的金属感越强。

PS绘制方法:1、利用渐变工具,发出反射;2、利用钢笔工具勾出反射形态,再利用高斯模糊模糊形态图层。最后通过调节明度,透明度或者饱和度的方法来调节暗面与亮面的对比度。

3、高光

e5eb57045fef6ac7257948fe249c.jpg

光源照射到物体然后反射到人的眼睛里时,物体上最亮的那个点就是高光,高光不是光,而是物体上最亮的部分。高光的虚实度能够表达材质表面光滑度,如图所示,高光越模糊,材质表面越粗糙,高光越实,材质表面越光滑。

PS绘制高光:同样利用钢笔工具勾出高光形态,再利用高斯模糊模糊形态图层,控制高光虚实度。最后也是通过调节明度,饱和度以及透明度的方法来调节高光强度。

二、材质皮肤的绘制步骤

了解各质感元素之后,向大家介绍一下我的两套质感皮肤的绘制过程。

1、《糖果》皮肤

第一步:选题

利用牛奶,巧克力以及糖果这三种材质绘制,体现可爱,甜美,好吃的感觉。

第二步:照图片,找参考

265757045ff432f875a944e9fa8b.jpg

在网上查找对应材质的图片,以便可以仔细分析每种材质中各个材质元素。

第三步:分析质感构成元素

收集质感图片后,对照上述的质感元素属性以及绘制方法来分析现实中质感元素的特征,当每个元素根据现实质感表现后就能表达好皮肤质感。

色彩:提取质感颜色的有一种实用方法,即中吸取工具吸取图片中色彩,后结合各个材质颜色进行微调,使用的每个颜色组合看起来和谐就好。下图是采用该方法后提取的材质颜色。

40dd57045ffa6ac725794806fc46.jpg

反射:这三种材质的反射元素有这共同特点,亮面与暗面的明度对比不高。

c88c57045ffe32f875a944b39422.jpg

高光:这三种材质的高光边缘较硬,特别是液体牛奶材质,主要依靠高光来体现其液体的状态,下图为高光的表达。

0aa4570460016ac72579486815ed.jpg

投影:投影能够表达物体之间的空间位置,下图为在上投影的效果。

61a25704600532f875a944d7ff9a.jpg

第四步:绘制

分析各个质感元素后,开始用PS来绘制材质,我的习惯是先绘制一个小部件确定效果后再开始将质感铺开到整个界面。

2c805704600c6ac7257948a53d68.jpg

确定质感表达元素以及表达方法后,将质感铺向整个皮肤。

1,确定形状与颜色

95d25704602d32f875a9441e5416.jpg

2,加上反射

5680570460326ac7257948a697fc.jpg

3,加上高光与投影,ok,搞定!

1eba5704603632f875a944fcbf19.jpg

2、《战争演习》皮肤

第一步:选题

利用金属以及军用铁皮的质感打造,战争的史诗感输入法皮肤 。

第二步:照图片,找参考

主要的材质包括坦克的铁皮以及亮面金属,也就是经常能够接触到的亮面金属以及暗面金属质感的组合。同样,寻找相关图标分析材质元素。

ab395704603a6ac72579488e54cb.jpg

第三步:分析质感构成元素

颜色:相同方法,吸取后微调。

2ea85704603e32f875a9448df5b6.jpg

反射:亮面金属与暗面金属的反射区别在于,亮面金属的对比度高,暗面金属的对比度低。

a1fc570460426ac72579484935ae.jpg

高光:因为是在金属表面刷了漆,所以暗面金属的高光边缘较软,而亮面金属的高光边缘较硬。

f9cd5704604532f875a94485ea64.jpg

投影:加上投影后的效果。

46d95704604a6ac725794837159c.jpg

纹理:

为了表现战车表面粗糙,身经百战的史诗感,除了以上质感元素外,还需要加上纹理元素。

PS绘制方法:用铁锈的笔刷,用深浅两种颜色在材质表面刷出粗糙感,如图。

56235704604d6ac7257948b09785.jpg

第四步:绘制

同样,分析各个质感元素后,开始用PS来绘制材质,我的习惯是先绘制一个小部件确定效果后再开始将质感铺开到整个界面。

88c65704605232f875a944685113.jpg

确定质感表达元素以及表达方法后,将质感铺向整个皮肤。

1,确定形状与颜色

ed92570460556ac7257948675ed1.jpg

2,加上反射层

41c8570460596ac7257948a0ba70.jpg

3,加上高光

effe5704605d32f875a944b63d91.jpg

4,加上投影和纹理,调一下整体曲线,加上发光效果,与光的反射效果(本文不涉及发光材质变现,有机会再聊),完成,收工!

c5ba5704606132f875a9447cbd78.jpg

我对质感的理解大致就是这样,希望能对小伙伴们有所帮助,当然,这篇文章还有很多可以延伸出来的地方,也希望能有机会再与大家分享,不全面或者不正确的地方也希望大家能够谅解!谢谢。


分享:

设计原的发展离不开您的支持与帮助,如果您觉得设计原对您有所帮助 可以用微信扫描

相应二维码打赏设计原,赏金将全部用于网站建设

微信