網(wǎng)頁設(shè)計(jì)中導(dǎo)航的質(zhì)感運(yùn)用技巧(附PSD源文件)
首先來看一個(gè)標(biāo)準(zhǔn)的導(dǎo)航質(zhì)感如何展現(xiàn)吧!
導(dǎo)航在網(wǎng)站設(shè)計(jì)中占有舉足輕重的地位,導(dǎo)航是整個(gè)站點(diǎn)中(特別是門戶站)視覺的焦點(diǎn)和中心,其影響力僅次于Banner!導(dǎo)航的成敗直接影響了整個(gè)站點(diǎn)的表現(xiàn),不管是企業(yè)站,還是Flash站點(diǎn),都不應(yīng)該輕視導(dǎo)航的設(shè)計(jì)!
在這里我就大概講一下質(zhì)感類導(dǎo)航的制作方式!
我個(gè)人總是把導(dǎo)航的質(zhì)感分為好幾層,例如高光,泛光,點(diǎn)光,投影等,也就是基本一個(gè)實(shí)物應(yīng)該具備的一些效果,把他們綜合到界面上,就可以比較好的展現(xiàn)出界面的質(zhì)感,詳細(xì)請(qǐng)看下圖!
上圖中所舉例就是我常用來體現(xiàn)導(dǎo)航質(zhì)感的方式了,當(dāng)然方法很多,實(shí)現(xiàn)效果也可以千變?nèi)f化,如何去實(shí)現(xiàn)更好的效果。咱這里就不多羅嗦了,呵呵!
然后我在舉一個(gè)帶有復(fù)雜質(zhì)感導(dǎo)航的實(shí)現(xiàn)方式,例如下面的玻璃質(zhì)感導(dǎo)航是如何實(shí)現(xiàn)的!
玻璃是一種帶有復(fù)雜高光反射的材料,所以要用更多的光去體現(xiàn)他的質(zhì)感,我簡(jiǎn)單舉例了一個(gè)制作,大家可以看下圖我是怎么去實(shí)現(xiàn)玻璃效果的!
其實(shí)大家應(yīng)該可以從我這兩個(gè)例子里看出來,打底的無非就是一個(gè)漸變色圖層,其他效果都是靠不斷的新建圖層來實(shí)現(xiàn)的。而且質(zhì)感的體現(xiàn)總是會(huì)在一定的高光,暗光,投影里形成!所以我個(gè)人總結(jié)的是多參照實(shí)物。多參考別人的設(shè)計(jì),把自己學(xué)到的多換方式運(yùn)用,這樣就可以制作出非常多質(zhì)感豐富且漂亮的導(dǎo)航了!
下面為大家?guī)硪恍?shí)例!
導(dǎo)航上的質(zhì)感應(yīng)用
背景上的質(zhì)感應(yīng)用
按鈕或鼠標(biāo)交互效果上的質(zhì)感應(yīng)用
PSD分層文件下載地址:
下載信息 [文件大小:603.39 KB 下載次數(shù): 次] |
點(diǎn)擊下載文件:導(dǎo)航質(zhì)感的運(yùn)用技巧 |
本文地址:http://m.likemindfilms.com/tutorial/ps925.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏