倘若界面不一致、不清爽，很有可能導致用戶流失——本教程將教你用Fireworks打造UI套件，以便日後使用。並教會你如何將設計元素整合，以便進行案例展示。
用Fw打造的UI套件可以輸出為矢量格式，形狀大小任調——還支持Retina，這就是Fw牛逼的地方!
請下載本教程所需文件： support files
01.新建文檔
打開Fw,文件>新建，高度280px，寬度600px，分辨率72dpi。
按住U以選擇形狀工具：花一個600px的正方形，預設面板中顏色#EDEDED
02.默認按鈕
按鈕是關鍵，我們來開始定義樣式。
按U畫一個150x45px的矩形。
在預設面板中，漸變>線性，三個顏色點：#2685C9, #268EDE F6EA7 (從左到右)
圓度35% 邊框1px #14466B.
03.添加細節
點擊下面板的加號
濾鏡>雜點>新增雜點>數量：2(可自行調節)
濾鏡>PS動態效果，勾選內側陰影：不透明度43,距離3，角度-90度 大小5，其他均為0
04.再來點細節
復制畫完的矩形並粘貼，讓新矩形位於最上方，大小改為148x43px，向左移動1px，向下移動1px。去除所有填充顏色和效果，邊框1px，顏色#2B93E3.
05. 添加文本
現在需要添加一些文本，使用支持文件中提供的Arvo字體。
輸入文本對齊到按鈕中央。字體顏色#FFFFFF大小20px.
然後復制並粘貼文本，選擇底部的文本，下移1px，顏色設置為#0D2C42.
06.組織圖層
選擇按鈕所有的圖層，按 Ctrl+G:會將圖層編組，命名為默認按鈕。
07.懸停按鈕
我們需要打造按鈕的懸停狀態。
復制並粘貼前一編組，命名為懸停按鈕，放在原按鈕的下方。
按A以選擇部分選定工具;選擇矩形，進行漸變設置，最右面的顏色改為#1A6196.
08.激活按鈕
現在我們需要按鈕的激活狀態。
復制並粘貼前一編組(懸停按鈕)，命名為激活按鈕，放在原按鈕的下方。
按A以選擇部分選定工具;選擇矩形，進行漸變設置，選擇翻轉漸變。
09.標簽
現在我們完成按鈕部分，現在開始制作標簽。
畫一個55x28px的矩形。按P使用鋼筆工具，在矩形左邊畫一個三角形。
然後按Shift選擇兩個形狀，在預設面板點擊 添加/聯合 按鈕來完成形狀結合
10.標簽細節
選擇形狀，顏色設置為#FFFFFF 邊框1px #BFBFBF.
按U兩次，選擇橢圓工具，按Shift在標簽左部畫一個8x8px的圓。
選擇兩個形狀，點擊去除/打孔按鈕。
文本顏色#666666 大小16 字體Arvo
11.打開開關
打算設計一個開關的打開狀態。
畫一個72x23px的矩形，圓度100%。選擇純色填充#FFFFFF 邊框顏色#C8C8C8 (以便和標簽一致)
文本16px，位於開關左部，顏色 #666666.
12.打開開關細節1
我們需要添加一點細節，這樣開關看起來就不會太平。
選擇濾鏡>PS動態效果>內側陰影：不透明度 31, 距離 3, 角度 90°, 大小5
13.打開開關細節2
畫一個23×23的圓形，放在開關的右部，添加1px 顏色#B6B6B6 的邊框
漸變>圓錐形，漸變從#FFFFFF到#DDDDDD，設置總共六個間隔點，自行調整，最後要有金屬質感。
14.打開開關細節3
復制圓形，粘貼置底部。改變填充顏色為#000000 去除所有樣式。
濾鏡>模糊>高斯模糊，數值2.1
下移2px，左移2px，不透明度50%
15.關閉開關
編組打開開關，放在按鈕的右邊。
復制打開開關，將On改成Off，文本移動到右端。將兩個圓移動到左端，調整陰影向右移動4px。
16.個人資料
畫一個200x170px的矩形，一定要確保個人資料框個文檔中其他組件對齊，最好之前先整理一下按鈕、標簽、開關。然後填充顏色#FFFFFF 邊框 1px 顏色#999999.
現在，在個人資料框上方畫一個200x82px的矩形，邊框1px border顏色 #0F3756.
17.個人資料細節
在預設面板中，選擇漸變>線性，三種顏色： #2685C9, #268EDE, #1F6EA7,
復制該矩形，粘貼到上方。寬度和高度各減少2px，添加邊框1px顏色#2B93E3.
18.個人資料細節2
使用Arvo字體，大小 20, 顏色 #0D2C42,在個人資料框上部分輸入姓名，然後居中。
復制並粘貼文本，顏色改為#FFFFFF 下移1px
19.個人資料中的圖片
粘貼你的個人頭像，大小設為60x60px。在圖像上方畫一個圓，確保圓無填充無邊框。
同時選擇圓和圖像。修改>蒙版>組合為蒙版。
重新復制這個圓，添加 2px顏色FFFFF 的邊框
20.對齊面板
利用對齊面板，可實現個人頭像快速居中。
窗口>對齊打開對齊面板
點擊個人頭像，再點擊個人資料框，然後進行對齊。
21.個人資料中的簡歷文本
簡歷文本部分使用 Arial in 13px 顏色#666666 for this text.
輸入完後記得居中對齊。
22.評星
按住工具欄中的形狀工具，你會發現星形，畫一個28x26px的星形，復制五次，每復制一個就把新星形放在前一個星形的右邊。
第一個星形的樣式和步驟2的樣式相同，其他的星形填充#FFFFFF 邊框#BFBFBF
23.排列
如果之前沒有進行整理、對齊排列，那麼現在要開始進行了。
用Ctrl+G將各個元素進行編組，合理命名。這這關重要，因為將來如果你要用這套組件，有序的命名和排列會幫你大忙。
24.添加頁碼
復制一份之前繪制的按鈕，移動到畫布的其他區域。大小改為30x30px,文本替換為“<”，然後居中。
25.復制該編組
復制頁碼編組，右移，文本改為“1”。
復制，移動到最右端，文本改為“>”
26.再次復制
再次復制頁碼編組。總共復制六次，頁碼從2到7.
然後直接選擇這些頁碼框，填充顏色#FFFFFF 邊框顏色#BFBFBF
27.分享按鈕
套件中包含的分享按鈕用起來非常方便。下載支持文件，然後添加到UI套件中。如果感覺不夠精致，你也可以自己再改改這些按鈕。
28.最後一次組織排列
最後還要檢查整體是否排布有序。如果沒有，那麼趕緊整理、排列一遍。