怎么运用Photoshop设计光滑亮丽的Web2.0按钮？

这个Photoshop教程将教你如何设计一个简单光滑亮丽过度状态的“Web2.0风格”按钮。你还能学到以下CSS技术(CSS文字背景与图片背景的转换)

建立文档
1、新建一个250*100px的文档。

2 按Ctrl + R调出标尺，然后用鼠标单击上面的标尺拉出一条水平线，定位到50px处（如果看不到下图效果，右击标尺处选择“像素”）。

建立样式

3 .选择“圆角矩形工具”，半径为3px。

4 .鼠标放在右上角，拉出250*50px矩形框。

5 .按住Ctrl键同时单击形状图层。

6 .新建一图层，命名为“Idle”，按Shift + F5填充图层。

7.删除圆角图层，实质它并不需要。（按Ctrl+D 取消选中边框）

增加一些样式。

8 .双击 Idle图层，打开图层样式。

9 . 选择“渐变叠加”,点击“渐变”打开渐变编辑器。点击滑块左边的坐标，输入颜色值：#618926,单击右边的色标，输入颜色值：#98ba40。在位置输入35%。

10 .增加内阴影效果。混合模式为：正常。颜色值：#c6d894。不透明度：100%，距离和大小：2px。

11 .增加描边效果，大小为1px，位置为内部。颜色同第9步的颜色：#618926。如图所示。

12. 新建一个图层，命名为Radial_Gradient。设置前景色为：#b8cf69。按Ctrl同时单击Idle图层。然后回到Radial_Gradient图层。

13 .切换到渐变工具，选择“径向渐变”。单击渐变工具弹出对话框。

14 .在渐变对话框中选择“前景色到透明渐变”。确认左边是青绿色：#b8cf69。

15.确认你已选择圆角矩形和激活Radial_Gradient层，还有标尺处于开启状态。从头部往下拉大概30px。

16 .调整透明度为80%或者你喜欢的程度。

创建过渡状态样式
17 .按Shift同时选中Idle 和Radial_Gradient图层，复制图层。

18 .使用移动工具把刚复制的两个图层移到按钮底下。把Idle副本命名为Rollover、Radient_Gradient副本命名为：Radient_Gradient。

调整的过渡状态层风格
19 .除了颜色，其他地方保持一致。双击Rollover图层打开“图层样式”对话框，选择“内阴影”颜色设置：#839dbf。选择“渐变叠加”，改变左边色标值为：#0f2557，右边为#245293。最后，选择“描边”，颜色值为深蓝色：#0f2557。

20 .接下来我们给Radial_Gradient_Rollover层覆盖颜色。双击该层，选择“颜色叠加”，颜色值：#5c737c。

增加文本
21 .首先，我们选择一个简单的字体系列：Arial，你也可以选你所爱，以下这些技术，是一些大胆的建议。

22 .选择文字工具，字体为：Arial，加粗，大小为16px,平滑。颜色为白色。在按钮上输入你想要的文字。

给文字增加些效果
23 .双击文字图层打开图层样式，选择“投影”，混合模式：正常，颜色：#618926，不透明度：100%，不要选择“使用全局光”，大小和距离为1px。

24 .按Ctrl键同时点击Idle图层，确认文字处于激活状态。

25 .选择“图层”>对齐>垂直居中

26 .选择“图层”>对齐>水平居中

27 .激活文字图层，右键“复制图层”

28 .按Ctrl同时选中Rollover和复制文字的图层。然后水平对齐和居中对齐。

29 .双击文字图层，把投影颜色改为：#0f2557。

30 .保存为Web格式，命名为：campaign-monitor-button.png

31.创建HTML，同上。

创建一个简单的内部链接样式。用p标签来制作，如图：
<p class=”button”><a href=”#null”>Click this button</a></p>

创建CSS

创建一个简单CSS背景交换技术。创建一个CSS，加入以下样式：
.button {
display:block;
width:250px;
height:50px;
text-indent:-9999px;
}
.button a {
display:block;
width:100%;
height:100%;
background:transparent url(campaign-monitor-button.png) no-repeat top left;
outline:none;
}
.button a:hover {
background-position:0 -50px;
}

下载完整按钮文件

如果大家还有任何疑问，欢迎在后面留言。我们团队将奉献更多更好的资源，欢迎常来哦！