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

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

04-01_slick_clean_button_lead

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

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

04-03_slick_clean_02

建立样式

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

04-04_slick_clean_03

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

04-05_slick_clean_04

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

04-06_slick_clean_05

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

04-07_slick_clean_06

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

增加一些样式。

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

04-08_slick_clean_07

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

04-09_slick_clean_08

04-12_slick_clean_11

04-13_slick_clean_12

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

04-14_slick_clean_13

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

04-15_slick_clean_14

04-16_slick_clean_15

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

04-17_slick_clean_16

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

04-18_slick_clean_17

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

04-19_slick_clean_18

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

04-20_slick_clean_19

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

04-21_slick_clean_20

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

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

04-22_slick_clean_21

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

04-23_slick_clean_22

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

04-26_slick_clean_25

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

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

04-27_slick_clean_26

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

04-28_slick_clean_27

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

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

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

04-29_slick_clean_28

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

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

04-30_slick_clean_29

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

04-31_slick_clean_30

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;
}

下载完整按钮文件

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

6 条评论

  1. hellosun说道:

    博主你好,你的教程写的很不错,有一个疑问想向你请教,第五步,第六步和第七步的作用是什么?谢谢,我总是弄不好

    1. 风影说道:

      很不好意思,第五步写错了,应该是按Ctrl+点击形状图层。第六步填充图层主要为了在第九步中方面增加各种效果。
      如果你问题还没解决,欢迎回来!

  2. hellosun说道:

    博主你好,我再画好圆角矩形之后,就将它图层栅格化处理了,效果应该一样的

    1. 风影说道:

      嗯。方法很多,多多尝试就明白了。

  3. 诚人说道:

    不错,待会就去做做。好长时间没弄了,热热身!

  4. 诚人说道:

    不错,好长时间没有设计了,待会就去练练;

诚人进行回复 取消回复

您的电子邮箱地址不会被公开。