firework實(shí)例教程_第1頁
firework實(shí)例教程_第2頁
firework實(shí)例教程_第3頁
firework實(shí)例教程_第4頁
firework實(shí)例教程_第5頁
已閱讀5頁,還剩83頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、Fireworks MX 教程(一)制作虛線操作步驟:1. 啟動(dòng)Fireworks MX,新建一個(gè)文件,文件寬和高都設(shè)為200象素,也可以是任意大小,背景為白色。2. 單擊“工具”面板“矢量”部分的“線條”工具,并且按住鍵盤上的“Shift ”鍵,在編輯區(qū)任意繪制一條直線。I矢量II3. 在“工具”面板的“選擇”部分中選擇“指針”工具,選中這條直線。4.單擊“屬性檢查器”中的“描邊種類”下拉框5.選中“筆觸選項(xiàng)”。無13E本卜卜卜!>毛孩屯共r卜艇機(jī)卜左目垓卜|3J6。選擇“鉛筆”7.選擇“彩色鉛筆”8。在紋理中設(shè)置紋理為“ 0 %9。單擊“高級(jí)”按鈕1 碗3 JI二創(chuàng)片.zl1居中于路

2、輕 廠在君iLt方埴充73 11日惓芭肚帥軸帰驗(yàn)til10. 在“間距”項(xiàng)輸入“ 200%”,注意這里是手工輸入,這個(gè)步驟是產(chǎn)生虛線效果的關(guān)鍵。在網(wǎng)頁設(shè)計(jì)中,也常采用“300%”這個(gè)值。其實(shí)到這一步,虛線已經(jīng)做好了。刷子12?!按笮 笔怯脕碓O(shè)定刷子尖端的大小。網(wǎng)頁制作中常選擇“大小”為1來制作細(xì)虛線。11. 在“形狀”選項(xiàng)卡,如果不選中“正方形”,并且“大小”大于 8,刷子尖端就顯示為圓形。制作細(xì)虛線時(shí)需要選中“正方形”尖端也被稱作筆觸。13。“方向”設(shè)置刷子尖端寬度。正圓或者正方形,選擇“100”或者“ 0”14?!敖嵌取敝粚?duì)正方形有影響。15。為了方便以后使用這種自定義的虛線筆觸,需要把這

3、些步驟保存為命令。選中“歷史記錄”面板中的描邊。17.在“保存命令”對(duì)話框中,輸入名稱。實(shí)例中輸入“虛線”18。當(dāng)需要應(yīng)用虛線的時(shí)候,選擇“命令”菜單下的“虛線”即可命令收)濾毓工)窗口 管理保存的命令怎) 著理擴(kuò)展功能堪) 運(yùn)行腳本®創(chuàng)意數(shù)據(jù)驅(qū)動(dòng)的圖形向?qū)囊d調(diào)整所選對(duì)蠡犬小 重萱雪告對(duì)話框 面按布局設(shè)置Riew腳本Fireworks MX 教程(二)制作環(huán)繞文字5.在“屬性”檢查器中輸入新的寬度(w)或高度(h)值,這里都是1301.新建寬和高都是300像素的文件,背景設(shè)為白色2.點(diǎn)選"工具”面板中的“文本”工具,在工作區(qū)輸入文本“,字體選擇“ Arial Black字

4、號(hào)為20像素大小,顏色為黑色。WWW.SI n ot eac h er.c om cn3.點(diǎn)選“工具”面板“矢量”部分的“橢圓”工具|o A樓 “拒珍工具如E 0園桶矩題工具0D4.按住“ Shift ”鍵,在工作區(qū)畫一個(gè)圓w w w.s I n nt &achco 屬性路徑II寬:高:|130xFIY: |1086.單擊“填充顏色框”圖標(biāo)5.在“屬性”檢查器中輸入新的寬度(w)或高度(h)值,這里都是1305.在“屬性”檢查器中輸入新的寬度(w)或高度(h)值,這里都是1307.在顏色彈岀窗口中選擇“透明按鈕”95.在“屬性”檢查器中輸入新的寬度(w)或高度(h)值,這里都是1305

5、.在“屬性”檢查器中輸入新的寬度(w)或高度(h)值,這里都是1308.選中“描邊”工具。9.在“描邊種類”中選擇“鉛筆” > “一像素柔化”5.在“屬性”檢查器中輸入新的寬度(w)或高度(h)值,這里都是1305.在“屬性”檢查器中輸入新的寬度(w)或高度(h)值,這里都是130"I廠竦素柔化二| 邊綠:了 J 紋理:dha三115 jJ10.按住Shift鍵,使用“指針”工具同時(shí)選擇圓和文字5.在“屬性”檢查器中輸入新的寬度(w)或高度(h)值,這里都是1305.在“屬性”檢查器中輸入新的寬度(w)或高度(h)值,這里都是130 gii5.在“屬性”檢查器中輸入新的寬度(w

6、)或高度(h)值,這里都是1305.在“屬性”檢查器中輸入新的寬度(w)或高度(h)值,這里都是1305.在“屬性”檢查器中輸入新的寬度(w)或高度(h)值,這里都是13011. 打開菜單欄的“文本”菜單,單擊“附加到路徑”立本 E 命令© 泯鏡 窗口 n;字萍世)大小卜祥式對(duì)齊®編輯器"附加到路徑迅C ti-l+Shi ft+T方向©轉(zhuǎn)換為路徑(£) C ti-l+Shi ft+F檢查拼寫Shi ft+FT 拼寫設(shè)置12. 環(huán)繞文字就做好了13. 如果想旋轉(zhuǎn)文字,選擇“工具”面板中的“縮放工具”n 1i d * 縮族工員a曇傾斜工具(Q)刃扭

7、曲工貝(Q)14. 岀現(xiàn)圓形箭頭,就可以旋轉(zhuǎn)文字15. 如果希望文本沿路徑的內(nèi)側(cè)排列,選擇“文本"菜單中的“倒轉(zhuǎn)方向”文本侖專©綁詞口國大小捽式刑齊®kf編鎬器d).ITO爭艇© 從昶脫甜如CtrlfSLifY方向| 齢方向J轉(zhuǎn)按為蹄徑飪Ctrl*stift*F拼寫設(shè)苴oil.Shi£t+F7Fireworks MX教程(三)改變圖片大小1.打開一個(gè)圖片。此圖片大小為寬2950,高2094。目的是要把這個(gè)圖片變成寬400的圖片35: |2950 I: |02.打開“修改”菜單,單擊“畫布”里的“圖象大小”畫布©團(tuán)象夫小Q).二.1畫布

8、犬小©噸畫布顫色X)動(dòng)畫(I)k元件弾出菜單慘U畫布)Ctrl+Alt+T符合畫布匹)Ctrl十A1計(jì)F慕版迥選擇性JTEG施轉(zhuǎn)180-修改繾)文本 命令© 濾蹟窗口 幫助但)旋轉(zhuǎn)SO*順時(shí)針 癥轉(zhuǎn)90"逆時(shí)針平面化所選(ICtrl+Alt+Shi ft+Z 商下合并)CtrHE平面化層QL)組合路徑迪) 改變圖徑g)組合Ctrl+G3.在寬度中輸入4004.選擇“文件”菜單中的“導(dǎo)岀”,給文件命名,保存即可立件世)編輯 視團(tuán) 選擇新建応)打開Q)-打開攝近的文件(X)重新構(gòu)建表QJ).掃描込)關(guān)閉©Ctrl4ICtrl+0卜Ctrl+r另存対 保存副本

9、怕 還原電)Ctrl+SCtrl+Shi ft+S導(dǎo)入(X)-Ctrl+R1導(dǎo)出Ctrl+Shj£t+K導(dǎo)岀預(yù)覽® 更新 HTML CH).Ctrl+d£Sft+X號(hào)出向?qū)?#169; 批處理9).在瀏覽器中預(yù)覽QT)卜貝fir設(shè)置 打印HTHL設(shè)量心Ctrl+F退出堪)Ctrl+QFireworks MX教程(四)羽化圖片1. 打開一個(gè)圖片。2. 點(diǎn)擊工具”面板位圖”部分的選取框”工具。也可以選擇 橢圓選取框”工具|B pIIIL *; ,選取firra如'楠凰選取框那工具血)卜3.選擇部分圖象。4 在屬性檢查器中,邊緣”項(xiàng)中選擇 羽化5調(diào)整羽化大小邊掾

10、wt23匣 r6 打開選擇”菜單,單擊反選選擇 修改 文本Q)命令© 瀨選擇全部)Ctrl+A取消選擇辺)Ctrl+DLtrll-KigtLt部分選定Ctrl+Left選擇相個(gè)額色(X)Ctrl+Shift+Ik.羽化電)擴(kuò)展選取框Q(). 收縮選取框© ,.邊框選取框0) 使選取框平滑)一一保存位圖所選)恢復(fù)位圖所選®7 反選過的圖片:8 .按鍵盤上的Delete鍵刪除9 羽化后的圖片:fireworks MX教程(五)缺角矩形的制作1. 新建一個(gè)寬為150象素,高為100像素的文件,背景色任意。2. 選中工具面板中的矩形工具,在編輯區(qū)畫一個(gè)矩形廈未命名-l.p

11、iig e loo%葩形)* 回貝原始預(yù)號(hào)|z幅丨4幅FP 31412 Q | ZOO x 1003.選擇工具面板矢量部分的未命名-i png 100% C2 對(duì).刀子工具”,并且按住Shift鍵,把矩形右上角的邊框進(jìn)行切割。原始預(yù)監(jiān)丨2幅丨4幅| Q200 * 100點(diǎn)選工具”面板中的 部分選定”工具杠部分選定"工具認(rèn)16.選擇頂點(diǎn)。7按鍵盤上的DEL鍵刪除工具”面板矢量部分的鋼筆”工具。8.繼續(xù)把左角變成缺角。選擇9在左下角的兩個(gè)邊框等距離各單擊一下。10.使用 部分”選定工具選擇左下角的頂點(diǎn)11.按鍵盤上的DEL,刪除左下角頂點(diǎn)后如圖fireworks MX教程(六)制作兩頭半

12、圓的矩形1.在 工具”面板的 矢量”部分中選擇 圓角矩形”工具。O AA 嚨形M工具Of)品* 圓角矩形工具CU) °“楠圓"工具01)E O“寥邊形”工具0J)2 .在屬性檢查器中,單擊矩形圓度旁邊的滑塊,拖動(dòng)滑塊到1003. 在工作區(qū)畫一個(gè)兩頭半圓的矩形。fireworks MX教程(七)制作漸變按鈕1.使用矩形工具在工作區(qū)畫一個(gè)矩形。2.在 工具”面板位圖”部分中的油漆桶”工具上單擊并按住鼠標(biāo)按鈕。從出現(xiàn)的彈出菜單中選擇漸變”工具p* I5 £恐I矢量命樸油漆桶杯工具(G)'“漸變丹工貝(G)3. 單擊屬性檢查器中的 填充顏色”框。選擇 線性”填充。

13、懲1 jJ邊竦:1消除誘齒二廠T紋理:1唄r透明73廠J4. 打開 編輯漸變"彈岀窗口,在色階下面單擊添加一個(gè)色樣。實(shí)例中添加的色樣在中間B Q5單擊色樣,分別設(shè)置幾個(gè)色樣的顏色6在矩形上,由上向下拖動(dòng),一個(gè)漸變按鈕就做好了fireworks MX教程(八)制作圓角三角形1.選擇 多邊形”工具。O A0 “走形“工具00p O圓角矩形工具(V O “橢圓”工具m2 .在屬性”檢查器中,在 邊”文本框中輸入3日|叭t創(chuàng)形狀1爹邊形邊F ti角度:|50廠自動(dòng)3.按住Shift鍵,在畫布上從上到下拖動(dòng),畫岀一個(gè)正三角形原始預(yù)覽|2幅| 4 ig |; 1 ;>畫布© |動(dòng)

14、畫D卜元件彈出菜單(E棊版的選擇性平面化所選(日Ctrl+Alt+5hift+Z 向下合并側(cè)Qrf+E平面化層(Q|喪形®排列®對(duì)齊(啞組合路徑(Q) 1改變路徑(日J(rèn)姐合Ctrl+G-取消組合( ar+5hift+G!14打開菜單:修改 改變路徑 伸縮路徑。修改文本(D 命令Q 濾鎮(zhèn)窗口(刪幫助伸縮路徑實(shí)埴荒(也消除需齒壇充(也 炳化埴充(Q)簡化( 擴(kuò)展筆融5方向選擇 外部”寬度為15,也可以是其它數(shù)值,角選擇圓弧,如下圖6.做好的圓角三角形fireworks MX 教程(九)制作抽線圖1.打開一幅圖像。2.選擇矩形”工具3.點(diǎn)擊屬性檢查器上的填充類別下拉框。實(shí)心4.單

15、擊填充選項(xiàng)動(dòng)抖心更案無實(shí)岡圖射 狀形形放 性射圓形錐狀狀級(jí)浪紋疊 線矽楠矩圓星務(wù)波波緞?wù)?. 在如下圖中,設(shè)置 填充類別”為實(shí)心,也可以試試其它項(xiàng)。紋理為水平線4。紋理總量為100%,只要不為0就可以。選擇透明項(xiàng)。在紋理總量中不為 0,就可以選中透明項(xiàng)。6. 使用矩形工具在圖像上拖動(dòng),覆蓋圖像,抽線圖就做好了踐 SJ146.JPG®> 1 00% (拒飛嚴(yán)-Ini x|原始1預(yù)覽1 2 幅 | 4 H > 11200 x 142Fireworks MX 教程(十)熒光按鈕1.新建一個(gè)文件,大小任意,背景為透明。2.在透明畫布上,使用圓角矩形工具畫一個(gè)兩頭半圓的按鈕,顏色為

16、黑色。制作方法見制作兩頭半圓的矩形一文。3選中當(dāng)前圖層,單擊層面板右上角的彈岀菜單按鈕,在彈岀的菜單中選擇復(fù)制圖層命令,復(fù)制當(dāng)前選定圖層,在彈岀對(duì)話框中選擇 頂端”,將復(fù)制的圖層命名為 效果層”。蒯建圖象新建層(阻共享此層復(fù)制層數(shù)量廠T插入新展:ia塑醱廣當(dāng)前層之前r當(dāng)前層之后©£在屁部)確定 | 取消 |4.在層面板中,選中剛才命名的效果層,把效果層中的按鈕變成白色。用縮放工具對(duì)其進(jìn)行縮放操作,縮放后的效果:在屬性面板中選擇5.對(duì)縮放后的圖形應(yīng)用透明漸變效果。線性”漸變?yōu)榭?邊漆:消除靄齒紋理:ImdOII6.點(diǎn)擊油漆桶旁邊的顏色塊,彈岀漸變顏色設(shè)置面板7。設(shè)置左邊的顏色

17、塊顏色為白色,右邊透明塊的不透明為0不透明奩|0.1二1槪性2d 差: T8在效果層上從上到下拖動(dòng)應(yīng)用白色到透明的漸變。9最終效果如下圖Fireworks MX 教程(一)Mac按鈕1.新建一個(gè)文件,背景色自定。使用圓角矩形工具,在編輯區(qū)繪制一個(gè)圓角矩形,矩形寬120象素,高40象素,矩形圓度為502.選中這個(gè)圓角矩形,在屬性面板上,描邊設(shè)為無,填充方式為線性,填充顏色設(shè)置為灰色到白色。選取油漆桶工具,從上向下拖動(dòng)3.打開層面板,選中當(dāng)前圖層,拖到新建復(fù)制層”按鈕上,復(fù)制一個(gè)新層。4.鎖定層1曰列曰網(wǎng)頁層刪曰畫丸曰展I舐陀匚二矩形90%6.使用刀子工具”,在圓角矩形的上部四分之一處,橫向切割。

18、5.選中層2,將填充方式變?yōu)閷?shí)心,填充顏色為白色。在菜單欄,選擇修改,變形,數(shù)值變形,將寬高都設(shè)置為7.使用指針”工具,點(diǎn)選下半部分,按鍵盤上的 DEL鍵,刪除。如果無法選中,先在編輯區(qū)其它部分點(diǎn)擊一下。8.選中切割后的圖形,打開效果面板,選擇模糊,高斯模糊,數(shù)值為2.7設(shè)置如下圖9。點(diǎn)擊層1前的鎖圖標(biāo),給層1解鎖,選中層1下的圖層,調(diào)整效果選項(xiàng),選擇斜角和浮雕”,內(nèi)斜角t R JH 冏 InZ. |135問起10繼續(xù)選擇效果命令,選擇陰影和暈光”,發(fā)光”命令,將顏色設(shè)置為灰色,具體設(shè)置如下圖I 1d B 15%崩 I】 位移|o11.按CTRL+A,選中所有對(duì)象,在菜單欄上,選擇修改”,組合

19、”,Mac按鈕就做好了Fireworks MX 教程(十二)立體按鈕新建一個(gè)文件,使用矩形工具在畫布上繪制一個(gè)矩形,寬90,高20,填充顏色為# 6565652.單擊屬性檢查器中的 添加效果”按鈕,然后從 效果”彈岀菜單中選擇斜角和浮雕”內(nèi)斜角無選項(xiàng)斜角和浮雕模糊調(diào)整贛色銳化 陰影和光星耳它凸起浮離 凹入浮雕 外斜角E |ioo% 亍 效果:匡Eye Candy 4000 LE 卜 Alien Skin Splat LE 3.在彈岀的對(duì)話框中設(shè)置如下圖4.做好的效果。-|D| x原貽預(yù)施2幅|盤幅卜黑&141 Ik200 Y 80Fireworks MX教程(十三)制作虛線背景圖片1.

20、新建一個(gè)文件,設(shè)置如下圖2.導(dǎo)出文件,在dreamweaver中,就可以把這個(gè)圖像作為單元格的當(dāng)前圖像3.使用縮放”工具,把畫布放大800%| I4.使用 矩形工具,在最中間處畫一個(gè)點(diǎn)。導(dǎo)岀這個(gè)文件,在dreamweaver中,把這個(gè)圖像作為單元格的背景,就可以做出虛線效果。Fireworks MX教程(十四)去背景圖1.打開要去背景的圖片,使用魔術(shù)棒工具,選擇圖片中的背景。2.在屬性面板中設(shè)置容差,邊緣可以選擇羽化。3.刪除選中的背景,反復(fù)進(jìn)行這個(gè)過程,最后的圖片如下Fireworks MX教程(十五)圓角矩形框叵1.在工具面板上選擇圓角矩形工具,在畫布上繪制一個(gè)圓角矩形。| 3未命名-Ep

21、ng回100* (矩形尸冥1原始預(yù)覽| 2幅|斗幅盅3 r J 10111111111111TlJ, |1 1H141 1>200 » 和2.在屬性檢查器中設(shè)置如下。怨刁無二1z H(|1二|柔化風(fēng)形:|B |陽二|正常邊凍:1事邊P廠T邊壕:廠同_詛禍問 1紋理:卩砒r透明_JF d舉理:巾陽_J|o jj矩形圓度:|35- J3做出的圓角矩形框Fireworks MX教程(十六)制作陰影線1.新建一個(gè)文檔,畫布顏色為黑色新建龍檔TraiA; 1- do UTfg心八j 7"寬:200寬度®: |3SD|象素勺咼度 Of): |so: SO|象素二分辨率&

22、#174; :卩2|象素/英寸二|2d畫布鎖色:L白Q)r透明遼)e自定義©+確定取消 I1. 選中線條”工具,按住SHIFT鍵,畫一條直線,顏色為黑色。Jnl xl原始|預(yù)覽| 2幅|斗幅|2空輕昭°E41£0|eLL1 1 1 1Illi1111丄1till200 x 和3按Ctrl+Shift+D鍵,克隆這條線,點(diǎn)擊鍵盤上的向下鍵一下,然后把這條線的顏色變?yōu)榘咨?。最終的效果如下圖Fireworks MX教程(十七)制作圓角圖片使用圓角矩形作為蒙版,可以輕松的把圖片變成圓角形狀 1.打開一個(gè)圖片2使用圓角矩形工具在畫布上畫一個(gè)圓角矩形,在屬性檢查器上,輸入它的

23、大小,大小和上圖的大小一樣選中上圖就可以知道它的大小。3調(diào)整圓角矩形的填充顏色為白色。把圓角矩形和實(shí)例中的花”圖片完全重合。II300 x 213100* 15 SJ156.JPG 100(矩形尸原始| 2幅| &幅-! xlJTEG文檔)跆!>CTRL+A全選。選擇菜單中的 蒙版”組合為蒙版在層面板中,選中這兩個(gè)圖片,如果只有這兩個(gè)圖片,可以按修改(啰立本(D 命令© 濾熱窗口(創(chuàng)幫助®畫布©Q顯示全部(BJ隠窿全部(出動(dòng)畫元件弾出萊單(E)裁版(呦選擇性JPEG(J)平面化所選Ctrl+Alt+5hift+Z向下合幷(Ctri+E- 顯示所選(目

24、隠蔽所選:禁用裁版- 刪除藪版齒平面化展00變形(四排列對(duì)齊姐合路徑(Q)改變路徑組合(Ctrl+G取消組合(少Ctrl+5hiFt+G4. 如果要輸出有透明背景的圖片,必須選擇GIF或者PNG格式,PNG對(duì)照片級(jí)圖片支持更好。這里選擇GIF, Alpha透明6.做好的圓角圖片原始3秒遇1300 x 2131001 Fireworks MX教程(十八)文字蒙蓋圖像-|D|X|原始預(yù)覽|2鶴4 ffi |SJ156.JPG 1Q0W*1300 x 213100* 文本蒙版是一種矢量蒙版,只需將文本用作蒙版對(duì)象即可。要取得成功的效果,文字的顏色需要改成白色,并且選擇的字體盡量粗,實(shí) 例中使用的是

25、漢儀超粗黑繁”。1. 打開一副圖像2. 把文字的顏色改成白色,如果增加效果,產(chǎn)生的效果也要改成白色,實(shí)例中給文字增加白色投影。4.同時(shí)選中文字和圖片,使用菜單命令中的修改” 蒙版”組合為蒙版”命令。修改御文本(D 命令g 顧D窗口(世)幫肋(H)畫布g動(dòng)畫卜元件卜彈岀菜單(昭卜姦版?zhèn)菾蔓示全部(助 隱眾全部(也選擇性卜平面化所選(E) Ctrl+Alt+5hift+Z向下合并(回Ctrl+E平面化層(幻粘貼為裁版(£)組合為螢版(毘示所選 隠藏所選(U變理®卜排列(卜對(duì)齊卜菜用蓋腹組合路徑(Q)<改變路徑(日H組合(CtrkG取消組#(U)Ctr|+5hiFt+G5.

26、創(chuàng)建的效果如圖Fireworks MX教程(十九)使用 橡皮圖章”工具修復(fù)圖像橡皮圖章”工具克隆位圖圖象的部分區(qū)域,可以將其壓印到圖象中的其它區(qū)域。當(dāng)要修復(fù)有劃痕的照片或去除圖象上的灰塵時(shí),克隆象 素很有用??梢詮?fù)制照片的某一象素區(qū)域,然后用克隆的區(qū)域替代有劃痕或灰塵的點(diǎn)。1.打開一個(gè)有劃痕的圖像。2.選擇橡皮圖章”工具,單擊近似區(qū)域?qū)⑵渲付樵础?.把藍(lán)色圓圈形狀放在需要修改的部分,單擊或者拖動(dòng)。這部分圖像就會(huì)變得和源圖像一樣。單擊4. 還需要把劃痕其它部分修改過來。按住Alt鍵,單擊另一個(gè)象素區(qū)域,將其指定為源,把藍(lán)色圓圈形狀放在需要修改的部分,重復(fù)這個(gè)過程,最后修復(fù)的圖片如下圖。Fire

27、works MX 教程(二十)給文字描邊給文字描邊是常見的圖像處理功能。Ar i al1. 在畫布上,使用輸入文字,實(shí)例中字體選擇。單擊指針工具,然后選中畫布上的文字,屬性檢查器中的描邊顏色框就會(huì)岀現(xiàn)。創(chuàng)阡zl豐Bl I I更I 松豆團(tuán)匱垂|至|曰運(yùn)I/叼I平滑消隊(duì)鋸齒H片目動(dòng)手距調(diào)整2. 單擊描邊顏色框,在岀現(xiàn)的對(duì)話框中單擊 筆觸選項(xiàng)4.在出現(xiàn)的對(duì)話框中,根據(jù)需要設(shè)置5.描邊后的文字。紹天喬科Fireworks MX教程(二)圓角一象素描邊的圖片圓角一象素描邊的圖片是網(wǎng)上常見的圖片處理效果,在Fireworks中主要使用 貼入內(nèi)部”命令完成這個(gè)過程。1.打開要描邊的圖像,記住圖像的大小。實(shí)例

28、中寬300高213。2使用指針工具”選擇圖片使用CTRL+X快捷鍵剪切這個(gè)圖片。畫布上就為空-口j冥I原始I預(yù)覽12幅I吐幅I琲;丁襠j鐘3; SF172JPG® 100*X和Y值都為0,填充為無,描邊寬度為13CCI k 21J100H T3使用圓角矩形工具,在畫布上畫一個(gè)圓角矩形,設(shè)置如下,寬高和需要描邊的圖片一樣,描邊種類為1象素柔化,也可以選擇 柔化圓形經(jīng)過設(shè)置的圓角矩形4執(zhí)行 編輯”貼入內(nèi)部”命令。編輯(目視團(tuán)(眄選擇(3 修改(呦文本(I播消修改矩形(U)WI+Z重亙修改矩形逛)Ctrh-Y拯入庫©查找和替換(療Ctrl+F剪切Ctrh-X復(fù)制©Ctr

29、l+C復(fù)制路往輪廓(幻復(fù)制HTML代瑪Ctrt+Ak+C粘貼(臼Ctrl+VI清除Backspace|貼入內(nèi)鄒Ctrt+Shift+V詁貼理性(3Ctrl+Alt+5hift+V重復(fù)(DCtrl+A+D軀Ctrl+Shft+D修鶉所堆的匱臓2)券選擇®Ctrl+U快捷龍曲5完成的圓角一象素描邊的圖片。| 5 5F172.JPG 100*_原始|預(yù)覽2幅|*幅'ok?應(yīng)觀1300 x 213100% TFireworks MX教程(二十二)使用蒙版減淡圖片局部顏色 實(shí)現(xiàn)這個(gè)效果主要使用了空位圖蒙版。在層面板中,選中對(duì)象,點(diǎn)擊右下角的添加蒙版”按鈕。這樣就創(chuàng)建了一個(gè)空蒙版。幀L3

30、使用 選取框”工具,在畫布上選擇一定大小的區(qū)域。Fireworks MX教程(二十三)創(chuàng)建簡單變換圖象簡單變換圖象就是直接把第一幀上的圖像替換為它下面第二幀的圖象。在創(chuàng)建這個(gè)效果前,最好準(zhǔn)備兩張相同大小的圖片1.使用 指針”工具選中圖片,選擇 編輯”才“入” 切片”在圖象或?qū)ο笊戏絼?chuàng)建切片。2.單擊 新建/復(fù)制幀”按鈕在 幀”面板中創(chuàng)建一個(gè)新幀。3打開另一幅圖片,使用 剪切”和 粘貼”命令把這幅圖片粘貼到創(chuàng)建的新幀中二101 兇原贈(zèng)|預(yù)覽“幅電幅| 以is mo% C6E150 k 106 .jjanLpng 唾 1 DO% (原贈(zèng)|預(yù)覽“幅4嚴(yán)K SH >2<11L50 x 10

31、6 疋交換圖象”對(duì)話框。在 交換圖象自”彈岀菜單中,選擇要交換的圖象所在的4在 幀”面板中選擇 第1幀”,本例中因?yàn)榍衅丿B,所以可以選擇任意一幀。將指針放在行為手柄上方,指針更改為手柄,將行為手柄拖到切片的左上邊緣。-I 口| _荃5出現(xiàn)一條從切片中心延伸到左上角的藍(lán)色行為線,同時(shí)打開 幀,這里選擇幀2。6.簡單變換圖象做好了,主要起作用的是javascript代碼,所以必須導(dǎo)出為html格式。選擇文件” /導(dǎo)出預(yù)覽”,在保存類型”中選擇“ HML和圖像”。(!>' J OTMff_J JQtM占(JKUlStf 陰 0DG35 詩少jLM.凹; 硏nse <1OaOh.

32、GlF0QQtI7F 謝 ODgF <j MW. A?竊 oom m門*.!U團(tuán) OMT”島00肝,典SioOE-JP 令KiZtkJPG Jdooci.M丁諄老追,um,qj)切片w逸審眼 IP巴斷訶片£域麗) r *fiK3»W5Tr4*l'寮入7. 在Dreamweaver中,單擊 “Fireworks HTML按鈕,選擇之前導(dǎo)出的 html文件即可。第用|布局文本陵格薦禦表蔚稹板降符媒制念2觀固國|圍卷如華討壹IFireworks MX教程(二十四)制作替換動(dòng)畫制作替換動(dòng)畫的原理:把一個(gè)GIF格式的圖片變成切片,添加交換圖象行為”,選擇一個(gè)GIF動(dòng)畫文

33、件1.打開要作為切片的圖象,實(shí)例中把一個(gè)JPG格式的圖片改成 GIF格式,背景透明。2.在優(yōu)化面板中選擇 GIF格式,Alpha透明3選中圖片,執(zhí)行 編輯”手稿”切片”命令,把圖片變成切片4打開 行為”面板,給切片增加 交換圖象”動(dòng)作吏換圖象5.在交換圖象”對(duì)話框中,不要選擇預(yù)載圖象”,點(diǎn)擊圖象文件右邊的文件夾圖標(biāo)。避導(dǎo)航攔圉象(吵 滑過導(dǎo)航欄按下辱航欄疫復(fù)導(dǎo)航欄設(shè)置禪出粟單(臼設(shè)置狀態(tài)欄丈本(D5.在交換圖象”對(duì)話框中,不要選擇 預(yù)載圖象”,點(diǎn)擊圖象文件右邊的文件夾圖標(biāo)。6.在打開對(duì)話框中,選擇事先做好的GIF動(dòng)畫文件。GIF動(dòng)畫文件尺寸應(yīng)該和切片的尺寸一樣查找范圍(I) |2003-0?J

34、j2£j三j 3莊1仔區(qū)HHoozsjpg0D7.,JPGSjfw.jpij,0023 JPG006, JPG的 Fw_F2.jpghj 003、JPGM ! J'-II鑫 004 JPG必OltUP百005 JPG石Dll IPG006. JPG012 JPG111文件名.|green, gif文件類型g):|所有刃讀文件(*)3打開辺取消7.到這里替換動(dòng)畫就做好了8.在導(dǎo)出對(duì)話框中,保存類型選擇“ HTML和圖象HTML®:立件名保存類型保存在(X):|7_J 2QQ3-0T _note5® 00 竝 GIFQiXHIJPGXj 0017 JPGQOG

35、LGIF53 00Q7.GIF'3 0012 JPG00 IS. JPGG 0002.GIFM OOD8,GIF島 0EH3.JPG'0019 JPGL, 0003.GIFSj 00陽 JPG'0014 JPG002, JPG0004.GIF訪 om.JPG'*0015 JPG誇 0020 JPGQOD05.GIFS3 0010 JPG'3 0016 JPG300Z1 JPG121r枚已選切片g)P包括無切片區(qū)域廠將閔象啟入子文件夾世】Fireworks MX 教程(二十五)創(chuàng)建按鈕和導(dǎo)航欄在Fireworks中,可以使用按鈕編輯器快速創(chuàng)建一個(gè)按鈕元件,

36、從庫面板中,克隆多個(gè)按鈕元件,就可以制作成導(dǎo)航欄。創(chuàng)建帶有樣式的按鈕使用“按鈕按鈕編輯器”創(chuàng)建按鈕,為了美化按鈕,可以應(yīng)用樣式面板中的樣式,還可以應(yīng)用“屬性面板”上的各種效果。1. 打開Fireworks ,通過“文件” > “新建",新建一個(gè)文檔。2. “編輯” > “插入” > “新建按鈕”。編輯也視盹選擇修改旳文本命令© 濾頸窗口(妙幫肋(W撒消插入元件(U)Ctrl+Z重復(fù)插入元件(B)Qrl+Y| 插入新逢按鈕防“Ctrl+Shft+FB庫Q卜新建元WBCtrl+F8釋放滑過|按下|按下時(shí)涓過|活動(dòng)區(qū)域|3. 在按鈕編輯器中,選擇“釋放”狀態(tài),畫

37、一個(gè)寬69像素,高20像素,x,y坐標(biāo)都為0的矩形隸瞽統(tǒng)豪謬喪鈿嬲營護(hù)和噴即工期艇關(guān)的彈起狀枚要編輯踰或?qū)氚慈谌∠?寬:|&9K: |6高:|20丫: p-屋性祕(mì)鼻3邊躱:消際黑齒3I5二1紋理:5融三|匝二廠透明|1|Hard Line* |邊緞L 可二| 紋理:SmsF匝二|矩形風(fēng)度:廠二4. 選中矩形,然后打開樣式面板,點(diǎn)擊并且應(yīng)用一種樣式;之后在屬性面板上點(diǎn)擊填充顏色塊,實(shí)例中選擇紅色。5. 也可以選中按鈕,點(diǎn)屬性面板上的 +增加各種效果。輸入清晰的按鈕文字在網(wǎng)頁圖象中,如果使用較小的中文字體, 例如12象素,可以使用“不消除鋸齒”的宋體。使用更大的其它字體時(shí), 就需要消

38、除鋸齒了,在按鈕上輸入文字,在屬性面板上,選擇宋體,12像素,1.在“按鈕按鈕編輯器”的釋放狀態(tài)下,使用工具面板上的“文本工具” 不消除鋸齒。輸入文字后的按鈕:使“滑過”狀態(tài)的按鈕顏色相對(duì)“釋放”狀態(tài)變亮1.選中“滑過”狀態(tài),點(diǎn)擊“復(fù)制彈起時(shí)的圖形”2.點(diǎn)擊屬性面板上的“ +”, 添加效果“調(diào)整顏色” > “色相/飽和度”調(diào)整額色銳化陰影和光暈Eye Candy 4000Eye Candy 4000 LE*Texbure*HkJden*Alien Skin Splat LEQ 奴果:Digimarc iJtEyeCand/4,0亮度/對(duì)比度. 反相曲線自動(dòng)色階色相朋和度色階 顏色填充3.

39、在彈岀的“色相/飽和度”對(duì)話框中,向右拖動(dòng)亮度滑塊。這時(shí)就增加了按鈕的亮度重復(fù)上面的過程,調(diào)整“按下”狀態(tài)和“按下時(shí)滑過”狀態(tài)的顏色為按鈕增加鏈接。1.選中“活動(dòng)區(qū)域”,在屬性面板的“鏈接”項(xiàng)中,輸入#作為鏈接,以后可以修改。一個(gè)按鈕就做好了創(chuàng)建導(dǎo)航欄1.創(chuàng)建按鈕元件后,可以從庫面板中,將該元件的一個(gè)實(shí)例拖到工作區(qū)域中,重復(fù)這個(gè)過程,創(chuàng)建多個(gè)按鈕。2.為了對(duì)齊各個(gè)按鈕,需要先作岀引導(dǎo)線。選中“視圖”> “標(biāo)尺”放大緬m匕率她Ctrl+-Ctrl+-選區(qū)符合窗口為颶文檔符合簡口大小(日Ctrl+0“完整顯示Ctrl+KMacintosh灰度系數(shù)©念柚顯示全部(與Ctrl 帖 hf

40、tHI “標(biāo)尺(酉Ctri+Alt+R網(wǎng)格引導(dǎo)線(U)卜*切片弓導(dǎo)瀕J0trl+Alt+Shift+;*切片層習(xí)(百隠藏邊錄(目F9隱蔽面板(E)F4狀態(tài)欄(5)3.從標(biāo)尺上,拖岀水平和垂直的引導(dǎo)線。4.反復(fù)從庫面板中,把按鈕的實(shí)例拖到文檔中,并且對(duì)齊到引導(dǎo)線。5.選中不同的按鈕實(shí)例,在屬性面板上,修改文本和鏈接地址6.使用“文件” > “導(dǎo)出”,保存類型“ HTML和圖像”,輸出導(dǎo)航條Fireworks MX教程(二十六)創(chuàng)建彈出菜單當(dāng)web網(wǎng)站非常復(fù)雜的時(shí)候,可以利用Fireworks MX倉礎(chǔ)功能強(qiáng)大的彈出菜單,這樣就可以快速訪問需要的頁面。按如下步驟添加彈岀式菜單:1.選中某個(gè)切

41、片或者熱點(diǎn),打開行為面板,點(diǎn)擊“ +”添加“設(shè)置彈岀菜單”簡單變換圖象(刃交換圖象 恢復(fù)交換團(tuán)象設(shè)置導(dǎo)航欄圉象(吵 滑過導(dǎo)航欄 按下號(hào)航欄恢復(fù)導(dǎo)航欄設(shè)置譚出萊單(E)設(shè)置伏態(tài)欄文本(廣|2.單擊“內(nèi)容”選項(xiàng)卡,雙擊每個(gè)單元格并輸入或選擇適當(dāng)?shù)男畔?.如果需要?jiǎng)?chuàng)建彈岀子菜單,選中這個(gè)要作為子菜單的菜單項(xiàng),單擊“縮進(jìn)菜單”彈岀蕪單翁楫誥內(nèi)容I外聊I高巍丨位晉I立本舂接目標(biāo)編程a.s.p. htmInt &rdevinter dev. htmblankdesmweaverdreamweaver. him.blankfrontpagefrontpage, htm.blank寶wp底di tas

42、pedi t. htn.blankPHF編程j)hp. himblankC:WH:ZjI| 后退1魅續(xù)|完成I3. 如果要在菜單列表中向上或向下移動(dòng)菜單項(xiàng),可以選中它向上或向下拖動(dòng)。4. 設(shè)計(jì)彈出菜單的外觀??梢赃x擇“水平菜單”和“垂直菜單”兩種布局方式。6.定位彈岀菜單和子菜單。單擊各圖標(biāo),可以設(shè)置菜單位置和子菜單位置內(nèi)容I外觀I高毀 位置菜單位置:d|l-l子菜單位置:* EY:01HI叵1X: p Y: 13r放在同一位置職消 I C后退I I継蟆 I 完成 I7.單擊“完成”按鈕,彈岀菜單就做好了。如果以后要編輯彈岀菜單,只要雙擊“行為面板”中相應(yīng)的“顯示彈岀菜單”項(xiàng)目Firework

43、s MX 教程(二十七)制作動(dòng)畫本文介紹使用fireworks 制作動(dòng)畫。在fireworks 中,主要使用幀面板和層面板制作動(dòng)畫。下面分別以一個(gè)簡單的多幀動(dòng)畫和一個(gè)淡入淡出動(dòng)畫來說明制作動(dòng)畫的過程和相關(guān)技術(shù)。制作簡單的多幀動(dòng)畫:制作一個(gè)背景相同,文字變化的動(dòng)畫。如果是需要背景相同,就需要在層面板中,設(shè)置共享交疊層。常見網(wǎng)頁的banner動(dòng)畫尺寸為 468X60 (完整 banner ),88X31 ( Logo),393X72 (帶縱向?qū)Ш綏l的完整banner)1.在fireworks 中,打開一幅圖像,調(diào)整它的大小為468X60。這也是標(biāo)準(zhǔn)的banner大小。原贈(zèng)預(yù)覽|仝幅幅|W觴09戲初0Et»EM5Go1Illi1

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論