Welcome, Old Sport!

Photoshop制作一款简单的Web UI Button

by ilikecss ON 2011/08/12 5114

a Simple Web UI Button用户界面设计教程将带你创造流行风格的按钮,初学者只要5分钟就可以完成一款欧美风格的按钮制作,熟练工1分钟OK。(教程中命名,数值只作为参考,可自行调整,这是给初学者的教程,老鸟勿喷。)

Step1. 在Photoshop中新建一个文件

a Simple Web UI Button

打开Photoshop,Ctrl + Alt + N 新建文件,大小你自己决定(别太小了),上图Demo参照600 x 600

Step2. 新建一个图层

a Simple Web UI Button

新建一个图层,然后使用形状工具(如上图),选择圆角形状,圆角弧度5px,在画布中间拉出一个170 x 50的形状,命名为Base Shape

Step3. 添加图层式样

a Simple Web UI Button

双击Base Shape图层添加样式,选择渐变 > 参考值 >

  • Color Stop #1 – Color: #2877ac, Location: 0%
  • Color Midpoint #1 – Location: 40%
  • Color Stop #2 – Color: #87bfe6, Location: 95%
  • Color Midpoint #2 – Location: 40%
  • Color Stop #3 – Color: #c2def1, Location: 100%

a Simple Web UI Button

a Simple Web UI Button

给该图层创建边框: 参考值 > #2877ac

a Simple Web UI Button

a Simple Web UI Button

Step4. 给图层填充一个方格背景

首先Ctrl + Alt + N创建一个4 x 4的新文件,然后Ctrl + A全选,按Del删除背景颜色

a Simple Web UI Button

首先Ctrl + Alt + N创建一个4 x 4的新文件,然后Ctrl + A全选,按Del删除背景颜色

a Simple Web UI Button

选择铅笔工具,将填充色设为白色,如图所示划出这样的斜线,命名为Diagonal Line Pattern

a Simple Web UI Button

选择Base Shape图层,如图所示,然后新建一个图层 > 编辑 > Shift + F5 > 选择你刚才制作的形状点确定

a Simple Web UI Button

a Simple Web UI Button

消减边框2像素,选择Base Shape图层 > 选择范围 > 选择范围变更 > 边框 > 2px > 选择反选 > Del删除所选部分

a Simple Web UI Button

将Diagonal Line Pattern图层的Opacity值调制20%,这样我们的背景部分算是完成了

a Simple Web UI Button

Step5. 添加文字符号

按T键在按钮中间添加文字,为了保持绝对居中,在之前的小贴士里已经讲过,选择工具你所要居中的图层,然后点工具栏中的垂直、水平居中小图标即可。

a Simple Web UI Button

可以给文字适当的加添效果,选择阴影 > 颜色参考#2877ac

a Simple Web UI Button

添加一个小icon,选择形状工具 > 固定尺寸 13 X 13 > 选择如图所示形状,把按钮位置自行调整到合适,Copy文字样式给icon

a Simple Web UI Button

a Simple Web UI Button

Step6. 制作Hover效果

将已完成的图层组合成文件夹Normal,复制文件夹命名为Hover

a Simple Web UI Button

a Simple Web UI Button

选择Hover文件夹的Base Shape图层,修改其渐变值 >

  • Color Stop #1 – Color: #87bfe6, Location: 0%
  • Midpoint #1 – Location: 40%
  • Color Stop #2 – Color: #2877ac, Location: 95%
  • Midpoint #2 – Location: 40%
  • Color Stop #3 – Color: #4c9fd7, Location: 100%

a Simple Web UI Button

这样一个带Hover效果的按钮就完成了,请自行使用剪切工具裁剪,熟练工1分钟肯定完事。

目前还没有评论



TOP