當前位置: 首頁 > 設計資訊 > 設計教程 > 正文

用Fireworks打造專屬的UI套件

2017-09-14 3267 0

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

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

用Fireworks打造專屬的UI套件

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

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

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

01.新建文檔

用Fireworks打造專屬的UI套件

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

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

02.默認按鈕

用Fireworks打造專屬的UI套件

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

在預設面板中,漸變>線性,三個顏色點:#2685C9, #268EDE F6EA7 (從左到右)
圓度35% 邊框1px #14466B.

03.添加細節(jié)

用Fireworks打造專屬的UI套件

點擊下面板的加號

濾鏡>雜點>新增雜點>數量:2(可自行調節(jié))

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

04.再來點細節(jié)

用Fireworks打造專屬的UI套件

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

05. 添加文本

用Fireworks打造專屬的UI套件

現在需要添加一些文本,使用支持文件中提供的Arvo字體。

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

然后復制并粘貼文本,選擇底部的文本,下移1px,顏色設置為#0D2C42.

06.組織圖層

用Fireworks打造專屬的UI套件

選擇按鈕所有的圖層,按 Ctrl+G:會將圖層編組,命名為默認按鈕。

07.懸停按鈕

用Fireworks打造專屬的UI套件

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

復制并粘貼前一編組,命名為懸停按鈕,放在原按鈕的下方。

按A以選擇部分選定工具;選擇矩形,進行漸變設置,最右面的顏色改為#1A6196.

08.激活按鈕

用Fireworks打造專屬的UI套件

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

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

按A以選擇部分選定工具;選擇矩形,進行漸變設置,選擇翻轉漸變。

09.標簽

用Fireworks打造專屬的UI套件


34
評論區(qū)(0)
正在加載評論...