web 按钮制作教程 (Illustrator)

这里我们解说如何在 Illustrator 当中制作斜线花纹的 web 按钮。

成品就像上图这样有斜线穿插在渐变之上的 web 按钮。这是在各种各样的网站上都可以见到的设计呢。虽然现在是练习，不过作为素材的话马上就能用了，是个好东西。

首先就来制作 web 按钮的原型。

打开 Illustrator 之后，用 [圆角矩形工具] 来画出圆角长方形，按照上图所示设置渐变。例子当中使用的是浅蓝色的渐变。

现在把 Step01 当中画出来的圆角矩形缩小并复制。

选择圆角矩形，然后点击 [对象->变换->缩放]，弹出 [比例缩放] 对话框，接着按照上图来设定纵横比，并点击复制。

现在已经把 Step01 当中画出来的圆角矩形复制并往内侧缩小了。

对缩小后的圆角矩形按照上图应用渐变。

选择两个圆角矩形，点击 [对象->混合->混合选项]。[混合选项] 对话框打开了之后，选择 [平滑颜色] 然后点击确定。

接下来继续选择两个对象，然后点击 [对象->混合->建立]。

这样的话，就对这两个圆角矩形应用了 [平滑颜色]，制作出平滑渐变的圆角矩形！

这个就是 web 按钮的原型了。应用了 [平滑颜色] 之后，比起单个渐变这个更能体现出深度。

为了接下来的操作，现在就扩展混合。

选择对象之后，点击 [对象->混合->扩展]。这样就能对混合进行扩展并编辑了。

接下来，我们就做些对 web 按钮应用斜线的准备。

按照上图使用钢笔工具绘制两条斜线。线的粗细为 2pt, 颜色为黑色。把两条直线放置在 web 按钮两端刚好穿过的位置上。

现在在 Step08 当中画出来的两条直线之间复制出多条直线。

选择两条直线，然后点击 [对象->混合->混合选项]。打开了 [混合选项] 对话框之后，按照上图所示，设定为 8px 再点击确定。

接下来，在选择两条直线的状态下，点击 [对象->混合->建立]。

这样的话，就可以应用之前在混合选项设置当中设置的数字， 生成 8px 为间隔的直线！这样就成为了 web 按钮斜线的原型。

接下来，将斜线的颜色改成白色 (#FFFFFF), 透明度改为 30%. 之后，为了之后的操作，也要对斜线进行扩展混合。（参考 Step07）

在接下来的 Step 当中，我们就将这些斜线用剪切蒙版来抠出 web 按钮的大小。

现在使用 [剪切蒙版] 来生成抠图用的蒙版。

打开 [图层面板（窗口->图层）]，选择最下面圆角矩形的图层，并按下 Ctrl+C （复制）和 Ctrl+F （复制到前面）。

之后，就把复制出来的图层拖动到最前面（参考上图）。这样就准备好了对斜线抠图的准备。

选择斜线与 Step12 生成的蒙版，然后点击 [对象->剪切蒙版->建立]。

请留意，斜线没有进行混合扩展的话就不能建立剪切蒙版了。请务必对斜线进行混合扩展。（有关混合扩展请参考 Step07）

应用了剪切蒙版之后，web 按钮就有了斜线！

大概样子就出来了呢。这样就可以作为 web 按钮来用了，不过最后还是加一些阴影来提高 web 按钮的质感。

使用钢笔工具来描绘 web 按钮的阴影。

宽度要和 web 按钮的宽度一致。如果直接画不出来的话，就和 web 按钮一样画出一个圆角矩形，一边删除锚点一边使用 [直接选择工具] 微调来画出阴影。

把做出来的阴影与 web 按钮对齐，涂成白色 (#FFFFFF), 透明度设置为 20% 左右。为了让 web 按钮和阴影搭配得更好，请自由调整透明度。

最后在 web 按钮上面放置文字就完成了。

Web 按钮是网页设计的必备素材呢。渐变、颜色等等都可以改变，生成不同的 web 按钮。请务必尝试一下。

この投稿文は次の言語で読めます: 英语, 日语

相关文章