您現在的位置是:電腦技術吧?>? 組裝維修 ??>??套件,m套件??>??正文詳情

套件,m套件

錢含巧2019-11-11 09:10:33 人圍觀
簡介思域套件如果界面不一致和刷新,很可能導致用戶流失。本教程將教您使用焰火來構建一個供將來使用的UI套件。并教你如何整合設計元素進行案例研究用FW構建的UI套件可以輸出為矢c

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

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

  最后還要檢查整體是否排布有序。

如果沒有,那么趕緊整理、排列一遍。

版權聲明:本文由 錢含巧 整理編輯。

原標題:105套件,4700套件

轉載注明出處:http://www.dn9ww09s.icu/assemble/11650.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦配置參數怎么看,電腦配置怎么看

    電腦配置參數怎么看,電腦配置怎么看 相關圖片電腦配置怎么看怎么選對許多老鳥來說,他們知道如何看待自己的電腦配置,但那些購買品牌電腦或筆記本電腦的人卻不知道如何看待自己的電腦配置。買價很貴。在使用過程中,各種...

  • 絕對路徑 相對路徑,相對路徑跟絕對路徑

    絕對路徑 相對路徑,相對路徑跟絕對路徑 相關圖片絕對路徑和相對路徑的特點在HTML中,當涉及到文件(如超鏈接、圖片等)時,絕對路徑和相對路徑的概念都將涉及1。絕對路徑絕對路徑指的是文件真正存在于硬盤上的路徑。例如,bg...

  • 電腦下面的任務欄不見了不顯示,電腦不顯示任務欄

    電腦下面的任務欄不見了不顯示,電腦不顯示任務欄 相關圖片電腦任務欄沒了有多少經常使用電腦的人會遇到這樣或那樣的問題,這是任何用戶都不會遇到的。打開網頁后,他們發現桌面下的狀態欄不見了,但當他們關閉網頁時,他們又出來了。...

  • 我的屬性面板,屬性面板

    我的屬性面板,屬性面板 相關圖片屬性網頁中最重要的元素是鏈接。今天小編先介紹如何在Dreamweaver中添加超鏈接,選擇要添加超鏈接的文本,在屬性面板中點擊鏈接文件夾,選擇要鏈接的網頁文件,添加圖層屬性面板在...

  • 筆記本沒有無線網絡連接,筆記本無線網絡連接不上

    筆記本沒有無線網絡連接,筆記本無線網絡連接不上 相關圖片筆記本連接不上wifi我們知道無線網絡連接是筆記本最大的亮點,但也有一些用戶遇到了明顯存在無線網絡的情況,卻沒有辦法連接。這可能是因為他們不熟悉筆記本的開關。接下來,小...

  • 同框,陰陽師哪些框有特效

    同框,陰陽師哪些框有特效 相關圖片動畫制作視頻線框文本效果也是非常簡單的效果之一。在生產過程中,效果如圖1所示。為了達到這種文本效果,具體操作如下:圖11。創建新電影,在屬性面板中將其大小設置為290px8特...

  • mac遠程桌面連接在哪,mac連接遠程桌面

    mac遠程桌面連接在哪,mac連接遠程桌面 相關圖片遠程桌面連接在Windows系統上,我們可以通過遠程桌面或QQ遠程控制對方的電腦。但對于一個使用蘋果Mac的小朋友來說,這并不容易。因為蘋果Mac的特殊性,還想操作,怎么操win7遠程桌面...

  • 筆記本風扇噪音,風扇噪音小的筆記本

    筆記本風扇噪音,風扇噪音小的筆記本 相關圖片筆記本風扇響我們都知道風扇是筆記本電腦的主要散熱片。當筆記本電腦工作時,里面產生的熱量會被風扇排出。但也有部分用戶遇到了筆記本風扇的噪音,在這種噪音環境下工作很長...

  • 簡單的小制作,人物模型制作

    簡單的小制作,人物模型制作 相關圖片手工科技小制作簡單的首先,讓我們欣賞我們美麗逼真的玉:1。用面圓工具畫一個圓,如下圖所示:2。用漸變填充剛畫的圓,選擇星型輻射(適當調整漸變的不透明度),然后選擇紋理...

  • 電腦顯示器花屏是什么問題,電腦顯示器黑屏

    電腦顯示器花屏是什么問題,電腦顯示器黑屏 相關圖片電腦顯示器近日,在后臺,一位用戶反映,自己的電腦顯示器正處于倒位、無序、屏幕抖動、失真等狀態,并詢問是怎么回事?怎么解決?其實,這是典型的電腦顯示屏,那么如何解決...

熱評文章

  • 筆記本溫度過高,筆記本溫度過高會怎樣

    筆記本溫度過高,筆記本溫度過高會怎樣 相關圖片顯卡溫度過高眾所周知,由于空間狹小,筆記本電腦通常比臺式機更容易加熱。如果長時間使用,嚴重時會切換或打開程序。嚴重時,會出現藍屏或自動重啟。這時,怎樣才能解決筆記...

  • Flash制作,flash怎么制作

    Flash制作,flash怎么制作 相關圖片flash動畫的制作流程Flash MX添加了properties inspector,并引入了從Flash 5.0的智能剪輯演變而來的組件。它有七個組件UI預置(如圖1所示)來運行fflash動畫制作教程...

  • 華為小電腦筆記本新款,小手板電腦筆記本

    華為小電腦筆記本新款,小手板電腦筆記本 相關圖片聯想筆記本電腦聲音小怎么辦如今,許多人會用筆記本玩游戲。很多用戶像小編一樣抱怨筆記本的聲音太小,尤其是玩網絡游戲時。一點也不令人震驚。有時,即使聲音很大,聲音很小...

  • 電腦筆記本,什么筆記本電腦好

    電腦筆記本,什么筆記本電腦好 相關圖片哪種筆記本電腦比較好當使用筆記本電腦時,用戶以非常高的速度打開軟件和網頁是很奇怪的。顯然,我們還沒有打開幾個軟件,但不知道如何得到一個筆記本電腦卡。這會影響我們的...

  • 水晶logo,水晶logo標

    水晶logo,水晶logo標 相關圖片水晶品牌標志最終效果圖中水晶標識的具體制作過程如下:水星家紡logo...

  • 聯想u盤啟動,u盤啟動

    聯想u盤啟動,u盤啟動 相關圖片聯想電腦u盤啟動如何設置BIOS優先級?實際上,設置BIOS優先級很容易。只要我們做以下步驟,我們就能解決這個問題。作為一臺計算機,我們對如何設置BIOS有一點專業知識聯想按f12沒有...

  • 華碩筆記本攝像頭倒置怎么辦,華碩筆記本有攝像頭嗎

    華碩筆記本攝像頭倒置怎么辦,華碩筆記本有攝像頭嗎 相關圖片筆記本攝像頭倒置我們知道筆記本電腦有自己的內置攝像頭,普通用戶平時不會打開攝像頭,有些用戶還會用攝像頭進行視頻聊天。這不是真的。當用戶進行QQ聊天時,當他們打開拍照軟...

  • 腳本鏈接,點連接腳本

    腳本鏈接,點連接腳本 相關圖片連接腳本沒有entry外部鏈接,又常被稱為:反向鏈接或導入鏈接,是指其他網站鏈接到你的網站的鏈接。  外部鏈接指的是針對搜索引擎,與其它站點所做的友情鏈接。高質量的外部鏈...

  • 筆記本打字母怎么成數字了,筆記本鍵盤打字母出數字

    筆記本打字母怎么成數字了,筆記本鍵盤打字母出數字 相關圖片聯想筆記本字母鍵盤打出數字市場上的電子產品越來越多。最著名的代表是手機、筆記本電腦和平板電腦。雖然這些高科技產品的用戶很多,但仍有一些用戶會遇到問題。如果沒有用戶...

  • 顏色漸變,ai顏色漸變

    顏色漸變,ai顏色漸變 相關圖片ps顏色漸變要測試網頁,代碼如下:htmlheadtitleruntitled document/titlemetahttp equiv=content typeconteai漸變怎么吸顏色...

關注微信

变脸官网查询