有了這兩個(gè)網(wǎng)站,配色新手也能輕松做出好看的漸變!

編者按:這兩年很流行用漸變色,不過(guò)新手想做出好看的漸變確實(shí)有難度,來(lái)看看今天這兩個(gè)神器,絕對(duì)能幫你輕松搞定。

CoolHue

這幾年大家都喜歡使用漸變色作為背景圖,有一些則會(huì)選用高畫(huà)質(zhì)、高分辨率免費(fèi)圖庫(kù)相片,相較于單色背景來(lái)說(shuō),漸層色看起來(lái)更有活力,且目前技術(shù)只要通過(guò) CSS3 語(yǔ)法就能將漸層運(yùn)用到網(wǎng)頁(yè)中,不會(huì)拖慢網(wǎng)頁(yè)載入速度,語(yǔ)法撰寫(xiě)方式也很簡(jiǎn)單,幾乎可以說(shuō)一段語(yǔ)法就能快速套用背景。

本文要推薦的「CoolHue」是一個(gè)相當(dāng)實(shí)用的漸層背景網(wǎng)站,提供大約 30 種不同配色的漸層背景,可以免費(fèi)下載為圖片格式或產(chǎn)生 CSS3 語(yǔ)法。只要把它加入網(wǎng)站樣式表,就能在任何區(qū)域套用漸層色彩。

有了這兩個(gè)網(wǎng)站,配色新手也能輕松做出好看的漸變!

STEP 1

開(kāi)啟 CoolHue 網(wǎng)站后可以看到這些漸層顏色,每個(gè)色塊左下角會(huì)有兩種顏色色碼。將鼠標(biāo)游標(biāo)移動(dòng)到色彩上方,右下角會(huì)顯示「產(chǎn)生 CSS」及「下載圖片」圖標(biāo)。

有了這兩個(gè)網(wǎng)站,配色新手也能輕松做出好看的漸變!

STEP 2

你可以使用傳統(tǒng)方式來(lái)下載圖片,獲取某個(gè)漸層色背景 500×500 大小的圖片,或者我推薦比較好的方法,直接將 CSS 語(yǔ)法放到網(wǎng)站樣式表就能使用了!一來(lái)不用額外下載圖片、減少流量,另一方面在使用或修改上也更為簡(jiǎn)單。

有了這兩個(gè)網(wǎng)站,配色新手也能輕松做出好看的漸變!

uiGradients

@崔嘎的兔子牙牙樂(lè)?:漸變色用得好往往事半功倍,但如果配色難看,做成漸變只會(huì)起到雪上加霜的效果,所以本周的設(shè)計(jì)神器就安利一個(gè)在線分享漸變色的網(wǎng)站——uiGradients!全是已經(jīng)配好的漸變色,每個(gè)都很好看,搬來(lái)就用,節(jié)約了多少一個(gè)一個(gè)顏色試的時(shí)間!

首頁(yè)就很養(yǎng)眼有木有:

有了這兩個(gè)網(wǎng)站,配色新手也能輕松做出好看的漸變!?

首頁(yè)的顏色是隨機(jī)的,點(diǎn)擊左右即可切換。還貼(多)心(余)的給每套顏色取了名字… …比如上圖的藍(lán)紫漸變就叫Love Couple(愛(ài)的CP?)。不是很懂歪果仁的命名方式,有興趣的朋友可以說(shuō)說(shuō)你們的理解,說(shuō)不定和我們的五彩斑斕黑好有一比!

有了這兩個(gè)網(wǎng)站,配色新手也能輕松做出好看的漸變!?

點(diǎn)擊左上角即可瀏覽所有顏色,多的數(shù)不過(guò)來(lái)~

更重要的是,它能根據(jù)需要的色系進(jìn)行篩選!從上方的導(dǎo)航欄中選中一個(gè)顏色,就顯示出該色系下的所有配色,對(duì)于經(jīng)常需要有針對(duì)性尋找顏色的設(shè)計(jì)師來(lái)說(shuō)是很人性化的功能。

有了這兩個(gè)網(wǎng)站,配色新手也能輕松做出好看的漸變!

有了這兩個(gè)網(wǎng)站,配色新手也能輕松做出好看的漸變!?

顏色取用也超級(jí)簡(jiǎn)單,顏色的色值都在上方導(dǎo)航欄里顯示了,點(diǎn)一下就復(fù)制了!(看見(jiàn)我的小手手了嗎)

有了這兩個(gè)網(wǎng)站,配色新手也能輕松做出好看的漸變!?

?除此之外右上角的導(dǎo)航欄還提供很多real貼心的功能:

有了這兩個(gè)網(wǎng)站,配色新手也能輕松做出好看的漸變!

?改變漸變的方向:

有了這兩個(gè)網(wǎng)站,配色新手也能輕松做出好看的漸變!

?查看顏色源代碼,只需點(diǎn)擊綠色按鈕,同樣一鍵復(fù)制,從細(xì)微處省去了不必要的時(shí)間。

有了這兩個(gè)網(wǎng)站,配色新手也能輕松做出好看的漸變!?

還能一鍵下載為jpg格式。

相比其他配色網(wǎng)站,uiGradients質(zhì)量好的同時(shí),使用體驗(yàn)也更加人性化,實(shí)用性非常高哦。

而且網(wǎng)站無(wú)權(quán)限!不用搭梯子!

另:如果你想獲得更多設(shè)計(jì)工具介紹,除了關(guān)注美丫姐以外,還能訪問(wèn)優(yōu)設(shè)哥的:hao.uisdc.com 設(shè)計(jì)師導(dǎo)航站,總能找到你想要的。

好啦,今天的神器就介紹這里咯,歡迎同學(xué)們關(guān)注最充滿智(dou)慧(bi)的設(shè)計(jì)賬號(hào):

有了這兩個(gè)網(wǎng)站,配色新手也能輕松做出好看的漸變!

「配色神器+趨勢(shì)都再這了」

  1. 《神器兩連發(fā)!谷歌新出的取色小工具+5個(gè)常用的色彩靈感網(wǎng)站》
  2. 《2017年最受歡迎的7種色彩風(fēng)格,全在這篇總結(jié)里!》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng) UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專(zhuān)欄。開(kāi)啟免費(fèi)自學(xué)新篇章,按照我們的專(zhuān)欄一步步學(xué)習(xí),一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航:國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航,設(shè)計(jì)師必備:http://hao.uisdc.com

收藏 116
點(diǎn)贊 15

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。