当前位置: 首页 > 设计教程 > Photoshop教程 > Photoshop制作一个简单又时尚的UI按扭(3)

Photoshop制作一个简单又时尚的UI按扭(3)

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

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

Photoshop制作一个简单又时尚的UI按扭
Photoshop制作一个简单又时尚的UI按扭

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

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

Photoshop制作一个简单又时尚的UI按扭
Photoshop制作一个简单又时尚的UI按扭

7。创建hover状态

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

Photoshop制作一个简单又时尚的UI按扭

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

Photoshop制作一个简单又时尚的UI按扭

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

Photoshop制作一个简单又时尚的UI按扭

接下来,我们开始切片。

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

Photoshop制作一个简单又时尚的UI按扭

  • 共3页:
  • 上一页
  • 1
  • 2
  • 3
  • 下一页
  • 上一篇:Photoshop设计一个蓝色海洋风格网页模板教程
    下一篇:Photoshop设计简易的办公平台登陆框网页教程

    图集推荐

    • 灵感
    • 美图