您的位置:银河官方网站 > 关于我们 > 和最终的导出的png图片,主要运用了渐变

和最终的导出的png图片,主要运用了渐变

2019-10-07 06:26

Photoshop 绿色按钮的制作 渐变 (载入中...)

超漂亮的绿色按扭制做  制作方面还是非常简单的,运用的工具是photoshop7.0,主要运用了渐变:   新建一文件,用圆角矩形工具画一个80X30、半径为8的圆角矩形,然后在图层面板里双击该图层(默认的命名为“形状1”),打开图层样式,按照以下设置:   1.设置渐变叠加: 图片 1  具体的颜色值为:#66CC33、#3BA51F、#20920E、#177E09,请参照以下设置:图片 2  2.描边:   颜色值为:#006600 图片 3  做完以上几步,就生成了以下效果:图片 4  接下来我们来完成它的高光部份,高光部份与前面同样,也是用渐变来完成,首先我们在图层面板建立一个新图层,重命名为“高光”,然后按Ctrl 形状1,建立按纽的选区,点击选择菜单->修改->收缩,设置收缩量为1。点击选框工具(或按M键),在选择区域上右键->描边(或者编辑菜单->描边),做以下设置:图片 5  选中“高光”图层,设置填充的透明度为0 图片 6  然后双击“高光”图层,打开图层样式,做一个白色从透明到实底的渐变: 图片 7图片 8  然后在上面加上我们想要的字就可以啦!再加以形状的变化,我们就做出了圆形按纽,以及标题栏等,手法基本相同,只是渐变的颜色值不同而已。 图片 9

最终的效果

  制作方面还是非常简单的,运用的工具是photoshop7.0,主要运用了渐变:效果图:

搜索更多相关主题的帖子:制做 漂亮 圆角 绿色 矩形

点击下面的图片,察看demo(鼠标滑过按钮的时候,按钮的颜色变成蓝色)。

  图片 10

简单的,我们教你,深奥的,你来分享

图片 11

  新建一文件,用圆角矩形工具画一个80X30、半径为8的圆角矩形,然后在图层面板里双击该图层(默认的命名为“形状1”),打开图层样式,按照以下设置:

如果你想要下载本教程中的源文件,下面的链接包含了psd源文件,和最终的导出的png图片,以及html demo 和相关的css样式文件。请到论坛二楼下载。

  1、设置渐变叠加:

让我们开始慢慢的讲解如何来制作这样的一个效果吧:

  图片 12

新建一个文档

  具体的颜色值为:#66CC33、#3BA51F、#20920E、#177E09,请参照以下设置:

1 按钮的尺寸是250px宽,50px 高。画布中要同时绘画按钮的原始状态(绿色按钮效果)和翻转状态(蓝色按钮鲜果),所以画布的高度100px.

  图片 13

图片 14

  2、描边:

2 在画布的垂直方向的一半的位置,拖拽一条标尺线。如果你的画布中,没有标尺,可以按住 (Ctrl + R) 调出它来。直接从标尺中向画布中心拖拽,就可以拖拽出一条标尺线。

  颜色值为:#006600

图片 15

  图片 16

创建形状

  做完以上几步,就生成了以下效果:

3 点击圆角矩形,圆角值设为3px。

  图片 17

图片 18

  接下来我们来完成它的高光部份,高光部份与前面同样,也是用渐变来完成,首先我们在图层面板建立一个新图层,重命名为“高光”,然后按Ctrl+形状1,建立按纽的选区,点击选择菜单->修改->收缩,设置收缩量为1。点击选框工具(或按M键),在选择区域上右键->描边(或者编辑菜单->描边),做以下设置:

4 在画布的上半部分,拖拽出一个圆角矩形,矩形的颜色不重要。这个矩形的尺寸应该是 250px 宽 50px 高。

  图片 19

图片 20

  选中“高光”图层,设置填充的透明度为0:

5 在图层面板中,按住Ctlr 然后单击该矩形图层,创建一个相关选区。

  图片 21

图片 22

  然后双击“高光”图层,打开图层样式,做一个白色从透明到实底的渐变:

6 保持选区存在状态,创建一个新的图层 (Ctrl + Alt + Shift + N). 命名为 Idle. 在新图层中,填充选区(圆角矩形)颜色 Edit > Fill (Shift + F5).

  图片 23

图片 24

  图片 25

7 删除刚才的形状图层。

  然后在上面加上我们想要的字就可以啦!再加以形状的变化,我们就做出了圆形按纽,以及标题栏等,手法基本相同,只是渐变的颜色值不同而已。

和最终的导出的png图片,主要运用了渐变。添加一些图层样式

  图片 26

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

图片 27

9 添加一个渐变。双击渐变条打开渐变编辑的面板。 设置渐变的两个颜色分别为 深绿色 #618926和浅绿色 #98ba40. 移动颜色的中点为 35%的位置。

图片 28

图片 29

图片 30

10 添加内阴影。 改变渲染模式为 Normal。 颜色设置为浅绿色 #c6d894 。设置透明度为 100%。设置距离和大小值为 2px。按照下图的设置调整。

图片 31

11 添加描边。设置大小为 1px 位置为 Inside。 设置颜色为较深的绿色#618926。按照下图的设置调整。

图片 32

现在已经和最终的效果很像了。

图片 33

添加径向(圆形)渐变

12 在Idle图层上,新建一个图层,命名为 Radial_Gradient。改变前景色为#b8cf69。按住ctrl 单击 Idle图层,创建一个圆角矩形选区。 然后切换回到Radial_Gradient图层。

图片 34

13 切换到渐变工具 (G). 设置渐变模式为 径向(圆形)渐变。点击渐变条打开渐变面板。

图片 35

本文由银河官方网站发布于关于我们,转载请注明出处:和最终的导出的png图片,主要运用了渐变

关键词: