让每一名学员高薪就业
返回列表 发新帖

高质感按钮打造

[复制链接]

55

主题

89

帖子

1231

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1231

版主

发表于 2018-2-1 15:48:01  | 显示全部楼层 | 阅读模式
本帖最后由 萤火虫 于 2018-2-1 15:47 编辑

很多没有给大家分享图标制作了,今天就给大家分享一篇如何制作高质感按钮!

1、素材的准备
使用PS形状工具 1.png 绘制出我们需要使用的素材原图

绘制一个圆角矩形:

2.png

3.png


2、制作颜色渐变效果

创建一个空白图层,使用剪切蒙版:

4.png


对空白图层使用渐变工具填充一层橘红色

5.png

得到如下图效果:

6.png

3、制作内凹效果

绘制一个圆角矩形:

7.png

添加图层样式效果

描边:

8.png


9.png

渐变叠加:

10.png


11.png

4、绘制一个矩形形状

12.png


将填充设置为0%

13.png

为该形状图层添加图层样式

添加一个图案叠加(背景为透明的小圆点-填充图案)


14.png

得到的效果:


15.png

使用剪切蒙版,把该图层内容放置进下方图层:


16.png

17.png


5、使用文字工具输入字体样式,使用图层样式为该文字图层添加外发光效果:

18.png


19.png


6、制作玻璃罩子

绘制一个圆角矩形

20.png

21.png


如图所示,将填充模式变为渐变,下方颜色色标设置为白色,上方红框透明度色标添加依次设置不透明度为:0%10%30%

为该图层添加两个描边图层样式:


22.png

23.png


绘制两个大小不等的椭圆相撞,并将属性中的蒙版参数做修改:


24.png

25.png


7、将所有绘制图层内容进行堆叠,按钮效果完成:

26.png


本文为源码时代UI老师原创,转载请标明出处(www.itsource.cn

回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表