快速制做了个木质图标外框样式,方法很简单撒~@milaky 在这说下制作的步骤。~^^~
~喜欢的话可以打开PS一起来做吧~

jiaozuoye

1998190859670589702_thumb

第一步:

建立一个900*700px的文件,绘制一个825*700矢量矩形,点击图层栏底部工具的“创建新的填充或图层调整”图标,将图黑色渐变。

2178334844765518339_thumb

第二步:

给底部叠加图案。把下面这张凹凸纹理图案导入Ps,点击编辑—定义图案,就能在图层样式里使用了。看以下图设置。最后将图层命名为“背景”。

599260225433765272_thumb

纹理图案

3095380318903862981_thumb

第三步:图标底部

绘制一个512*512px,圆角为60px的矢量圆角矩形,然后改变其属性和做图层样式。

改变属性为渐变矢量:

2298524659819980634_thumb

渐变设置:

946881821655100365_thumb

图层样式设置:

691302542803449010_thumb

3278902003704147449_thumb 691302542803449025_thumb

1507017025309646224_thumb

第四步:制作木材质

建立一个600*600px方形图层,填充黑色;滤镜>杂色>添加杂色;滤镜>模糊>动感模糊;Ctrl+B色彩平衡设置;Ctrl+L色阶设置。

3029515174338396131_thumb

3165749063067007698_thumb

3306768026398444031_thumb

3852266531262839453_thumb

89227567618644400_thumb

第五步:材质应用在图标上

点击木质图层鼠标右键>创建剪贴蒙版

2145402272490615582_thumb

第六步:制作内凹槽描边

绘制一个476*476px,圆角58px的矢量圆角矩形;图层样式>描边。

3319997350303822077_thumb

1500824575822869562_thumb

第七步:制作凹槽真实效果

绘制一个476*476px,圆角58px的矢量圆角矩形;和所有图居中对齐,图层样式>内阴影>外发光>内发光>描边>阴影。

3348426322951378380_thumb

3211348009293719806_thumb

1507017025309646961_thumb

4802244577660598552_thumb

1497728351079090840_thumb

最终效果图完成啦~ 简单吧!

3266235629752347833_thumb

 

看完教程咱们交作业咯!点我直达作业提交页面>>

 

源文地址:http://milaky.blog.163.com/blog/static/1881774232011521101413507/
作者:@milaky

TIGER临摹了一个

提供PSD源文件下载

down

 

转载请注明:学UI网 » PS教程:快速制作木质图标外框(附带PSD源文件)

登录收藏
 
你可能喜欢的:
用户体验 | 图标样式对界面可用性有什么影响?用户体验 | 图标样式对界面可用性有什么影响?
为什么你的图标总是缺了点意思为什么你的图标总是缺了点意思
如何绘制图标如何绘制图标
六步画出好ICON六步画出好ICON
从0到1——一组图标的诞生从0到1——一组图标的诞生
如何在Affinity Designer中创建一组扁平图标如何在Affinity Designer中创建一组扁平图标
如何系统的学习功能图标?续集如何系统的学习功能图标?续集
图标设计五维自检查法图标设计五维自检查法
如何设计风格统一的图标如何设计风格统一的图标
UI设计中扁平图标绘制的终极指南UI设计中扁平图标绘制的终极指南