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

ps制作一个简单又时尚的UI按扭(4)

来源:木设计 作者:  学习:1101人次
 

5.选择“文字工具”并找一个你自己喜欢的字体,字体大小:24pt,颜色:#ffffff.输入文字“Buy Now”。

双击文字图层,添加一个“投影”样式(投影颜色:#2877ac)。

Photoshop制作一个简单又时尚的UI按扭,PS教程

Photoshop制作一个简单又时尚的UI按扭,PS教程

6.在工具箱选择“自定形状工具”,并在选项栏找到如下的图形。

绘制出大小:13*13;并填充白色,添加一个和文字一样的样式。

Photoshop制作一个简单又时尚的UI按扭,PS教程

Photoshop制作一个简单又时尚的UI按扭,PS教程

7。创建hover状态

在图层面板上新建一个组:Normal,把除背景外图层全部拉到这个组里面。

Photoshop制作一个简单又时尚的UI按扭,PS教程

使用“移动工具”把组“Normal”拖到“新建图层按扭”上,复制出一个组并命名:Hover

Photoshop制作一个简单又时尚的UI按扭,PS教程

双击组“Hover”中的“黑色图形”图层,更改其"渐变叠加"样式:

Photoshop制作一个简单又时尚的UI按扭,PS教程

接下来,我们开始切片。

使用“切片工具”把按扭的范围选中。在菜单栏找到:文件>另存为Web所用格式,另存为gif格式。

Photoshop制作一个简单又时尚的UI按扭,PS教程

学习 · 提示

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

关注大神微博加入>>

网友求助,请回答!