icon小教程之图标细节的绘制(ps教程)

今天通过一个简单的game图标的绘制教程,和大家分享在绘制过程中细节的处理和一些画图标的心得,好的,我们开始吧!

Step1
首先要定好图标的透视,这是非常重要的,这关系到图标的整体美感,透视本身也可以很好的表现图标的细节,为了透视的真实,可以通过3D软件或者平面软件中的一些的透视功能来实现。整体框架搭好,开始接下来的绘制。

Step2
先大致的铺上一层“控制板”的颜色,这里需要注意一些基本的光影渐变,以及边缘的处理。

Step3
这一步我们将通过一些光影效果来刻画“控制板”的结构,主要是强化一些重点区域的光线效果,比如面板玻璃的光泽和外框的金属质感,当然还有边缘细节的处理,硬朗的边框也是质感表现的重要部分。

Step4
添加高光,表现面板玻璃的质感,对底部进行一些光线的细节绘制。

Step5
为了使面板更丰富,可以绘制四颗螺丝来变现一些真实性。然后可以绘制一些面板内部的边缘结构来表现玻璃的半透明效果,至此,“控制板”初步完成。
注:因为四颗螺丝是一样的,建议大家把画好的螺丝转换为智能图层再复制,这样可以很方便的编辑它的样式,还能随意调整尺寸,避免失真。

Step6
接下来画摇杆和按钮,还是和Step1一样,构建好透视,绘制出结构。

Step7
上色,完成基本结构光线和颜色的区域划分。

Step8
强化手柄把头以及摇杆的光效,突出各个部分不同的质感,注意一些添加投影的部分。

Step9
细节的绘制:
a.丰富手柄把头的反光
b.刻画底座金属环的质感和边缘的结构
c.丰富底座的反光及边缘细节

Step10
控件基本完成,现在可以合起来进行一些调整,如位置、大小和玻璃面板上的反光。
注:绘制诸如高反光球体这类在局部区域包含丰富样式的物体时,建议大家多用剪切蒙板,这样可以节省对边缘的繁琐处理工作,又可以很方便的调整样式层的大小及位置。

Step11
面板看上去还有点空,我们可以丰富一些细节,例如控制板内部可以添加一些结构,同时还增加了玻璃通透的质感;添加一个logo,使图标更具真实性。至此,整个图标基本绘制完成。

Step12
最后一步可以从整体对图标进行调整,完善一些细节的地方,例如手柄把头的反光和在面板上的投影。

哦耶!整个图标绘制完成。

到这里差不多介绍完了,主要是自己画图标时常常会注意到的一些细节地方,写的有些草率,但希望能对大家有些小帮助。

本文出自Tencent CDC Blog

=========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享,希望打造一个最好的ui学习教程平台!

APP截图站:app.xueui.cn海量APP截图,让你灵感爆发!

(0)

相关推荐

  • twitter图标的画法【PS教程】

    小编:作为一名UI设计师,布尔运算是必会的神技.只用一些圆形啊.矩形啊.三角形啊等等通过布尔运算中的减法.加法等等就能拼接出一个个鲜活的图案,是不是很神奇很酷炫?如果你还不懂什么是布尔运算,那我们就一 ...

  • 快速打造照片放入效果(ps教程)

    上次给大家带来的矩形的九种立体呈现大家还记得吗?今天的小教程也差不多,不过是运用到实例中去了,就是用这种小效果来制作照片放入的情景,很实用哦,可以运用到网页或者其他场景中去. ui中国 原文作者:传智 ...

  • 教你绘制扁平风UFO、望眼镜与云遮雾绕图标【PS教程】

    小编:继续"教你绘制扁平风火箭图标"与"教你绘制扁平风行星与雷达图标"之后的第三篇,今天一口气完成三个ICON,这样我们一套六个图标就全部完成了.. 4.制作有 ...

  • 绘制一枚超萌的QQ方形图标【PS教程】

    今天@P大点S微博来一篇超简单的PS教程,教你绘制一枚方形图标,操作简单易上手,源文件已打包,假期花十分钟来练个手吧. 源文件打包   云下载: 新建个文档,我用的尺寸是800*600像素,大家请随意 ...

  • 教你打造冰淇淋ICON(PS教程)

    小编:今天给大家分享的是来自Mohammad Jeprie带来的一个美味的冰激凌ICON的PS教程,这个教程对于大家来说可能最重要的是耐心,作者提供的参数不多,大家可以多思考一下思路,也可以发挥一下自 ...

  • solidworks如何画管道?在solidworks中用3D草图及扫描绘制管道教程

    如何在solidworks中用3D草图及扫描绘制管道?我国先进制造产业发展十分迅速,机械工业是所有工业生产的基础,只有良好的机械工业才能造就有竞争力的上层产品,solidworks中3D草图绘制以及扫 ...

  • 5分钟打造iCloud图标(PS教程)

    临近新年,过年的气氛越来越浓了,大家学习UI的热情不能减啊,贵在坚持哦.今天给大家带来的教程是绘制一枚iCloud图标,这次我新加入了图层分解图,看起来更加一目了然,因为大家学了这么久了,颜色值那些我 ...

  • 史上最简单的图标教程第七课 (PS教程)

    咳咳...又是我,没错,今天小编给大家带来的是灰常有情怀的手表icon教程,原作者说是人类史上最简单的图标教程,这也是他出的第七次教程,相关教程都可以在学ui网找的到哦.好了,不多说了,大家跟着一起来 ...

  • PS CC2015绘制iPhoneSE【PS教程】

    小编:iPhone SE的发布对你有什么影响呢?是否还在犹豫买还是不买?今天我们先把这些问题放一边,这里有新鲜出炉的iPhone SE写实icon一枚,这是@无梦不欢继<10分钟绘制一个中国风灯 ...