Illustrator 8.0基础入门教程（九）：网页按钮制作实例

2016-01-28 18:26 7 1 收藏

Illustrator 8.0基础入门教程（九）：网页按钮制作实例,本例为Illustrator 8.0基础入门系列教程，本文为第九部分，在这一节中我们将学习如何运用Illustrator制作网页按钮实例，希望能给朋友们带来帮助~~

【 tulaoshi.com - Illustrator 】

在学习中遇到问题可以到 Illustrator版块发贴交流！

上一节：Illustrator 8.0基础入门教程（八）

下一节：Illustrator 8.0基础入门教程（十）

我们在浏览网页时、使用多媒体软件的时候常常会看见看到一些制作精美的需交互用的按键。特别是一些立体的按键让网页和多媒体软件增色不少。作为专业的绘图软件Illustrator可以帮助我们制作出漂亮的按键。要让你的homepage漂亮，可要仔细学学怎样做按键哟：）

先让我们看看第一个圆形的立体按键是怎么做出来的。其实仔细的分析一下它仅仅是两个填充了渐变色的圆组成的。怎么样不像想象的这么复杂吧！现在让我们一步一步地学学怎么做的。首先先用圆形工具

画出一个圆。当我们画圆的时候是不是不是很容易画出一个正圆来，这里有个技巧，在画圆的时候按住Shift键就可以方便的画出一个标准的圆。然后在 Gradient浮动面板调一个中间白色（当然你也可以用其它颜色）边缘蓝色的放射状渐变，然后用渐变工具填充圆形。

然后把绘制好的圆复制一个。然后用变形工具

将它缩小到适当的大小。然后旋转到一个恰当的角度（参考下图）

最后将小圆移动到大圆的中心（技巧：为了精确的移动可以使用键盘上的方向键），这个按键就大功告成了。

第二种按键实际上是第一种的灵活运用。把圆形换为圆角的矩形，同样用一个中间白色边缘蓝色的放射状渐变填充，（填充的时候一定要选择好适当的位置，填充的中点放在矩形的一个角上）

同样复制一个矩形，然后将它缩小，左右颠倒。最后将它放在大矩形的中心就完成了。

第三个按键同样是矩形按键，但制作方法与第二个矩形有很大的不同。它是利用图形和色彩渐变工具

制作的。首先画一个圆角矩形。然后画一个较小的圆角矩形并放在大矩形中心。较大的矩形填充较深的颜色，较小的矩形填充较浅的颜色。

用色彩渐变工具

或者object blends make就可以创造出一个漂亮的按键了。

来源:https://www.tulaoshi.com/n/20160128/1467258.html

上一篇： AI绘制摩托车
下一篇： Illustrator教程：定义排列整齐的瓷砖拼贴图案

看过《Illustrator 8.0基础入门教程（九）：网页按钮制作实例》的人还看了以下文章更多>>

PS入门教程：制作网页翻转按钮

标签： PS PS基础 PS抠图 PS调色 PS效果

大家经常在一些网页中看到一种会随着鼠标的接触而变色的按钮，参见范例网页。这称之为鼠标翻转效果，这是根据英文rollover翻译而来的，其实不是很符合中文的语境。其原理是利用两张图片，平时显示一幅，当鼠标接触后换成另外一幅图片。如下图。这样看起来好像是鼠标接触的时候按钮变亮了。现在我们来动手制作，首先在Photoshop中将它们制作...

Illustrator实例教程：使用3D效果制作网页按钮

标签： Illustrator CorelDRAW

在这篇文章中我们将通过使用Adobe Illustrator中的3D效果来创建一组网页按钮。为什么要用这种方法?原因是这种方法替代了使用不同的笔刷和其他工具来创建高光和阴影，只需一步就能实现，充分利用了现成的光线设置和斜角形状。让我们开始! 最终效果图：第一步：按钮形状我们从创建基本的网页按钮形状开始。选择圆角矩形工具，在画板中任...

PS入门教程：制作简单网页物体

标签： PS基础 PS抠图

在掌握了路径和图层样式之后，我们终于可以开始“白手起家”地制作网页了。这不同于以往开启一幅图像后对其进行调整，或将两个图层通过蒙版或图层混合模式进行合成等操作，是完全在一片空白上逐步建立所需的图像。从中大家也会学习到一些关于制作网页设计稿的技巧。其实我们是很希望将全部内容在一本书内写完的，但由于篇幅有限，因此将另外...

网页设计基础:Div+CSS布局入门教程

标签： Web开发

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简...

土人AS入门教程基础篇

标签： flash教程

我写的这些教程，目的是希望初学Flash的爱好者们能多动手，少提问。我下面这些教程面象有 Flash(MX) 基础操作知识的读者。 AS基础 ----------------------------------- 做过Flash动画的Flash爱好者们都知道，要做好一个Flash动画，AS是必不可少的，即使只是很简单的几句代码也能起到整个Flash画龙点睛的作用。这里我只简单的介绍一...

查看更多精彩>>