PS:美工UI设计经常用的按钮图标这样做

 时间:2024-10-20 14:28:26

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设计经常用的按钮图标这样做

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

PS:美工UI设计经常用的按钮图标这样做

7、渐变颜色为#36afff、#007fcf。

PS:美工UI设计经常用的按钮图标这样做
PS:美工UI设计经常用的按钮图标这样做

8、效果:

PS:美工UI设计经常用的按钮图标这样做
PS:美工UI设计经常用的按钮图标这样做

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

PS:美工UI设计经常用的按钮图标这样做

10、然后我们新建一个圆角矩形(纯圆角)

PS:美工UI设计经常用的按钮图标这样做

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

PS:美工UI设计经常用的按钮图标这样做

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

PS:美工UI设计经常用的按钮图标这样做
PS:美工UI设计经常用的按钮图标这样做
PS:美工UI设计经常用的按钮图标这样做

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

PS:美工UI设计经常用的按钮图标这样做

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

PS:美工UI设计经常用的按钮图标这样做
PS:美工UI设计经常用的按钮图标这样做

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

PS:美工UI设计经常用的按钮图标这样做
PS:美工UI设计经常用的按钮图标这样做
PS:美工UI设计经常用的按钮图标这样做

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

PS:美工UI设计经常用的按钮图标这样做

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

PS:美工UI设计经常用的按钮图标这样做
PS:美工UI设计经常用的按钮图标这样做
PS:美工UI设计经常用的按钮图标这样做
PS:美工UI设计经常用的按钮图标这样做

18、接着我们给按钮添加对应文字,并添加内阴影,渐变和投影,得到下面效果。调整参数:

PS:美工UI设计经常用的按钮图标这样做

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

PS:美工UI设计经常用的按钮图标这样做

20、个人建议最终效果如图所示。

PS:美工UI设计经常用的按钮图标这样做
  • 使用PS和AI设计制作赛车海报艺术字
  • moodle课程系统自动成绩汇总的方法
  • 如何使用PS给快递盒包装?
  • PS中如何对图片进行变形和翻转的操作
  • ps手表的做法
  • 热门搜索
    营养与健康手抄报 禁毒手抄报资料 圣诞节手抄报内容 教师节手抄报大全图片 白衣天使的手抄报图片 我与校树共成长手抄报 热爱生命的手抄报 读书名言手抄报 关于友善的手抄报 关于环境的手抄报