UI设计教程 宠物小精灵球UI图标教程(5)

来源:网络   作者:热心网友   发布时间:2016-09-03    浏览次数:494

制作 [球-上半部分] 环境光:

这个也是采用同样的手法, 白色+柔边画笔在环境光的位置拍一下,适当调整好形状以后,图层模式改为滤色 不透明度:90% 然后用图层样式:叠加一个颜色#f27846

宠物小精灵,设计宠物小精灵球主题图标_设计先锋网<点图片看大图>

如果还觉得不够亮,就多复制两层,我就复制了两层,适当的调整不透明度,让衔接更加柔和。

到目前为止,我详细的讲解了几个打光的常用技巧,包括一些光影的原理和作用,如果有在跟着练的同学,相信已经学会了。那么接下来我们给精灵球的下半部分的打光,我就只告诉你们那些地方需要打光,以及原因,至于具体步骤,就由你们自己动手。

强化 [球-下半部分] 光感,增加环境光的影响:

宠物小精灵,设计宠物小精灵球主题图标_设计先锋网<点图片看大图>

添加完光影后的效果图:你们可以自己对比一下:

宠物小精灵,设计宠物小精灵球主题图标_设计先锋网<点图片看大图>

最后再制作一下球体和框底的投影。

六、绘制投影

绘制球体投影:

球体的投影主要分两部分,一部分是球体内镂空的投影,用来表现空间,另一部分是球体外的投影,用来表现体积。

宠物小精灵,设计宠物小精灵球主题图标_设计先锋网<点图片看大图>

球体外的投影:用椭圆工具画一个差不多大小的圆,图层模式改成柔光,然后添加羽化:13.6。

宠物小精灵,设计宠物小精灵球主题图标_设计先锋网<点图片看大图>

绘制底框投影:

整个投影一共由四个圆角矩形组成,具体的实现方式很简单,就是矢量图形填色加羽化减透明,使其相互融合,这里我就不具体的一步步展开将,容你们自己去调试。

宠物小精灵,设计宠物小精灵球主题图标_设计先锋网<点图片看大图>

为什么一个投影会有从蓝~紫~橙~橙灰的变化?

实际上这个投影的变化,是由主光源的浅蓝,融合了精灵球的红,映射到环境周边。投影在最右边时,由于还未受到精灵球二次反射的红光影响,所以依然保持了蓝灰,接着投影逐步从右至左,因受到反射光影响:红+蓝=紫。直到蓝光的影响越来越少,投影逐渐从紫过渡到橙再到橙灰,直到最后完全消失。这里充分把环境光的影响利用到了,所以以后我们在涉及到光影,不妨多思考,这样做出来的效果,会更加的合理,舒适。

12345共5页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/uisheji/4864.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通