您的位置:银河官方网站 > 关于我们 >   如果大家得到这样的结果,我们开始教程

  如果大家得到这样的结果,我们开始教程

2019-10-07 06:26

Photoshop 简单水晶按钮制作 (载入中...)

水晶按钮制作新建一个文件,在工具箱中选择圆角矩形工具,如下图所示设置

Photoshop制作水晶按钮网页导航 (载入中...)

  本文为 原创,转载需注明出处。

银河官方网站 1

  水晶效果按钮在很多网站运用得越来越多,在下面教程中,我们就跟着作者的思路,学习如何用photoshop简单制作网页水晶效果导航条,你可以举一反三,调颜色,变形状,这些都可以根据页面的整体效果做调整~

  点击这里下载PSD源文件

  新建一个图层后,在画布上拉出一个长方形,就得到这样的结果。(为了更好的给大家讲解,这个图放大了400%显示)

  我们先看看效果图:

  效果:

银河官方网站 2

  银河官方网站 3

  银河官方网站 4

  如果大家得到这样的结果

  效果图

  好了,我们开始教程

银河官方网站 5

  我们开始学习教程:

  新建一个文件,在工具箱中选择圆角矩形工具,如下图所示设置

银河官方网站,  就需要将“对齐像素”的选项给勾上

  新建一个文件,在工具箱中选择圆角矩形工具,如下图所示设置

  银河官方网站 6

银河官方网站 7

  银河官方网站 8

  新建一个图层后,在画布上拉出一个长方形,就得到这样的结果。(为了更好的给大家讲解,这个图放大了400%显示)

  为这个图层添加图层样式

  图1

  银河官方网站 9

银河官方网站 10

  新建一个图层后,在画布上拉出一个长方形,就得到这样的结果。(为了更好的给大家讲解,这个图放大了400%显示)

  如果大家得到这样的结果

银河官方网站 11

  银河官方网站 12

  银河官方网站 13

银河官方网站 14

  图2

  就需要将“对齐像素”的选项给勾上

  得到结果如图所示,顺便在样式调板中存储着这个样式

  如果大家得到这样的结果

  银河官方网站 15

银河官方网站 16

  银河官方网站 17

  为这个图层添加图层样式

  使用矩形选框工具,绘制出一个矩形的选区

  图3

  银河官方网站 18

银河官方网站 19

  就需要将“对齐像素”的选项给勾上

  银河官方网站 20

  新建图层后,填充黑色到白色的径向渐变

  银河官方网站 21

  银河官方网站 22

银河官方网站 23

  图4

  得到结果如图所示,顺便在样式调板中存储着这个样式

  并将该图层的混合模式改为:柔光,不透明度:60%

  为这个图层添加图层样式

  银河官方网站 24

银河官方网站 25

  银河官方网站 26

  使用矩形选框工具,绘制出一个矩形的选区

  新建图层,再绘制出一个矩形选区

  图5

  银河官方网站 27

银河官方网站 28

  银河官方网站 29

  新建图层后,填充黑色到白色的径向渐变

  填充成白色

  图6

  银河官方网站 30

银河官方网站 31

  银河官方网站 32

  并将该图层的混合模式改为:柔光,不透明度:60%

  并将该图层的混合模式改为:线性减淡,不透明度:30%

  图7

  银河官方网站 33

银河官方网站 34

  得到结果如图所示,顺便在样式调板中存储着这个样式

  新建图层,再绘制出一个矩形选区

  使用文字工具写上要的文字,注意在这里要将字体的边缘设置为:无

  银河官方网站 35

  银河官方网站 36

银河官方网站 37

  图8

  填充成白色

  之前我们创建过一个样式,还记得吗,给文字应用这个样式就可以了。

  使用矩形选框工具,绘制出一个矩形的选区

  银河官方网站 38

银河官方网站 39

  银河官方网站 40

  并将该图层的混合模式改为:线性减淡,不透明度:30%

  后面的工作就是换换颜色,改改文字就可以了。

  图9

  银河官方网站 41

银河官方网站 42

  新建图层后,填充黑色到白色的径向渐变

  使用文字工具写上要的文字,注意在这里要将字体的边缘设置为:无

银河官方网站 43

  银河官方网站 44

  银河官方网站 45

  图10

  之前我们创建过一个样式,还记得吗,给文字应用这个样式就可以了。

  并将该图层的混合模式改为:柔光,不透明度:60%

  银河官方网站 46

  银河官方网站 47

  后面的工作就是换换颜色,改改文字就可以了。

  图11

  银河官方网站 48

  新建图层,再绘制出一个矩形选区

  点击这里下载PSD源文件

  银河官方网站 49

  图12

  填充成白色

  银河官方网站 50

  图13

  并将该图层的混合模式改为:线性减淡,不透明度:30%

  如果大家得到这样的结果,我们开始教程。  银河官方网站 51

  图14

  使用文字工具写上要的文字,注意在这里要将字体的边缘设置为:无

  银河官方网站 52

  图15

  之前我们创建过一个样式,还记得吗,给文字应用这个样式就可以了。

  银河官方网站 53

  图16

  后面的工作就是换换颜色,改改文字就可以了。

本文由银河官方网站发布于关于我们,转载请注明出处:  如果大家得到这样的结果,我们开始教程

关键词: