UI教程,ps临摹一个浏览器图标实例(8)

来源:未知 作者:看不见的敌人28 学习:16524人次

分享一篇关于UI图标临摹的设计教程,这次又是模仿猴子浏览器的图标,上次已经分享过一篇,希望大家喜欢。

大家还可以结合@琴瑟飘渺 写的这一篇相同图标的设计教程《浏览器UI图标!ps cc模仿锤子浏览器图标》一起学习。做完记得交作业。
http://www.16xx8.com/photoshop/jiaocheng/2014/135929.html

最终效果:

UI教程,ps临摹一个浏览器图标实例

教程开始,第一步新建,500*500画布 拉个白到灰的径向渐变。

UI教程,ps临摹一个浏览器图标实例

椭圆工具拉个300*300的圆居中对齐填充灰色。

UI教程,ps临摹一个浏览器图标实例

添加图层样式。

UI教程,ps临摹一个浏览器图标实例

UI教程,ps临摹一个浏览器图标实例

UI教程,ps临摹一个浏览器图标实例

再画一个较小的圆形。

UI教程,ps临摹一个浏览器图标实例

添加图层样式:内阴影和投影。

UI教程,ps临摹一个浏览器图标实例

UI教程,ps临摹一个浏览器图标实例

复制刚刚添加图层样式的图层,右键清除图层样式 Ctrl+t按住alt+shift同比缩小2到4px左右。

UI教程,ps临摹一个浏览器图标实例

给黑圆添加渐变,注意是角度渐变。

UI教程,ps临摹一个浏览器图标实例

添加渐变后的样子。

UI教程,ps临摹一个浏览器图标实例

椭圆工具再画一个圆,放在上面。

UI教程,ps临摹一个浏览器图标实例

添加图层样式。

UI教程,ps临摹一个浏览器图标实例

UI教程,ps临摹一个浏览器图标实例

复制刚刚添加图层样式的圆形,清除图层样式,稍微放大2个像素左右。

UI教程,ps临摹一个浏览器图标实例

再来添加图层样式。

UI教程,ps临摹一个浏览器图标实例

UI教程,ps临摹一个浏览器图标实例

UI教程,ps临摹一个浏览器图标实例

再画一个同等大小的。

UI教程,ps临摹一个浏览器图标实例

羽化一下调整下透明度。

UI教程,ps临摹一个浏览器图标实例

放在这个位置做为投影。

UI教程,ps临摹一个浏览器图标实例

找到只添加蓝色渐变的那个图层,右键转为智能对象。

UI教程,ps临摹一个浏览器图标实例

UI教程,ps临摹一个浏览器图标实例

ctrl+t,输入20°

UI教程,ps临摹一个浏览器图标实例

画一个圆,大小自己感觉,能对上最好,填充相同的颜色。

UI教程,ps临摹一个浏览器图标实例

放在接口处慢慢调整对齐。

UI教程,ps临摹一个浏览器图标实例

效果如下:

UI教程,ps临摹一个浏览器图标实例

找到接口的圆图层和渐变的圆形图层,Ctrl+E合并。

UI教程,ps临摹一个浏览器图标实例

最后一步给合并的图层添加内阴影。

UI教程,ps临摹一个浏览器图标实例

教程结束,最终效果:

UI教程,ps临摹一个浏览器图标实例

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
灬國寳2017-10-20 11:22
img src=http://bbs.16xx8.com/data/attachment/album/201710/20/232035cgyxlndx9s0d5d0o.jpg
灬國寳2017-10-20 11:21
图标1我的作业:
灬國寳2017-10-20 11:21
好吧!2个小时的结果!
蓝念2017-05-28 03:16
回复一下
萌歌诗璐璐2017-05-28 02:52
支持,支持
王露宸2017-05-28 01:20
好东西啊啊啊啊啊
很冒险的梦2017-05-27 11:36
谢谢分享
原地等待吧2017-05-27 11:02
学习学习!!!
大帝浑蛋2017-05-27 05:57
努力学习
石字佐转2017-05-27 12:18
谢谢老师 多多学习
菇凉别矫情好吗2017-05-27 12:10
学习学习
骑自行车游敖汉2017-05-27 12:08
学习一下
高开低走啊2017-05-27 11:24
学习了
緈鍢曾路过2017-05-27 05:12
收益
彭城逍遥游2017-05-27 05:11
大神

关注大神微博加入>>

网友求助,请回答!