当前位置:首页>ps实例教程>ps网页设计>按钮图标>教程内容

图标制作,用PS制作个性的的网页图标(4)

来源:公众号 作者:爱知趣教育 学习:7298人次

本篇教程主要教同学们制作好看的网页图标,也可以通过教程来制作类似的手机图标,主要我们通过图层样式给图形添加一些效果,比如说阴影、发光等效果。图标的制作大体都是在图层样式中来完成的,本篇教程用到的图层样式是需要掌握的工具,同学们可以多了解一下其中的设置,这对我们在制作文字或者说是一些需要添加效果的时候有很关键的作用,一起来学习一下吧。

效果图:

图标制作,用PS制作个性的的网页图标_www.16xx8.com学习PS请到www.16xx8.com

操作步骤:

1、首先我们打开背景素材,将前景色设置为浅绿色#b1de20,背景色设置为深绿色#2a8a14,使用用椭圆选框工具,按住Shift键创建一个圆形选区,然后新建图层,选择渐变工具,填充渐变:

图标制作,用PS制作个性的的网页图标_www.16xx8.com

图标制作,用PS制作个性的的网页图标_www.16xx8.com

2、双击图层,打开图层样式对话框,在左侧列表添加投影和外发光选项这两种效果:

图标制作,用PS制作个性的的网页图标_www.16xx8.com

3、选择内发光、斜面和浮雕、纹理效果,在对话框中设置参数,制作带有纹理的立体效果:

图标制作,用PS制作个性的的网页图标_www.16xx8.com

图标制作,用PS制作个性的的网页图标_www.16xx8.com

图标制作,用PS制作个性的的网页图标_www.16xx8.com

图标制作,用PS制作个性的的网页图标_www.16xx8.com

4、新建图层,使用椭圆选框工具绘制一个圆形选区,填充深绿色#006837,执行选择,变换命令,在选区周围显示定界框,按住Shift+Alt键拖拽定界框的一角,将选区成比例缩小,按下回车键确认操作,按下Delete删除选区内的图像,形成一个环形,再按下Ctrl+D取消选择:

图标制作,用PS制作个性的的网页图标_www.16xx8.com

5、双击图层2,打开图层样式对话框,添加内发光和投影效果:

图标制作,用PS制作个性的的网页图标_www.16xx8.com

图标制作,用PS制作个性的的网页图标_www.16xx8.com

图标制作,用PS制作个性的的网页图标_www.16xx8.com

6、选择椭圆形状工具,在属性栏中选择路径选项,按住Shift键创建一个比圆环稍小点的圆形路径,新建图层,选择画笔工具,在画笔下拉菜单中选择方头画笔,设置画笔的大小、圆度和间距,设置形状动态大小抖动为70%,控制方向:

图标制作,用PS制作个性的的网页图标_www.16xx8.com

7、将前景色设置为浅黄色#cce198,单击路径面板底部的“用画笔描边路径”按钮,形成一个虚线效果,在路径面板空白处单击,隐藏路径:

图标制作,用PS制作个性的的网页图标_www.16xx8.com

8、双击图层3,添加斜面浮雕和投影效果:

图标制作,用PS制作个性的的网页图标_www.16xx8.com

图标制作,用PS制作个性的的网页图标_www.16xx8.com

图标制作,用PS制作个性的的网页图标_www.16xx8.com

9、打开图标素材:

图标制作,用PS制作个性的的网页图标_www.16xx8.com

10、按下快捷键http://www.16xx8.com/photoshop/jiaocheng/110097.htmlCtrl+Shift+[将它置为底层,再依次把图标拖入文档中:

图标制作,用PS制作个性的的网页图标_www.16xx8.com

11、选择自定义形状工具,在形状下拉面板菜单中选择Web,加载网页形状库,新建图层,绘制图形:

图标制作,用PS制作个性的的网页图标_www.16xx8.com

12、双击图层8,添加描边、内阴影和外发光效果:

图标制作,用PS制作个性的的网页图标_www.16xx8.com

图标制作,用PS制作个性的的网页图标_www.16xx8.com

图标制作,用PS制作个性的的网页图标_www.16xx8.com

13、用相同的参数方法,变换一下填充的颜色,可以制作出更多的图标效果:

图标制作,用PS制作个性的的网页图标_www.16xx8.com

完成:

图标制作,用PS制作个性的的网页图标_www.16xx8.com学习PS请到www.16xx8.com

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
暂无评论,交个作业支持一下吧~

关注大神微博加入>>

网友求助,请回答!