Photoshop制作简洁清爽风格的按钮ppt课件

最终效果图:点击下面的图片，察看demo(鼠标滑过按钮的时候，按钮的颜色变成蓝色)。接着让我们开始慢慢的讲解如何来制作这样的一个效果,1,吧：新建一个文档1按钮的尺寸是250px宽，50px高。画布中要同时绘画按钮的原始状态(绿色按钮效果)和翻转状态(蓝色按钮鲜果)，所,2,以画布的高度100px.2在画布的垂直方向的一半的位置，拖拽一条标尺线。如果你的画布中，没有标尺，可以按住(Ctrl+R)调,3,出它来。直接从标尺中向画布中心拖拽，就可以拖拽出一条标尺线。创建形状3点击圆角矩形，圆角值设为3px。4在画布的上半部分，拖拽出,4,一个圆角矩形，矩形的颜色不重要。这个矩形的尺寸应该是250px宽50px高。5在图层面板中，按住Ctlr然后单击该矩形图层，,5,创建一个相关选区。6保持选区存在状态，创建一个新的图层(Ctrl+Alt+Shift+N).命名为Idle.在新图,6,层中，填充选区(圆角矩形)颜色EditFill(Shift+F5).7删除刚才的形状图层。添加一些图层样式8双击图层,7,Idle，打开图层样式面板。9添加一个渐变。双击渐变条打开渐变编辑的面板。设置渐变的两个颜色分别为深绿色#618926和浅绿色,8,#98ba40.移动颜色的中点为35%的位置。10添加内阴影。改变渲染模式为Normal。颜色设置为浅绿色#c6,9,d894。设置透明度为100%。设置距离和大小值为2px。按照下图的设置调整。11添加描边。设置大小为1px位置为In,10,side。设置颜色为较深的绿色#618926。按照下图的设置调整。现在已经和最终的效果很像了。添加径向(圆形)渐变12在Idle,11,图层上，新建一个图层，命名为Radial_Gradient。改变前景色为#b8cf69。按住ctrl单击Idle图层，创建一个圆角,12,矩形选区。然后切换回到Radial_Gradient图层。13切换到渐变工具(G).设置渐变模式为径向(圆形)渐变。点击渐变条,13,打开渐变面板。14在渐变面板中，选择前景色-透明。确定左边的颜色为浅绿色#b8cf69。15确定圆角矩形的选区始终存在，选中,14,的图层为Radial_Gradient。确定标尺已经打开，点击渐变，从图层顶部开始拖拽，结束点在选区往下30px的位置上。16调整,15,该图层的透明度为80%。创建翻转的按钮17分别复制图层Idle和Radial_Gradient。18移动这两个复制的图层，到,16,画布的下半部分。重命名这两个图层，Idlecopy命名为Rollover，Radient_Gradientlayer命名为Ra,17,dial_Gradient_Rollover。调整翻转按钮的样式19我们保持所有的设置不变，只更改颜色。双击Rollover图,18,层打开图层样式面板。在内阴影里面，改变颜色为浅蓝色#839dbf。在渐变叠加中，改变颜色为深蓝色#0f2557和浅蓝色#245293。,19,最后，改变描边的颜色为深蓝色#0f2557。20我们将在图层Radial_Gradient_Rollover上添加一个颜色叠加。双,20,击该图层打开图层样式面板。添加颜色叠加，设置颜色为深蓝色#5c737c。添加文字21在这个例子中，我们用一种简单的字体:Arial。,21,你可以使用任何你喜欢的字体，不过在这个例子中，建议使用粗的字体。22添加文字(T)，设置字体为Arial，字体加粗Bold，字体大,22,小为16px,反锯齿效果Smooth，颜色设置为白色(#ffffff).在按钮中输入你想要的文字。给字体添加阴影23双击字,23,体图层打开图层样式面板，点击外阴影。设置渲染模式为正常Normal,颜色设置为深绿色(#618926)，透明度为100%，不要选中,24,全局光，设置角度为-60%,尺寸和距离均设为1px。设置字体和图层对齐24Ctrl+单击图层Idle制作选区。确定字体图,25,层是选中的图层。25点击图层将图层与选区对齐垂直对齐，设置文字垂直对齐。26点击图层将图层与选区对齐水平对齐，设置文字水,26,平对齐。复制字体图层为翻转按钮27保持字体的图层始终未选中状态，单击该图层然后选择复制图层。移动到下半个按钮上面。28Ctrl,27,+单击Rollover图层，创建一个选区。按照25/26步骤，进行字体和选区的对齐。改变字体图层样式29双击字体图层，打开图层样式,28,图层。保持其他设置不变，更改颜色为深蓝色(#0f2557)。如果你一直按照步骤来做，那么你的最后的效果应该和下图一样。现在开始学习H,29,TML和CSS的部分。30保存图片为campaign-monitor-button.png.31创建一个HTML文档。和图片,30,campaign-monitor-button.png放在同一个文件夹中。HTML的部分基本的工作原理很简单，一个链接在一个一个段落标,31,记。我选择用一个段落标记作为包装/容器，因为我觉得请内容不应独立。如果没有它将不会作用。Clickthisbutto,32,nCSS的部分css的部分就是图片翻转的技巧。.buttondisplay:block;width:250px;height:,33,50px;text-indent:-9999px;.buttonadisplay:block;width:100%;height:1,34,00%;background:transparenturl(campai