網(wǎng)站配色技巧課件

1、網(wǎng)站美工實(shí)戰(zhàn)第一課張鵬網(wǎng)站配色技巧北京傳智播客教育 目標(biāo)掌握一個(gè)網(wǎng)站的整體運(yùn)做流程熟悉美工的工作流程掌握色彩理論基礎(chǔ)知識(shí) 掌握網(wǎng)頁配色原則與技巧 北京傳智播客教育 網(wǎng)站整體運(yùn)營流程公司網(wǎng)站網(wǎng)站前期的策劃與設(shè)計(jì)網(wǎng)站中期的制作與開發(fā)網(wǎng)站后期的推廣與維護(hù)網(wǎng)站上傳與維護(hù)網(wǎng)站推廣與安全網(wǎng)站前臺(tái)頁面制作網(wǎng)站后臺(tái)程序開發(fā)網(wǎng)站需求分析與策劃方案網(wǎng)站頁面效果圖設(shè)計(jì)與定稿北京傳智播客教育 色彩入門1、色彩與視覺原理：色彩是由光的刺激而產(chǎn)生的一種視覺效應(yīng)。光是產(chǎn)生色的原因，色是光感覺的結(jié)果。北京傳智播客教育 色彩入門2.顏色分無彩色和有彩色兩大類。無彩色是指黑，白，灰系統(tǒng)色。有彩色是指除了非彩色以外的所有色彩，如，

2、紅、綠藍(lán)等。3、三原色一切顏色都來自三原色：紅、綠、藍(lán)RGB，其它的色彩都可以用這三種色彩調(diào)和而成。北京傳智播客教育 色彩入門4、色彩的三要素1、色相：色相是指色彩的相貌,是區(qū)別色彩種類的名稱。2、飽和度也稱為純度：是指色彩的純凈程度。3、亮度：指色彩的明暗程度。北京傳智播客教育 色彩的分析1、色彩的心理聯(lián)想2、色彩表示的意義3、色彩運(yùn)用的效果當(dāng)我們看到不同的顏色時(shí)，心理會(huì)受到不同顏色的影響而發(fā)生變化而產(chǎn)生一些聯(lián)想。不同的色彩又可以表達(dá)了不同的含義。不同的色彩運(yùn)用又會(huì)得到不同的效果北京傳智播客教育 紅色心理聯(lián)想：興奮、熱烈、激情、喜慶、高貴、緊張、奮進(jìn)、辟邪、危險(xiǎn)表示的意義：自由、血、火、勝利

3、運(yùn)用的效果：刺激、興奮、強(qiáng)烈煽動(dòng)效果北京傳智播客教育 橙色心理聯(lián)想：愉快、激情、活躍、熱情、精神、活潑、甜美表示的意義：陽光、火、美食運(yùn)用的效果：活潑、愉快、有朝氣北京傳智播客教育 黃色心理聯(lián)想：光明、希望、愉悅、陽光、明朗、動(dòng)感、歡快表示的意義：陽光、黃金、收獲運(yùn)用的效果：華麗、富麗堂皇北京傳智播客教育 綠色心理聯(lián)想：舒適、和平、新鮮、青春、希望、安寧、溫和表示的意義：和平、春天、青年運(yùn)用的效果：友善、舒適北京傳智播客教育 青色心理聯(lián)想：寧靜、悠遠(yuǎn)、寒冷表示的意義：希望、寧靜、悠遠(yuǎn)、寒冷運(yùn)用的效果：希望、寧靜、寒冷北京傳智播客教育 藍(lán)色心理聯(lián)想：清爽、開朗、理智、沉靜、深遠(yuǎn)、傷感、寂靜表示的

4、意義：天空、海洋、信念運(yùn)用的效果：冷靜、智慧、開闊北京傳智播客教育 紫色心理聯(lián)想：高貴、神秘、豪華、思念、悲哀、溫柔、女性表示的意義：懺悔、女性運(yùn)用的效果：神秘感、女性化北京傳智播客教育 黑色心理聯(lián)想：深沉、莊重、成熟、穩(wěn)定、堅(jiān)定、壓抑、悲觀表示的意義：夜、高雅、死亡運(yùn)用的效果：氣魄、高貴、男性化北京傳智播客教育 白色心理聯(lián)想：潔凈、明朗、清晰、透明、純真、虛無、簡潔表示的意義：貞潔、光明運(yùn)用的效果：純潔、清爽北京傳智播客教育 灰色心理聯(lián)想：沉著、平易、曖昧、內(nèi)向、消極、失望、抑郁表示的意義：質(zhì)樸、陰天運(yùn)用的效果：普通、平易北京傳智播客教育 網(wǎng)色配色原則1、特色鮮明：一個(gè)網(wǎng)站的用色必須要有自己

5、的獨(dú)特風(fēng)格，這樣才能顯得個(gè)性鮮明，給瀏覽者留下深刻的印象。2、搭配合理：網(wǎng)頁設(shè)計(jì)雖然屬于平面設(shè)計(jì)的范疇，但它又與其他平面設(shè)計(jì)不同，它在遵從藝術(shù)規(guī)律的同時(shí)，還要考慮人的生理特點(diǎn)，色彩搭配一定要合理，給人一種和諧、愉快的感覺，避免采用純度很高的單一色彩，這樣容易造成視覺疲勞。3、講究藝術(shù)性：網(wǎng)站設(shè)計(jì)也是一種藝術(shù)活動(dòng)，因此它必須遵循藝術(shù)規(guī)律，在考慮到網(wǎng)站本身的特點(diǎn)同時(shí)，按照內(nèi)容決定形式的原則，大膽進(jìn)行藝術(shù)創(chuàng)新，設(shè)計(jì)出既符合網(wǎng)站要求，又有一定藝術(shù)特色的網(wǎng)站北京傳智播客教育 網(wǎng)頁配色的方法1、單色的使用：簡單的說，這種方法是采用一種顏色的深淺搭配，盡管網(wǎng)站設(shè)計(jì)要避免采用單一色彩，以免產(chǎn)生單調(diào)的感覺，但通

6、過調(diào)整色彩的飽和度與透明度也可以產(chǎn)生變化，使用網(wǎng)站避免單調(diào)。2、鄰近色的使用：所謂鄰近色，就是在色相環(huán)中相鄰近的顏色，比如：紅與黃、綠與藍(lán)為相鄰色。采用相鄰色設(shè)計(jì)網(wǎng)頁可以使用網(wǎng)頁避免色彩雜亂，易于達(dá)到頁面的和諧統(tǒng)一北京傳智播客教育 網(wǎng)頁配色的方法3、對比色使用：使用兩種完全不同的顏色搭配，對比色可以突出重點(diǎn)，產(chǎn)生強(qiáng)烈的視覺效果。在設(shè)計(jì)時(shí)一般以一種顏色為主色調(diào)，對比色作為點(diǎn)綴，可以起到畫龍點(diǎn)眼的作用北京傳智播客教育 網(wǎng)頁配色的方法4、冷色的使用：5、暖色的使用：紅.橙.橙黃.黃.黃綠.綠.青綠.藍(lán)綠.藍(lán).藍(lán)紫.紫.紫紅.紅|_| |_| |_| |_| | | |暖色系 中性系 冷色系 中性系北

7、京傳智播客教育 網(wǎng)頁配色的方法6、疊透法的使用：使用不同色彩純度的顏色疊加搭配，由于色彩的純度不同，從而形成不同色彩的疊加和透明。比如同種色的疊透、類似色的疊透和對比色的疊透明。使頁面色彩具體立體感與空間感。7、主次搭配的使用：以一種顏色為主要顏色，即作為主色，同時(shí)輔以其他顏色混合搭配，形成繽紛而不雜亂的搭配效果。北京傳智播客教育 網(wǎng)頁配色技巧1、用一種色彩：這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，(說得通俗些就是將色彩變淡或則加深)，產(chǎn)生新的色彩，用于網(wǎng)頁。這樣的頁面看起來色彩統(tǒng)一，有層次感。2、用兩種色彩：先選定一種色彩，然后選擇它的對比色。這樣會(huì)使用整個(gè)頁面色彩豐富但不花稍。北京傳智播客教育 網(wǎng)頁配色技巧3、用一個(gè)色系：簡單的說就是用一個(gè)感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。因?yàn)槭峭粋€(gè)色系，因此搭配出來的網(wǎng)頁色彩和諧有序。4、用黑色和一種彩色：黑白灰是萬能色，當(dāng)配色時(shí)不知道該具體用那種顏色時(shí)，都可以采用黑白灰進(jìn)行嘗試。北京傳智播客教育 在網(wǎng)頁配色中的忌諱的是1、控制顏色的數(shù)量：不要將所有顏色都用到，盡量控制在三種色彩