利用Dreamweaver3.0你可以輕輕松松讓圖像呈現出陰影、模糊、運動、光暈、波浪、淡入淡出等眾多效果,你再也不用為了達到某種圖像效果而動用Photoshop這個龐然大物了。下面我們就來具體了解一下圖像特效的制作方法。
在Dreamweaver3.0中為圖像制作特效,實際上就是利用樣式表(CSS)功能來定義圖像的各種參數,讓它呈現出各種特技效果,但是這些特效並不增大圖像文件的大小,所以不會影響頁面的下載速度,這對於我們有限的網絡帶寬來說是非常寶貴的。下面我們首先來看如何創建一個樣式表。
1.單擊Window菜單下的CSS Styles命令,或按F7鍵,彈出樣式表編輯窗口。
2.單擊樣式表編輯窗口中的New按鈕,彈出對話窗口,在該窗口中選擇“Make Custom Style”選項,然後單擊OK。
3.在彈出的定義樣式表窗口中,單擊Category下的Extensions類型,然後在Filter項目中選擇一個圖像特效類型,定義它的各種參數。Dreamweaver內置有16種圖像特效類型。
4.定義完畢,單擊OK,回到樣式表編輯窗口。
5.選定頁面上的圖像,將生成的樣式表作用於該圖像。
6.保存該網頁,然後在浏覽器中打開,就可以看到圖像的特效了。
下面我們來學習16種特效類型和它的設置方法。
1.Alpha:透明效果
它可以使圖像呈現出透明效果,共有七種參數:
opacity:不透明度,范圍是0~100,0表示完全透明,100表示完全不透明。
finishopacity:結束時的不透明度,它用來設定圖像結束時的不透明度,利用它可以制作出透明漸進的效果,取值范圍同opacity。
style:樣式,用來指定圖像漸變的類型,0表示沒有漸變,1表示直線漸變,2表示圓形漸變,3表示矩形漸變。
startX和startY:表示漸變開始的X、Y坐標值。
finishX和finishY:表示漸變結束的X、Y坐標值。
2.BlendTrans:漸隱漸現效果
它可以使圖像呈現出淡入淡出的特效,參數duration用來設定漸隱漸現的時間,以秒為單位。
3.Blur:動感模糊效果
讓圖像產生移動模糊的效果,有三種參數:
add:是否在運動模糊中使用原有的目標,0表示“否”,1表示“是”。
direction:模糊移動的角度,范圍是0~360度。
strength:圖像模糊的力度,單位是像素,取自然數。
4.Chroma:色度
它用來把圖像中的某種顏色變成透明的。參數color用來指定產生透明的顏色,可設置為Hex格式(即#RRGGBB型)或通用的英文名稱,如red(紅色)。
5.Dropshadow:下拉陰影效果
它有四種參數:
color:指定陰影的顏色,格式同上。
offX:陰影在水平方向上的偏移值,正數表示陰影在圖像的右方,負數表示陰影在圖像的左方。
offY:陰影在垂直方向上的偏移值,正數表示陰影在圖像的上方,負數表示陰影在圖像的下方。
positive:陰影的透明度,0表示透明像素生成陰影,1表示不透明像素生成陰影。
6.FlipH:水平翻轉
使圖像在水平方向上產生翻轉。
7.FlipV:垂直翻轉
使圖像在垂直方向上產生翻轉。
8.Glow:光暈效果
使圖像周圍按選定的顏色產生光暈效果,有兩種參數:
lcolor:產生光暈的顏色。
lstrength:呈放射幅度,范圍是1~255,數字越大光暈效果越強烈。
9.Gray:黑白效果
將彩色圖像轉變為黑白圖像,圖像中的色彩以灰度級別顯示。
10.Invert:反轉效果
逆轉圖像顏色,也就是把圖像中的色彩和亮度反轉顯示。
11.Light:燈光效果
將圖像中的所有可見像素變成黑色。
12.Mask:蒙版效果
把圖像中的所有可見像素遮罩變成透明,而其它的部分以指定的顏色填充,它的參數color就是用來指定遮罩的顏色的。
13.Shadow:陰影效果
它產生的效果介於光暈和下拉陰影之間,有漸進效果,立體感很強,它的兩個參數是:
color:指定陰影的顏色。
direction:設置陰影的方向,范圍是0~360度。
14.Wave:波浪效果
讓圖像產生波浪一樣的變形效果,非常酷。以前只有Java小程序才能實現這樣的效果。它的各個參數的含義是:
add:表示是否顯示原圖像,0表示不顯示,1表示顯示,也就是原圖像出現在最後的效果中。
freq:波形扭曲的次數。
ightstrength:光照的強度,范圍是0~100,0表示最弱,100表示最強。
phase:改變波形的形狀,范圍是0~360。
strength:波形的振幅,取自然數。
15.Xray:X光透視效果
產生像我們平時拍照的X光片一樣的圖像效果,相當於先用灰度功能去掉色彩信息,然後再將其反轉。
16.RevealTrans:圖像轉換顯示效果
它包含了24種圖像效果,有兩個參數:
duration:用來定義圖像轉換的時間,以秒為單位。
ransition:指定圖像轉換的類型,共有24種,代號為023。