相信大家玩過微信吧。,登錄是很多應(yīng)用必備的功能之一,登錄界面關(guān)乎你的使用者是否想進(jìn)一步來與程序互動(dòng).所以,我們要步步為營,吸引瀏覽者來做更深入的使用。下面學(xué)習(xí)啦小編給大家整理了更多關(guān)于Fireworks制作一個(gè)扁平化透明風(fēng)格的登錄界面，希望大家喜歡。

　　Fireworks制作一個(gè)扁平化透明風(fēng)格的登錄界面的方法步驟：

　　Fireworks制作登錄界面的幾個(gè)點(diǎn)需要考慮:

　　1.我們要設(shè)計(jì)的應(yīng)用,是一定需要登錄才能使用的嗎? 如果不是,那么不必一打開應(yīng)用就要求登錄,這會(huì)將很多潛在用戶拒之門外.

　　2.如果一打開應(yīng)用就要登錄,那么如何設(shè)計(jì)才能更好的吸引更多用戶登錄和注冊?

　　3.如何簡化用戶登錄和注冊的成本?

　　4.如何設(shè)計(jì)能更好的符合我們應(yīng)用的”氣質(zhì)”?讓用戶第一眼就愛上我們的應(yīng)用

　　先看一眼設(shè)計(jì)好的界面吧!第一個(gè)是登錄頁面的表單,第二個(gè)是點(diǎn)擊登錄后的動(dòng)態(tài)效果.

　　界面使用的元素分析：

　　1.一個(gè)logo,這個(gè)我們在上一節(jié)的設(shè)計(jì)教室中講過如何來做.

　　2.一個(gè)深灰色的圓角矩形

　　3.一個(gè)綠色圓角矩形登錄按鈕

　　4.兩個(gè)圖標(biāo)(郵箱和鎖的icon)

　　5.背景圖片

　　6.忘記密碼和新用戶注冊的文字

　　logo我們在上一節(jié)中講過設(shè)計(jì)過程,所以我們這里可以直接拿來用.繼續(xù)觀察,我們發(fā)現(xiàn)登錄按鈕還有登錄框都使用同樣形狀的圓角矩形, 只不過顏色有差異而已,那么,我們先來畫一個(gè)圓角矩形.

　　畫一個(gè)圓角矩形

　　先新建一個(gè)畫布,你可以使用快捷鍵ctrl+n,或者在文件中選擇新建, 畫布尺寸設(shè)置為640-1136px,分辨率為72dpi,背景設(shè)置為白色,然后點(diǎn)擊確定

　　在這里,我們仔細(xì)觀察,看到這個(gè)圖標(biāo)下面,有個(gè)箭頭,那就表示,這個(gè)圖標(biāo)其實(shí)是有并行選項(xiàng)的,保持鼠標(biāo)放在這個(gè)圖標(biāo)上,然后按住左鍵,

　　這個(gè)時(shí)候我們看到了什么? 哇,別有洞天是吧,現(xiàn)在,知道要怎么做了吧? 選擇”矩形工具”就可以了,當(dāng)然,機(jī)靈的同學(xué)們可以多練練手,里邊有很多方便的圖形,大家可以自己發(fā)掘.

　　選擇矩形工具后,我們拖動(dòng)鼠標(biāo),在白色畫布上畫一個(gè)矩形,就像下圖,然后,我們根據(jù)下圖來操作.就可以得到一個(gè)圓角的矩形了.

　　這里我們提一下fireworks的基本操作方式,首選創(chuàng)造一個(gè)形狀,然后選中這個(gè)形狀,接著調(diào)節(jié)這個(gè)形狀的屬性(屬性面板一般在屏幕最下方)。

　　現(xiàn)在要做一個(gè)按鈕, 因?yàn)榘粹o形狀和登錄框形狀一樣,所以,我們這里可以直接復(fù)制, 選中這個(gè)灰色框,復(fù)制和粘貼神馬的,我就不用說了吧?

　　然后,我們將這個(gè)矩形移到下方,按照下圖,將這個(gè)矩形的顏色設(shè)置為#0BD28A. 透明度設(shè)置為100(即全透明)

　　設(shè)計(jì)一個(gè)華麗的背景的方法步驟：

　　1.我們從網(wǎng)上找到一副壁紙作為素材.大家可以直接使用,也可以選擇自己喜歡的壁紙來練習(xí).對于壁紙的選擇,我這里建議,要找一些留白比較多的, 如果這個(gè)壁紙?zhí)^復(fù)雜,那么登錄界面的主視覺(按鈕,文字,輸入框等)辨識(shí)度就會(huì)變的很低.

　　2.這次,我們使用鍵盤上的ctrl+r,導(dǎo)入這張壁紙到我們的畫布中,導(dǎo)入后,選擇這幅圖,選擇菜單, 濾鏡>模糊>高斯模糊,在彈出的對話框中,將高斯模糊的數(shù)值調(diào)整為34

　　接下來,我們看到,壁紙變的模糊了,我們可以用鼠標(biāo)移動(dòng)這幅圖片,選擇你認(rèn)為理想的位置來放置. 完成后如下圖.

　　使用圖標(biāo)素材來為設(shè)計(jì)增加細(xì)節(jié)

　　接 下來,我們發(fā)現(xiàn),圖片中需要兩個(gè)圖標(biāo),一個(gè)郵箱圖標(biāo),一個(gè)鎖圖標(biāo). 這里,因?yàn)樯婕暗奖容^復(fù)雜的路徑操作,我們選擇求助于網(wǎng)上的素材, 網(wǎng)上的圖標(biāo)素材很多, 靜電推薦的素材網(wǎng)站是站酷(http://www.zcool.com.cn),大家可以去搜索合適的圖標(biāo)來使用,圖標(biāo)格式一般為透明的png,或者是矢 量的ai格式.這些都可以在fireworks中直接打開,非常方便.

　　好的,我們這里先復(fù)制一個(gè)灰色的圓角矩形,放到合適的位置,然后將合適的圖標(biāo)放到圖中.(同樣使用ctrl+r,導(dǎo)入下載好的圖標(biāo)圖片文件), 擺放到合適的位置,如果覺得圖標(biāo)大小不合適,我們同樣選中圖標(biāo),選擇

　　縮放工具來將圖標(biāo)調(diào)整到合適的大小.

　　接下來,我們繼續(xù)導(dǎo)入logo. ctrl+r,導(dǎo)入logo文件,調(diào)整好尺寸和位置, 然后,我們將圖標(biāo)透明度調(diào)整為76.

　　為我們的設(shè)計(jì)添加文字的方法步驟

　　我們的登錄界面不可能少了文字,所以,這一步,我們將在合適的地方來擺放文字.使我們的設(shè)計(jì)趨于完美.

　　選擇左側(cè)工具欄的文本工具,這時(shí),我們會(huì)發(fā)現(xiàn),鼠標(biāo)變成了輸入光標(biāo),我們在需要的地方打上文字.

　　輸入后,我們可能覺得文字大小和顏色都不合適,我們首先條件email和密碼位置,選擇你要更改的文字, 看屏幕最下方的屬性欄,調(diào)整為如下數(shù)值(字體,字號(hào),透明度).

　　接著,選中文字”登錄”,調(diào)整為如下數(shù)值

　　下方的新用戶注冊和忘記密碼選項(xiàng)做同樣處理即可.

　　細(xì)節(jié)調(diào)整及效果預(yù)覽

　　最后,我們來做收尾工作,通過鼠標(biāo)調(diào)整各個(gè)元素的位置,大小,顏色到你認(rèn)為滿意的程度.接下來. 我們就可以保存這幅圖了. 選擇 文件>保存 選擇存儲(chǔ)為fireworks png文件,記得,一定要是這個(gè)選項(xiàng)哦.否則下次打開這個(gè)文件,各個(gè)元素就無法編輯了.