恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何表现输入法皮肤的质感
0.0°
2019-01-11 原创文章 教程 举报 9680 231 353 19

这篇文章总结了最近做质感皮肤的经验以及之前的一些积累,正好趁搜狗在举办皮肤大赛之际,分享给大家,希望能够给刚开始做皮肤的童鞋提供帮助

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

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

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


1、颜色


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

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

2、反射


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

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

3、高光


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

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

二、材质皮肤的绘制步骤

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

1、《糖果》皮肤

第一步:选题

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

第二步:照图片,找参考


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

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

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

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


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


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


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


第四步:绘制

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

       

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

1,确定形状与颜色


2,加上反射


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


2、《战争演习》皮肤

第一步:选题

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

第二步:照图片,找参考

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


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

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


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


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


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


纹理:

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

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


第四步:绘制

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


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

1,确定形状与颜色


2,加上反射层


3,加上高光


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


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

更新:2019-01-11

收藏

231人已收藏

  • 6

    作品

  • 360

    粉丝

  • 12

    关注

  • 游戏UI动效
  • 街机(ARCADE)
  • My Life
  • 二次元机甲
相关标签
界面设计GUI

    猜你喜欢

      2019-01-11 原创文章 教程 举报 9680 231 353 19

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

      0.0°

      你确定要举报如何表现输入法皮肤的质感

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年04月06日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      353
      231
      19

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录