吕学英 發表於 2014-12-16 16:15:31

Fireworks简单制作渐隐线的两种方法介绍

<p>这篇教程是向琼殿技术社区的朋友介绍Fireworks简单制作渐隐线的两种方法，教程比较基础，适合新手学习，推荐到琼殿技术社区，喜欢的朋友一起来学习吧！</p>
<p><strong>一种是矩形的填充..</strong> </p>
<p><strong>矩形做法一</strong>,适合大部分的情况: </p>
<p>1.用矩形工具画出一个像素高的矩形. </p>
<p align="center"><img border="0" alt="" width="285" height="62" src="https://img.jbzj.com/file_images/article/201412/20141216161453247.gif" /> </p>
<p>2.在面板处选择线性填充,具体的调节如下: </p>
<p align="center"><img border="0" alt="" width="399" height="205" src="https://img.jbzj.com/file_images/article/201412/20141216161453248.gif" /> </p>
<p>面板讲解:大家可以看到最上面有两排箭头.其中</p>
<p><img border="0" alt="" width="39" height="20" src="https://img.jbzj.com/file_images/article/201412/20141216161453249.gif" />这个标志的一排是透明度</p>
<p>这个标志的一排是颜色.</p>
<p>通过在上下点击面板添加新箭头.... </p>
<p>通过这样的渐变可以得到如下的效果 </p>
<p align="center"><img border="0" alt="" width="190" height="38" src="https://img.jbzj.com/file_images/article/201412/20141216161453250.gif" /> </p>
<p><strong>矩形做法二:</strong> </p>
<p>如果是单色背景,可以考虑直接选择颜色箭头中的两端为背景色,中间为你需要的线条颜色,模拟透明效果. </p>
<p><strong>扩展:</strong> </p>
<p>1.矩形并不是一定需要1px的高度,可以任意调节. </p>
<p>2.填充不一定是非得需要线性的,如果你需要更多的效果,可以考虑使用其他的渐变方法进行尝试. </p>
<p>&nbsp;3.通过调节填充手柄,你可以很容易的控制渐隐的方向... </p>
<p align="center"><img border="0" alt="" width="390" height="54" src="https://img.jbzj.com/file_images/article/201412/20141216161453251.gif" /> </p>
<p>4.通过仔细查看渐变的效果,聪明的人应该可以马上看出,firework的矩形并不是纯矢量的,实际上,它还是像素的... </p>
<p>利用矩形渐隐的组合,我们可以很容易的创建如下的效果PNG源文件: </p>
<p align="center"><img border="0" alt="" width="204" height="201" src="https://img.jbzj.com/file_images/article/201412/20141216161453252.png" /> </p>
<p><strong>另外一种就是蒙版形成的渐隐了</strong> </p>
<p>相对于形状填充形成的渐隐效果来说,蒙版的渐隐使用的范围更广泛一些,因为矩形渐变并不能包括一些效果的渐变.例子如下:<br />例子1. </p>
<p align="center"><img border="0" alt="" width="163" height="82" src="https://img.jbzj.com/file_images/article/201412/20141216161453253.gif" /> </p>
<p>例子2[源文件]. </p>
<p align="center"><img border="0" alt="" width="287" height="156" src="https://img.jbzj.com/file_images/article/201412/20141216161453254.png" /> </p>
<p>至于如何做我就不多费口舌了,请看frogit版主的教程:</p>
<p>其中例子二应该是研究这个网站中的渐变效果做出来的. </p>
<p align="center"><img border="0" alt="" width="510" height="328" src="https://img.jbzj.com/file_images/article/201412/20141216161453255.gif" /></p>
<p align="left">教程结束，以上就是Fireworks简单制作渐隐线的两种方法介绍，希望对大家有所帮助！&nbsp;</p>
頁: [1]
查看完整版本: Fireworks简单制作渐隐线的两种方法介绍