首頁(yè)

AI教程!教你繪制一只夢(mèng)幻效果蝴蝶

藍(lán)藍(lán)設(shè)計(jì)的小編

設(shè)計(jì)師不光要會(huì)做軟件設(shè)計(jì),一些造型的表達(dá)也是很重要的,今天那就隨我來(lái)看看這只蝴蝶是怎么做出來(lái)的吧。

設(shè)計(jì)理念如何指導(dǎo)設(shè)計(jì)落地

ui設(shè)計(jì)分享達(dá)人

在做項(xiàng)目改版升級(jí)時(shí),我們需要做兩件大事,一是提煉核心設(shè)計(jì)理念,二是由理念推動(dòng)設(shè)計(jì)執(zhí)行。



學(xué)會(huì)UI設(shè)計(jì)中的留白,還怕作品沒(méi)有表現(xiàn)力?

ui設(shè)計(jì)分享達(dá)人

留白對(duì)于設(shè)計(jì)的價(jià)值,已經(jīng)得到相當(dāng)廣泛的認(rèn)可了。盡管留白看起來(lái)不復(fù)雜,但是在復(fù)雜多變的設(shè)計(jì)環(huán)境之下,往往并不是一件簡(jiǎn)單的事情。優(yōu)秀的留白設(shè)計(jì)能夠在簡(jiǎn)約的風(fēng)格和功能的可用性之間達(dá)到平衡,而要做到這一點(diǎn),需要相當(dāng)?shù)膶?shí)踐和積累。

黃金分割在界面設(shè)計(jì)中的應(yīng)用

ui設(shè)計(jì)分享達(dá)人

黃金分割大家應(yīng)該早有耳聞,作為一名設(shè)計(jì)師,怎么來(lái)利用黃金分割線(xiàn)使其構(gòu)圖更加完美呢?

說(shuō)實(shí)話(huà),構(gòu)圖時(shí)是否使用黃金分割線(xiàn)構(gòu)圖并不是絕對(duì)的,它只是方法之一。但是黃金分割比例在全世界乃至全宇宙確實(shí)都是至高無(wú)上的。


圍繞基模設(shè)計(jì)出來(lái)的Logo,可做到三個(gè)層次的功效

博博

圍繞基模設(shè)計(jì)出來(lái)的Logo,可做到三個(gè)層次的功效

人人都是產(chǎn)品經(jīng)理 2018-06-18 11:32:22

請(qǐng)別拿美觀來(lái)評(píng)判LOGO的好壞,謝謝!

圍繞基模設(shè)計(jì)出來(lái)的Logo,可做到三個(gè)層次的功效

時(shí)至今日,很多企業(yè)仍然也沒(méi)有對(duì)Logo形成一種正確的認(rèn)知。當(dāng)你問(wèn)起他們時(shí),企業(yè)做Logo是為了什么的?

很多人的回答是“做品牌”,然后就沒(méi)有更深層次的認(rèn)知了,而在這樣的情況下就會(huì)很容易導(dǎo)致Logo的好壞完全是憑借企業(yè)主的喜好做判斷,結(jié)果可想而知。

那企業(yè)做logo到底是為了干什么呢?

探尋問(wèn)題的本質(zhì)要追溯到本源去,logo源自于“烙印”一詞,過(guò)去是為了做區(qū)分。

比如,你家和老王家都養(yǎng)雞,為了避免放養(yǎng)的時(shí)候混在一起分辨不出來(lái),你們兩家在各自的雞身上打上烙印。

最后,雞到消費(fèi)者的眼里,不僅可以通過(guò)烙印做區(qū)分,還可以起到質(zhì)量的判斷,誰(shuí)家的雞質(zhì)量最好,通過(guò)logo就知道是誰(shuí)家的了,哪家名聲最響亮,消費(fèi)者的選擇成本就越低。

再然后慢慢發(fā)展到現(xiàn)在,logo不僅承載了產(chǎn)品區(qū)分的功能,更起到降低傳播成本,詮釋品牌內(nèi)涵的功能。

但是,就像上面所說(shuō)的,目前很多人根本都沒(méi)有形成一個(gè)正確的認(rèn)知,企業(yè)老板有時(shí)候完全就是憑借拍腦袋做決策。

而有些設(shè)計(jì)人員為了體現(xiàn)自己的專(zhuān)業(yè)價(jià)值,把Logo設(shè)計(jì)得精美復(fù)雜,然后再給出一大篇的解釋。

如果老板不滿(mǎn)意,再根據(jù)老板的喜好做出修改,改過(guò)之后雙方皆大歡喜,老板得到了他心目中最理想的logo,設(shè)計(jì)人員也體現(xiàn)了自己的專(zhuān)業(yè)價(jià)值。

通常,在這種情況下設(shè)計(jì)出來(lái)的Logo,消費(fèi)者是過(guò)目即忘的,logo也不會(huì)給消費(fèi)者帶來(lái)任何的品牌聯(lián)想,因?yàn)槌似髽I(yè)內(nèi)部的人懂,其他人是看不懂的。

那如何避免這種尷尬的情況發(fā)生呢?

最好的結(jié)果是利用基模,即利用別人腦海里面已經(jīng)存在的概念,去進(jìn)行l(wèi)ogo設(shè)計(jì)。

比如,一家公司利用獅子作為企業(yè)logo,而獅子在人們腦海中已經(jīng)是存在的事物,并對(duì)獅子的象征有了一個(gè)共同的認(rèn)知,即力量和無(wú)畏,不需要再通過(guò)加工認(rèn)知再進(jìn)行記憶儲(chǔ)存,消費(fèi)者通過(guò)這個(gè)Logo的認(rèn)知繼而會(huì)聯(lián)想到這家公司的做事風(fēng)格。

這樣一來(lái),不僅大家都可以一目了然,不必廢過(guò)多的口水解釋?zhuān)趥鞑ド弦部梢越档统杀尽?

那么,圍繞基模設(shè)計(jì)出來(lái)的Logo,通??梢宰龅揭韵氯齻€(gè)層次的功效,下面柯學(xué)將帶大家分析一遍,基模是如何對(duì)logo進(jìn)行賦能的。

  • 記憶功能
  • 二次傳播功能
  • 詮釋功能

1. 記憶功能

Logo除了做產(chǎn)品區(qū)分的本質(zhì)外,第一層也是最簡(jiǎn)單的功能就是記憶功能,讓消費(fèi)者記住你。

在這一點(diǎn)上就把很多精美復(fù)雜的logo給淘汰了,甚至有時(shí)候在一群人眼里感覺(jué)記憶簡(jiǎn)單的logo,但是,在另外一群人眼里就很難記憶了。

比如,這屆世界杯的現(xiàn)場(chǎng)品牌廣告,如何在眾多品牌閃現(xiàn)下,且在有限的鏡頭下讓全世界記住你,對(duì)企業(yè)的logo來(lái)說(shuō)極為考驗(yàn)。

像萬(wàn)達(dá)、蒙牛等這些中文標(biāo)字的logo品牌廣告,目測(cè)廣告資源起碼浪費(fèi)50%以上。

怎么說(shuō)呢?

因?yàn)槿f(wàn)達(dá)和蒙牛的標(biāo)字logo對(duì)于國(guó)人來(lái)說(shuō)這些字體本來(lái)就已經(jīng)是腦海里的基模事物了,只要把萬(wàn)和達(dá)兩字進(jìn)行關(guān)聯(lián)就可以,這一點(diǎn)對(duì)于記憶編碼來(lái)說(shuō),并不復(fù)雜。

但是,對(duì)于全世界的外國(guó)人來(lái)說(shuō),他們看到這些字體,和我們看到韓文日文一樣,是完完全全的新概念,理解都困難,更別談什么記憶編碼了。

而萬(wàn)達(dá)的圖標(biāo)外圍的圓圈是全人類(lèi)都懂得的基模概念,但是里面那個(gè)就有點(diǎn)陌生了,一個(gè)熟悉的事物加上一個(gè)不熟悉的事物組成全新的概念,需要人們從新編碼再記憶,在一點(diǎn)上,就增加了人們的記憶成本。

圍繞基模設(shè)計(jì)出來(lái)的Logo,可做到三個(gè)層次的功效

而在現(xiàn)場(chǎng),做得最好的品牌廣告logo目測(cè)就是adidas和麥當(dāng)勞。

因?yàn)?,無(wú)論是adidas的三條斜杠還是麥當(dāng)勞的拱門(mén)(或M),對(duì)于全世界的人來(lái)說(shuō),都已經(jīng)是存在腦海中的熟悉事物了,這些簡(jiǎn)單的符號(hào)從人類(lèi)的歷史長(zhǎng)河中流傳多年,并被人類(lèi)從小所熟知,并不需要再?gòu)男戮幋a記憶,只需要把已經(jīng)存在的基模事物符號(hào),即三條斜杠和拱門(mén)跟品牌進(jìn)行關(guān)聯(lián)就行了。

這些利用熟悉事物的基模跟logo進(jìn)行關(guān)聯(lián),不僅一下子可以讓人理解這是什么,且降低品牌傳播的記憶成本,讓人在眾多的品牌中一下子就記住你。

2. 二次傳播功能

利用熟悉事物的基模設(shè)計(jì)logo不僅可以降低人們的記憶成本,還可以降低人們的二次傳播成本。

就拿麥當(dāng)勞的例子說(shuō)吧,假設(shè),你在路上吃著一根冰淇淋,路上遇到一老人帶著一小孩,小孩對(duì)你說(shuō),叔叔,你冰淇淋那里買(mǎi)的呀?

在對(duì)方老人和小孩識(shí)字不多的情況下,你是該如何精準(zhǔn)的跟他們表達(dá)呢?很顯然,直接說(shuō)麥當(dāng)勞的門(mén)頭標(biāo)志上面是一個(gè)金色的拱門(mén),看到這個(gè)標(biāo)志就是那一家在賣(mài)了。

這下老人和小孩子也會(huì)一下子就理解了,因?yàn)樵谒麄兡X海里已經(jīng)存在這樣的事物基模了,出錯(cuò)的概率就會(huì)極低。

但是,如果是復(fù)雜的logo,不僅表述的人困難,而且聽(tīng)的人也會(huì)混亂,當(dāng)雙方都不能精準(zhǔn)的表達(dá)和接受時(shí),那么出錯(cuò)的概率就會(huì)極大,后果就會(huì)很尷尬。

再比如,十幾年前,國(guó)內(nèi)流行起各種運(yùn)動(dòng)服裝,有些中年人不太懂英語(yǔ)的情況下,都是通過(guò)識(shí)別標(biāo)志進(jìn)行傳播,當(dāng)你跟他表述品牌的時(shí)候,英語(yǔ)他聽(tīng)不懂,只能描述品牌標(biāo)志了,這時(shí)候越簡(jiǎn)單,越熟悉的概念就越容易降低傳播成本。

圍繞基模設(shè)計(jì)出來(lái)的Logo,可做到三個(gè)層次的功效

比如,上面的NIKE,你直接跟他說(shuō)是一個(gè)勾,這樣的表達(dá)就非常精準(zhǔn)了,因?yàn)楣催@個(gè)基模已經(jīng)是人們熟悉的概念了,他去買(mǎi)的時(shí)候,看到門(mén)頭是個(gè)勾的標(biāo)志走進(jìn)去就行了。

3. 詮釋功能

利用基模設(shè)計(jì)logo來(lái)詮釋品牌的內(nèi)涵,可以做到讓人一目了然,并對(duì)品牌進(jìn)行正確的聯(lián)想,但是,前提條件是基模必須跟品牌擁有以下三種聯(lián)系:

  • 與產(chǎn)品相似
  • 與產(chǎn)品相關(guān)
  • 習(xí)慣性聯(lián)系

3.1 與產(chǎn)品相似

當(dāng)你需要跟別人解釋一個(gè)復(fù)雜的概念的時(shí)候最好的辦法就是利用他已經(jīng)存在的熟悉概念,其中一個(gè)辦法就是找到跟新事物相似的熟悉事物基模。

比如,你跟其他人溝通在某個(gè)國(guó)家有個(gè)領(lǐng)導(dǎo)人如何如何偉大,如何如何厲害,把國(guó)家從一個(gè)極度貧困的國(guó)家拉到世界經(jīng)濟(jì)強(qiáng)國(guó)的地位,最后還怎么怎么樣,還不如直接跟他說(shuō),他就是某國(guó)的鄧小平,這一下誰(shuí)都懂了,不僅可以讓他感到震撼,而且短短幾字就利用他腦海里已經(jīng)存在的鄧小平形象進(jìn)行新事物關(guān)聯(lián)。

而在logo上也可以借用相似的熟悉事物基模跟品牌進(jìn)行聯(lián)系,比如,美團(tuán)外賣(mài)的袋鼠logo。

圍繞基模設(shè)計(jì)出來(lái)的Logo,可做到三個(gè)層次的功效

美團(tuán)外賣(mài)的訴求是“快”,如何在logo上面精準(zhǔn)表達(dá),即可以讓人簡(jiǎn)單易懂并且降低傳播成本呢?

很顯然,美團(tuán)外賣(mài)利用了人們熟悉的基模“袋鼠”,上面的袋鼠在快速的奔跑狀態(tài),并且口袋是鼓起的,表示裝著食物什么的。

這個(gè)跟美團(tuán)外賣(mài)非常相似,同樣是帶著食物快速的在路上奔跑著,通過(guò)這個(gè)logo就很精準(zhǔn)的表達(dá)出來(lái)了,別人也非常容易能理解到其中要表達(dá)的意思。

3.2 與產(chǎn)品相關(guān)

與之相關(guān),是一種指示性,暗示著他們倆擁有共用的屬性,比如,消費(fèi)者看到圖標(biāo)A,就會(huì)推測(cè)出B產(chǎn)品的相關(guān)結(jié)論。

通常,在logo上只需要找到跟產(chǎn)品擁有共同屬性的熟悉事物進(jìn)行品牌聯(lián)系就可以了。

比如,我們比較能常見(jiàn)的奶制品牌,就會(huì)利用奶牛這個(gè)熟悉事物的基模形象跟品牌進(jìn)行關(guān)聯(lián)。

通常,人們一看到奶牛都會(huì)聯(lián)想到牛奶,利用這個(gè)熟悉的基模設(shè)計(jì)logo,不僅可以降低人們的記憶和傳播成本,還可以指示人們不自覺(jué)的進(jìn)行聯(lián)想,即產(chǎn)品和Logo的形象之間存在著共同的屬性,那就是牛奶。

3.3 習(xí)慣性聯(lián)系

習(xí)慣性聯(lián)系是基模的象征意義在習(xí)慣性或則一致認(rèn)可的聯(lián)想上跟品牌進(jìn)行聯(lián)系,通過(guò)這樣的方式可以把比較抽象復(fù)雜的概念的表現(xiàn)出來(lái),從而引導(dǎo)人們進(jìn)行正確的品牌聯(lián)想。

在這一點(diǎn)上,錘子手機(jī)的Logo做得就相當(dāng)不錯(cuò),不僅降低人們的記憶和傳播成本,更引導(dǎo)人們進(jìn)行正確的品牌聯(lián)想。

圍繞基模設(shè)計(jì)出來(lái)的Logo,可做到三個(gè)層次的功效

logo利用人們熟悉的錘子基模,免去了人們?cè)俅斡洃浘幋a的過(guò)程,而錘子在現(xiàn)代人的習(xí)慣或則一致性聯(lián)想的象征性意義,往往是等同于一種類(lèi)似于工匠的精神,通過(guò)嫁接這個(gè)象征的意義到企業(yè)的Logo上,可以讓人直接聯(lián)想到這是一家具有工匠精神的科技公司。

反觀最近爭(zhēng)議比較大的得到logo,貓頭鷹的基模并沒(méi)有讓人形成在習(xí)慣性或一致認(rèn)同上的品牌聯(lián)想。

圍繞基模設(shè)計(jì)出來(lái)的Logo,可做到三個(gè)層次的功效

沒(méi)有得到習(xí)慣性或一致認(rèn)可的聯(lián)想,主要原因是因?yàn)檫@只雅典娜的貓頭鷹代表著智慧的化身,設(shè)計(jì)人員想讓人聯(lián)想到“得到=智慧”。

但是,受限于每個(gè)人的知識(shí)經(jīng)驗(yàn)背景,對(duì)這只貓頭鷹產(chǎn)生的聯(lián)想并沒(méi)有一致上的認(rèn)同,起碼到目前看來(lái),很多人看到代表著智慧化身的貓頭鷹,更多的聯(lián)想到的卻是“夜貓子”,繼而讓人聯(lián)想到“愛(ài)學(xué)習(xí)的都是夜貓子”這條錯(cuò)誤的道路上去。

一旦人們對(duì)logo的象征意義產(chǎn)生不一致的聯(lián)想,后續(xù)就需要花費(fèi)更多資源去普及,而這樣一來(lái)就有違設(shè)計(jì)logo的初衷,無(wú)法讓人產(chǎn)生正確的聯(lián)想,并最終增加了傳播成本。

結(jié)語(yǔ)

Logo是每個(gè)企業(yè)必不可少的一部分,看似簡(jiǎn)單,所以很多人都不會(huì)過(guò)于深入的去了解,但是往往越簡(jiǎn)單的東西,其中隱含的影響力就越大,越需要花更多的時(shí)間去雕琢,從而達(dá)到以標(biāo)志識(shí)公司的境界,通過(guò)簡(jiǎn)單的圖標(biāo)就可以實(shí)現(xiàn)精準(zhǔn)表達(dá),記憶并傳播,一圖勝過(guò)千言萬(wàn)語(yǔ),而想達(dá)到這個(gè)境界,最快的捷徑就是利用基模的力量。


漸變質(zhì)感技法入門(mén)指南:對(duì)比用色

資深UI設(shè)計(jì)者

漸變這一視覺(jué)趨勢(shì),在最近幾年里可謂如日中天。很多平平淡淡的設(shè)計(jì),將平涂改為漸變,立刻就能增加醒目感。

  • 雖說(shuō)漸變是一個(gè)有效的元素,但為什么我們的漸變,還是和大神們的漸變有區(qū)別?
  • 我們應(yīng)該怎樣做出漸變的質(zhì)感?
  • 為什么說(shuō)用色才是漸變的精髓?

今天我們就來(lái)和大家聊聊漸變這個(gè)話(huà)題,深入了解我們似乎以為自己懂了的漸變,我們將和大家一起分析漸變配色中,利用色彩不同特性之間的對(duì)比來(lái)用色,以及一些簡(jiǎn)單的操作小技巧。比如快速生成一個(gè)色輪,以及簡(jiǎn)單的利用混合工具來(lái)配出漸變配色的色彩。

漸變是在色彩上的一個(gè)相對(duì)緩慢的過(guò)渡,我們的視覺(jué)會(huì)隨著這個(gè)漸變的過(guò)渡而產(chǎn)生一種流動(dòng)感,而這種流動(dòng)感全憑在色彩上發(fā)生的種種變化。是的,我們的重點(diǎn)來(lái)了,就是這個(gè)變化,需要我們今天深入去加以了解。

談到變化,我們自然會(huì)想到這個(gè)變化的范圍。如果拿出我們的色輪來(lái)看,我們就會(huì)發(fā)現(xiàn)色輪上的變化范圍有大有小,當(dāng)兩個(gè)色彩距離較近時(shí),我們可以說(shuō)他們是鄰近色,這時(shí)難以發(fā)現(xiàn)他們的區(qū)別,直至我們的肉眼無(wú)法分辨。這時(shí)候可以說(shuō)變化范圍較小。

當(dāng)兩個(gè)色彩距離180,在色輪上呈相對(duì),我們可以說(shuō)這時(shí)的色彩變化是最大的,于是也就產(chǎn)生了最強(qiáng)烈的對(duì)比。很多撞色的情況,也是在這種對(duì)比下發(fā)生的。我們通常會(huì)把這對(duì)顏色稱(chēng)為互補(bǔ)色。

當(dāng)然,實(shí)際的情況比這要稍微復(fù)雜一點(diǎn),我們一起來(lái)看下。

一、色相對(duì)比

剛剛大家可以發(fā)現(xiàn),這個(gè)色輪上的色彩的一個(gè)特點(diǎn)是什么?只有色相的變化。沒(méi)錯(cuò),我們平時(shí)也已經(jīng)習(xí)慣了,只用色相來(lái)區(qū)分色彩。所以,今天要講的第一個(gè)對(duì)比,也就是色相的對(duì)比。

色相的對(duì)比,在色輪上就能很直觀的表現(xiàn)。例如紅色和黃色這一段,截取過(guò)來(lái)以后,就變?yōu)榱思t – 黃漸變。利用色環(huán)就能很輕松的實(shí)現(xiàn)色相的漸變。距離越遠(yuǎn),漸變色的對(duì)比也就越大,互補(bǔ)色之間的對(duì)比達(dá)到了極值,比如紅 – 藍(lán)漸變的對(duì)比就大過(guò)紅 – 黃漸變。

這里首先教給大家一個(gè)快速生成色輪的小技巧,這個(gè)技巧不需要利用網(wǎng)上的圖片或工具?,F(xiàn)做現(xiàn)用,很方便。

1. 小技巧:快速生成色輪

STEP 01

讓我們先用這個(gè)自定義形狀工具畫(huà)出一個(gè)圓環(huán)。

STEP 02

然后在圓環(huán)里填充色彩,這里我們運(yùn)用一個(gè)漸變疊加。

漸變疊加的疊加方式為角度漸變,漸變色這里選用「色譜」,沒(méi)有找到這個(gè)漸變的小伙伴記得要追加色譜。

這時(shí)做出的色輪,在色彩上飽和度達(dá)到最大值。因此也能表現(xiàn)最強(qiáng)烈的色相對(duì)比。目前比較流行的漸變色是明度偏高,飽和度居中的漸變,也像這樣的糖果色,因此這時(shí)大家可以利用調(diào)整圖層「色相/飽和度」來(lái)增加明度或降低飽和度。

2. 高能提醒:別被參數(shù)騙了

可能很容易被初學(xué)者忽略的是,我們?cè)?PS 里的色彩(HSB)這個(gè)參數(shù)里看下,一般來(lái)說(shuō)H-色相,S-飽和度,B-明度,這里的情況和我們?cè)谏蕦W(xué)里學(xué)到的 HSB 有點(diǎn)小差異。

色相這里沒(méi)有問(wèn)題,但是飽和度和明度,尤其是飽和度上面,大家可以看到一般來(lái)說(shuō)飽和度時(shí),色彩是慢慢失去色度,也就是呈現(xiàn)灰色,但是在軟件里把 S 這個(gè)值調(diào)到最小呈現(xiàn)出是白色;還有另一個(gè)屬性:明度,最大的明度,應(yīng)該是白色,在軟件里的 B 這個(gè)參數(shù)調(diào)到最高時(shí),并不是白色。

在 PS 里,只有把色彩放到「色相/飽和度」這個(gè)工具里,才會(huì)看到和我們書(shū)里的概念表現(xiàn)一致的特性。

3. 工具不同,漸變也就不同

運(yùn)用色環(huán)配出的漸變色和直接利用漸變工具配出的漸變色還有差別的,最重要是體現(xiàn)在顏色的過(guò)渡上。如果是用漸變工具選擇了左邊綠色,右邊紫色的漸變色,在中間出現(xiàn)的過(guò)渡色就表現(xiàn)出一種發(fā)灰的色彩。如果所選用的兩端的顏色是在色環(huán)上距離有定的角度,就會(huì)出現(xiàn)這種灰色。這是因?yàn)閮煞N顏色彼此混合所造成的。有些情況下,確實(shí)是需要這樣過(guò)渡的,這就直接用漸變工具來(lái)做漸變。

另外一個(gè)情況就是不希望色彩發(fā)灰,這時(shí)需要用到色環(huán),在色環(huán)上根據(jù)所需要的漸變過(guò)渡來(lái)選取不同的色彩配置。

可以看出來(lái),盡管沒(méi)有飽和度、明度的變化,色彩仍然是彼此之間所表現(xiàn)的特質(zhì)都很獨(dú)特,所以基本上利用色相對(duì)比,就能配出非常優(yōu)秀的漸變作品。

一般來(lái)說(shuō),漸變本身就足夠吸引人,有漸變參與的情況下,我個(gè)人的建議是色彩不要太多,盡量少元素,整體風(fēng)格傾向極簡(jiǎn),這時(shí)最能發(fā)揮漸變色這種特質(zhì)的魅力。

這個(gè)案例中的漸變過(guò)渡,中間的這個(gè)紅色和藍(lán)色的漸變就是用漸變工具做出來(lái)的,兩邊的漸變都是取用了色環(huán)上的漸變過(guò)渡,可以看到色彩上兩邊的漸變中的色相更多,更飽滿(mǎn),飽和度和明度都沒(méi)有喪失,而中間的漸變?cè)诩t藍(lán)之間的過(guò)渡出現(xiàn)了飽和度較低的紫灰色。

二、色溫對(duì)比

色溫是什么?色溫更多是色彩對(duì)人的主觀的心理因素的影響。雖說(shuō)是主觀,但是大家的整體傾向還是比較類(lèi)同。比如藍(lán)色清涼,紅色溫暖。

所以,把色環(huán)上的色彩根據(jù)主觀溫度進(jìn)行一個(gè)劃分,就有了我們經(jīng)常聽(tīng)說(shuō)的暖色和冷色。冷暖色雖然無(wú)法用屬性值來(lái)進(jìn)行衡量,但是卻在色彩中發(fā)揮不小的作用。

1. 獲得平衡感

漸變中加入色溫這個(gè)屬性,這個(gè)游戲就會(huì)更好玩。一般來(lái)說(shuō),為了達(dá)到配色平衡,我們的配色中需要冷暖進(jìn)行平衡,這里的平衡并非是1:1的嚴(yán)格配比,而是彼此滲透,雙方根據(jù)位置、面積、形狀等等元素的共同參與,共同實(shí)現(xiàn)一個(gè)版面的平衡。當(dāng)然,這不是件容易的事,但這是我們配色中的方向之一。

回到我們的色溫對(duì)比,要體現(xiàn)在漸變中,就是要有冷色和暖色的參與。一般來(lái)說(shuō),在比較簡(jiǎn)單的過(guò)渡性雙色漸變里,一個(gè)冷色一個(gè)暖色是非常常見(jiàn)的表達(dá)方式。還是拿剛剛那個(gè)案例來(lái)看,左邊兩個(gè)配色就是冷暖的過(guò)渡,而右邊的配色相對(duì)來(lái)說(shuō)偏暖,當(dāng)然相比之下,洋紅色還是比橙色會(huì)更偏冷一些。

2. 綠色和紫色:冷暖不定

冷暖色的對(duì)比都是在同一個(gè)版面內(nèi)的一個(gè)動(dòng)態(tài)對(duì)比,尤其對(duì)于綠色和紫色這個(gè)范圍內(nèi)的色彩來(lái)說(shuō)的話(huà)更是如此。比如綠色,在和藍(lán)色搭配的時(shí)候,由于藍(lán)色是絕對(duì)的冷色,所以綠色就表現(xiàn)出暖色的特質(zhì);而綠色如果和橙色搭配,橙色又是絕對(duì)的暖色,所以綠色又表現(xiàn)出冷色的特性。紫色也是同樣的情況,和藍(lán)色搭配它偏向暖色,而和橙色搭配時(shí)它又是偏冷的。

用起來(lái)其實(shí)也很簡(jiǎn)單,如果你的配色中發(fā)現(xiàn)整體感覺(jué)偏冷,就增加暖色。如果太暖,那就增加冷色調(diào)。如果整體的配色看不出哪里不對(duì)勁,但總覺(jué)得色彩有點(diǎn)奇怪,就先看看色溫是不是實(shí)現(xiàn)了平衡。

三、明度對(duì)比


再增加一個(gè)屬性,漸變這個(gè)游戲又增加難度了,明度這個(gè)屬性表現(xiàn)為顏色的明暗程度,明度引入了另一個(gè)性質(zhì):光。其實(shí)我們平時(shí)看到的色彩就是因?yàn)橛辛斯?,才有了顏色。但是一般?lái)說(shuō)我們會(huì)把光簡(jiǎn)單歸屬于「發(fā)光」這個(gè)行列。事實(shí)上,由于光線(xiàn)的折射,我們視網(wǎng)膜接受到光的波長(zhǎng),才產(chǎn)生了色彩。那么光線(xiàn)的強(qiáng)烈與否,就會(huì)影響這個(gè)顏色的表現(xiàn)。

明度的對(duì)比,是所有顏色屬性當(dāng)中,最容易被覺(jué)察到的。我們可以簡(jiǎn)單來(lái)看,我們的素描就是利用明暗來(lái)表現(xiàn)物體,黑白灰能毫不費(fèi)力表現(xiàn)現(xiàn)實(shí)中光的感覺(jué)。所以在配色中,有了明暗對(duì)比,是一個(gè)很好表現(xiàn)色彩感染力的元素。

1. 表現(xiàn)立體感

即使明度相同,我們的色彩明暗程度(從主觀感受來(lái)說(shuō)),也是不一樣的。比如相同明度的黃綠色和紫色,在明暗表現(xiàn)上,黃綠色明顯更亮,更靠前。如果讓這兩個(gè)色彩之間發(fā)生漸變關(guān)系,這樣的表現(xiàn)就很像左上角有光滲入進(jìn)這塊平面中。如果進(jìn)一步降低的紫色的明度,這時(shí),明度的對(duì)比就更為強(qiáng)烈。這時(shí)很適合表現(xiàn)出某種立體感。

當(dāng)然,我們的色彩并非一定要有立體感才能生動(dòng),有些配色大師,會(huì)刻意去弱化立體感,所以會(huì)盡量避免明暗的對(duì)比。但是,作為初學(xué)者,一定要知道明暗對(duì)比,懂得在適當(dāng)?shù)那闆r下拿來(lái)使用。

尤其是在同色系或者鄰近色色系的漸變里,明度對(duì)比是一個(gè)增加立體表現(xiàn)力的方式。有些時(shí)候,平涂的方式看起來(lái)呆板單調(diào),利用同色系漸變就能很好解決這個(gè)問(wèn)題。兩個(gè)色彩之間可以非常近似,即便如此,還是和平涂有差別。有了光的感覺(jué)就要隨時(shí)注意受光的方向,在整個(gè)畫(huà)面里保持全局光,所謂全局光,換個(gè)簡(jiǎn)單的說(shuō)法就是大家都在同一光源照射下。

我們可以再和大家演示一下,例如這里有兩個(gè)圓,這兩個(gè)圓都是填充為紫 – 綠漸變,這時(shí)的紫和綠是同樣的明度。這里注意,就算是同樣明度,兩個(gè)顏色在直觀的感覺(jué)上,明暗程度也是有差別的,比如綠色會(huì)稍微亮一點(diǎn)。這時(shí)打開(kāi)漸變工具,在后邊的綠色這一端色彩,將它的明度調(diào)高,這時(shí)大家會(huì)發(fā)現(xiàn),右邊這個(gè)圓就變?yōu)榱艘粋€(gè)球體。

2. 從黑白灰開(kāi)始

明度漸變還是增加作品細(xì)膩程度的一個(gè)方法,我們和大神的差距,也許真有可能就是一處小小的明暗關(guān)系的不同。別忘了,明度對(duì)比對(duì)整體效果所發(fā)生的影響是最大的,但也是我們最容易忽略的,有時(shí)候一旦有了顏色,我們的焦點(diǎn)都在色調(diào)和色度上。但其實(shí)所有的配色,比如我們做設(shè)計(jì),一開(kāi)始總是從黑白灰開(kāi)始做起,先配置好明度,然后再開(kāi)始根據(jù)明度來(lái)選擇用色。

有了對(duì)明度的把握,我想我們對(duì)色彩的把握才能上升到新的層次,否則,我們?cè)谝欢焉世铮苋菀酌允Х较颉?

四、色度對(duì)比

這里說(shuō)的色度,也被叫飽和度,有的書(shū)上也叫彩度,拿我們?nèi)粘S谜Z(yǔ)講就是鮮艷程度。色度對(duì)比越強(qiáng),尤其是色輪上的互補(bǔ)色,在他們色度都達(dá)到最大時(shí),會(huì)撞出最大的火花,產(chǎn)生最強(qiáng)烈的效果。

有時(shí)候這種高彩度的配色用在動(dòng)感很強(qiáng)的設(shè)計(jì)中,看上去活力四射。但這種互補(bǔ)色之間也會(huì)發(fā)生彼此互斥的關(guān)系,造成整個(gè)版面的凌亂,所以要非常謹(jǐn)慎的對(duì)待色度。

空氣透視 – 空間感的塑造

色度對(duì)比最常見(jiàn)的就是用在空間感的塑造上,大家都知道,色度越高,在視覺(jué)上會(huì)制造一種「更近」的效果。

舉例來(lái)說(shuō)吧,我們這里可以畫(huà)一個(gè)梯形,這個(gè)梯形用漸變來(lái)填色。如果用單色,大家一定感覺(jué)不出空間感。如果我們采用漸變,使得同一個(gè)顏色,比如紫紅色,在這個(gè)梯形上,由上到下做一個(gè)漸變,這個(gè)漸變中兩端的色彩,在色度上有差距。那這時(shí)就能體現(xiàn)出一個(gè)慢慢延伸到遠(yuǎn)方的感覺(jué)。甚至還能有種暴露在空氣中,被空氣弱化的視覺(jué)效果。這個(gè)也運(yùn)用在插畫(huà)中,也被叫做空氣透視。

色彩濃度的強(qiáng)弱對(duì)比,和其他的色彩的屬性相結(jié)合,配色就變得更復(fù)雜。但是通常來(lái)說(shuō),配色并沒(méi)有標(biāo)準(zhǔn)答案。所以導(dǎo)致很多人在配色的時(shí)候,都是依靠一種感覺(jué)在操作。其實(shí)感覺(jué)的確是一個(gè)最直接的選色方法之一,但是并不是唯一的方式。大家如果對(duì)色彩有更深入的了解以后,就會(huì)慢慢理解感覺(jué)層面下的更有趣的東西。這個(gè)也是經(jīng)驗(yàn)積累。

在飽和度這一環(huán),PS 里如果覺(jué)得不是很靠譜,就像我之前和大家提過(guò),那么大家可以進(jìn)入到 AI 里,利用 AI 的混合工具來(lái)生成不同的色階。例如我們?cè)谶@里用一個(gè)高飽和度的紅色和一個(gè)低飽和度的藍(lán)色相搭配。應(yīng)該說(shuō),這兩端的色彩既有飽和度的對(duì)比,也有色調(diào)和明度的對(duì)比,還有色溫的對(duì)比,應(yīng)該說(shuō)是對(duì)比是非常豐富的。所以,這一條矩形,用在背景色上,我個(gè)人感覺(jué)不是太合適。如果是做成一些特殊的效果,還是不錯(cuò),比如設(shè)計(jì)字體的時(shí)候做筆畫(huà)造型,或者做裝飾的線(xiàn)條。

最后一個(gè)我們要略提一下,就是透明度的對(duì)比。盡管透明度不是標(biāo)準(zhǔn)的顏色屬性中的一種,但是在我們軟件操作當(dāng)中,透明度是相當(dāng)實(shí)用的。漸變的色彩,我們可以改變其中一個(gè)色彩的透明度,比如降低到0,那么一端的色彩消失不見(jiàn),這樣最容易造成一種濃霧的效果。

這個(gè)插畫(huà),是在設(shè)計(jì)我自己的個(gè)人網(wǎng)站時(shí)做的,其中這些背景中的立方體的某些塊面,就是采用某一端降低透明度的效果。有一種在云端的感覺(jué)。

五、兩個(gè)漸變配色網(wǎng)站推薦

1. Grabient

網(wǎng)站鏈接:https://www.grabient.com/

這個(gè)網(wǎng)站的工具很好用,我當(dāng)時(shí)在群里推薦的時(shí)候,有人問(wèn)我說(shuō)這個(gè)和 PS 里的漸變工具有什么區(qū)別。我在剛剛其實(shí)已經(jīng)和大家講過(guò),PS里的顏色的設(shè)置是有一些和我們的色彩理論不太符合的地方,但是這個(gè)漸變工具就完全符合我們對(duì)色彩屬性的了解。所以在這里可以進(jìn)行調(diào)試,再確定漸變的值,最后放到 PS 里用。

2. WebGradients

網(wǎng)站鏈接:https://webgradients.com/

這個(gè)網(wǎng)站,我相信大家應(yīng)該不會(huì)陌生,好多地方都推薦過(guò),這個(gè)漸變色是可以作為背景色來(lái)使用的。大家可以看到這上面大部分的漸變的明度都比較高,比較淺。過(guò)渡也非常細(xì)膩。這一點(diǎn)大家可以拿來(lái)當(dāng)作自己配色的參考。

這兩個(gè)工具以外,還有很多其他好用的工具我就不一一演示了,這是我用的比較多,而且覺(jué)得還挺實(shí)用的兩個(gè)網(wǎng)站。

寫(xiě)在最后

其實(shí)色彩和音樂(lè)的感覺(jué)是最接近的,每個(gè)色彩對(duì)應(yīng)每個(gè)音調(diào),那經(jīng)過(guò)組合以后就能表現(xiàn)出一定的情感。通常你也很難說(shuō),哪一首音樂(lè)是最好聽(tīng)的,因?yàn)槊總€(gè)人喜歡的音樂(lè)風(fēng)格都不一樣。但是總有那么一些歌是廣為流傳成為經(jīng)典的。

所以要學(xué)會(huì)漸變,首先應(yīng)該是了解色彩。我們不可能通過(guò)一篇文章就能完成學(xué)習(xí),肯定是希望以這篇文章作為一個(gè)啟發(fā)點(diǎn),大家可以從中找到自己的學(xué)習(xí)的方向。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

博博


番茄匠APP 2018-05-18 15:07:48

美麗的獲獎(jiǎng)網(wǎng)站

1. Feed

獎(jiǎng)勵(lì):Awwwards當(dāng)日的場(chǎng)地(6/6/2015)

Feed不僅是一個(gè)有趣的概念,它還有一個(gè)令人驚嘆的執(zhí)行過(guò)程,它挑戰(zhàn)了我們對(duì)網(wǎng)絡(luò)上的可能性的理解。通過(guò)動(dòng)畫(huà)和視頻的創(chuàng)意融合,該網(wǎng)站讓用戶(hù)沉浸在非常吸引人的體驗(yàn)中。作為一個(gè)非典型的網(wǎng)站,它還包含幾個(gè)獨(dú)特的可用性元素,其中包括一個(gè)導(dǎo)航,可以作為滾動(dòng)進(jìn)度條加倍。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

2. crypton.trading

獎(jiǎng)項(xiàng):Awwwards當(dāng)日的場(chǎng)地(4/3/2018)

認(rèn)識(shí)你的機(jī)器人會(huì)計(jì)師crypton.trading。

Crypton.trading是比特幣等加密貨幣的交易中心,它使用人工智能來(lái)預(yù)測(cè)貨幣價(jià)值的變化并確定關(guān)鍵的購(gòu)買(mǎi)和銷(xiāo)售機(jī)會(huì)。該網(wǎng)站因其開(kāi)發(fā)和設(shè)計(jì)而被評(píng)為高,因?yàn)樗饾u向更多的下游游客滾動(dòng),更多地解釋了開(kāi)發(fā)者的方法。

這個(gè)屢獲殊榮的網(wǎng)站讓熟悉技術(shù)的訪(fǎng)問(wèn)者在主頁(yè)上出現(xiàn)Crypt的問(wèn)候時(shí)感到賓至如歸,每次只有一封信。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

3. ETQ

獎(jiǎng)勵(lì):Awwwards當(dāng)日的場(chǎng)地(5/19/2015)

ETQ采用非常簡(jiǎn)約的電子商務(wù)方式,在精簡(jiǎn)的網(wǎng)站上放置大量引人注目的產(chǎn)品視頻。簡(jiǎn)單,平坦,基于顏色的背景伴隨著強(qiáng)大的印刷術(shù),有助于將注意力集中在用戶(hù)到達(dá)的地方:鞋子。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

4. Mikiya Kobayashi

獎(jiǎng)勵(lì):Awwwards當(dāng)日的場(chǎng)地(7/4/2015)

Mikiya是一位產(chǎn)品設(shè)計(jì)師,擁有簡(jiǎn)約的作品集,通過(guò)強(qiáng)大的攝影和微妙的動(dòng)畫(huà)展示了他的作品。他的全部網(wǎng)站最初是用日文創(chuàng)作的,然后翻譯成英文,這有助于展示他設(shè)計(jì)的國(guó)際可擴(kuò)展性。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

5. Inside Abbey Road

獎(jiǎng)項(xiàng):最佳音樂(lè)網(wǎng)站,2016年威比獎(jiǎng)

谷歌通過(guò)這個(gè)高度互動(dòng)的網(wǎng)站將它從公園打出來(lái),讓用戶(hù)可以進(jìn)入Abbey Road Studios。輝煌的聲音設(shè)計(jì),導(dǎo)航機(jī)制以及混合了通常的“Google風(fēng)格”的視覺(jué)效果都有助于吸引訪(fǎng)問(wèn)者訪(fǎng)問(wèn)這個(gè)制作精良的網(wǎng)絡(luò)媒體資源。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

6. Citrix: The New Mobile Workforce

獎(jiǎng):每日網(wǎng)站(11/23/2017),最佳網(wǎng)站圖庫(kù)

這個(gè)網(wǎng)站致力于紅牛與基于云計(jì)算軟件公司思杰的合作,這是非常了不起的。

新移動(dòng)員工隊(duì)是思杰旗下的一個(gè)網(wǎng)站,它使用全景攝影技術(shù)向觀眾展示思杰如何支持紅牛車(chē)隊(duì)的新賽車(chē)。即使你不是賽車(chē)愛(ài)好者,該網(wǎng)站的巧妙動(dòng)畫(huà)也可以解釋復(fù)雜的汽車(chē)技術(shù),這一點(diǎn)很難忽略。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

7. The History of Climate Change

獎(jiǎng)勵(lì):Awwwards當(dāng)日網(wǎng)站(6/23/2015)

按照Luc Jacquet的腳步,Wild-Touch將帶您參觀關(guān)于全球氣候變化歷史的視覺(jué)和教育之旅。歷史媒體和獨(dú)特動(dòng)畫(huà)的混合有助于講述故事。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

8. Beagle

獎(jiǎng):每日網(wǎng)站(4/19/2015),最佳網(wǎng)站圖庫(kù)

比格爾以一種簡(jiǎn)單易懂的方式在視覺(jué)上和逐步地講述他們產(chǎn)品的故事方面做得非常出色。這對(duì)許多創(chuàng)業(yè)公司來(lái)說(shuō)是一個(gè)重大挑戰(zhàn),特別是當(dāng)他們將新概念引入現(xiàn)有市場(chǎng)時(shí)。人們想知道,“你的產(chǎn)品是什么?它是如何工作的?為什么我在乎?” 比格爾回答所有這些問(wèn)題,同時(shí)展示他們的產(chǎn)品并強(qiáng)制用戶(hù)購(gòu)買(mǎi)。另外,他們是實(shí)際上正確實(shí)施“滾動(dòng)劫持”的幾個(gè)網(wǎng)站之一。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

9. Southwest: Heart of Travel

獎(jiǎng):最佳視覺(jué)設(shè)計(jì) - 審美,2018年威比獎(jiǎng)

當(dāng)西南航空想要證明其客戶(hù)不僅僅是一個(gè)美元符號(hào)時(shí),該公司創(chuàng)建了一個(gè)網(wǎng)站,其設(shè)計(jì)使用客戶(hù)航線(xiàn)的形狀進(jìn)行組裝。

這個(gè)名為“旅行之心 ”的網(wǎng)站甚至允許游客在他們計(jì)劃參加的旅行中創(chuàng)建自己的作品。這樣,西南航空的網(wǎng)站就是他們最忠誠(chéng)的乘客的產(chǎn)品。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

10. Woven Magazine

獎(jiǎng):每日網(wǎng)站(4/4/2015),最佳網(wǎng)站圖庫(kù)

Woven是一個(gè)在線(xiàn)刊物,為藝術(shù)家,工匠和制作人員提供贊美。對(duì)我而言,他們代表了一種確認(rèn),即出版物可以(也應(yīng)該)擁有美觀且引人入勝的網(wǎng)站,內(nèi)容易于閱讀。這個(gè)網(wǎng)站沒(méi)有像彈出窗口和突兀的廣告這樣的分心,而是關(guān)于內(nèi)容本身的體驗(yàn)。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

11. JOHO's Bean

獎(jiǎng)勵(lì):當(dāng)日FWA(2015年8月8日),網(wǎng)站獎(jiǎng)

JOHO's Bean的網(wǎng)站有令人難以置信的圖像,交互性,講故事,視覺(jué)設(shè)計(jì),最重要的是音響工程。這些都聚集在一起,創(chuàng)造出一個(gè)引人入勝,情緒化和引人入勝的網(wǎng)站,講述咖啡豆之旅的故事。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

12. NOWNESS

獎(jiǎng)項(xiàng):最佳文化博客/網(wǎng)站,2017年威比獎(jiǎng)

Nowness可能是當(dāng)今互聯(lián)網(wǎng)上最酷的眾包視頻博客。那真是一口......所有這些意味著什么?

NOWNESS的“眾包”性質(zhì)是其獲獎(jiǎng)?wù)叩囊徊糠?。這意味著其大部分內(nèi)容來(lái)自獨(dú)立廣告素材 - 這是企業(yè)發(fā)布內(nèi)容的一種日益流行的方式。NOWNESS也是一個(gè)視頻博客,這意味著它的所有博客內(nèi)容都是視頻格式??傊?,這些品質(zhì)有助于使Nowness成為各個(gè)品牌努力講述的故事的迷人中心。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

13. Virgin America

獎(jiǎng)項(xiàng):最重要的行業(yè)演變,2014 UX獎(jiǎng)

在一個(gè)已知航空網(wǎng)站充斥著主要可用性問(wèn)題的世界中,維珍美國(guó)公司擁有推動(dòng)可用性,可訪(fǎng)問(wèn)性和快速響應(yīng)設(shè)計(jì)的最佳網(wǎng)站之一。事實(shí)上,它被命名為第一個(gè)真正快速響應(yīng)的航空公司網(wǎng)站,這是該行業(yè)的一個(gè)新的先例。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

14. World of SWISS

獎(jiǎng)項(xiàng):最佳用戶(hù)界面,2015年威比獎(jiǎng)

另一家航空公司?發(fā)生什么事?!是的,瑞航的航空公司建立了一個(gè)令人難以置信的身臨其境的網(wǎng)站,講述他們的故事,并描述與他們一起飛行的感覺(jué) - 而且他們的工作太過(guò)繁重,無(wú)人理睬。強(qiáng)大的視覺(jué)效果和動(dòng)畫(huà)將用戶(hù)介紹到網(wǎng)站的不同部分,這些部分除了通常的銷(xiāo)售和市場(chǎng)營(yíng)銷(xiāo)信息外,還包含了今天如此常見(jiàn)的信息。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

15. Reductress

獎(jiǎng)項(xiàng):最佳幽默網(wǎng)站,2018年威比獎(jiǎng)

在互聯(lián)網(wǎng)上嘲笑別人并不難,我們?cè)诰W(wǎng)上閱讀和消費(fèi)的東西很多都是為了娛樂(lè)。但是對(duì)于大量觀眾來(lái)說(shuō),很難一致地做到這一點(diǎn)。Reductress是一本諷刺雜志,其頭條和一般閱讀體驗(yàn)是幽默部門(mén)的 - 使網(wǎng)站本身成為一個(gè)高質(zhì)量的財(cái)產(chǎn)。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

其他酷網(wǎng)站設(shè)計(jì)

16. Minimums

Minimums采用非常大膽的方式展示他們的內(nèi)容,利用基于網(wǎng)格的網(wǎng)站設(shè)計(jì),大字體和全幅高質(zhì)量圖像。他們的網(wǎng)站是如何正確執(zhí)行網(wǎng)格結(jié)構(gòu),同時(shí)在設(shè)計(jì)中保持良好的視覺(jué)層次結(jié)構(gòu)的一個(gè)非常好的例子。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

17. Guillaume Tomasi

作為蒙特利爾的攝影師,Guillaume Tomasi建立了一個(gè)真正適合他的獨(dú)特而令人敬畏的攝影作品。他超現(xiàn)實(shí)的照片風(fēng)格與簡(jiǎn)單,平坦,空洞,簡(jiǎn)約的組合設(shè)計(jì)并列,將所有的焦點(diǎn)放在作品本身上。

他獨(dú)特的系列導(dǎo)航加上藝術(shù)畫(huà)廊風(fēng)格的作品介紹和完美的滾動(dòng)互動(dòng)讓人聯(lián)想到真實(shí)畫(huà)廊的體驗(yàn)。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

18. The District

這家品牌代理機(jī)構(gòu)認(rèn)真對(duì)待它的形象,它應(yīng)該 - 為客戶(hù)處理所有媒體渠道。該地區(qū)的網(wǎng)站,是通過(guò)一些你見(jiàn)過(guò)的最美麗的藝術(shù)品和攝影的旅程。

當(dāng)你探索網(wǎng)站時(shí),這些挑釁性的瓷磚變化很快,而且他們看起來(lái)更加奇特,對(duì)你學(xué)習(xí)過(guò)去的工作越感興趣。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

19. Tej Chauhan

Tej Chauhan通過(guò)這個(gè)有趣的網(wǎng)站將印象派藝術(shù)品變成了商業(yè)模式。該產(chǎn)品開(kāi)發(fā)人員主頁(yè)上的每張圖片都會(huì)滑出以覆蓋上一張圖片,從而為您現(xiàn)在在您面前看到的物體提供很少的背景信息。

但是,是不是缺乏正確的背景知識(shí),讓你想了解更多?標(biāo)語(yǔ)“近期未來(lái)的紀(jì)念品”表明這些物品是他們產(chǎn)品線(xiàn)的一部分 - 這是您將這些創(chuàng)新物品帶入您的生活的機(jī)會(huì)。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

20. Amanda Martocchio Architecture

一家建筑公司可能并不專(zhuān)注于網(wǎng)站開(kāi)發(fā),但其網(wǎng)站仍應(yīng)展示其對(duì)視覺(jué)上令人愉悅的設(shè)計(jì)的承諾。這個(gè)華麗的網(wǎng)站讓阿曼達(dá)·馬托基奧把它放在心上。

Amanda Martocchio Architecture喜歡它的作品并不是什么秘密- 它網(wǎng)站主頁(yè)上的每張圖片都是公司設(shè)計(jì)的房屋的迷人鏡頭。該網(wǎng)站標(biāo)出了每個(gè)房屋的滾動(dòng)條件,以及各種建筑物的各種角度。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

如何畫(huà)好一張描邊插畫(huà)?

資深UI設(shè)計(jì)者

描邊插畫(huà):可以簡(jiǎn)單理解為眾多線(xiàn)面結(jié)合圖標(biāo)組合在一起,互相呼應(yīng)而組成一個(gè)大畫(huà)面。畫(huà)面中的元素除了面以外,還具有描邊,因此也叫描邊插畫(huà)。

本文內(nèi)容:文章會(huì)詳解如何畫(huà)一張描邊插畫(huà),教程素材沒(méi)有用我之前的插畫(huà)來(lái)做步驟分解,而是新畫(huà)了一張插畫(huà)以作示范,繪畫(huà)原理都一樣,理解原理就好。除了具體步驟以外,會(huì)針對(duì)一些易犯錯(cuò)誤的地方添加重點(diǎn)標(biāo)記。

一點(diǎn)建議:看完文章后,可以按照我分享的方法來(lái)臨摹一遍,但我更趨向于小伙伴們能夠發(fā)揮自己的想象力,做一張屬于自己的原創(chuàng)插畫(huà)。畫(huà)完后若有不清楚的地方,歡迎在我的公眾號(hào)中添加微信并附帶插畫(huà),可給予建議。

一、草圖階段

1. 確立主題,畫(huà)草稿

這次插畫(huà)的主題源自于我的一個(gè)夢(mèng):在草地上,遺落的帆布鞋里面長(zhǎng)滿(mǎn)了鮮花,小鳥(niǎo)守在花的旁邊歌唱。

確定主題后,把腦海里的畫(huà)面畫(huà)出來(lái),可以畫(huà)在紙上,也可以用數(shù)位板在 ps 里面畫(huà),按照個(gè)人習(xí)慣就好。我比較喜歡手繪,因此在紙上畫(huà)。

2. 打開(kāi)AI,調(diào)整設(shè)置

新建畫(huà)布1600*1200

視圖-勾選對(duì)齊點(diǎn)

3. 把草圖拉到畫(huà)面中,調(diào)整大小

二、線(xiàn)稿

1. 描邊設(shè)置及要注意的問(wèn)題

在描邊插畫(huà)中,常見(jiàn)的問(wèn)題之一就是描邊的粗細(xì)問(wèn)題. 以及描邊間關(guān)系的處理問(wèn)題。

描邊粗細(xì)問(wèn)題(下圖以之前的四季插畫(huà)為例子)

描邊間關(guān)系處理

描邊設(shè)置

描邊的粗細(xì)是根據(jù)畫(huà)布大小而決定的,1600*1200的畫(huà)布,我習(xí)慣用 8pt 的粗細(xì)的線(xiàn)條,但是如果畫(huà)布是1200*900,8pt 則顯得過(guò)粗。具體的粗細(xì)可以根據(jù)情況而調(diào)整。

2. 線(xiàn)稿畫(huà)法

布爾運(yùn)算法

形狀斷點(diǎn)重連法

形狀生成器

鋼筆勾勒法

鋼筆勾勒法顧名思義就是用鋼筆直接描出物體的外形。在這個(gè)插畫(huà)中,植物的形狀比較隨性,因此用鋼筆直接勾勒比形狀剪切要快。繪制的過(guò)程中,注意調(diào)整線(xiàn)條的平滑度. 弧度,使其規(guī)整。在此不作示范。

三、色稿

1. 增加背景色

2. 色稿層的繪制

3. 顏色調(diào)整

4. 高光與暗部

5. 經(jīng)過(guò)高光與暗部塑造后的畫(huà)面

四、 風(fēng)格塑造與整體調(diào)整

1. 風(fēng)格塑造

最近看到 kit8 大神的畫(huà),突然想到如果白線(xiàn)運(yùn)用在線(xiàn)性插畫(huà)會(huì)怎樣,就嘗試了這種風(fēng)格。把線(xiàn)稿復(fù)制一層置于頂上,改成白色,2px 粗細(xì)的線(xiàn),然后向旁邊移動(dòng)錯(cuò)位,破一下畫(huà)面沉悶的感覺(jué)。


2. 整體調(diào)整

看到這里,你應(yīng)該也發(fā)現(xiàn)了,畫(huà)面是比較灰的,因?yàn)槲叶际沁x擇低飽和度的顏色,如果需要調(diào)整,就在 AI 中把插畫(huà)導(dǎo)出 SVG 格式。然后拖到 PS 里面進(jìn)行色相飽和度的調(diào)整。

3. 保存喜歡的配色

在顏色調(diào)整過(guò)程中,遇到喜歡的配色就保存下來(lái),這樣一張插畫(huà)就完成了。

動(dòng)畫(huà)筆記06《文字路徑書(shū)寫(xiě)MG動(dòng)畫(huà)》

資深UI設(shè)計(jì)者

推薦一個(gè)做路徑動(dòng)畫(huà)的腳本,還不錯(cuò),看看吧。

undefined

日歷

鏈接

個(gè)人資料

存檔