PS技能-UI设计必须会的按钮风格图标制作教程

云设计 2020年5月23日22:25:32243 910字阅读3分2秒

1,首先新建一个圆角矩形,这里圆角为70px(可根据个人自定),并填充为浅灰色(#e3e3e3这个为按钮的最底部。

PS技能-UI设计必须会的按钮风格图标制作教程

2,首先分析效果图中按钮底部的一个样式,首先有立体感,那我们添加斜面与浮雕阴影颜色#838383

PS技能-UI设计必须会的按钮风格图标制作教程

PS技能-UI设计必须会的按钮风格图标制作教程

3,立体感没有很强,那么我们可以为其添加内阴影效果,增加立体感。

PS技能-UI设计必须会的按钮风格图标制作教程

PS技能-UI设计必须会的按钮风格图标制作教程

4,接着我们在复制一下圆角矩形并把这个圆角矩形的样式都删除,然后 ctrl+T适当缩小和压缩。

因为圆角矩形受到调整,圆角半径会受到影响变化,我们可以根据最底的圆角矩形做适当的调整(案例的半径不变,还是70px)。

然后复制多两个调整好的圆角矩形,根据案例适当间距错开,并用不同颜色先区分,代表按钮,厚度和阴影。

PS技能-UI设计必须会的按钮风格图标制作教程

5,首先我们处理按钮,先处理效果,添加渐变色、内发光和描边。

描边颜色为#0082d5

 

PS技能-UI设计必须会的按钮风格图标制作教程

内发光颜色为白色,不透明度可根据个人感觉适当调整。

 

PS技能-UI设计必须会的按钮风格图标制作教程

渐变颜色为#36afff#007fcf

 

PS技能-UI设计必须会的按钮风格图标制作教程

效果

PS技能-UI设计必须会的按钮风格图标制作教程

6,接着新建几个矩形并旋转适当角度,调整羽化值2.5像素,剪切蒙版在按钮矩形里,并调整不透明度20%

PS技能-UI设计必须会的按钮风格图标制作教程

PS技能-UI设计必须会的按钮风格图标制作教程

7,然后我们新建一个圆角矩形(纯圆角)

PS技能-UI设计必须会的按钮风格图标制作教程

Ctrl+T,鼠标右击点击选中矩形,选择透视,然后点击右下角的锚点向右移动到合适位置。

PS技能-UI设计必须会的按钮风格图标制作教程

多复制一个,然后clrt+T,右击选择垂直翻转,并放到按钮下方,再clrt+T,按住键盘左下角alt,向中间缩放一丢丢。

PS技能-UI设计必须会的按钮风格图标制作教程

接着点击矩形,在属性面板将羽化值调到参数3,不透明度20,混合模式为叠加。

PS技能-UI设计必须会的按钮风格图标制作教程

PS技能-UI设计必须会的按钮风格图标制作教程

PS技能-UI设计必须会的按钮风格图标制作教程

在图层中点击选中矩形,在面板下方创建蒙版,然后点击选中矩形右边的蒙版。

PS技能-UI设计必须会的按钮风格图标制作教程

快捷键B画笔工具,用虚边画笔大小90px,前景色为黑色,画笔不透明度50%,在矩形边缘轻微涂抹,让过度更自然。

PS技能-UI设计必须会的按钮风格图标制作教程

PS技能-UI设计必须会的按钮风格图标制作教程

8,新建图层,用刚才画笔工具(不透明100%,画笔大小200px),前景色#00b4ff,在画布中间点击一下,然后clrt+T,向下压缩成线条状,移动至按钮矩形的上方,再复制一个在按钮下方,混合模式为叠加

PS技能-UI设计必须会的按钮风格图标制作教程

PS技能-UI设计必须会的按钮风格图标制作教程

PS技能-UI设计必须会的按钮风格图标制作教程

9,按钮部分完成,接着我们处理厚度和阴影部分,厚度颜色#155b89阴影部分为填充黑色,不透明度为45

PS技能-UI设计必须会的按钮风格图标制作教程

10,接着我们给按钮添加对应文字,并添加内阴影,渐变和投影,得到下面效果

调整参数:

PS技能-UI设计必须会的按钮风格图标制作教程

 

PS技能-UI设计必须会的按钮风格图标制作教程

 

PS技能-UI设计必须会的按钮风格图标制作教程

PS技能-UI设计必须会的按钮风格图标制作教程

11,最后我们把最底部的底添补上外发光效果

PS技能-UI设计必须会的按钮风格图标制作教程

完成!

PS技能-UI设计必须会的按钮风格图标制作教程

文章末尾固定信息
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
云设计
  • 本文由 发表于 2020年5月23日22:25:32
  • 转载请务必保留本文链接:https://www.aokumo.cn/384588.html