網(wǎng)頁漸變背景技巧大揭密

漸變在我們生活中隨處可見，是一種很普遍的視覺現(xiàn)象。這種現(xiàn)象運(yùn)用在視覺設(shè)計(jì)中能產(chǎn)生強(qiáng)烈的透視感和空間感，是一種有順序、有節(jié)奏的變化。

漸變作為視覺設(shè)計(jì)師經(jīng)常使用的手法之一，幾乎每個(gè)設(shè)計(jì)師在頁面中或多或少都會(huì)做一個(gè)漸變(絕不夸張。。。)大家都知道漸變是PS里的基本功能，而且 十分簡單，在漸變工具設(shè)置好不同顏色，一拉就出來了，這還需要研究嗎?實(shí)際上,如何選用一個(gè)合適的漸變是設(shè)計(jì)師的基本功，也更是一門藝術(shù)。

漸變幅度在設(shè)計(jì)中非常重要。漸變的幅度太大，速度太快，就容易失去漸變所特有的規(guī)律性效果，給人以不連貫和視覺上的躍動(dòng)感。反之，如果漸變的幅度太 小，會(huì)產(chǎn)生重復(fù)之感，但慢的漸變在設(shè)計(jì)中會(huì)顯示出細(xì)致的效果。所以，就有人把漸變分成強(qiáng)漸變和弱漸變。從功能角度上，也有人分為效果漸變和功能漸變兩類， 個(gè)人覺得，到底哪一種分類更準(zhǔn)確無可厚非，其目的還是希望設(shè)計(jì)師能夠了解各種漸變的特點(diǎn)、使用場合以及制作技巧等等。

一、效果漸變(強(qiáng)漸變)

這種漸變主要運(yùn)用在一些需要展示效果的頁面上，比如風(fēng)格夸張迥異的專題設(shè)計(jì)和banner，炫酷的游戲界面、時(shí)尚的娛樂性軟件等。這些頁面需要在短 時(shí)間內(nèi)抓住用戶眼球，吸引用戶繼續(xù)閱讀。這種漸變飽和度高、跨度大，亮暗部色相可以不一致，塑造的質(zhì)感比較厚重，往往營造的氛圍十分強(qiáng)烈。

專題頁

德州撲克游戲界面

banner圖

二、功能漸變(弱漸變)

主要運(yùn)用在一些以功能為主的操作型頁面，比如電商、郵箱、資訊、門戶。這些頁面需要用戶視線停留較長時(shí)間，以閱讀信息為主。所以應(yīng)該去掉華麗的漸變，給用戶創(chuàng)造出簡單舒服的感覺，降低視覺噪音。

騰訊網(wǎng)門戶導(dǎo)航：平直微弱的藍(lán)色漸變加上邊角處點(diǎn)綴的白色漸變，創(chuàng)造迷人的材質(zhì)。

淘寶搜索框：微弱有效的漸變，可以區(qū)分和組織內(nèi)容。

網(wǎng)易郵箱：明度跨度小，亮部和暗部色相保持一致，質(zhì)感比較平實(shí)。

三、調(diào)色小TIPS：

Ps里的所有顏色是用HSB模式來控制的。HSB分別表示指色相、飽和度、明度。色相(H)表示什么顏色，比如紅色;如果說這個(gè)紅色比較淡，就是飽 和度(S)比較低，如果說紅色比較暗，那就是明度(B)比較低。效果漸變在色相、飽和度、明度都在變化，而且三個(gè)要素的變化幅度都很大。功能漸變則一般固 定色相(H)，飽和度(S)和明度(B)發(fā)生微小的變化。

知道這幾個(gè)變化值以后，調(diào)整漸變顏色就可通過調(diào)數(shù)字來解決(不用再死盯著拾色器盲目選擇顏色啦!!)比如你想做一個(gè)所謂”大氣、簡約、國際化”的功 能型漸變，在選好色相(H)以后，固定飽和度(S)的值不變，通過調(diào)節(jié)不同的明度(B)就能夠調(diào)出比較自然的漸變。在調(diào)這種微弱漸變時(shí)，常常漸變上會(huì)有色 階。因?yàn)槊總€(gè)人做漸變的方法都不一樣，比如用圖層效果來拉很微弱的漸變或者若干圖層用不同混合模式疊加之后(大家不要眨眼，仔細(xì)盯著下圖看…)，這種漸變 常常會(huì)有色階，會(huì)顯得不柔和。那么，有個(gè)小技巧這里跟大家分享一下~

就是先把這個(gè)漸變轉(zhuǎn)化成智能對象，然后以此選擇【濾鏡】-【畫筆描邊】-【噴筆】，數(shù)值可以參考如下：

原理就是通過讓色階”抖動(dòng)”變得模糊，讓漸變過渡得更柔和。

四、幾點(diǎn)心得體會(huì)：)

1、一個(gè)界面上不應(yīng)該超過4種色彩體系的漸變，否則界面顯得雜亂無章。所謂色彩體系，就是同一色相(H)下的不同顏色。如果想讓頁面盡可能的突出彩色，可以用灰色進(jìn)行大面積調(diào)和，紅、綠、藍(lán)保留一點(diǎn)點(diǎn)足矣，下圖的網(wǎng)站就是個(gè)好例子。http://webflow.com/

2、同一個(gè)界面上的漸變盡量保持明度跨度一致，比如A漸變明度跨度為+20，那么漸變B的明度跨度就不要+40。但是也不必死板，因?yàn)樯适俏⒚罡行缘?。比?下圖三種顏色的漸變明度跨度都是20，但藍(lán)色漸變就顯得過渡小，綠色紅色漸變顯得過渡大。所以，不必太過于遵循數(shù)理邏輯，但嚴(yán)謹(jǐn)?shù)纳鼠w系一定是要有系統(tǒng) 有意識(shí)的控制顏色。

3、我們常說要用”高級灰!高級灰!”灰色的漸變其實(shí)很難把控，用的好則會(huì)使你的界面更有檔次，更統(tǒng)一高雅，用的不好則會(huì)讓界面顯得臟而灰，無閃光 亮點(diǎn)。下圖灰色的徑向漸變有很好的視線聚焦效果。為了打破大面積灰色帶來的沉悶，在hover狀態(tài)下的展示效果變成彩色，這種交互效果其實(shí)可以用在很多圖 片展示上。

4、漸變應(yīng)該與整個(gè)界面氣質(zhì)保持一致，如果整個(gè)頁面走平實(shí)路線，那么就要統(tǒng)一到底，不要突然無厘頭的冒出一種玻璃質(zhì)感。如果整個(gè)頁面走小清新風(fēng)格，就不要突然來一筆濃墨重彩的質(zhì)感漸變。

5、利用漸變創(chuàng)造深度和立體感。我們要學(xué)會(huì)控制好漸變的位置。在 ps中線性漸變或徑向漸變?yōu)轫撁鎰?chuàng)造了獨(dú)特的氣氛，比如藍(lán)色漸變模擬藍(lán)天、海洋等。比如下圖用漸變營造的晚霞效果。http://getcharacters.com/

6、最后，我們作圖時(shí)，可以用圖層樣式做漸變疊加，這樣可以保證漸變的可編輯性。

寫在最后：

Windows 8的Metro風(fēng)格向我們證實(shí)界面設(shè)計(jì)可以拋棄漸變，但是當(dāng)我們處于一片密集的色塊擠壓中，是否又會(huì)想念那些溫柔的漸變，滋潤你的雙眼呢?Last but not least，好的形式需要依附好的功能，漸變僅僅是視覺表現(xiàn)的一種手段，為什么使用漸變，在何處使用漸變才是我們思考的重心~

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)頁標(biāo)題：網(wǎng)頁漸變背景技巧大揭密
本文地址：http://www.bm7419.com/news32/312732.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、網(wǎng)站維護(hù)、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、微信公眾號、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)