Fireworks制作渐变的填充效果
<p>我们制作网页的时候，为了美观都需要制作有渐变效果的工具栏和按钮，那我今天就来教大家怎样制作渐变的填充效果，不会的朋友可以参考本文，来看看吧！</p><p><span style="color: #ff0000"><strong>步骤：</strong></span></p>
<p>1、打开fireworks 并新建个一块画布。</p>
<p>（大小、颜色那些根据自己的需要选择，我这里的选择只做示范）</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/fireworks/201704/2017040114212157.png" /></p>
<p>2、然后再右侧的工具栏上选择“<span style="color: #ff0000"><strong>矩形工具</strong></span>”，按住鼠标右键在画布上拖曳画出一个矩形。</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/fireworks/201704/2017040114212158.png" /></p>
<p>3、用鼠标单击左键选中矩形，在下面的<span style="color: #ff0000"><strong>属性</strong></span>面板，就可以调节矩形的大小、颜色等。</p>
<p>这时我把矩形颜色调整为我需要的灰色</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/fireworks/201704/2017040114212159.png" /></p>
<p>4、这时选择属性<span style="color: #ff0000"><strong>面板</strong></span>的<strong>填充类型</strong>，选择“<span style="color: #ff0000"><strong>渐变</strong></span>”，至于渐变的类型大家按需要来选择，不过我这里选择“<span style="color: #ff0000"><strong>线性</strong></span>”，线性渐变也是制作网页工具栏的最常用渐变</p>
<p>（线性渐变默认是从上往下渐变）</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/fireworks/201704/2017040114212160.png" /></p>
<p>5、这时我们去点击“<span style="color: #ff0000"><strong>属性</strong></span>”面板的填充类别就可以自己去调渐变了</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/fireworks/201704/2017040114212161.png" /></p>
<p>6、移动这两个颜色控制器我们就可以调节渐变的效果了</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/fireworks/201704/2017040114212162.png" /></p>
<p>7、当鼠标移近上面的颜色条时，鼠标旁边多了个加号，这时我们点击鼠标，就会增加多了一个颜色控制器，继续按下鼠标，就又会增加一个颜色控制器</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/fireworks/201704/2017040114212263.png" /></p>
<p>8、那么颜色控制器多了怎么办？把鼠标放在颜色控制器上，长按鼠标左键，这时鼠标就会变成一只小手，然后往下拖曳鼠标，这样颜色控制器就会消失</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/fireworks/201704/2017040114212264.png" /></p>
<p>9、这时我们点击颜色控制器，还可以选择颜色，这时为了有一个较好的渐变颜色，我选择</p>
<p><span style="color: #ff0000"><strong>白色——>灰色——>白色</strong></span> 的渐变</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/fireworks/201704/2017040114212265.png" /></p>
<p>10、大功告成</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/fireworks/201704/2017040114212266.png" /></p>
<p style="text-align: left">以上就是Fireworks制作渐变的填充效果方法介绍，操作很简单，希望这篇文章能对大家有所帮助！</p>
<p style="text-align: left"><span style="color: #ff0000"><strong>相关阅读：</strong></span></p>
<p style="text-align: left">Firewoks教程:图片的渐变矢量风格</p>
<p style="text-align: left">Fireworks折叠渐变制作电视雪花动画</p>
頁:
[1]