Fireworks蒙版基礎(chǔ)教程 　

　　很多人在學(xué)習(xí)蒙版的時(shí)候會(huì)有困惑，不知道蒙版是做什么的，總是覺(jué)得蒙版的概念很深?yuàn)W，不好理解。其實(shí)在學(xué)習(xí)蒙版之前，我們需要首先來(lái)了解蒙版都能做什么，知道蒙版的作用以后，再來(lái)學(xué)習(xí)如何創(chuàng)建蒙版就不會(huì)覺(jué)得那么難以理解了。

　　Fireworks蒙版基礎(chǔ)教程　　

　　一、蒙版概述

　　簡(jiǎn)單來(lái)說(shuō)，蒙版的作用就是實(shí)現(xiàn)透過(guò)某個(gè)形狀看另外一個(gè)圖形的效果。如圖5-62所示。

　　圖5-62 蒙版的效果

　　除了能夠把圖像顯示在任何一種形狀內(nèi)以外，蒙版還能夠制作圖像漸隱效果，如圖5-63所示。

　　圖5-63 圖像漸隱效果

　　圖像漸隱效果是指圖像由清晰到透明的一種過(guò)度效果，過(guò)度的形式有很多，上面這張圖像是圖像由右到左的逐漸變透明，在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)?？梢允褂脠D像漸隱效果，使圖像逐漸過(guò)度到網(wǎng)頁(yè)的底色上，如圖5-64所示。

　　圖5-64 圖像漸隱效果在網(wǎng)頁(yè)中的應(yīng)用

　　二、Fireworks CS3的蒙版屬性

　　在Fireworks CS3中創(chuàng)建蒙版之后，【圖】面板中的圖層會(huì)變成兩個(gè)縮略圖，左側(cè)的縮略圖為被蒙對(duì)象，右側(cè)的縮略圖為蒙版，如圖5-65所示。

　　圖5-65 【層】面板中的蒙版縮略圖

　　選中右側(cè)的蒙版縮略圖之后，在【屬性】面板中會(huì)顯示蒙版的屬性，如圖5-66所示。

　　圖5-66 蒙版屬性

　　1. 路徑輪廓蒙版

　　這種類型的蒙版可以透過(guò)路徑輪廓清楚的看到被蒙對(duì)象，而且跟矢量路徑的顏色沒(méi)有任何的關(guān)系，也就是說(shuō)作為蒙版的路徑不管填充了什么顏色，蒙版效果仍舊是非常清晰的。如果選中了“顯示填充和筆觸”那么可以顯示蒙版的邊緣路徑效果，如圖5-67所示。

　　圖5-67 路徑輪廓蒙版效果

　　2. 灰度外觀蒙版

　　這種類型蒙版也是透過(guò)路徑看到被蒙對(duì)象，但是看到被蒙對(duì)象的清晰度就會(huì)受到路徑的填充色和描邊色的深淺影響，這種類型蒙版的填充色和描邊顏色都為灰度圖，如果蒙版的顏色為白色，則蒙版下的圖像能夠清晰顯示。如果蒙版的填充顏色為黑色，則蒙版下的圖像則完全透明。如果蒙版的填充顏色為中間的灰色，則蒙版下的圖像將以半透明裝顯示。填充下邊的邊緣屬性中可以設(shè)置邊緣羽化。

　　圖5-68 灰度外觀蒙版效果

　　利用灰度外觀蒙版受填充色深淺的影響，我們可以輕松實(shí)現(xiàn)圖像漸隱效果，其原理就是給用來(lái)蒙版的矢量路徑填充由黑色到白色的漸變色，這樣蒙版后黑色的一邊將為透明，白色的一邊為清晰的效果，從而實(shí)現(xiàn)圖像漸隱的效果，如圖5-63所示。

　　三、 在Fireworks CS3中創(chuàng)建蒙版

　　在Fireworks CS3中創(chuàng)建蒙版的很多，但是最終的目的只不過(guò)是生成蒙版，所以基本上記住一兩種生成蒙版的方法，重點(diǎn)掌握蒙版的屬性就足夠了，另外再了解蒙版的刪除禁用和啟用就可以了。

　　粘貼于內(nèi)部

　　使用粘貼于內(nèi)部命令是Fireworks CS3中最簡(jiǎn)單的創(chuàng)建蒙版的方法，需要注意的是，粘貼于內(nèi)部創(chuàng)建的蒙版默認(rèn)是路徑輪廓蒙版，所以和作為蒙版的路徑顏色無(wú)關(guān)，下面通過(guò)一個(gè)具體的實(shí)例來(lái)給大家進(jìn)行介紹，具體的操作步驟如下：

　　1. 新建一個(gè)Fireworks文件。

　　2. 在彈出的【新建文檔】對(duì)話框中設(shè)置畫(huà)布的寬度為“350”像素、高度為“250”像素，背景顏色為白色。如圖5-69所示。

　　圖5-69 新建文檔對(duì)話框

　　3. 把準(zhǔn)備好的手機(jī)圖像素材復(fù)制到創(chuàng)建的畫(huà)布中，并且調(diào)整好大小和位置，如圖5-70所示。

　　圖5-70 復(fù)制手機(jī)素材到畫(huà)布

　　4. 使用【橢圓】工具，在畫(huà)布的右側(cè)繪制一個(gè)正圓，這個(gè)正圓要比畫(huà)布大很多，如圖5-71所示。

　　圖5-71 繪制一個(gè)正圓

　　5. 打開(kāi)準(zhǔn)備好的素材圖像，由于準(zhǔn)備的素材圖像尺寸大于我們的目標(biāo)尺寸，所以需要選擇【修改】@@【畫(huà)布】中的【圖像大小】命令來(lái)縮小圖像素材，以適應(yīng)我們的需求，如圖5-72所示。

　　圖5-72 縮小圖像素材的尺寸

　　6. 選中縮小后的圖像素材，選擇【編輯】菜單下的【復(fù)制】命令，然后選中剛剛繪制的正圓，選擇【編輯】菜單下的【粘貼于內(nèi)部】(快捷鍵為：【Ctrl+Shift+V】)命令，這樣就可以把圖像素材顯示在正圓中了，如圖5-73所示。

　　圖5-73 把圖像素材粘貼到正圓的內(nèi)部

　　7. 這時(shí)圖像素材雖然顯示到了正圓的內(nèi)部，但是并不是我們所需要的位置，如果直接使用【指針】工具拖拽的話，是正圓和內(nèi)部的圖像一起移動(dòng)，如果我們只需要調(diào)整正圓內(nèi)部圖像素材的位置，而不希望改變正圓的位置，可以點(diǎn)擊【層】面板中的關(guān)聯(lián)圖標(biāo)，取消圖像和蒙版之間的關(guān)聯(lián)，這樣就可以任意調(diào)整圖像素材的位置，而不改變正圓的位置了，如圖5-74所示。

　　圖5-74 調(diào)整蒙版中圖像的位置

　　8. 位置調(diào)整完畢后，可以把蒙版中圖像和正圓的關(guān)聯(lián)繼續(xù)關(guān)聯(lián)起來(lái)，整個(gè)圖像效果就制作完畢了，最終效果如圖5-75所示。

　　圖5-75 最終完成的效果

　　通過(guò)掌握【粘貼于內(nèi)部】命令，我們可以把任何一張圖像素材顯示到任意一個(gè)形狀中去。

　　組合為蒙版

　　使用組合為蒙版，同樣可以創(chuàng)建蒙版效果，需要注意的是，組合圍蒙版默認(rèn)創(chuàng)建的是灰度外觀的蒙版。下面通過(guò)一個(gè)簡(jiǎn)單的實(shí)例來(lái)給大家進(jìn)行說(shuō)明，具體操作步驟如下：

　　1. 新建一個(gè)Fireworks文件。

　　2. 打開(kāi)準(zhǔn)備好的圖像素材，如圖5-76所示。

　　圖5-76 打開(kāi)準(zhǔn)備好的圖像素材

　　3. 復(fù)制另外一張魚(yú)類圖像素材到畫(huà)布中來(lái)，并且調(diào)整好大小尺寸，如圖5-77所示。

　　圖5-77 復(fù)制另外一張圖像素材到畫(huà)布

　　4. 使用【矩形】工具，在繪制一個(gè)和畫(huà)布一樣尺寸的矩形，并且填充線性漸變色。設(shè)置漸變色的方向?yàn)榇怪狈较?，最上方填充白色，最下方填充黑色，如圖5-78所示。

　　圖5-78 繪制矩形，填充線性漸變色

　　5. 同時(shí)選中魚(yú)類的圖像素材和這個(gè)矩形，選擇【修改】@@【蒙版】@@【組合為蒙版】命令，得到的效果如圖5-79所示。

　　圖5-79 使用【組合為蒙版】命令后得到的效果

　　6. 在【層】面板中選擇右側(cè)的矩形蒙版，調(diào)整漸變色的范圍，適當(dāng)增加黑色部分所占的面積，這樣可以讓蒙版下方的透明部分增加，最終得到的效果如圖5-80所示。

　　圖5-80 調(diào)整漸變范圍后得到的最終效果