fireworks4網(wǎng)頁(yè)制作培訓(xùn)課件(共33張)(PPT 33頁(yè))

1、Fireworks 4.0第一期網(wǎng)頁(yè)制作班第1頁(yè)，共33頁(yè)。簡(jiǎn)介 是一種優(yōu)秀網(wǎng)頁(yè)圖形圖像設(shè)計(jì)工具。特色：1、位圖處理和矢量圖處理合二為一2、文本處理3、導(dǎo)出預(yù)覽（不需切換到瀏覽器）4、圖像優(yōu)化5、精美動(dòng)畫6、JavaScript自動(dòng)化7、設(shè)置圖像映射8、查找替換和批處理環(huán)境第2頁(yè)，共33頁(yè)。主要內(nèi)容一、基本使用操作二、基本繪圖操作三、顏色操作處理四、文字使用操作五、編輯矢量對(duì)象六、編輯位圖對(duì)象七、使用特效和樣式八、動(dòng)畫設(shè)計(jì)制作九、動(dòng)態(tài)按鈕制作十、圖像格式輸出十一、圖像變換設(shè)計(jì)十二、鏈接設(shè)置使用十三、使用大圖切割十四、自動(dòng)化的應(yīng)用第3頁(yè)，共33頁(yè)。一、基本使用操作1、熟悉工作區(qū)域2、對(duì)象的導(dǎo)入（

2、兩種方法）3、畫布尺寸與顏色的調(diào)整4、畫布的裁剪與旋轉(zhuǎn)5、改變影像尺寸6、裁剪位圖對(duì)象7、文件基本操作8、文件的打開、導(dǎo)入、保存（.PNG）第4頁(yè)，共33頁(yè)。二、基本繪圖操作1、使用直線工具繪圖2、使用形狀工具繪圖（矩形、圓形、多邊形）3、使用路徑繪制工具（鋼筆、鉛筆、筆刷）4、改變路徑操作方法（細(xì)部工具、重繪畫筆工具、任意形狀工具）5、路徑的修改與切割（區(qū)域變形工具、切割工具）6、簡(jiǎn)化、擴(kuò)張及附加路徑修改改變路徑（簡(jiǎn)化路徑、擴(kuò)張路徑、插入路徑）第5頁(yè)，共33頁(yè)。三、顏色操作處理1、網(wǎng)頁(yè)可靠色2、混色器3、調(diào)色板（樣本）的使用4、滴管（探色棒）工具的使用5、筆觸面板6、填充面板1、主要填充參數(shù)

3、的作用2、修改漸變色3、調(diào)整漸變色與圖案填充4、使用外部圖像文件作為填充圖案或紋理5、使用WEB抖動(dòng)色7、顏色在路徑上的使用（補(bǔ)充）路徑涂飾工具（+）和（-）第6頁(yè)，共33頁(yè)。四、文字使用操作1、文字的編輯器(1)輸入(2)編輯：修改文字：法一：輸入文本后，如要編輯文本，只需雙擊文本塊。 法二：選擇后用“文本” “編輯器” 法三：直接通過(guò)菜單實(shí)現(xiàn)(3)對(duì)文本設(shè)置描邊、填充(4)文字的變形處理（縮放、扭曲、頃斜）2、文字與路徑默認(rèn)情況下，文本都是以矩形文本塊形式顯示，但是，用戶可繪制一條路徑，然后將文本附加到該路徑上，使文本按路徑形狀進(jìn)行排列。不過(guò)，此是路徑將失去了它的所有屬性，變成一條不可編輯

4、的路徑，在預(yù)覽時(shí)也不顯示。(1)文本附加到路徑：首先創(chuàng)建一個(gè)文本對(duì)象和一個(gè)路徑對(duì)象，然后都選中，用“文本附加到路徑”命令.第7頁(yè)，共33頁(yè)。四、文字使用操作(2)分離文本與路徑：用“文本從路徑脫離”命令(3)編輯文本與路徑編輯文本：雙擊編輯路徑：將文本與路徑分離編輯路徑再將選擇文本與路徑附加到路徑。注：添加筆觸和填充后，文本對(duì)象可作相應(yīng)變化。(4)按路徑排列文本（5）導(dǎo)入文本：用于文本內(nèi)容很多或已有了現(xiàn)成文檔。4、把文字轉(zhuǎn)為路徑當(dāng)要用矢量處理工具編輯文本時(shí)，需轉(zhuǎn)化為路徑。方法：文本轉(zhuǎn)化為路徑（可用次選工具編輯任意節(jié)點(diǎn)，但內(nèi)容再不能用文本編輯器修改）注：文本對(duì)象轉(zhuǎn)化成位圖對(duì)象的方法和矢量圖轉(zhuǎn)化為

5、位圖的方法一樣，可用“修改轉(zhuǎn)換為位圖”命令。以后可用位圖編輯工具進(jìn)行編輯。第8頁(yè)，共33頁(yè)。五、編輯矢量對(duì)象1、對(duì)象操作使用選擇工具、后方選擇工具選擇了填充有漸變色的圖形后，出現(xiàn)兩個(gè)控制點(diǎn)（圓形、方形）排列對(duì)象（修改對(duì)齊）2、對(duì)象變形處理修改變形3、對(duì)象相互結(jié)合（1）群組工具與取消群組（2）路徑的合并與拆分（3）對(duì)象的接合（聯(lián)合、相交、打孔、修剪）4、調(diào)整對(duì)象順序修改排列第9頁(yè)，共33頁(yè)。六、編輯位圖對(duì)象1、切換編輯模式與創(chuàng)建位圖對(duì)象在Fireworks中同時(shí)擁有兩種編輯模式，即對(duì)象編輯模式與位圖編輯模式。(1)切換編輯模式的方法A、切換到位圖編輯模式法一：選擇位圖對(duì)象，然后選擇修改編輯位圖法

6、二：利用蒙版、套索、魔術(shù)棒或橡皮圖章工具單擊位圖對(duì)象法三：雙擊位圖B、從位圖編輯模式返回對(duì)象模式法一：用指針工具或子選擇工具在圖像外任意區(qū)域單擊法二：用修改退出位圖模式法三：?jiǎn)螕粑臋n窗口下方的圖標(biāo)法四：按ESC鍵(2)創(chuàng)建位圖對(duì)象的方法法一：文件導(dǎo)入或打開法二：修改轉(zhuǎn)換為位圖第10頁(yè)，共33頁(yè)。六、編輯位圖對(duì)象2、選區(qū)制作與調(diào)整(1)制作選區(qū)矩形選區(qū)工具、橢圓形選區(qū)工具、套索工具、多邊形套索工具、魔術(shù)棒工具(2)調(diào)整選區(qū)增加或減小選區(qū)按下Shift鍵并使用位圖選擇工具選擇圖像，可增加選區(qū)按下Alt鍵并選擇圖像，可增加選區(qū)按下Alt+Shift鍵，可制作新的選區(qū)。釋放鼠標(biāo)后，選區(qū)結(jié)果將是已有選區(qū)

7、和新選區(qū)的交集。選區(qū)的擴(kuò)展與收縮：用修改選取框擴(kuò)大或收縮平滑選區(qū)：用修改選取框平滑制作邊界選區(qū)：用修改選取框邊框反選選區(qū)：用修改選取框反選選擇與已有選區(qū)顏色相近的顏色：用修改選取框選擇相似顏色取消選擇：Ctrl+D第11頁(yè)，共33頁(yè)。六、編輯位圖對(duì)象3、在位圖模式下編輯（剪切、復(fù)制、粘貼、吸管工具、油漆桶工具、橡皮工具、印章工具）(1)在位圖編輯模式下繪圖(2)圖像的擦除、填充與復(fù)制應(yīng)選制作選區(qū)，再進(jìn)行下列操作，否則操作范圍為整個(gè)位圖編輯區(qū)。使用擦除工具擦除像素利用油漆桶工具填充像素將當(dāng)前設(shè)置的填充圖案填充位圖或選擇的區(qū)域（未選為整個(gè)文檔）利用橡皮圖章工具復(fù)制像素單擊橡皮工具鼠標(biāo)移到希望復(fù)制的

8、區(qū)域單擊鼠標(biāo)移到新的區(qū)域拖動(dòng)復(fù)制注：復(fù)制方式為“固定”時(shí)目標(biāo)可變；為“對(duì)齊”時(shí)，復(fù)制點(diǎn)與定義點(diǎn)始終對(duì)齊選擇“對(duì)齊”時(shí)，在復(fù)制過(guò)程中可多次松開鼠標(biāo)，且復(fù)制的圖像是連續(xù)的；而選擇“固定”時(shí)，只要松開一下鼠標(biāo)，再?gòu)?fù)制等于重新復(fù)制。注：滴管工具用來(lái)在圖像上選擇一種顏色作為填充色。第12頁(yè)，共33頁(yè)。六、編輯位圖對(duì)象(3)裁剪位圖：編輯修剪位圖(4)選區(qū)的變形除了使用筆觸、填色美化對(duì)象外，還可使用特效，為你的按鈕、文字、圖形創(chuàng)建特效。第13頁(yè)，共33頁(yè)。七、使用特效和樣式1、使用特效處理選擇要使用特效的對(duì)象后，打開效果面板，單擊增加特效下拉列表，選擇一種特效。常用的是默認(rèn)效果。2、特效面板使用單擊特效行

9、上的特效按鈕，打開特效參數(shù)面板，這個(gè)內(nèi)部頃斜特效的面板上包括了一個(gè)”斜角邊緣形狀“下拉列表，可選擇“平面、平滑、頃斜、架子、圓環(huán)、鄒邊”等形狀，其它的參數(shù)用來(lái)指定導(dǎo)角的寬度和高度，可做一個(gè)令人滿意的按鈕。在內(nèi)部頃斜特效的面板的最下方下拉列表中列出了按鈕的4種狀態(tài)，分別是凸起、高亮度、凹進(jìn)、反轉(zhuǎn)。注：取消選中的特效行前面的復(fù)選框，可關(guān)閉特效。第14頁(yè)，共33頁(yè)。七、使用特效和樣式3、編輯特效面板同一個(gè)對(duì)象可同時(shí)使用多個(gè)特效，對(duì)于不使用的特效，選中后可以刪除，也可根據(jù)需要保存以后用在其它的對(duì)象上。 4、特效類型頃斜和浮雕：內(nèi)部頃斜特效、外部頃斜特效（作用于對(duì)象的外邊框）、凸起浮雕（產(chǎn)生凸起的浮雕效

10、果）、凹進(jìn)浮雕（產(chǎn)生凹進(jìn)浮雕效果） 。陰影和光暈：陰影（距離參數(shù)控制著陰影和對(duì)象的距離）、光暈（用來(lái)產(chǎn)生光暈效果，可設(shè)置輝光的顏色、偏移參數(shù)，還可控制輝光和對(duì)象的距離）模糊：設(shè)置對(duì)象的模糊程序。調(diào)節(jié)顏色（是附加功能），設(shè)置后可保存。4、使用特效插件（相當(dāng)于Photoshop中的濾鏡）特效菜單下的Eye Candy 4000 LE5、加入外部濾鏡第15頁(yè)，共33頁(yè)。七、使用特效和樣式下面介紹一個(gè)更奇妙的工具，它不但可以保存特效，而且可以保存筆觸、填色，甚至字體、字號(hào)，并且重復(fù)使用時(shí)更簡(jiǎn)單-樣式。6、樣式建立應(yīng)用(1)使用：選擇對(duì)象單擊一種樣式(2)保存：選擇對(duì)象應(yīng)用各種筆觸、填充和特效新建樣式選

11、擇需要保存的內(nèi)容輸入樣式名OK(3)編輯：雙擊注：A、在應(yīng)用樣式時(shí)不想改變對(duì)象原來(lái)的填充類型，可將顏色從樣式保存中去除（編輯），再進(jìn)行應(yīng)用樣式。B、若將一個(gè)文本對(duì)象的樣式保存，在保存樣式對(duì)話框中就可保存字體、字號(hào)和文字風(fēng)格等屬性，這樣給文字對(duì)象應(yīng)用樣式時(shí)，文字對(duì)象的字體、字號(hào)和風(fēng)格都可以改變。(4)導(dǎo)入樣式 (5)導(dǎo)出樣式7、使用遮罩效果創(chuàng)建：修改蒙板組成蒙板第16頁(yè)，共33頁(yè)。七、動(dòng)畫設(shè)計(jì)制作1、制作GIF動(dòng)畫(1)創(chuàng)建基本的幀幀動(dòng)畫法一：選增加幀，再在每幀上畫對(duì)象法二：在第一幀上加多個(gè)對(duì)象全選分配到幀命令(2)創(chuàng)建過(guò)渡動(dòng)畫法一：利用“修改動(dòng)畫就所選創(chuàng)建動(dòng)畫”命令可生成一個(gè)帶有起始、中間和結(jié)

12、束點(diǎn)的動(dòng)畫線，其每一點(diǎn)代表動(dòng)畫中的一幀，移動(dòng)動(dòng)畫線的長(zhǎng)度與方向可改變動(dòng)畫的軌跡。法二：利用Tween功能創(chuàng)建過(guò)渡動(dòng)畫制作好Tween動(dòng)畫后，用戶可單獨(dú)調(diào)整任何一幀符號(hào)的位置、不透明度，或?qū)ζ溥M(jìn)行縮放、傾斜，以及為其增加效果等。靈活性更大。操作：創(chuàng)建一個(gè)對(duì)象為其增加樣式選擇“插入轉(zhuǎn)換為組件” 輸入組件名稱（選擇圖形）打開庫(kù)面板拖入文檔放在另一位置選中兩個(gè)符號(hào)選擇“修改符號(hào)內(nèi)插動(dòng)畫” 設(shè)置動(dòng)畫幀數(shù)并選中分配到各幀復(fù)選框OK第17頁(yè)，共33頁(yè)。七、動(dòng)畫設(shè)計(jì)制作2、Frame面板的使用重命名、增加、復(fù)制或刪除幀將所選對(duì)象放置在不同幀中將對(duì)象從當(dāng)前幀移到其他幀設(shè)置功能設(shè)置幀延遲（100=1S）設(shè)置動(dòng)畫播

13、放次數(shù)復(fù)制到幀（將一幀上的對(duì)象復(fù)制到其它幀），與復(fù)制幀不同。也可用共享圖層實(shí)現(xiàn)。3、使用描圖紙功能（洋蔥皮）4、建立圖層的操作（層面板）注：A、幀是以時(shí)間先后為序，不同的幀處在不同的時(shí)間段上。B、不同層是指不同通道或空間同一時(shí)間的上、下的位置關(guān)系。C、一個(gè)層上可包含多個(gè)對(duì)象，一個(gè)幀上可有多個(gè)層。第18頁(yè)，共33頁(yè)。七、動(dòng)畫設(shè)計(jì)制作5、圖層的操作應(yīng)用同一層上可有多個(gè)對(duì)象層，圖層上新增對(duì)象后，會(huì)自動(dòng)在該圖層下增加對(duì)應(yīng)的對(duì)象層。(1)創(chuàng)建新圖層插入法：插入層圖層面板法1：新建/復(fù)制層按鈕圖層面板法2：新建層選項(xiàng)(2)選中圖層法一：在文檔窗口中，選中屬于該圖層的任意對(duì)象法二：在圖層面板中，單擊要選中的

14、圖層名稱(3)復(fù)制圖層法一：選中要復(fù)制的圖層拖到“復(fù)制/刪除層”按鈕上法二：選中要復(fù)制的圖層在選項(xiàng)中選擇“復(fù)制圖層”項(xiàng)選擇OK兩者區(qū)別：法一只能生成一個(gè)副本圖層，且副本圖層位于被復(fù)制圖層的下方。法二的復(fù)制功能更全面，他不但可以調(diào)節(jié)復(fù)制圖層的數(shù)量，還可以設(shè)置復(fù)制圖層的位置。第19頁(yè)，共33頁(yè)。七、動(dòng)畫設(shè)計(jì)制作(4)刪除圖層法一：選中要?jiǎng)h除的圖層單擊刪除圖層按鈕法二：選中要?jiǎng)h除的圖層拖到“刪除圖層”按鈕上法三：選中要?jiǎng)h除的圖層在選項(xiàng)菜單中選擇“刪除圖層”注：A、在Fireworks中，網(wǎng)頁(yè)層是不能被刪除的B、畫布不是圖層，他位于文檔的最底層(5)重命名圖層雙擊要命名的圖層在名稱區(qū)輸入新的名稱(6)

15、 圖層中對(duì)象的編輯（兩種編輯模式）多層編輯模式（默認(rèn)狀態(tài)）所有圖層中的對(duì)象都處于可編輯狀態(tài)單層編輯模式：選擇選項(xiàng)菜單中的“編輯單一圖層”只能對(duì)單個(gè)層的對(duì)象進(jìn)行編輯第20頁(yè)，共33頁(yè)。七、動(dòng)畫設(shè)計(jì)制作(7)圖層屬性的設(shè)置(顯示和隱藏、鎖定和解鎖）(8)為圖層建立位圖對(duì)象(9)設(shè)置共享層與合并圖層設(shè)置共享層：在選項(xiàng)菜單中選擇或雙擊該層合并圖層：修改平面化層注：A、將某層設(shè)置為共享層時(shí)，當(dāng)前幀以外其他所有幀中的同名層均被刪除。B、合并圖層時(shí)，被隱藏的圖層或?qū)ο笞訉訉⒈粊G棄，而共離層將被自動(dòng)復(fù)制到各幀。(10)調(diào)整對(duì)象的不透明度與混合模式(11)改變圖層重疊次序選擇后用鼠標(biāo)直接拖動(dòng)第21頁(yè)，共33頁(yè)。

16、七、動(dòng)畫設(shè)計(jì)制作6、使用遮罩效果(蒙版）法一：創(chuàng)建蒙版組法二：通過(guò)粘貼方法創(chuàng)建蒙版導(dǎo)入一幅圖復(fù)制到剪貼板新建文件繪制作一橢圓并選中若將剪貼板中的內(nèi)容作為蒙版，則用“編輯粘貼為蒙版”命令；若將剪貼板中的內(nèi)容作為對(duì)象，當(dāng)前對(duì)象伙蒙版，則用“編輯粘貼到內(nèi)部”命令；法三：根據(jù)選區(qū)制作蒙版（位圖遮罩）導(dǎo)入一幅圖制作選區(qū)選擇“修改蒙版顯示所選”命令導(dǎo)入一幅圖制作選區(qū)單擊“添加蒙版”按鈕第22頁(yè)，共33頁(yè)。七、動(dòng)畫設(shè)計(jì)制作7、使用SymbolFireworks具有庫(kù)面板，放在庫(kù)中的對(duì)象稱為符號(hào)，在庫(kù)面板中，將該符號(hào)拖到文檔中，就創(chuàng)建了實(shí)體，實(shí)體就是原始對(duì)象的副本，當(dāng)符號(hào)對(duì)象進(jìn)行修改時(shí)，實(shí)體自動(dòng)變化以反映符號(hào)

17、的修改。創(chuàng)建：法一：插入新建符號(hào) 法二：制作一個(gè)對(duì)象使用轉(zhuǎn)換命令（F8）注：不能為實(shí)體指定筆觸和填色，但可以對(duì)實(shí)體變形和添加特效。還可以在層面板上修改實(shí)體的透明度和混合模式。修改符號(hào)：雙擊任何一個(gè)實(shí)體斷開鏈接后的實(shí)體可修改任何屬性。8、 Symbol動(dòng)畫應(yīng)用制作或引入一個(gè)對(duì)象轉(zhuǎn)換為動(dòng)畫類型選擇參數(shù)OK9、分身動(dòng)畫的制作制作或引入一個(gè)對(duì)象（動(dòng)畫類型）內(nèi)插動(dòng)畫10、輸出GIF動(dòng)畫文件導(dǎo)出第23頁(yè)，共33頁(yè)。八、動(dòng)態(tài)按鈕制作1、設(shè)置按鈕對(duì)象(兩種方法）2、鼠標(biāo)事件設(shè)置（四種狀態(tài)）3、設(shè)置鏈接區(qū)域（切割工具、多邊形切割工具）4、設(shè)置按鈕鏈接（兩種方法）第24頁(yè)，共33頁(yè)。九、圖像格式輸出1、圖像輸出設(shè)

18、置2、輸出JPG文件第25頁(yè)，共33頁(yè)。十、圖像變換設(shè)計(jì)1、簡(jiǎn)單的圖像變換2、復(fù)雜的圖像變換第26頁(yè)，共33頁(yè)。十一、鏈接設(shè)置使用1、使用鏈接工具2、直接設(shè)置鏈接3、WEB層的管理4、設(shè)置鏈接對(duì)象5、使用鏈接設(shè)置項(xiàng)6、鏈接的彈出菜單7、使用鏈接面板第27頁(yè)，共33頁(yè)。十二、使用大圖切割1、什么是大圖切割2、切割大尺寸圖像3、切割對(duì)象與圖層4、輸出HTML文件5、鏈接區(qū)文字置換第28頁(yè)，共33頁(yè)。十三、自動(dòng)化的應(yīng)用1、使用查找和替換2、使用項(xiàng)目清單3、批處理的使用4、腳本儲(chǔ)存使用第29頁(yè)，共33頁(yè)。創(chuàng)建按鈕（Buttons）和導(dǎo)航條 按鈕是網(wǎng)頁(yè)中應(yīng)用極多的元素，眾多的按鈕就形成了導(dǎo)航條，導(dǎo)航條的作用就是要讓瀏覽者清楚知道當(dāng)前所處的位置，并且通過(guò)導(dǎo)航條可以方便的將瀏覽者帶到其他的地方而不會(huì)迷失。因此按鈕表現(xiàn)有以下幾種狀態(tài)： Up：默認(rèn)狀態(tài)，即通常的狀態(tài)，這時(shí)的鼠標(biāo)是不在按鈕范圍之內(nèi)的。 Over：鼠標(biāo)滑過(guò)按鈕時(shí)的狀態(tài)。 Down：按鈕被點(diǎn)擊后的狀態(tài)，通常它是出現(xiàn)在目標(biāo)網(wǎng)頁(yè)中的。 Over While Down：鼠標(biāo)滑過(guò)處于Down狀態(tài)下按鈕的時(shí)候按鈕的狀態(tài)，通常極少應(yīng)用。創(chuàng)建按鈕：Insert-New Button 這樣就會(huì)出現(xiàn)按鈕編輯器，第30頁(yè)，共33頁(yè)。創(chuàng)建導(dǎo)航條 打開Library面版，將按鈕重復(fù)拖到畫板中，使其有多個(gè)按鈕 。將這些按鈕擺