用FIREWORKS打造專屬的UI套件

 

　　倘若界面不一致、不清爽，很有可能導致用戶流失——本教程將教你用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.個人資料中的簡歷文本