第二章網(wǎng)店色彩設(shè)計課件

第二章網(wǎng)店色彩設(shè)計

第二章網(wǎng)店色彩設(shè)計在網(wǎng)店制作中，色彩是一個非常重要的元素，只有合理地安排色彩，頁面才能夠吸引瀏覽者的眼球，各種信息才能夠正確地傳達出來。學(xué)習運用色彩是一個長期積累的過程，需要在了解各種色彩原理的基礎(chǔ)上不斷實踐和總結(jié)才能夠運用自如。通過本章的學(xué)習，可以掌握最核心的色彩知識和運用方法。本章節(jié)學(xué)習目標第二章網(wǎng)店色彩設(shè)計第一節(jié)

色彩的基本知識

掌握一些色彩的基本常識對于制作網(wǎng)頁非常有幫助，這些常識內(nèi)容都源自人們對色彩的理解和科學(xué)歸類。其中色彩的色相、明度和飽和度與網(wǎng)頁色彩的構(gòu)成緊密相關(guān)，了解并掌握色彩的相關(guān)知識可以讓網(wǎng)頁設(shè)計工作事半功倍。色彩構(gòu)成一二色彩的三要素——色相、明度、純度第二章網(wǎng)店色彩設(shè)計一、色彩的構(gòu)成

色彩是光之子，而光是色之母。

——瑞士色彩家約翰.內(nèi)斯伊頓光色彩視覺光、色彩、視覺第二章網(wǎng)店色彩設(shè)計色彩一般分為無彩色和有彩色兩大類。無彩色是指白、灰、黑等不帶顏色的色彩，即反射白光的色彩。無彩色第二章網(wǎng)店色彩設(shè)計有彩色是指紅、黃、藍、綠等帶有顏色的色彩，如圖第二章網(wǎng)店色彩設(shè)計原色：是指無法用其他顏色混合得到的顏色，即第一次色。理論上講原色只有三種：紅，黃，藍。印刷中三原色是紅，黃，青。是構(gòu)成其他顏色的母色。原色不能由其他顏色調(diào)出卻可以調(diào)配出其他任何顏色。如圖第二章網(wǎng)店色彩設(shè)計間色：三原色中任何兩種混合產(chǎn)生的顏色稱為間色，又稱第二色。間色也是三種：橙、綠、紫。

如圖第二章網(wǎng)店色彩設(shè)計復(fù)色：是用原色與間色相調(diào)或用間色與間色相調(diào)，也叫“三次色”，如圖2-5所示紅橙、紅紫、黃橙、黃綠、藍綠、藍紫都是三次色復(fù)色。第二章網(wǎng)店色彩設(shè)計二、色彩的三要素——色相、明度、純度1、色相色相是指色彩的相貌，也就是色彩最顯著得特征，又叫色名，色種等。生活中得各種色彩都有自己具體得面貌，因此也就有了不同得名稱。色彩的相貌是以紅、橙、黃、綠、青、藍、紫的光譜色為基本色相。基本色相的秩序以色相環(huán)形式體現(xiàn)，稱為色環(huán)。色環(huán)分別可作為六色相環(huán)，九色相環(huán)，十二色相環(huán)，二十色相環(huán)等多種色彩秩序，如下圖為十二色相環(huán)。第二章網(wǎng)店色彩設(shè)計（1）同類色：在相隔距離30度以內(nèi)的對比．是最弱的色相對比，一般看做同類色相的不同明度與純度的對比。對比效果單純、雅致．但也容易出現(xiàn)單調(diào)、呆板的效果．第二章網(wǎng)店色彩設(shè)計（2）鄰近色：所謂鄰近色，就是在色相環(huán)上相鄰近的顏色，例如綠色和藍色，紅色和黃色就互為鄰近色。鄰近色之間往往是你中有我，我中有你。色相環(huán)中相隔距離60度左右(不超過90度)的對比為對比，是色相中較弱的對比。這一對比中的顏色屬于一個大的色相范疇．但有不同的顏色傾向，如深紅與大紅、黃綠與藍綠等色。此對比的特點統(tǒng)一，和諧，與同類色相比效果要豐富得多。第二章網(wǎng)店色彩設(shè)計（3）對比色：在色相環(huán)中相隔距離120度左右（不超過180度）的色相關(guān)系,稱為"對比色"。它是構(gòu)成明顯色彩效果的重要手段，也是賦予色彩以表現(xiàn)力的重要方法。此種對比有著鮮明的色相感．效果強烈、興奮，但過分刺激易使視覺疲勞，處理不當會產(chǎn)生煩躁、不安定之感。第二章網(wǎng)店色彩設(shè)計（4）互補色：是原色中的任何一個色彩和對應(yīng)兩個原色混合出的間色，如紅色與綠色、黃色與紫色、橙色與藍色等色組，即色相環(huán)上成180度角的是強對比色，補色的調(diào)和和搭配可以產(chǎn)生華麗、跳躍、濃郁的審美感覺，然而，倘若補色以高純度、高明度、等面積搭配，會產(chǎn)生比對比色組更強烈的刺激性，使人的視覺感到疲勞而無法接受?；パa色在色相環(huán)中的位置，如圖所示。第二章網(wǎng)店色彩設(shè)計2、明度

色彩的明度即色彩的明暗、深淺變化，也叫色彩的亮度。明度色相環(huán)，由中間向內(nèi)圈不斷加白，向外圈不斷加黑。明度高的色彩清新自然，明度低的色彩神秘冷艷。色彩的明度搭配也遵循對比調(diào)和原則，深淺搭配層次分明。第二章網(wǎng)店色彩設(shè)計3、純度

色彩的純度是色彩不摻雜白色、黑色、灰色以及其他顏色，保持鮮艷的飽和度。一種顏色與另一種更鮮艷的顏色相比較時，會感覺不太鮮艷，但與不鮮艷的顏色相比時，則顯得鮮艷，這種色彩的對比便稱為純度對比。以高純度色彩在畫面面積占70%左右時，構(gòu)成高純度基調(diào)，即鮮調(diào)。以中純度色彩在畫面面積占70%左右時，構(gòu)成中純度基調(diào)，即中調(diào)。以低純度色彩在畫面面積占70%左右時，構(gòu)成低純度基調(diào)，即灰調(diào)。第二章網(wǎng)店色彩設(shè)計第二節(jié)

網(wǎng)店色彩搭配技巧運用本節(jié)主要介紹網(wǎng)店美工技能——色彩搭配技巧知識。對美工而言，PS是最主要的作圖工具，在PS中有兩種色彩模式，分別是RGB模式和CMYK模式，RGB即、紅、綠藍三基色，CMYK分別是青、品紅、黃、黑。一般來說，網(wǎng)頁圖片采用的都是RGB的色彩模式，如圖所示。第二章網(wǎng)店色彩設(shè)計一、色相對比與調(diào)和的搭配技巧色相對比是指因色相之間的差別形成的對比。當主色相確定后，必須考慮其他色彩與主色相是什么關(guān)系，要表現(xiàn)什么內(nèi)容及效果等，這樣才能增強其表現(xiàn)力?？赏ㄟ^色相對比的強弱決定于色相在色環(huán)上的距離。色相對比一般可以分為四種程度的對比：同類色相對比與調(diào)和、鄰近色相對比與調(diào)和、對比色相對比與調(diào)和、互補色相對比與調(diào)和。第二章網(wǎng)店色彩設(shè)計1、同類色對比與調(diào)和搭配同類色給人的感覺是相當協(xié)調(diào)的。它們通常在同一個色相里，通過明度的黑白灰或者純度的不同來稍微加以區(qū)別的，產(chǎn)生了及其微妙的韻律美。為了不至于讓整個頁面呈現(xiàn)過于單調(diào)平淡，有些頁面則是加入極其小的其他顏色做點綴。如圖頁面使用了同種色的黃色系，淡黃、檸檬黃、中黃、通過明度、純度的微妙變化產(chǎn)生緩和的節(jié)奏美感。第二章網(wǎng)店色彩設(shè)計2．鄰近色的對比調(diào)和

在色環(huán)中,色相越靠近越調(diào)和。色彩色相環(huán)中60°以內(nèi)色相屬于鄰近色。主要靠鄰近色之間的共同色來產(chǎn)生作用。鄰近色相較于同類色色彩之間的可搭配度要大些，顏色豐富、富于變化。第二章網(wǎng)店色彩設(shè)計如圖所示頁面主要取的是色環(huán)中的綠色、藍色，通過明度、純度、面積上的不同實現(xiàn)變化和統(tǒng)一的。雖然藍色在頁面中使用面積最大，我們看到由于它的明度非常高，飽和度就降低了，因此在頁面中處在明顯的角色。而綠色的純度最高，且使用面積次之，頁面顯示較顯眼，因此用于店招位置上。整個頁面主次的視覺引導(dǎo)分明。

結(jié)論：

不是每種主色調(diào)都是極其顯眼的位置，通常多扮演著用于突出主體的輔助性配角。而重要角色往往在頁面中用的份量極少，卻又起到突出主體的作用。

第二章網(wǎng)店色彩設(shè)計3．對比色相的對比與調(diào)和

在色相環(huán)中每一個顏色對面(120度左右)的顏色,稱為"對比色"。對比色的對比調(diào)和方法有：

（1）提高或降低對比色的純度。

（2）在對比色之間插入分割色（金、銀、黑、白、灰等）。

（3）采用雙方面積大小不同的處理方法。

對比色之間加入相近的類似色。第二章網(wǎng)店色彩設(shè)計對比色的對比與調(diào)和分析對右圖的分析我們可以知道，通過上面的這些色值調(diào)配當需要使用這組對比色配色時候該如何達到協(xié)調(diào)的目的。即不是對比色為主色調(diào)的頁面就一定會有不舒服的感覺的，主要可以通過調(diào)低亮度、降低飽和度、加入少許白色來調(diào)和。顏色凌亂可以適當加入同類色或者類似色、白色、黑色、灰色做到統(tǒng)一調(diào)配的目的。右圖可以說是黃色和藍色的對比色做網(wǎng)店的主要色調(diào)。黃色藍色組合在網(wǎng)頁中顯得較為青春活力，色彩跳躍度較大。整個頁面運用了白色作為調(diào)和，白色是這組對比色里加入的協(xié)調(diào)色，調(diào)低了亮度，使整體降低了純度，緩和視覺刺激。第二章網(wǎng)店色彩設(shè)計4．補色對比與調(diào)和搭配將紅與綠、黃與紫、藍與橙等具有補色關(guān)系的色彩彼此并置，使色彩感覺更為鮮明，純度增加，稱為補色對比。由冷色系的藍色組成大背景環(huán)境，純度較低。前景主要是突出產(chǎn)品橙色形成補色對比效果，純度亮度非常高，達到最高值，加之淺藍色的輔色搭配，使得橙色更為凸顯，更易于視覺對信息的迅速捕捉。結(jié)論：補色的合理搭配，能拉開前景與背景的空間感，突出頁面主體物。尤其是橙色在主體物的運用，能迅速傳遞視覺的效果。第二章網(wǎng)店色彩設(shè)計二、明度對比與調(diào)和的搭配技巧明度色彩搭配技巧是指色彩之間明暗程度的差別而形成的對比，是頁面形成恰當?shù)暮凇?、灰效果的主要手段?/p>

明度對比可分為:彩色差的明度對比及非彩色差的明度對比

第二章網(wǎng)店色彩設(shè)計1．彩色差的明度對比分析明度對比在視覺上對色彩層次和空間關(guān)系影響較大。例如檸檬黃明度高，藍紫色的明度低，橙色和綠色屬中明度，紅色與藍色屬中低明度。如圖所示為彩色差的明度對比，黃色的色彩明度變化對比搭配效果。第二章網(wǎng)店色彩設(shè)計2．非彩色差明度對比分析如圖所示頁面應(yīng)該是黑白灰色非色彩構(gòu)成，網(wǎng)店圖片黑白灰的色彩搭配，單純的黑白對比柔和舒適于視覺。能使頁面顯得更單純、統(tǒng)一，形成較強的科技感、時代感。第二章網(wǎng)店色彩設(shè)計三、純度對比與調(diào)和的搭配技巧

純度對比是指不同色彩之間純度的差別而形成的對比。色彩純度可大致分為高純度、中純度、低純度三種。未經(jīng)調(diào)和過的原色純度是最高的，而間色多屬中純度的色彩，復(fù)色其本身純度偏低而屬低純度的色彩范圍。純度的對比會使色彩的效果更明確肯定。第二章網(wǎng)店色彩設(shè)計1、高純度色彩搭配整個頁面看起來異常艷麗刺激然而又非常的協(xié)調(diào)。以上數(shù)值主要選取了幾種較有代表性的顏色。以上色彩除了粉紅色，其他幾組顏色都是高飽和度高亮度的顏色，因此充分的發(fā)揮出了色彩的艷麗程度。包括粉紅色在內(nèi)的幾種灰色階，在中間起到了和諧作用。白色能拉開相近色階的空間及明快頁面的作用，在這里可以說是功不可沒。結(jié)論：頁面實際上用了不少顏色，配色大膽。抓住顏色主次冷暖的安排，適度再加上和諧的過渡色灰色，實現(xiàn)了作者對該頁面的輕松配色。從多種高純度的搭配協(xié)調(diào)能力上看，足可見作者對色彩設(shè)計搭配不一般的功底。這類網(wǎng)店配色非常能夠體現(xiàn)出一個網(wǎng)站頁面產(chǎn)品個性，配色難度大。讓人過目難忘。第二章網(wǎng)店色彩設(shè)計2、低純度色彩搭配

主色調(diào)的灰色，做了漸變背景色，降低了純度。輔助色的深灰紅色，也是作為低純度的色彩使得整個頁面協(xié)調(diào)于整體的效果。而上方店招的黃色則通過提