• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ FireWorks教程 ] Fireworks打造專屬的UI套件教學—- 其他教程




    教學主題: Fireworks打造專屬的UI套件教程

    大家好!! 小編今天來和大家分享關於 其他教程中的FireWorks教程教學

    今天的這個教學主題是: Fireworks打造專屬的UI套件教程

    這教學的重點為這幾點 [ 教程,打造,顏色,按鈕,複製,選擇,一個,文本,邊框,開關, ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

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

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

    教程素材:MissYuan_教程素材.rar

    若想保持整體設計的一致性,可以設計一套風格指南或者UI套件作為參考,這種方法非常的有效。同時設計師也能為開發者提供參考,提高協同工作效率。而且在最後進行案例展示時也能夠用得到。

    本教程通過步驟分解,向大家介紹如何使用Fireworks打造專屬UI套件——同時也能了解一些Fireworks使用技法,一些基本功能和面板。

    Fireworks打造專屬的UI套件教學

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

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

    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套件教學
    貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
    使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
    用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

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

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

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

    12.打開開關細節1

    Fireworks打造專屬的UI套件教學
    貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
    的選區;按住Alt鍵將從起始點為中心勾劃選區。

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

    選擇濾鏡>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套件教學

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

    看完小編分享的教學之後 是不是對FireWorks教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 Fireworks打造專屬的UI套件教程 這教學會喜歡

    文章標題: 骨子愛創意- Fireworks打造專屬的UI套件教程–轉載請註明來源處

    本教學分類為FireWorks教程中的 其他教程相關教學

    文章相關關鍵字為: 教程,打造,顏色,按鈕,複製,選擇,一個,文本,邊框,開關,

    本文永久連結 :Fireworks打造專屬的UI套件教程

    本文轉載自 :VIA