在本网页设计和开发教程中，您将了解如何在Photoshop中创建“呼吁行动”按钮精灵，以及如何使用jQuery来动画它。本教程分为三个部分:Photoshop, HTML/CSS和JavaScript。
简介
本教程分为三个部分:
- 第一节:Photoshop
- 第二节:HTML / CSS
- 第3节:JavaScript (jQuery)
如果您喜欢本教程，请将您的工作的图片/屏幕截图包含在六次修订Flickr组-我们正试图在那里建立收藏，这样我们就可以有一个很好的社区展示。
最终结果
单击查看现场演示．
演示
第一节:Photoshop
第一部分将处理Call to Action按钮的图形创建。
设置Photoshop文档
1我们的按钮的尺寸将是200px x 50px，但由于我们将为两个不同的状态创建一个CSS背景精灵，我们将使画布的高度100px。首先，创建一个新的Photoshop文档(Ctrl + N)，其画布宽度为200 px和画布的高度100 px．
2为了使绘制按钮更容易，我们将设置一些参考线。
如果它还没有打开，首先打开你的标尺(Ctrl + R切换它的打开和关闭)，通过查看>标尺，并确保它被选中。要创建一个指南，只需单击Photoshop工作区边缘的尺子，并拖动到您的画布。我们将制作5条参考线:4条在画布的边缘，1条水平参考线在50px标记处(这有效地将我们的画布分成两个相等的部分)。
创建按钮形状
3.现在我们将创建一个圆角矩形形状。在工具面板中选择圆角矩形工具。调整半径选项在选项栏8像素．
前景色并不重要，因为它会被我们即将应用的图层样式所覆盖。
4用圆角矩形工具在画布的上半部分创建圆角矩形，从左上角拖到右下角的50px标记处。
为按钮添加图层样式
5现在我们将添加一系列图层样式到我们刚刚创建的圆角矩形形状。首先，双击图层面板中的形状图层打开图层样式对话框。
6首先，我们将添加一个渐变叠加。
点击渐变叠加，应用图层样式。然后点击渐变选项打开渐变编辑器对话框，选择我们想要的颜色。
7在渐变编辑器中，通过点击改变左侧颜色停止的颜色(这将是按钮底部的颜色)。
我已经决定使用一个深橄榄绿的颜色为左边的颜色停止(# 85928)．将正确的停止颜色更改为浅绿色(# d3e1d8) -这将是顶部按钮的颜色。然后滑动颜色中点40%浅绿色占主导地位。
8添加一个内发光图层样式，这将给按钮一个微妙的白色边框。设置不透明度选项为100％改变辉光的颜色为白色(# ffffff)通过点击小框打开颜色选择器，然后在那里更改它。然后在Elements选项集下，将Size选项更改为3 px．
9最后添加到正常状态按钮的图层样式是1px深绿色(# 74857)描边，在形状周围添加一个狭窄的边框。设置“大小”选项为1 px．将Position选项设置为内心的这样它就会在按钮形状内部绘制边框。
最后，通过点击颜色选项来改变笔画的颜色，打开颜色选择器对话框，并输入深绿色(# 74857)．
输入文本
10对于按钮的文本，我们将使用一种简单而熟悉的字体系列:Arial。您可以使用任何您想要的字体，但通常，我们将应用的文本效果是最适合粗体和无衬线字体-请在选择字体族时记住这一点。从工具面板中抓取水平文字工具(T)。
在选项栏中，将字体族设置为天线，字体样式要大胆的，字体大小为24像素，且抗锯齿方法要锋利的．不要担心字体颜色，因为它会被我们稍后应用的图层样式所覆盖。
11点击画布上的任何地方开始键入，并键入您的呼吁行动;这里使用的行动号召是“注册”，但你可能是“现在购买”或“看到演示”，这取决于你。
定心的文本
12根据您开始输入的位置，您的文本可能不在按钮的居中，因此我们需要精确地居中。首先，在图层面板中按Ctrl +点击按钮形状图层的缩略图，在按钮周围创建一个选框;这将自动在按钮边缘周围创建一个选框选择。
13现在点击图层面板中的文本图层，使其成为活动图层(不要取消选区)。
然后点击图层>，将图层对齐到选区>垂直居中，将文本图层垂直居中放置在按钮上。
14在按钮周围仍然有选框选区，在图层面板中文字图层仍然是活动图层，点击图层>，将图层对齐到选区>水平居中，找到按钮中间的文字。
为文本应用图层样式
15双击文本图层打开图层样式对话框。我们将创建一个嵌入文本效果类似于如何在Photoshop中创建嵌入排版我不久前写的教程。
16通过选中它旁边的复选框来应用渐变叠加。
点击渐变选项打开渐变编辑器。左边的颜色，选择深橄榄绿的颜色(# 425047)．要选择合适的颜色，请选择稍浅的绿色(# 94 ad9d)．
17接下来，应用内阴影图层样式。设置角度选项为90度,距离1 px，并将大小设置为2 px．保持内阴影颜色为黑色(# 000000)和不透明度选项75％．
这将创造一个微妙的嵌入/戳入效果。
18为了完成正常状态下的文本图层样式，我们将在文本底部添加一个微妙的阴影。将混合模式选项更改为正常的阴影的颜色变为浅绿色(# d1dfd7)．
设置不透明度为100％．确保角度选项也为at90度使它与内阴影的光源保持一致。最后，将Distance选项设置为1 px和Size选项2 px(等于内阴影的设置)。
创建悬停状态按钮组
19悬停状态将填充画布的底部。我们只需要复制正常的状态按钮，将其移动到画布的下部，并调整图层样式，使其看起来略有不同。为了保持条理，我们将把正常的状态按钮图层组合在一起。
要创建一个组，点击图层面板底部的创建一个新的组图标(它看起来像一个文件夹)。
20.将组名更改为比默认组1更直观的名称，例如正常的．然后在新创建的组中拖动两个正常状态层。
21如果您已经关闭了我们之前创建的参考线，请重新打开它，以帮助我们准确定位悬停状态按钮;快捷方式是按住Ctrl(或Cmd)然后按下;(或者，执行“查看>显示>指南”)。
22通过选择图层面板中的组复制Normal组。给这个组取个有意义的名字，比如徘徊．
23在图层面板中激活悬停组，点击工具面板中的移动工具(V)，使用向下方向键将悬停组移动到画布的底部，这样按钮的上边缘就在中间的参考线上。如果你很难看到边缘，使用工具面板中的缩放工具(Z)来帮助你定位悬停组。如果你使用缩放工具(Z)，只需按Ctrl/Cmd + 1回到100%视图。
改变悬停组的图层样式
24因为我们只需要调整一些设置，创建悬浮组按钮将会更快。在悬停组中，双击图层面板中的按钮形状图层打开图层样式对话框。我们将保持一切相同，除了渐变叠加图层样式的颜色。
编辑设置，使渐变的左边颜色停止为深绿色(# 515753)和正确的颜色停止是稍浅的绿色(但仍然是深色-# 7 d837f)．
25接下来，双击悬停组中的文本图层打开它的图层样式对话框。更改投影颜色为较暗的颜色(# 7 a807c)．
26最后，编辑渐变叠加图层样式颜色。设置左止色位为深绿色(# 5 d615e)和正确的颜色停止为稍浅的绿色，但仍然是深色(# 606462)．
第1节:ps完成
我们现在已经完成了本教程的Photoshop部分(第1节)。如果你继续学习，你现在应该有如下内容:
这将是我们的CSS背景精灵。不要关闭Photoshop文档，因为我们还需要在第二节中为网页保存它。
第二节:HTML / CSS
现在，我们将使用HTML/CSS实现Call to Action按钮的功能。
1首先创建一个指定为工作目录的文件夹。我称这个目录为"呼吁行动按钮但你可以随意取别的名字。
我们将把所有的资产都保存在这个文件夹中。
2我们将保存我们的CSS背景精灵(我们在第1节创建的按钮)。回到Photoshop，选择文件>保存为Web和设备。
保存为JPG文件格式(PNG或GIF也可以)在呼吁行动按钮文件夹作为call_to_action_sprite.jpg．
3.接下来，我们将创建HTML文档—最好的方法是使用您最喜欢的源代码编辑器(我使用Dreamweaver)，但一个简单的文本编辑器就足够了。创建一个标准的HTML文档，并将其保存在Call to Action Button文件夹中为index . html．
4对于HTML，我们将使用超链接元素<一>嵌套在段落元素内(< p >)一群人cta-button．下面是放置在<身体>index . html。为了方便浏览网页，我们在“行动号召”按钮中输入“报名”字样。
代码块1:
<身体> < p class = "cta-button">Sign Up .
的观点p.cta-button一谷歌Chrome中的元素。
5现在我们需要对它进行样式化，因此创建一个名为styles.css并将其保存在“呼吁行动按钮”文件夹中。
6在index.html中，链接到样式表。
代码块2:
<头> < link rel = "样式表"href = " styles”cssType ="text/css" media="screen" />.
7我们需要显示p.cta-button元素作为块元素，这样我们可以给它设置一个高度和宽度等于我们的调用动作按钮(宽度:200像素，高度:50 px)．我们还设置它的背景为CSS精灵的底部(悬停状态)。稍后，我们将通过移动背景来显示它<一>元素的样式答:徘徊pseudo-selector。
要将按钮置于浏览器视窗的中央，我们使用保证金:0汽车该技术适用于大多数浏览器，包括IE5.5及以上版本。
代码块3:
.cta-button{显示:块;宽度:200 px;高度:50 px;Background:url(call_to_action_sprite.jpg) no-repeat 0 -50px;保证金:0汽车;｝
视图的呼吁行动按钮与背景精灵设置。
8接下来我们将设置样式<一>元素在p.cta-button段落。我们还需要它是一个块元素，这样我们就可以使用文本缩进CSS背景图像替换技术将HTML文本(“Sign Up”)移出浏览器的视口;为此，我们为其设置一个极值-9999px文本属性。
与设置宽度而且高度到100%所以它等于的宽和高p.cta-button．最后，我们将背景精灵定位到图像精灵的左上角，这是正常状态。
代码块4:
. html按钮a{显示:块;宽度:100%;高度:100%;Background:url(call_to_action_sprite.jpg) no-repeat 0 0;indent: -9999 px;｝
视图的呼吁行动按钮与CSS最终确定。“注册”HTML文本在视口外缩进。
9此时，我们希望在用户将鼠标悬停在按钮上时显示悬停状态，因此我们将使用:徘徊伪选择器来隐藏背景。
代码块5:
鼠标悬停{background-position:0 50px;｝
第2节:HTML/CSS完成
这就是我们的HTML和CSS。
代码块6:
<身体> < p类= " cta-button " > < a href = " # " >签署< / > < / p > < /身体>
代码块7:
.cta-button{显示:块;宽度:200 px;高度:50 px;Background:url(call_to_action_sprite.jpg) no-repeat 0 -50px;保证金:0汽车;} .cta按钮a{显示:块;宽度:100%;高度:100%;Background:url(call_to_action_sprite.jpg) no-repeat 0 0;indent: -9999 px; } .cta-button a:hover { background-position:0 50px; }
演示的HTML / CSS
示例1:呼叫行动按钮与HTML/CSS．
第三节:JavaScript / jQuery
让我们动画按钮，好吗?
1首先,下载jQuery库并将其保存在“呼吁行动”按钮文件夹中。如果您有兴趣研究这个库，请下载未压缩版本，但是如果您要进入生产环境，请下载精简版(更小的文件大小)。
2在< >头index.html的链接，就在styles.css的链接下面，引用jQuery JavaScript库。