DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> Fireworks 8 尋夢之旅(7):新增圖層混合模式詳解 (1)
Fireworks 8 尋夢之旅(7):新增圖層混合模式詳解 (1)
編輯:Fireworks基礎     
五、新增圖層混合模式詳解

  在Fireworks8裡面,一個變化最大的地方就是圖層混合模式,居然史無前例的提供了總共39種混合模式,相比較先前的Firewroks 版本來說,增加了足足有26種新的混合模式,而且有的混合模式效果就是在Photoshop軟件中也沒有出現。對於已經習慣了使用Fireworks來進行工作的用戶來說,可以說是一個不小的驚喜,也可以說對於Fireworks這個軟件本身來說是一個非常巨大的變化。

  我們知道,當選擇使用混合模式後,Fireworks 會將它應用於所有所選的對象。單個文檔或單個層中的對象可以具有與該文檔或該層中其它對象不同的混合模式。當具有不同混合模式的對象組合在一起時,群組對象的混合模式優先於單個對象的混合模式,一旦取消群組對象則會恢復每個對象各自的混合模式。

  [提示1]:圖層混合模式不能在元件對象中使用,也就是說即使在元件對象的編輯區內進行了層混合模式的設置,一旦返回到編輯區後,所有的混合模式設置均不會在編輯區上體現出來。

  [提示2]:其實每一種混合模式的使用所產生的效果都是通過對相關數值進行計算後而生成的,具體是如何計算的,我們就不必去管它了,我們所要做的就是要搞清楚在實戰中這些混合模式會產生怎樣的特效以及如何應用它們即可。如果你對於這方面的知識想深入的了解掌握的話,可以通過訪問 Fireworks8提供的幫助文檔中推薦的站點 http://www.pegtop.Net/Delphi/blendmodes/ ,相信你定會了解到更多的相關信息的

  [提示3]:使用位圖工具組的工具對位圖對象進行操作時,可以預先在屬性檢查器上設置其混合模式,然後再對位圖對象進行操作,不過這樣的操作會在位圖對象上直接進行,也就是說對位圖對象會造成破壞,需要三思後再進行操作。

  [提示4]:即使是單獨的層對象,同樣可以進行混合模式的設置。

  [提示5]:可以通過使用屬性檢查器上濾鏡菜單中的“調整顏色|顏色填充”命令,來進行填充顏色的圖層混合模式調整,這是一種在不損原圖像像素情況下的最合理的圖層混合模式應用的方式。

  [提示6]:如果將應用了圖層混合模式的對象導入到Flash8裡面的話,對於兩者共同擁有的圖層混合模式,Flash8均可正常顯示。

  本章主要針對Fireworks8中新增的混合模式來進行講解,對於在原有版本中已經存在的混合模式就不再進行贅述了。

  在具體混合模式的操作中,我們將應用混合模式的顏色稱為“混合顏色”;將混合顏色下的像素顏色稱為“基准顏色”;而對基准顏色應用混合模式的效果所產生的結果則稱為“結果顏色”。在具體的混合模式設置中還要涉及到對“不透明度”的設置,這其實就是對應用混合模式的透明度進行的設置。

  (一)、新增混合模式的總體了解(括號內模式為原有的模式)。

  不透明模式:平均; (正常)

  變暗模式:顏色加深、反選顏色加深、柔化加深;(變暗、色彩增殖)

  變亮模式:顏色減淡、反選顏色減淡、柔化減淡;(變亮)

  光照效果模式:疊加、柔光、模糊光、強光;

  反差模式:排除、取反;(差異、反轉)

  調整顏色模式:紅、綠、藍;(色相、飽和度、顏色、發光度、色調)

  光熱模式:反射、發光、凍結、加熱;

  計算模式:添加的、去除的、去除、插值法、圖章、異或(擦除)。

  (二)、通過具體的實例操作來對新增的圖層混合模式做全面了解。

  本部分操作中使用到的基准圖像為

  混合圖像為兩個使用“紅、綠、藍”顏色進行線性填充的相同的矩形對象

  [注意]:

  1、本部分的教程為了使大家對於土層混合的理解更為清楚,也更為簡單,我們采用了對比操作的方式來進行講解,希望大家能夠比較輕松的來進行本部分的學習。

  2、如不做特別提示的話,所有混合模式的不透明度的設置都為“100%”。

1、平均

  我們在具體操作中,對左側矩形混合對象使用了“平均”混合模式,而將右側矩形混合對象的混合模式保持為“正常”,只是將不透明度的數值設為了50,比較兩側產生的效果,參看下圖,可以發現生成效果基本相同。得出如下結論:

  使用“平均”模式所產生的效果,相當於在“正常”模式下,將不透明度設置為原來的50%後產生的效果。

  2、顏色加深

  將矩形混合圖像的填充效果作一個調整,出現如下圖所示的效果。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved