ps制作ui图标 (制作ui图标ps)

今天作者和大家分享一个PS绘制立体时尚UI图标教程,效果非常不错,主要知识点是图层样式的运用,对新手学习挺好的,感兴趣的朋友请动起您的手一起来操作吧!

效果预览:

ps做ui图标教程,如何用ps做立体图标

拉到教程最后可提取PSD文件

1、新建1000*1000PX的画布,填充颜色为#e82571;选择圆角矩形形状工具,绘制一个800*800PX,半径为100PX的圆角矩形图标,填充颜色为白色,鼠标双击图层添加斜面浮雕、颜色叠加以及投影图层样式,参数设置如图。

ps做ui图标教程,如何用ps做立体图标

ps做ui图标教程,如何用ps做立体图标

ps做ui图标教程,如何用ps做立体图标

ps做ui图标教程,如何用ps做立体图标

2、选择椭圆形状工具,绘制一个660*660PX正圆,颜色填充为白色,居中调整一下位置,鼠标双击图层添加渐变叠加图层样式,参数设置如图。

ps做ui图标教程,如何用ps做立体图标

ps做ui图标教程,如何用ps做立体图标

3、CTRL+J复制一层,CTRL+T等比例缩放到87%,然后鼠标双击图层添加内阴影以及渐变叠加图层样式,参数设置如图。(颜色大家可以吸色或者调些自己喜欢的颜色)

ps做ui图标教程,如何用ps做立体图标

ps做ui图标教程,如何用ps做立体图标

ps做ui图标教程,如何用ps做立体图标

4、CTRL+J复制一层,CTRL+T等比例缩放到70%,然后鼠标双击图层添加斜面和浮雕、渐变叠加以及投影图层样式,参数设置如图。

ps做ui图标教程,如何用ps做立体图标

ps做ui图标教程,如何用ps做立体图标

ps做ui图标教程,如何用ps做立体图标

ps做ui图标教程,如何用ps做立体图标

ps做ui图标教程,如何用ps做立体图标

5、将上步图层CTRL+J复制一份,CTRL+T等比例缩放到80%,选择钢笔工具,选择合并形状,在椭圆上加个三角形,然后调整图层样式,复制过来的样式只需调整斜面浮雕,其余的可以保持不变,参数设置如图。(绘制三角形还可以选择自定形状工具进行操作,当然还有其它方法,大家不要局限思维,要发挥自己的小宇宙)

ps做ui图标教程,如何用ps做立体图标

ps做ui图标教程,如何用ps做立体图标

ps做ui图标教程,如何用ps做立体图标

6、将名为椭圆1副本2的图层CTRL+J复制一份,拖到最上面,CTRL+T等比例缩放到50%,右键清除图层样式,鼠标双击图层添加描边以及渐变叠加新的图层样式,参数设置如图。

ps做ui图标教程,如何用ps做立体图标

ps做ui图标教程,如何用ps做立体图标

ps做ui图标教程,如何用ps做立体图标

ps做ui图标教程,如何用ps做立体图标

到此,作品已全部完成,一枚立体时尚的UI图标就此诞生!

同名微信公众号【PS一点学】欢迎订阅,回复“立体”提取本教程PSD文件,每天不定时推送图文资讯,认真回答每一个人的提问!