利用簡(jiǎn)單有效的辦法，用Fireworks打造屬于自己的UI套件，同時(shí)還能夠很方便的應(yīng)用到其他設(shè)計(jì)中。
無(wú)論網(wǎng)站還是應(yīng)用，都需要優(yōu)秀的界面設(shè)計(jì)。倘若界面設(shè)計(jì)不夠優(yōu)秀，那么用戶(hù)會(huì)毫無(wú)愉悅感，會(huì)影響到用戶(hù)與產(chǎn)品、網(wǎng)站、應(yīng)用的交互，很多商機(jī)也因此喪失。

若想保持整體設(shè)計(jì)的一致性，可以設(shè)計(jì)一套風(fēng)格指南或者UI套件作為參考，這種方法非常的有效。同時(shí)設(shè)計(jì)師也能為開(kāi)發(fā)者提供參考，提高協(xié)同工作效率。而且在最后進(jìn)行案例展示時(shí)也能夠用得到。
本教程通過(guò)步驟分解，向大家介紹如何使用Fireworks打造專(zhuān)屬UI套件——同時(shí)也能了解一些Fireworks使用技法，一些基本功能和面板。

倘若界面不一致、不清爽，很有可能導(dǎo)致用戶(hù)流失——本教程將教你用Fireworks打造UI套件，以便日后使用。并教會(huì)你如何將設(shè)計(jì)元素整合，以便進(jìn)行案例展示。

用Fw打造的UI套件可以輸出為矢量格式，形狀大小任調(diào)——還支持Retina，這就是Fw牛逼的地方！

請(qǐng)下載本教程所需文件： support files

01.新建文檔

打開(kāi)Fw,文件>新建，高度280px，寬度600px，分辨率72dpi。

按住U以選擇形狀工具：花一個(gè)600px的正方形，預(yù)設(shè)面板中顏色#EDEDED

02.默認(rèn)按鈕

按鈕是關(guān)鍵，我們來(lái)開(kāi)始定義樣式。
按U畫(huà)一個(gè)150x45px的矩形。

在預(yù)設(shè)面板中，漸變>線性，三個(gè)顏色點(diǎn)：#2685C9, #268EDE 
F6EA7 (從左到右)
圓度35% 邊框1px #14466B.

03.添加細(xì)節(jié)

點(diǎn)擊下面板的加號(hào)

濾鏡>雜點(diǎn)>新增雜點(diǎn)>數(shù)量：2（可自行調(diào)節(jié)）

濾鏡>PS動(dòng)態(tài)效果，勾選內(nèi)側(cè)陰影：不透明度43,距離3，角度-90度 大小5，其他均為0

04.再來(lái)點(diǎn)細(xì)節(jié)

復(fù)制畫(huà)完的矩形并粘貼，讓新矩形位于最上方，大小改為148x43px，向左移動(dòng)1px，向下移動(dòng)1px。去除所有填充顏色和效果，邊框1px，顏色#2B93E3.

05. 添加文本

現(xiàn)在需要添加一些文本，使用支持文件中提供的Arvo字體。

輸入文本對(duì)齊到按鈕中央。字體顏色#FFFFFF大小20px.

然后復(fù)制并粘貼文本，選擇底部的文本，下移1px，顏色設(shè)置為#0D2C42.

06.組織圖層

選擇按鈕所有的圖層，按 Ctrl+G:會(huì)將圖層編組，命名為默認(rèn)按鈕。

07.懸停按鈕

我們需要打造按鈕的懸停狀態(tài)。

復(fù)制并粘貼前一編組，命名為懸停按鈕，放在原按鈕的下方。

按A以選擇部分選定工具；選擇矩形，進(jìn)行漸變?cè)O(shè)置，最右面的顏色改為#1A6196.

08.激活按鈕

現(xiàn)在我們需要按鈕的激活狀態(tài)。

復(fù)制并粘貼前一編組（懸停按鈕），命名為激活按鈕，放在原按鈕的下方。

按A以選擇部分選定工具；選擇矩形，進(jìn)行漸變?cè)O(shè)置，選擇翻轉(zhuǎn)漸變。

09.標(biāo)簽