新手教程：用Fireworks打造專屬的UI套件

利用簡單有效的辦法，用Fireworks打造屬于自己的UI套件，同時還能夠很方便的應用到其他設計中。
無論網站還是應用，都需要優秀的界面設計。倘若界面設計不夠優秀，那么用戶會毫無愉悅感，會影響到用戶與產品、網站、應用的交互，很多商機也因此喪失。

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

好文推薦：
《經驗分享：10個超贊的圖標設計技巧》
《觸摸交互設計快速入門：手機篇》
《經驗分享：移動網站設計應該避免的“七宗罪”》

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

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

請下載本教程所需文件：?support?files

01.新建文檔

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

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

02.默認按鈕

按鈕是關鍵，我們來開始定義樣式。
按U畫一個150x45px的矩形。

在預設面板中，漸變>線性，三個顏色點：#2685C9,?#268EDE?&#1F6EA7?(從左到右)
圓度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

畫一個23x23的圓形，放在開關的右部，添加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.最后一次組織排列

最后還要檢查整體是否排布有序。如果沒有，那么趕緊整理、排列一遍。

 

原文地址：www.creativebloq.com
優設網翻譯：@MartinRGB

本文由優設網原創翻譯，轉摘請注明優設網譯文出處，謝謝各位小編。

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量62萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：