fireworks(軟體)

由Macromedia（在2005年被Adobe收購）推出的一款網頁作圖軟體，軟體可以加速 Web 設計與開發， 是一款創建與最佳化 Web 圖像和快速構建網站與 Web 界面原型的理想工具。Fireworks 不僅具備編輯矢量圖形與點陣圖圖像的靈活性， 還提供了一個預先構建資源的公用庫， 並可與 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和 Adobe Flash軟體省時集成。 在 Fireworks中將設計迅速轉變為模型， 或利用來自Illustrator、Photoshop和Flash的其它資源。 然後直接置入Dreamweaver中輕鬆地進行開發與部署。

基本介紹

• 外文名：Adobe Fireworks
• 發布方：Macromedia公司
• 類型：圖形編輯軟體
• 易用度：容易

簡要介紹

Fireworks是Macromedia公司發布的一款專為網路圖形設計的圖形編輯軟體，它大大簡化了網路圖形設計的工作難度，無論是專業設計家還是業餘愛好者，使用Fireworks都不僅可以輕鬆地製作出十分動感的GIF動畫，還可以輕易地完成大圖切割、動態按鈕、動態翻轉圖等，因此，對於輔助網頁編輯來說，Fireworks將是最大的功臣。藉助於Macromedia Fireworks 8，您可以在直觀、可定製的環境中創建和最佳化用於網頁的圖像並進行精確控制。Fireworks 業界領先的最佳化工具可幫助您在最佳圖像品質和最小壓縮大小之間達到平衡。它與 MacromediaDreamweaver和 MacromediaFlash共同構成的集成工作流程可以讓您創建並最佳化圖像，同時又能避免由於進行Roundtrip 編輯而丟失信息或浪費時間。利用可視化工具，無需學習代碼即可創建具有專業品質的網頁圖形和動畫，如變換圖像和彈出選單等。

Adobe Firework CS4

2005年，Adobe用34億美元收購macromedia公司，fireworks隨之跟隨至adobe。

2013年05月07日

宣布終結Creative Suite（CS）家族的同時，Adobe宣布迎來Creative Cloud（CC）全新系列套用和服務。MAX大會上，Adobe證實，Web設計、原型設計和移動應用程式設計工具Fireworks被斃掉了。

Adobe表示，他們已經決定，Fireworks不會包含在CC家族中，開發團隊將專注於開發全新的工具來滿足消費者的需求。這樣做的主要原因是， Fireworks、Photoshop、Illustrator、Edge Reflow之間在功能上有較多重疊。

不過，Fireworks CS6今後仍然可以使用，也可以購買，不過和CS6套裝以及其它組件一樣，只能買到數字版。只是，Adobe不再為其開發新的功能，今後只是提供必要的安全更新和Bug修復。

Adobe將正式發布CC家族產品，包括：Photoshop CC、InDesign CC、Illustrator CC、Dreamweaver CC、Premiere Pro CC等，只是沒有Fireworks CC了。

Fireworks與Dreamweaver、Flash統稱為網頁三劍客。

創建編輯

創建和編輯矢量圖像與點陣圖圖像，並導入和編輯本機Photoshop和Illustrator檔案。

圖像最佳化

採用預覽、跨平台灰度系統預覽、選擇性JPEG壓縮和大量導出控制項，針對各種互動情況最佳化圖像。

高效集成

導入 Photoshop (PSD) 檔案，導入時可保持分層的圖層、圖層效果和混合模式。將 Fireworks (PNG) 檔案保存回 Photoshop (PSD) 格式。導入 Illustrator (AI) 檔案，導入時可保持包括圖層、組和顏色信息在內的圖形完整性。

原型構建

網站和各種 Internet應用程式構建互動式布局原型。將網站原型導出至 Adobe Dreamweaver，將 RIA 原型導出至 Adobe Flex。

支持多頁

使用新的頁面板在單個文檔 (PNG 檔案） 中創建多個頁面，並在多個頁面之間共享圖層。每個頁面都可以包含自己的切片、圖層、幀、動畫、畫布設定，因而可在原型中方便地模擬網站流程。

組織方式

採用與 Adobe Photoshop 類似的新分層圖層結構來組織和管理原型，使您能方便地組織 Web 圖層和頁面。

濾鏡效果

套用燈光效果、陰影效果、樣式和混合模式 （包括源自 Photoshop 的7種新的混合模式），增加文本和元件的深度和特性。

公用庫存

公用庫中包含 Web應用程式、表單、界面和網站中經常用到的圖形元件、文本元件和動畫，可以使用它迅速開始原型構建過程。

智慧型縮放

通過 9 切片縮放智慧型地縮放矢量圖像或點陣圖圖像中的按鈕與圖形元件。將 9 切片縮放與新的自動形狀庫相結合，以加速網站和應用程式的原型構建進度。

簡化集成

複製 Fireworks CS3 中的任意對象，並直接貼上到 Dreamweaver CS3 中。創建可保存為 CSS 和 HTML（標準通用標記語言下的一個套用） 的彈出選單。將 Fireworks (PNG) 檔案直接導出至 Flash CS3，導出時可保持矢量、點陣圖、動畫和多狀態不變，然後在 Flash CS3 中編輯檔案。

主要說明

為Macromedia家族的一員，三劍客之一的FW，這款軟體的主要任務和特色就是製作矢量圖為網頁服務，FW也是Flash的最佳伴侶，在三劍客的MX系列中，FW和Flash的聯繫更為緊密，所以無論是網頁製作和Flash製作，Fw都是不可或缺的利器.在Fw3年的套用實踐過程中，我無時無刻不在感受她的卓越和便利。的確，網頁製作看重的是效果和速度，並不是你用的軟體專業與否，你用了多少個軟體作出的網頁，設計師作出的網頁是為了讓大家接受而不是顯示自己的本領，在這樣的前提下，Fw的確是最好的選擇，最好的矢量圖效果，最快的速度。

必知功能

在最佳化面板里有“導出jpg較高品質”，導出默認的80品質（可以用“2幅”畫面對比之前之後的大小）

眾所周知，在網頁上的jpg圖片如果過大，會嚴重影響頁面的打開速度，Fireworks提供最佳化圖片的功能，即縮小圖片的KB，而且不影響畫面的質量（除非放大了與原圖對比）。由於很多人喜歡用photoshop製作jpg圖片，所以它的容量會很大（因為它是適合處理印刷品，要求較清晰），最終還是要用Fireworks來處理一下。

快捷鍵表

工具

指針、選擇後方對象 【V】，【0】

部分選定 【A】，【1】

選取框、橢圓選取框 【M】套索、多邊形套索 【L】

裁剪、導出區域 【C】

魔術棒 【W】

線條工具 【N】

鋼筆工具【P】

矩形、圓角矩形、橢圓、多邊形 【U】

文本工具【T】

鉛筆、刷子 【B】

矢量路徑、重繪路徑 【P】

縮放、傾斜、扭曲 【Q】

自由變形、更改區域形狀 【O】

滴管工具 【I】

油漆桶、漸變 【G】

橡皮擦工具【E】

模糊、銳化、減淡、加深、塗抹 【R】

橡皮圖章工具【S】

刀子工具 【Y】矩形熱點、圓形熱點、多邊形熱點 【J】

切片、多邊形切片 【K】

手形工具【H】

縮放工具【Z】

隱藏/顯示切片 【2】

設定默認筆觸/填充色【D】

交換筆觸/填充色【X】

切換螢幕模式 【F】

選單命令

新建檔案（N) 【Ctrl】+【N】

打開（O）… 【Ctrl】+【O】

關閉（C) 【Ctrl】+【W】

保存（S) 【Ctrl】+【S】

另外儲存為（A）… 【Ctrl】+【Shift】+【S】

導入（I）… 【Ctrl】+【R】

導出（E）… 【Ctrl】+【Shift】+【R】

導出預覽（R）… 【Ctrl】+【Shift】+【X】

在瀏覽器中預覽 【F12】

在輔助瀏覽器中預覽 【Ctrl】+【F12】，【Shift】+【F12】

列印（P）… 【Ctrl】+【P】

退出（X) 【Ctrl】+【Q】

撤消 【Ctrl】+【Z】

重做 【Ctrl】+Y，【Ctrl】+【Shift】+【Z】

插入新建按鈕（B）… 【Ctrl】+【Shift】+【F8】

新建元件（Y）… 【Ctrl】+【F8】

熱點（H) 【Ctrl】+【Shift】+【U】

切片（S) 【Alt】+【Shift】+【U】

查找和替換（F）… 【Ctrl】+【F】

剪下（T) 【Ctrl】+【X】

複製（C) 【Ctrl】+【C】

複製HTML代碼（H）… 【Ctrl】+【Alt】+【C】

貼上（P) 【Ctrl】+【V】

清除 【退格】，【DEL】

貼入內部（I) 【Ctrl】+【Shift】+【V】貼上屬性（A) 【Ctrl】+【Alt】+【Shift】+【V】

重複（L) 【Ctrl】+【Alt】+【D】

克隆（N) 【Ctrl】+【Shift】+【D】

參數選擇（F）… 【Ctrl】+【U】

放大（Z) 【Ctrl】+=，【Ctrl】+（小）+，【Ctrl】+【Shift】+【=】

縮小（O) 【Ctrl】+-，【Ctrl】+（小）【-】

縮放比率50% 【Ctrl】+5，【Ctrl】+（小）【5】

100% 【Ctrl】+1，【Ctrl】+（小）【1】

200% 【Ctrl】+2，【Ctrl】+（小）【2】

300% 【Ctrl】+3，【Ctrl】+(小）【3】

400% 【Ctrl】+4，【Ctrl】+（小）【4】

800% 【Ctrl】+8，【Ctrl】+（小）【8】

1600% 【Ctrl】+6，【Ctrl】+（小）【6】

選區符合視窗大小（S) 【Ctrl】+【Alt】+0，【Ctrl】+【Alt】+（小）【0】

文檔符合視窗大小（F) 【Ctrl】+0，【Ctrl】+（小）【0】

完整顯示（D) 【Ctrl】+【K】

隱藏所選（H) 【Ctrl】+【L】

顯示全部（A) 【Ctrl】+【Shift】+【L】

標尺（R) 【Ctrl】+【Alt】+【R】

顯示格線(G) 【Ctrl】+【Alt】+【G】

對齊格線（S) 【Ctrl】+【Alt】+【Shift】+【G】

顯示引導線（U) 【Ctrl】+【；】 鎖定引導線（L) 【Ctrl】+【Alt】+【；】

對齊引導線（S) 【Ctrl】+【Shift】+【；】

切片引導線（L) 【Ctrl】+【Alt】+【Shift】+【；】

隱藏邊緣（E) 【F9】

隱藏面板（P) 【F4】，【Tab】

選擇全部（S) 【Ctrl】+【A】

取消選擇（D) 【Ctrl】+【D】

整體選擇（E) 【Ctrl】+【→】

部分選定（U) 【Ctrl】+【←】

反選（V) 【Ctrl】+【Shift】+【I】

修剪畫布（T) 【Ctrl】+【Alt】+【T】

符合畫布（F) 【Ctrl】+【Alt】+【F】

選擇動畫（A）… 【Alt】+【Shift】+【F8】

轉換為元件（C）… 【F8】

補間實例（T）… 【Ctrl】+【Alt】+【Shift】+【T】

平面化所選（F) 【Ctrl】+【Alt】+【Shift】+【Z】

向下合併（D) 【Ctrl】+【E】

任意變形（T) 【Ctrl】+【T】

數值變形（N）… 【Ctrl】+【Shift】+【T】

旋轉90°順時針 【Ctrl】+【Shift】+【9】

旋轉90°逆時針 【Ctrl】+【Shift】+【7】

移到最前（F) 【Ctrl】+【Shift】+【↑】

向前移動（B) 【Ctrl】+【↑】

向後移動（S) 【Ctrl】+【↓】

移到最後（K) 【Ctrl】+【Shift】+【↓】

左對齊(L) 【Ctrl】+【Alt】+1，【Ctrl】+【Alt】+（小）【1】

垂直居中（V) 【Ctrl】+【Alt】+2，【Ctrl】+【Alt】+（小）【2】

右對齊(R) 【Ctrl】+【Alt】+3，【Ctrl】+【Alt】+（小）【3】

頂對齊（T) 【Ctrl】+【Alt】+4，【Ctrl】+【Alt】+（小）【4】

水平居中（H) 【Ctrl】+【Alt】+5，【Ctrl】+【Alt】+（小）【5】

底對齊（B) 【Ctrl】+【Alt】+6，【Ctrl】+【Alt】+（小）【6】

均分寬度（W) 【Ctrl】+【Alt】+7，【Ctrl】+【Alt】+（小）【7】

均分高度（D) 【Ctrl】+【Alt】+9，【Ctrl】+【Alt】+（小）【9】

合併路徑（J) 【Ctrl】+【J】

拆分路徑（S) 【Ctrl】+【Shift】+【J】

組合路徑（G) 【Ctrl】+【G】

取消組合路徑（U) 【Ctrl】+【Shift】+【G】

縮小字型（S) 【Ctrl】+【Shift】+【，】

增大字型（L) 【Ctrl】+【Shift】+【.】

粗體樣式（B) 【Ctrl】+【B】

斜體樣式（I) 【Ctrl】+【I】

左對齊（L) 【Ctrl】+【Alt】+【Shift】+【L】

右對齊（R) 【Ctrl】+【Alt】+【Shift】+【R】

兩端對齊（J) 【Ctrl】+【Alt】+【Shift】+【J】

強制齊行（S) 【Ctrl】+【Alt】+【Shift】+【S】

附加到路徑（P) 【Ctrl】+【Shift】+【Y】

轉換為路徑（C) 【Ctrl】+【Shift】+【P】

檢查拼寫（S）… 【Shift】+【F7】

重複外掛程式【Ctrl】+【Alt】+【Shift】+【X】

開新視窗（N) 【Ctrl】+【Alt】+【N】

顯示隱藏”工具”（T) 【Ctrl】+【F2】

顯示隱藏”屬性”（P) 【Ctrl】+【F3】

顯示隱藏”答案”（A) 【Alt】+【F1】

顯示隱藏”最佳化”（O) 【F6】

顯示隱藏”層”(L) 【F2】

顯示隱藏”幀”（R) 【Shift】+【F2】

顯示隱藏”歷史記錄”（H) 【Shift】+【F10】

顯示隱藏”樣式”（S) 【Shift】+【F11】

顯示隱藏”庫”（Y) 【F11】

顯示隱藏”URL”（U) 【Alt】+【Shift】+【F10】

顯示隱藏”顏色混合器”（M) 【Shift】+【F9】

顯示隱藏”樣本”（W) 【Ctrl】+【F9】

顯示隱藏”信息”（I) 【Alt】+【Shift】+【F12】

顯示隱藏”行為”（B) 【Shift】+【F3】

顯示隱藏”查找和替換（F) 【Ctrl】+【F】

其它

下一幀 【PgDn】，【Ctrl】+【PgDn】

克隆並向上大幅推動 【Alt】+【Shift】+【↑】，【Ctrl】+【Alt】+【Shift】+【↑】

克隆並向上輕推 【Alt】+【↑】，【Ctrl】+【Alt】+【↑】

克隆並向下大幅推動 【Alt】+【Shift】+【↓】，【Ctrl】+【Alt】+【Shift】+【↓】

克隆並向下輕推 【Alt】+【↓】，【Ctrl】+【Alt】+【↓】

克隆並向右大幅推動 【Alt】+【Shift】+【→】，【Ctrl】+【Alt】+【Shift】+【→】

克隆並向右輕推 【Alt】+【→】，【Ctrl】+【Alt】+【→】

克隆並向左大幅推動 【Alt】+【Shift】+【←】，【Ctrl】+【Alt】+【Shift】+【←】

克隆並向左輕推 【Alt】+【←】，【Ctrl】+【Alt】+【←】

前一幀 【PgUP】，【Ctrl】+【PgUP】

向上大幅推動 【Shift】+【↑】

向上輕推 【↑】

向下大幅推動 【Shift】+【↓】

向下輕推 【↓】

向右大幅推動 【Shift】+【→】

向右輕推 【→】

向左大幅推動 【Shift】+【←】

向左輕推 【←】

播放動畫【Ctrl】+【Alt】+【P】

用所選填充象素 【Alt】+【退格】，【Alt】+【DEL】

貼上於內部 【Ctrl】+【Shift】+【V】

編輯點陣圖【Ctrl】+【E】

退出點陣圖模式【Ctrl】+【Shift】+【E】

網頁切法

切片在製作網頁的過程中占有很重要的地位，切片的成功與否直接決定日後網頁製作的進度快慢和網站運行的速度，只有通過大量的練習才能體會切片的含義

切片介紹

1． 切片是將圖片轉換成可編輯網頁的一座橋樑，通過切片才可以將普通圖片變成Dreamweaver可以編輯的網頁格式

2． 切片後的圖像可以更快的在網路上傳播

3． 切片後的圖像也是網頁中片的主要來源

切片方法

1． 切片首先保證切出網頁中需要多次修改的區域，例如文字區域

2． 切片圖像的大小儘量保持在15K以內（便於網路傳輸）

3． 充分利用Dreamweaver中的自動拼貼功能減少垃圾切片

操作技巧

技巧1：使用鍵盤的方向鍵移動對象時，按住【Shift】鍵不放，每次可以移動10個像素。

技巧2：使用【指針】工具移動對象時，按住【Shift】鍵不放，可以保證其水平或垂直移動。

技巧3：按住【Alt】鍵不放拖拽某個對象，即可對其進行複製。但是自動形狀不能用這個操作，因為自動形狀是一種組合狀態，可以使用複製貼上命令複製。

技巧4：對於所有的形狀繪製工具而言，按住【Shift】鍵不放進行繪製，可以保證其寬高比始終為1：1。

技巧5：使用基本形狀工具繪製形狀時，按住【空格】鍵不放，不要鬆開滑鼠左鍵，可以移動矢量圖形的位置。繪製選區的時候也是如此。

技巧6：使用【矩形】工具繪製矩形時，按住鍵盤的上或下鍵不放，不要鬆開滑鼠左鍵，可以增加或減少矩形的圓度。

技巧7：需要選擇組內對象時，並不需要取消組合，可以選擇【部分選定】工具來選擇組內對象，這對於多個組合對象的編輯來說非常方便。

技巧8：使用【鋼筆】工具繪製路徑的過程中，按住【Alt】鍵不放，可以隨時調整路徑點的控制手柄。

技巧9：使用【刷子】工具繪製圖像時，按住【Shift】鍵不放，繪製出出一條水平或垂直線後，釋放滑鼠，但不要鬆開【Shift】鍵，繼續繪製，fireworks會把所畫前一條線的終點和後一條線的起點連線起來。

技巧10：按住【Alt】鍵，單擊【層】面板中的點陣圖圖層，可以根據點陣圖的形狀獲得選區。

技巧11：繪製多個選區時，按住【Shift】鍵表示增加選區；按住【Alt】鍵表示減選區；按住【Shift】+【Alt】鍵表示對選區進行交集運算。

技巧12：在給選區填充顏色時，可以使用【Alt】+【Delete】鍵快速填充顏色，與photoshop里填充前景色的快捷鍵一樣。

技巧13：按快捷鍵【Ctrl】+【F8】，可以創建一個新的元件。

技巧14：按住【Ctrl】鍵，單擊【混色器】面板下方的顏色欄，可以快速切換到不同的顏色模式。

技巧15：在顏色彈視窗採集顏色時，按住【Shift】鍵可以確保獲得的顏色為網路安全色。

技巧16：如果要給輔助線精確定位，可以在輔助線上雙擊滑鼠左鍵，在彈出的【移動引導線】對話框中輸入詳細的坐標。

技巧17：在【層】面板中，選中蒙板圖示並像移動圖層那樣按住蒙板圖示將其移動到其他位置，這樣可以刪除蒙板，並且保留下了蒙板對象。

技巧18：使用【文本】工具單擊已經創建的文本，待游標轉換為文本游標時，按住鍵盤上的【Ctrl】加鍵盤的左右鍵可以用來改變字元間距，按住【Ctrl】加鍵盤的上下鍵可以用來改變文本的行距。

學習輔導教材，網路上有很多文字圖片類的和視頻類的教程。另外看書本結合練習也是很好的選擇！

羽化方法

用Fireworks對點陣圖邊緣進行羽化，這是在fireworks運用中常用到的功能，希望對大家學習fireworks有所幫助。

方法一

一、導入點陣圖

二、用橢圓工具，在點陣圖上畫一個橢圓，填充色為黑色。並在其fill面板中，設定edge為feather，默認為10，不過我們可以設得比較大。

三、用黑色箭頭工具全選這二個物體。

四、選單modify中的mask命令，並在其後序選單中選擇group as mask.

五、這樣圖片邊緣羽化也就完成了。用mask做羽化有一個好處，就是當你選擇這個圖片時，框線是藍色的時候，選中當中的藍色標記，就能把改變圖片的位置。呵呵，這樣你就不需要擔心選擇的地方不正確了，只要確定好最終的圖片大小 ，就能隨意調節羽化圖片的哪一部份。

六、取消羽化。Modify選單的最下面命令，ungroup,就能取消羽化，把圖片還原成原先的點陣圖和黑色的橢圓形。

方法二

一、在檔案中導入一張需要被羽化的點陣圖（選單 %26gt; file %26gt; import）

二、在工具列中選擇橢圓形選擇工具或是矩形選擇工具，在點陣圖需要羽化的部位進行選擇。

三、選單 %26gt; modify %26gt; marquee %26gt; feather命令。

四、在feather selection對話框中設定羽化的半徑，這裡我選了20個象素，點擊OK

五、用黑色箭頭工具，把這個選擇框拉到一邊，相應的圖片也跟著移到旁邊。

六、我們可以把不需要的圖片刪除，也可以把這個已經羽化完了的圖片複製到別的檔案中去。