收藏 分享(赏)

UI设计:教你用PS制作笔记本风格的UI图标.docx

上传人:dzzj200808 文档编号:2972550 上传时间:2018-10-01 格式:DOCX 页数:3 大小:645.13KB
下载 相关 举报
UI设计:教你用PS制作笔记本风格的UI图标.docx_第1页
第1页 / 共3页
UI设计:教你用PS制作笔记本风格的UI图标.docx_第2页
第2页 / 共3页
UI设计:教你用PS制作笔记本风格的UI图标.docx_第3页
第3页 / 共3页
亲,该文档总共3页,全部预览完了,如果喜欢就下载吧!
资源描述

1、UI 设计:教你用 PS制作笔记本 风格的 UI图标摘要:今天跟大家分享一篇笔记本风格的UI 图标,效果的纹理主要通过图层样式制作出来,喜欢的一起学习一下。先看看效果:本子的身体这一部分呢,就是个圆角矩形,用到的图层样式可以参见下图:而效果呢,说实在的,真的愁死我了,我是用吸管吸色来做渐变叠加的,出于当时考虑的角度问题,最终添加了以上图层样式后的效果并不明显,如图:所以接下来,我为它单独添加了高光,一层又一层的叠高光,最后成了这个样子,注意右上角尤其是边缘的部分:叠高光用到了图层蒙版。然后本子的身体部分还有一圈虚线,中间那个 belt 的上面和下面一共有四条虚线,都是用描边路径画出来的,然后添

2、加图层样式,图层样式如下:那么到此为止,body 部分就算搞定了,接下来先看看 body部分的整体效果:然后开始绘制身体中间的那个带子的部分(最上面的那个扣儿除外,那是第三部分要说的哦)。加上那个 belt 的效果图如下,先来看看:下面开始说belt 的绘制。Belt 主要是用了图层样式、滤镜和画笔工具,画笔工具配合图层蒙版,说了这么多,还是看看更方便,效果图及其方法:上面第二幅图中的第一个图层就是刚刚说到的画笔配合图层蒙版,主要是高光的修饰,很微弱的高光。然后带子上面还有一行字,这行字用到的图层样式是:这样,我们就将 belt 这一部分也搞定了,下面就只剩下那个 button 的部分了。这个

3、钮扣的整体效果图如下:注意右下角的部分,由于这个 button的右端要长过于本子的 body,所以长出的部分的投影,应该是看不到的,只有当本子放到桌子上的时候,你可以稍微的添加一点点很淡很淡的投影,是不是这个道理呢?好了,下面来说说这个 button 的绘制。投影在最下面一层,由于刚刚说到的长短问题,单独画的形状图层来作它的投影,如图:然后再画上面的那个棕红色的细皮带:用到了图层样式和滤镜,如下:主体部分完成。然后单独给这部分加个高光,就像刚刚 body 的那部分一样,叠上几层或者调整调整,但是仍然是微弱的高光,尽管微弱,细微的地方,画与不画,最终的效果一定是不同的。这里叠了两层:最后,扣带儿上还有半圈虚线,同样用描边路径画出来,然后添加图层样式,如下:最后一步,为它加个背景图和投影,最终效果如下:结语:希望大家喜欢本篇教程,非常感谢大家的阅读,祝大家学习愉快!

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 高等教育 > 专业基础教材

本站链接:文库   一言   我酷   合作


客服QQ:2549714901微博号:道客多多官方知乎号:道客多多

经营许可证编号: 粤ICP备2021046453号世界地图

道客多多©版权所有2020-2025营业执照举报