fireworks

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

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了。 ^[1] 

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

創建和編輯矢量圖像與位圖圖像，並導入和編輯本機Photoshop和Illustrator文件。

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

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

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

fireworks(18張)

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

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

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

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

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

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

Fireworks(20張)

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

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

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

指針、選擇後方對象 【V】，【0】 ^[2] 

部分選定 【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

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

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