在photoshop中如何制作一个简洁干净的按钮.pdfVIP

在 photoshop 中如何制作一个简洁干净的按钮 在这篇 photoshop 教程中，将教给你如何制作一个带有反转效果的” web2.0 ″风 格的简洁干净的按钮效果。 同时你也会学习到应用基础 CSS的技巧 (CSS 背景 图片翻转。 按照下面的流程，你将学会如何制作一个类似的简单按钮。 让我们开始慢慢的讲解如何来制作这样的一个效果吧： 新建一个文档 1 按钮的尺寸是 250px 宽，50px 高。画布中要同时绘画按钮的原始状态（绿色 按钮效果）和翻转状态（蓝色按钮鲜果），所以画布的高度 100px. 2 在画布的垂直方向的一半的位置， 拖拽一条标尺线。 如果你的画布中， 没有标 尺，可以按住 (Ctrl + R) 调出它来。直接从标尺中向画布中心拖拽，就可以拖 拽出一条标尺线。 创建形状 3 点击圆角矩形，圆角值设为 3px 。 4 在画布的上半部分， 拖拽出一个圆角矩形， 矩形的颜色不重要。 这个矩形的尺 寸应该是 250px 宽 50px 高。 5 在图层面板中，按住 Ctlr 然后单击该矩形图层，创建一个相关选区。 6 保持选区存在状态，创建一个新的图层 (Ctrl + Alt + Shift + N). 命名为 Idle . 在新图层中，填充选区（圆角矩形）颜色 Edit Fill (Shift + F5). 7 删除刚才的形状图层。 添加一些图层样式 8 双击图层 Idle ，打开图层样式面板。 9 添加一个渐变。双击渐变条打开渐变编辑的面板。 设置渐变的两个颜色分别 为 深绿色 #618926 和浅绿色 #98ba40. 移动颜色的中点为 35% 的位置。 10 添加内阴影。 改变渲染模式为 Normal 。 颜色设置为浅绿色 #c6d894 。设 置透明度为 100% 。设置距离和大小值为 2px 。按照下图的设置调整。 11 添加描边。设置大小为 1px 位置为 Inside 。 设置颜色为较深的绿色 #618926。按照下图的设置调整。 现在已经和最终的效果很像了。 添加径向（圆形）渐变 12 在 Idle 图层上，新建一个图层，命名为 Radial_Gradient 。改变前景色为 # b8cf69 。按住 ctrl 单击 Idle 图层，创建一个圆角矩形选区。 然后切换回到 Radial_Gradient 图层。 13 切换到渐变工具 (G). 设置渐变模式为 径向 ( 圆形) 渐变 。点击渐变条打开渐 变面板。 14 在渐变面板中，选择 前景色 - 透明 。确定左边的颜色为浅绿色 #b8cf69 。 15 确定圆角矩形的选区始终存在，选中的图层为 Radial_Gradient 。确定标尺 已经打开， 点击渐变， 从图层顶部开始拖拽， 结束点在选区往下 30px 的位置上。 16 调整该图层的透明度为 80% 。 创建翻转的按钮 17 分别复制图层 Idle 和 Radial_Gradient 。 18 移动这两个复制的图层，到画布的下半部分。重命名这两个图层， Idle copy 命名为 Rollover ，Radient_Gradient layer 命名为 Radial_Gradient_Rollover 。 调整翻转按钮的样式