DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> 用FIREWORKS打造專屬的UI套件
用FIREWORKS打造專屬的UI套件
編輯:Fireworks基礎     

倘若界面不一致、不清爽,很有可能導致用戶流失——本教程將教你用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.添加細節

用Fireworks打造專屬的UI套件

  點擊下面板的加號

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

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

  04.再來點細節

用Fireworks打造專屬的UI套件

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

  05. 添加文本

用Fireworks打造專屬的UI套件

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

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

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

  06.組織圖層

 

用Fireworks打造專屬的UI套件

 

 

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

  07.懸停按鈕

用Fireworks打造專屬的UI套件

  我們需要打造按鈕的懸停狀態。

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

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

  08.激活按鈕

用Fireworks打造專屬的UI套件

  現在我們需要按鈕的激活狀態。

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

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

  09.標簽

用Fireworks打造專屬的UI套件

  現在我們完成按鈕部分,現在開始制作標簽。

  畫一個55x28px的矩形。按P使用鋼筆工具,在矩形左邊畫一個三角形。

  然後按Shift選擇兩個形狀,在預設面板點擊 添加/聯合 按鈕來完成形狀結合

  10.標簽細節

用Fireworks打造專屬的UI套件

  選擇形狀,顏色設置為#FFFFFF 邊框1px #BFBFBF.

  按U兩次,選擇橢圓工具,按Shift在標簽左部畫一個8x8px的圓。

  選擇兩個形狀,點擊去除/打孔按鈕。

  文本顏色#666666 大小16 字體Arvo

  11.打開開關

 

用Fireworks打造專屬的UI套件

 

 

  打算設計一個開關的打開狀態。

  畫一個72x23px的矩形,圓度100%。選擇純色填充#FFFFFF 邊框顏色#C8C8C8 (以便和標簽一致)

  文本16px,位於開關左部,顏色 #666666.

  12.打開開關細節1

用Fireworks打造專屬的UI套件

  我們需要添加一點細節,這樣開關看起來就不會太平。

  選擇濾鏡>PS動態效果>內側陰影:不透明度 31, 距離 3, 角度 90°, 大小5

  13.打開開關細節2

用Fireworks打造專屬的UI套件

  畫一個23×23的圓形,放在開關的右部,添加1px 顏色#B6B6B6 的邊框

  漸變>圓錐形,漸變從#FFFFFF到#DDDDDD,設置總共六個間隔點,自行調整,最後要有金屬質感。

  14.打開開關細節3

用Fireworks打造專屬的UI套件

  復制圓形,粘貼置底部。改變填充顏色為#000000 去除所有樣式。

  濾鏡>模糊>高斯模糊,數值2.1

  下移2px,左移2px,不透明度50%

  15.關閉開關

用Fireworks打造專屬的UI套件

  編組打開開關,放在按鈕的右邊。

  復制打開開關,將On改成Off,文本移動到右端。將兩個圓移動到左端,調整陰影向右移動4px。

  16.個人資料

用Fireworks打造專屬的UI套件

  畫一個200x170px的矩形,一定要確保個人資料框個文檔中其他組件對齊,最好之前先整理一下按鈕、標簽、開關。然後填充顏色#FFFFFF 邊框 1px 顏色#999999.

  現在,在個人資料框上方畫一個200x82px的矩形,邊框1px border顏色 #0F3756.

  17.個人資料細節

用Fireworks打造專屬的UI套件

 

   在預設面板中,選擇漸變>線性,三種顏色: #2685C9, #268EDE, #1F6EA7,

  復制該矩形,粘貼到上方。寬度和高度各減少2px,添加邊框1px顏色#2B93E3.

  18.個人資料細節2

用Fireworks打造專屬的UI套件

  使用Arvo字體,大小 20, 顏色 #0D2C42,在個人資料框上部分輸入姓名,然後居中。

  復制並粘貼文本,顏色改為#FFFFFF 下移1px

  19.個人資料中的圖片

用Fireworks打造專屬的UI套件

  粘貼你的個人頭像,大小設為60x60px。在圖像上方畫一個圓,確保圓無填充無邊框。

  同時選擇圓和圖像。修改>蒙版>組合為蒙版。

  重新復制這個圓,添加 2px顏色FFFFF 的邊框

  20.對齊面板

用Fireworks打造專屬的UI套件

  利用對齊面板,可實現個人頭像快速居中。

  窗口>對齊打開對齊面板

  點擊個人頭像,再點擊個人資料框,然後進行對齊。

  21.個人資料中的簡歷文本

用Fireworks打造專屬的UI套件

  簡歷文本部分使用 Arial in 13px 顏色#666666 for this text.

  輸入完後記得居中對齊。

  22.評星

用Fireworks打造專屬的UI套件

  按住工具欄中的形狀工具,你會發現星形,畫一個28x26px的星形,復制五次,每復制一個就把新星形放在前一個星形的右邊。

  第一個星形的樣式和步驟2的樣式相同,其他的星形填充#FFFFFF 邊框#BFBFBF

  23.排列

用Fireworks打造專屬的UI套件

  如果之前沒有進行整理、對齊排列,那麼現在要開始進行了。

  用Ctrl+G將各個元素進行編組,合理命名。這這關重要,因為將來如果你要用這套組件,有序的命名和排列會幫你大忙。

  24.添加頁碼

用Fireworks打造專屬的UI套件

  復制一份之前繪制的按鈕,移動到畫布的其他區域。大小改為30x30px,文本替換為“<”,然後居中。

  25.復制該編組

用Fireworks打造專屬的UI套件

  復制頁碼編組,右移,文本改為“1”。

  復制,移動到最右端,文本改為“>”

  26.再次復制

用Fireworks打造專屬的UI套件

  再次復制頁碼編組。總共復制六次,頁碼從2到7.

  然後直接選擇這些頁碼框,填充顏色#FFFFFF 邊框顏色#BFBFBF

  27.分享按鈕

用Fireworks打造專屬的UI套件

  套件中包含的分享按鈕用起來非常方便。下載支持文件,然後添加到UI套件中。如果感覺不夠精致,你也可以自己再改改這些按鈕。

  28.最後一次組織排列

用Fireworks打造專屬的UI套件

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved