木质图标外框制作

UI / UI设计教程 /      

uimaker
UI设计师 / 江苏 南京

来源:uimaker.com   作者:milaky

关键词

 木质图标外框制作 - Milaky -

快速制做了个木质图标外框样式,方法很简单撒~milaky在这说下制作的步骤。~^^~ 

~喜欢的话就一起来做吧~
 
第一步:
建立一个900*700px的文件,绘制一个825*700矢量矩形,点击图层栏底部工具的“创建新的填充或图层调整”图标,将图黑色渐变。
木质图标外框制作 - Milaky -
 
第二步:
给底部叠加图案。把下面这张凹凸纹理图案导入Ps,点击编辑---定义图案,就能在图层样式里使用了。看以下图设置。最后将图层命名为“背景”。
 
木质图标外框制作 - Milaky -
纹理图案
木质图标外框制作 - Milaky -
 
 第三步:图标底部
绘制一个512*512px,圆角为60px的矢量圆角矩形,然后改变其属性和做图层样式。
 
改变属性为渐变矢量:
木质图标外框制作 - Milaky -
渐变设置:
木质图标外框制作 - Milaky -
 图层样式设置:
 
木质图标外框制作 - Milaky -  
木质图标外框制作 - Milaky -  木质图标外框制作 - Milaky -
 
木质图标外框制作 - Milaky -  
 第四步:制作木材质
建立一个600*600px方形图层,填充黑色;滤镜>杂色>添加杂色;滤镜>模糊>动感模糊;Ctrl+B色彩平衡设置;Ctrl+L色阶设置。
木质图标外框制作 - Milaky -
木质图标外框制作 - Milaky -  
木质图标外框制作 - Milaky -
木质图标外框制作 - Milaky -
木质图标外框制作 - Milaky -
 
第五步:材质应用在图标上
点击木质图层鼠标右键>创建剪贴蒙版
 
木质图标外框制作 - Milaky -
 
第六步:制作内凹槽描边
绘制一个476*476px,圆角58px的矢量圆角矩形;图层样式>描边。
木质图标外框制作 - Milaky -
木质图标外框制作 - Milaky -
 
 第七步:制作凹槽真实效果
绘制一个476*476px,圆角58px的矢量圆角矩形;和所有图居中对齐,图层样式>内阴影>外发光>内发光>描边>阴影。
木质图标外框制作 - Milaky -
 
木质图标外框制作 - Milaky -
 
木质图标外框制作 - Milaky -
 
木质图标外框制作 - Milaky -
 
木质图标外框制作 - Milaky -
 
第七步:最终效果图完成啦~ 简单吧!
 
木质图标外框制作 - Milaky -
 
原文地址:http://milaky.blog.163.com/blog/static/1881774232011521101413507/

 

 收藏