網(wǎng)頁美工設(shè)計(jì)模塊二-網(wǎng)頁色彩規(guī)劃精課件

網(wǎng)頁美工設(shè)計(jì)模塊二網(wǎng)頁色彩規(guī)劃任務(wù)一認(rèn)識色彩情感

網(wǎng)頁美工設(shè)計(jì)模塊二網(wǎng)頁色彩規(guī)劃任務(wù)一認(rèn)識色彩情感教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．認(rèn)識色彩并區(qū)分色彩角色２．理解色彩情感及運(yùn)用相關(guān)知識確立主色調(diào)通過學(xué)習(xí)，學(xué)生能夠：1．能區(qū)分網(wǎng)頁中不同色彩的色彩角色2．能運(yùn)用色彩情感知識確立主色調(diào)教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．認(rèn)識色彩并區(qū)分色彩角色通過學(xué)習(xí)，學(xué)生新課導(dǎo)入我們生活的世界充滿了各種各樣的色彩，色彩與人的情感有著密切的聯(lián)系，不同的色彩被人們賦予不同的意義，表達(dá)特定的情感。運(yùn)用色彩時(shí)，除了色彩與色調(diào)本身的美感外，也通過色彩傳遞著相應(yīng)的色彩聯(lián)想與情感象征。

如圖所示，我們的生活中充滿了不同色彩感覺的事物：觀察四張圖片并思考：1.幾張圖片中的色彩帶給你什么樣的感受2.生活中哪些顏色給你留下了深刻的印象新課導(dǎo)入我們生活的世界充滿了各種各樣的色彩，色彩與人的情目標(biāo)展示

主色調(diào)

輔助色點(diǎn)睛色背景色一、色彩角色：以下圖為例進(jìn)行區(qū)分網(wǎng)頁色彩角色的分析。目標(biāo)展示

一、色彩角色：以下圖為例進(jìn)行區(qū)分網(wǎng)頁色彩角色的分析目標(biāo)展示二、色彩情感：如下圖以白色為例，用不同主色調(diào)的網(wǎng)頁幫助大家理解色彩情感在網(wǎng)頁中的運(yùn)用。目標(biāo)展示二、色彩情感：如下圖以白色為例，用不同主色調(diào)的網(wǎng)頁幫網(wǎng)頁美工設(shè)計(jì)模塊二--網(wǎng)頁色彩規(guī)劃[精]課件網(wǎng)頁美工設(shè)計(jì)模塊二--網(wǎng)頁色彩規(guī)劃[精]課件任務(wù)分解二、色彩情感

1．白色

白色讓人聯(lián)想到：

正面的：純粹、純潔、潔凈、正直、信賴、神圣、和平、單純、成熟、優(yōu)雅；

負(fù)面的：單調(diào)、恐懼、無力。

白色象征著純潔、神圣、明快、虛無、貧乏。純白色會帶給別人寒冷、嚴(yán)峻的感覺。白色通常需和其他色彩搭配使用，白色是萬能色，可以和任何顏色作搭配。

白色是所有色彩中亮度最高的，給人一種輕快的感覺。白色能使和它搭配的色彩顯得更加鮮明、突出，可以讓明亮的色彩更柔和、優(yōu)雅。白色與暖色搭配時(shí)可以增添華麗的感覺,與冷色搭配時(shí)可以產(chǎn)生清爽輕快的感覺。白色常用來表達(dá)明亮、潔凈的感覺，如清潔用品、衛(wèi)生用品、家居用品等，如圖所示，在網(wǎng)頁設(shè)計(jì)中白色多用做背景色與過度色。任務(wù)分解二、色彩情感任務(wù)分解二、色彩情感

2．灰色

灰色讓人聯(lián)想到：

正面的：知識、安定、斯文、氣質(zhì)、優(yōu)雅、成熟、節(jié)制、謙遜、創(chuàng)造；

負(fù)面的：悲傷、無力、陰暗、荒涼、內(nèi)向。

灰色象征謙虛、沉默、中庸、憂郁，不凸顯自身?；疑哂腥岷?、高雅的意象，屬于中間性格，男女皆能接受，是一種高格調(diào)的、有品位感的顏色。

使用灰色時(shí)，大多利用不同明度的灰色變化或搭配其他色彩來調(diào)和畫面的樸素、沉悶?；疑侵行陨?，和白色、黑色一樣是一種無色彩屬性的色彩。給人一種柔和、細(xì)致、樸素、大方、舒適、優(yōu)雅的感覺，灰色作為背景色彩非常理想，搭配其他色彩，可以有效中和華麗、張揚(yáng)的感覺。如圖所示，電子產(chǎn)品、商業(yè)經(jīng)濟(jì)、軍事類網(wǎng)站常常用灰色作為其主色調(diào)。任務(wù)分解二、色彩情感任務(wù)分解二、色彩情感

3．黑色

黑色讓人聯(lián)想到：

正面的：神秘、干練、威嚴(yán)、權(quán)威、教養(yǎng)、力量、強(qiáng)勢、攻擊；

負(fù)面的：恐怖、不安、絕望、悲傷、沉默、虛無、孤獨(dú)。

黑色象征著崇高、嚴(yán)肅、粗莽、沉默、退縮、沉穩(wěn)、黑暗，有消極、謙遜的意味，有高貴、穩(wěn)重、科技的意象。

電視、汽車、音響、儀器的色彩大多采用黑色，生活用品和服飾設(shè)計(jì)也大多利用黑色來塑造高貴的形象。黑色是萬能色，可以和任何色彩搭配,同時(shí)黑色很酷又極具個(gè)性化，被稱為永遠(yuǎn)的流行色,所以也適合用作音樂、時(shí)尚、個(gè)性化網(wǎng)頁的主色調(diào)，如圖所示的音樂網(wǎng)站設(shè)計(jì)。任務(wù)分解二、色彩情感任務(wù)分解二、色彩情感

4．紅色

紅色讓人聯(lián)想到：

正面的：熱情、感動、勇氣、力量、生命力、能量、愛情、溫暖、開放、社交性；

負(fù)面的：亢奮、攻擊、恐怖、危險(xiǎn)、欲望、沖動。

紅色象征著幸福、熱情、活潑、溫暖，是所有色彩中最鮮艷、純凈的色彩，紅色最容易引起注意，在各種媒體中被廣泛運(yùn)用。

紅色也常用來作為警告、危險(xiǎn)、禁止、防火等標(biāo)志的指定用色，在中國，紅色有著更豐富的內(nèi)涵和意義，代表喜慶、熱烈、革命、忠誠、權(quán)利。紅色與黑色搭配被譽(yù)為“商業(yè)成功色”，常被用于較前衛(wèi)時(shí)尚、娛樂休閑和個(gè)性化網(wǎng)頁中。粉紅色鮮嫩而充滿誘惑，容易營造出柔情、嬌媚、溫柔、甜蜜、純真、誘惑和艷麗等氣氛，這類顏色為主的網(wǎng)頁多用于女性主題，如化妝品、服裝網(wǎng)站等。如圖所示以紅色為主色調(diào)的網(wǎng)頁設(shè)計(jì)任務(wù)分解二、色彩情感任務(wù)分解二、色彩情感

5．橙色

橙色讓人聯(lián)想到：

正面的：活力、健康、創(chuàng)造力、能力、快樂、華麗、社交性；

負(fù)面的：警告、不安。

橙色象征著光明、華麗、甜蜜、快樂、輝煌、動感，極具擴(kuò)展性。

橙色很容易讓人聯(lián)想到金色的秋天和成熟的果實(shí)，是一種快樂而幸福的色彩，同時(shí)也是能引起食欲的色彩。在工業(yè)安全用色中，橙色是警告色，登山服裝、背包、救生衣等常用橙色引起別人的注意。如圖所示，橙色多用于餐飲、食品、運(yùn)動及表現(xiàn)年青人活力的網(wǎng)站。任務(wù)分解二、色彩情感任務(wù)分解二、色彩情感

6．黃色

黃色讓人聯(lián)想到：

正面的：快樂、輕快、撒嬌、可愛、理解、智慧、幸福、和平、明朗、希望；

負(fù)面的：卑鄙、妒嫉、欺騙、偏見、破壞、神經(jīng)質(zhì)。

黃色也象征智慧和光明，在中國古代，黃色常用于皇室，是權(quán)利和尊貴的象征。

黃色是喜慶的用色，象征著明朗、高貴、希望、發(fā)展、警示，黃色是明度最高的色彩。有警示的作用，是易于引起注意的代表色彩，有集中視線的效果，常用于道路的標(biāo)志線、禁止通行路障、工程用的大型機(jī)器等。如圖所示，在網(wǎng)頁設(shè)計(jì)中，黃色多用于商品銷售、休閑娛樂、前衛(wèi)時(shí)尚類網(wǎng)站。任務(wù)分解二、色彩情感任務(wù)分解二、色彩情感

7．綠色

綠色讓人聯(lián)想到：

正面的：生命、豐盛、繁榮、希望、和平、舒適、安定、理性、正直、寬容；

負(fù)面的：猜忌、貪婪、腐蝕、自我壓抑。

綠色傳達(dá)了清爽、理想、希望、生長的意味，代表生命、成長。

綠色綜合了藍(lán)色的冷靜與黃色的活躍，象征著新鮮、安逸、和平、青春、安全、理想，是一種中庸的、明凈的、大自然的顏色，能讓人聯(lián)想到伸展著綠葉的樹木，展示著大自然的生命力。綠色還可以緩解疲勞，有讓視覺“休息”的效果，所以綠色調(diào)網(wǎng)站較適宜長時(shí)間瀏覽，如圖所示。綠色給人一種舒適的感受，文化教育與醫(yī)療衛(wèi)生類網(wǎng)站常常使用綠色作為主色調(diào)。任務(wù)分解二、色彩情感任務(wù)分解二、色彩情感

8．藍(lán)色

藍(lán)色讓人聯(lián)想到：

正面的：博大、高遠(yuǎn)、開闊、深邃、無限、忠誠、真摯、信賴；

負(fù)面的：冷淡、冰冷、緊張、憂郁。

藍(lán)色象征著寒冷、深遠(yuǎn)、沉靜、內(nèi)斂、理智、誠實(shí)。

藍(lán)色容易讓人聯(lián)想到天空、大海、平靜而開闊的水面，給人冷靜、沉穩(wěn)，永恒的感覺，所以宣傳科技和效率的企業(yè)和商品，大多選用藍(lán)色作為標(biāo)準(zhǔn)色，如圖所示。而且大多數(shù)人比較偏愛藍(lán)色色調(diào),使得藍(lán)色成為網(wǎng)頁設(shè)計(jì)中使用最多的一種色彩。任務(wù)分解二、色彩情感任務(wù)分解二、色彩情感

9．紫色

紫色讓人聯(lián)想到：

正面的：智慧、神秘、幻想、浪漫、神圣、偉大、崇高、高貴；

負(fù)面的：悲哀、憂郁、孤獨(dú)。

紫色象征著優(yōu)雅、高貴、神秘、魅力，具有強(qiáng)烈的女性化特征。

紫色不易與其他色彩搭配，紫色為主色調(diào)的網(wǎng)頁，往往用不同明度的紫色或紫色的漸變來裝飾頁面，如圖2-1-22所示。紫色具有天然的高貴與冷傲氣質(zhì)，與女性有關(guān)的商品和企業(yè)形象常常使用紫色，如圖所示。任務(wù)分解二、色彩情感課堂小結(jié)◆本任務(wù)我們學(xué)習(xí)了哪些知識？◆從這些知識出發(fā)引出了哪些技能？◆合作學(xué)習(xí)中，你發(fā)揮了多大的作用，有積極主動參與嗎？◆自評、互評環(huán)節(jié)的評價(jià)結(jié)果是否吻合，不吻合的原因是什么？課堂小結(jié)◆本任務(wù)我們學(xué)習(xí)了哪些知識？作業(yè)布置一、打開素材文件/模塊二/任務(wù)一/“2-1-29.jpg”，在圖中的白色區(qū)域內(nèi)填充色彩,表現(xiàn)出“春、夏、秋、冬”任意一種季節(jié)給人的色彩感受。二、打開素材文件/模塊二/任務(wù)一/“2-1-30.jpg”，在圖中白色區(qū)域內(nèi)填充色彩，將“酸、甜、苦、辣”任意一種味道用色彩的方式表現(xiàn)出來。作業(yè)布置一、打開素材文件/模塊二/任務(wù)一/“2-1-29知識技能拓展一、色彩的味覺效應(yīng)

色彩的味覺效應(yīng)來自于現(xiàn)實(shí)中食品的色調(diào)關(guān)系長期作用于人的刺激體驗(yàn)，人們經(jīng)過長期生活經(jīng)驗(yàn)的積累，形成一種自然的聯(lián)想能力和條件反射，如圖所示，不同色彩的食品帶給人不同的味覺體驗(yàn)。

色彩的味覺感受不完全是一種色彩對應(yīng)一種味覺感受，很可能一種色彩與多種味覺感受相關(guān)，或者某些味覺感受需要多種色彩的搭配才能體現(xiàn)，色彩與味覺的大致對應(yīng)關(guān)系如下：

黃、黃綠色——酸，橙、粉紅色、淺褐色——甜，黑、深褐色——苦，紅、綠——辣；

白、藍(lán)、深灰色——咸，灰綠色、深綠色——澀，白——清淡，黑——厚重。知識技能拓展一、色彩的味覺效應(yīng)知識技能拓展二、色彩與性格

性格是人類的特征，色彩本身并沒有性格，但由于色彩的象征性與人類性格表現(xiàn)出的一些特征有某些對應(yīng)的關(guān)系，如圖所示的休閑風(fēng)格和沉穩(wěn)風(fēng)格，所以才讓人感覺到色彩與性格是相關(guān)聯(lián)的，如圖2-1-28所示。

紅色象征外向型性格，特點(diǎn)是剛烈、熱情、大方、健忘、善于交流、不拘小節(jié)；

黃色象征力量型性格，特點(diǎn)是喜歡支配，習(xí)慣于領(lǐng)導(dǎo)別人；

藍(lán)色象征條理型性格，特點(diǎn)是個(gè)性穩(wěn)重，不輕易做出判斷，易于親近外向型性格；

綠色象征適應(yīng)型性格，特點(diǎn)是順從、聽話，善于傾聽別人的述說。知識技能拓展二、色彩與性格網(wǎng)頁美工設(shè)計(jì)模塊二網(wǎng)頁色彩規(guī)劃任務(wù)二搭配網(wǎng)頁色彩

網(wǎng)頁美工設(shè)計(jì)模塊二網(wǎng)頁色彩規(guī)劃任務(wù)二搭配網(wǎng)頁色彩教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．從色環(huán)圖開始理解色彩基本屬性２．理解色彩搭配基礎(chǔ)知識及運(yùn)用知識搭配網(wǎng)頁色彩通過學(xué)習(xí)，學(xué)生能夠：1．能理解色彩的基本屬性2．能理解色彩搭配的基礎(chǔ)知識教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．從色環(huán)圖開始理解色彩基本屬性通過學(xué)習(xí)新課導(dǎo)入

初學(xué)者總是覺得色彩知識過于繁復(fù)深奧，不便于理解，那我們換一種思路，從圖2-2-1所示的二十四色色環(huán)圖出發(fā)來簡單認(rèn)識色彩。新課導(dǎo)入初學(xué)者總是覺得色彩知識過于繁復(fù)深奧，不便于理解，新課導(dǎo)入

色彩可以分為非彩色與彩色兩大類。非彩色指黑、白和各種深淺不一的灰色，而其他所有顏色均屬于彩色。從視覺和心理學(xué)角度出發(fā)，彩色具有三個(gè)屬性：色相、明度、純度。一、色相

指色彩的種類和名稱，如紅、橙、黃、綠、青、藍(lán)、紫等不同的色彩,色相是顏色的基本特征，是一種色彩區(qū)別于另一種色彩的標(biāo)準(zhǔn)，如圖2-2-2至2-2-5所示不同色相的事物。新課導(dǎo)入色彩可以分為非彩色與彩色兩大類。非彩色指黑、白和新課導(dǎo)入二、明度

又叫亮度，指顏色的深淺、明暗程度，如圖2-2-6展示了白色到黑色的明度變化。

色彩的明度包括兩個(gè)方面：一是指某一色相的深淺變化，如粉紅、大紅、深紅，都是紅色，但一種比一種深（圖2-2-1中內(nèi)環(huán)到外環(huán)就是同一色相由淺到深的明度變化）。二是指不同色相間存在的明度差別，如常見的七彩色中黃色明度最高，紫色明度最低，橙和綠、紅和藍(lán)處于相近的明度。如圖2-2-7和2-2-8所示相同圖像不同狀態(tài)的區(qū)別。新課導(dǎo)入二、明度新課導(dǎo)入三、純度

也叫飽和度，指色彩的鮮艷程度。純度取決于含有某一種色彩成分的比例，比例越大，純度越大；比例越小，純度越小。圖2-2-1中處于中間位置的一環(huán)純度最高，向內(nèi)加入白色，提高了明度，同時(shí)降低了飽和度；向外加入黑色，降低了明度，同時(shí)也降低了飽和度。色彩越單純其純度越高，越混合其純度越低，往色彩中加入任何其他色彩都會降低其純度。如圖2-2-9至2-2-11所示相同圖像不同純度關(guān)系時(shí)的區(qū)別。新課導(dǎo)入三、純度新課導(dǎo)入四、色彩的冷暖

是指不同色彩之間的色彩感覺形成的差別，色彩分為冷、暖兩大色調(diào)，如圖2-2-12至2-2-15所示。從圖2-2-1中可以清晰的看到從黃色到紫色的連線將整個(gè)色環(huán)分為兩種具有明顯冷暖差異的色彩體系：以紅、橙、黃為代表的曖色調(diào)，以藍(lán)、綠、紫為代表的冷色調(diào)。新課導(dǎo)入四、色彩的冷暖新課導(dǎo)入四、色彩的冷暖

雖說一般把黃色當(dāng)成暖色調(diào)色彩，紫色當(dāng)成冷色調(diào)色彩，但這二者都處于冷暖色調(diào)的過渡位置，其實(shí)他們的色彩感覺具有不確定性。特別是紫色，人們常說紫色的色彩感覺是一半海水一半火焰，是最具神秘感的色彩，常用于女性網(wǎng)站的主色調(diào)。另外，色彩的冷暖還受到明度和純度的影響，淺色感覺冷，深色感覺暖。如圖2-2-16和2-2-17所示的冷暖對比具有很強(qiáng)的視覺沖擊力。新課導(dǎo)入四、色彩的冷暖目標(biāo)展示色彩搭配基礎(chǔ)知識（以同類色搭配為例）目標(biāo)展示色彩搭配基礎(chǔ)知識（以同類色搭配為例）任務(wù)分解一、同類色搭配

同類色是指顏色在色相環(huán)上位置十分接近，大約在15°～30°左右的相鄰色彩或者同一色相關(guān)系中不同明度或純度的色彩搭配，例如深綠色與淺綠色、紅色與橙紅色等。

同類色搭配可以產(chǎn)生有秩序的漸變感覺，色相差異小，顯得協(xié)調(diào)統(tǒng)一，畫面整潔有序，但相同的色彩感覺也容易產(chǎn)生平淡、單調(diào)的感覺，如圖所示。可以加大明度與純度對比來彌補(bǔ)單調(diào)感，或者加入小面積的其他顏色作點(diǎn)綴。任務(wù)分解一、同類色搭配任務(wù)分解一、同類色搭配

同類色搭配是最穩(wěn)妥的配色方案，色彩搭配比較容易顯得規(guī)范、美觀，如圖所示。是色彩運(yùn)用初期最容易掌握的搭配方式，強(qiáng)力推薦！任務(wù)分解一、同類色搭配任務(wù)分解二、近似色搭配

近似色是指顏色在色相環(huán)上的位置在30°～60°左右，距離較近，顏色之間色相差別不大，例如紅色與橙色、橙色與黃色、黃色與綠色、綠色與藍(lán)色、藍(lán)色與紫色等。

近似色的搭配是一種非常理想的色彩搭配方案，在色相關(guān)系上色彩相近而不相同，統(tǒng)一中有變化，變化又不失協(xié)調(diào)。色彩既有對比又相互調(diào)和，視覺關(guān)系上能做到清晰明朗、層次豐富。任務(wù)分解二、近似色搭配任務(wù)分解二、近似色搭配

近似色搭配是最常見，應(yīng)用范圍最廣的一種配色方案。配色難度不大卻極易出彩，如圖所示，是最值思考與運(yùn)用的色彩搭配方式，極力推薦！任務(wù)分解二、近似色搭配任務(wù)分解三、對比色搭配

對比色是指顏色在二十四色色環(huán)圖上相差120°左右的色彩,對比色在色相環(huán)中位置相距較遠(yuǎn)，顏色之間共同因素減少，色相差異較大，如三原色（紅、黃、藍(lán)）之間或者三間色（橙、綠、紫）之間的搭配。

對比色搭配屬于強(qiáng)對比搭配方案，視覺效果上強(qiáng)烈、鮮亮，畫面效果上層次清楚、結(jié)構(gòu)明顯，特別易于突出主體，展示亮點(diǎn)，如圖所示。任務(wù)分解三、對比色搭配任務(wù)分解三、對比色搭配

由于對比色搭配色相差異較大，色彩有一定的沖突感，在運(yùn)用的時(shí)候多用深淺不一的灰色做過渡，以降低色彩的不協(xié)調(diào)性。同時(shí)，必須注意色彩的主次之分，加大主色調(diào)與輔助色的面積對比，以達(dá)到色彩平衡的效果，如圖所示。任務(wù)分解三、對比色搭配任務(wù)分解四、互補(bǔ)色搭配

互補(bǔ)色是指顏色的位置位于色相環(huán)直徑的兩端，相差180°，是距離最遠(yuǎn)的色彩，色彩共同因素消失，色相差異巨大，如紅與綠、黃與紫、藍(lán)與橙是最常見的補(bǔ)色。

互補(bǔ)色搭配是最強(qiáng)烈、最富刺激性的配色方案，互補(bǔ)色對比的畫面特別鮮明、艷麗，很容易吸引人的注意力?；パa(bǔ)色又極不調(diào)和，擺放在一起的時(shí)候，各自的色相感覺會更加明顯，如圖所示。任務(wù)分解四、互補(bǔ)色搭配任務(wù)分解四、互補(bǔ)色搭配

強(qiáng)烈刺激會讓人產(chǎn)生不安定感，如果搭配不當(dāng)，容易產(chǎn)生生硬、急躁的效果。因此要通過調(diào)整主色調(diào)與輔助色的面積大小，或者分散的方法來調(diào)節(jié)，也可以同時(shí)提高或者降低互補(bǔ)色的明度或純度來進(jìn)行搭配，以降低畫面的不適感，如圖所示。任務(wù)分解四、互補(bǔ)色搭配課堂小結(jié)◆本任務(wù)我們學(xué)習(xí)了哪些知識？◆從這些知識出發(fā)引出了哪些技能？◆合作學(xué)習(xí)中，你發(fā)揮了多大的作用，有積極主動參與嗎？◆自評、互評環(huán)節(jié)的評價(jià)結(jié)果是否吻合，不吻合的原因是什么？課堂小結(jié)◆本任務(wù)我們學(xué)習(xí)了哪些知識？作業(yè)布置一、打開素材文件/模塊二/任務(wù)二/“2-2-26.psd”，將這個(gè)網(wǎng)頁的配色修改為同類色配色關(guān)系。二、打開素材文件/模塊二/任務(wù)二/“2-2-27.psd”，將網(wǎng)頁配色修改為對比色配色關(guān)系。作業(yè)布置一、打開素材文件/模塊二/任務(wù)二/“2-2-26知識技能拓展在實(shí)踐操作中，我們可以用以下幾種方法來協(xié)調(diào)配色效果1．大面積使用低純度色彩，小面積使用高純度色彩。2．多使用灰色系（如黑、白、灰）色彩作間隔色。3．用畫面中主要色彩的中間色作為過渡色。4．降低雙方或者一方色彩的純度。5．提高或降低一種色彩的明度。知識技能拓展在實(shí)踐操作中，我們可以用以下幾種方法來協(xié)調(diào)配色效網(wǎng)頁美工設(shè)計(jì)模塊二網(wǎng)頁色彩規(guī)劃任務(wù)三選擇網(wǎng)頁色調(diào)

網(wǎng)頁美工設(shè)計(jì)模塊二網(wǎng)頁色彩規(guī)劃任務(wù)三選擇網(wǎng)頁色調(diào)教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．網(wǎng)頁色調(diào)確立的原則２．網(wǎng)頁色調(diào)確立的方式通過學(xué)習(xí)，學(xué)生能夠：1．能理解網(wǎng)頁色調(diào)確立的原則2．能理解如何確立網(wǎng)頁色調(diào)教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．網(wǎng)頁色調(diào)確立的原則通過學(xué)習(xí)，學(xué)生能夠新課導(dǎo)入

網(wǎng)頁色調(diào)的選擇，首先應(yīng)注重人性化原則和藝術(shù)性原則：

人性化原則：網(wǎng)頁設(shè)計(jì)在遵從藝術(shù)規(guī)律的同時(shí)，還要考慮到人的生理特點(diǎn)。色彩搭配要給人一種和諧、愉快的感覺，盡量避免采用高純度、高明度和過于刺激的單一色彩，否則容易造成視覺疲勞。例如白色和紅色，雖然都是讓人愉悅的色彩，但刺激性很強(qiáng)，如果大面積使用并不合適。因此，降低視覺刺激的配色看起來會更舒服一些，比如用淺灰色代替白色，提高或者降低紅色的純度或者明度。如圖所示的網(wǎng)頁中，淺藍(lán)灰色的運(yùn)用使得畫面色彩搭配得當(dāng)、明度適中，清爽又不失變化，易于讓人生出親近感。新課導(dǎo)入網(wǎng)頁色調(diào)的選擇，首先應(yīng)注重人性化原則和藝術(shù)性原則新課導(dǎo)入

藝術(shù)性原則：藝術(shù)來源于生活，又高于生活，通常情況下，生活中常見的東西沒必要在網(wǎng)頁上簡單重復(fù)。人們總是喜歡看一些新鮮的、新奇的東西，因此，一個(gè)有設(shè)計(jì)感的創(chuàng)意、一個(gè)富于感染力的色彩，會增加訪問者對網(wǎng)站的興趣。如圖2-3-2所示的網(wǎng)頁中，使用了大量點(diǎn)、線的元素，具有明顯的構(gòu)成風(fēng)格；配色簡單又富有變化，具有很強(qiáng)的藝術(shù)性。新課導(dǎo)入藝術(shù)性原則：藝術(shù)來源于生活，又高于生活，通常情況目標(biāo)展示以網(wǎng)站Logo決定色調(diào)為例目標(biāo)展示以網(wǎng)站Logo決定色調(diào)為例任務(wù)分解一、網(wǎng)站Logo決定色調(diào)

幾乎所有的網(wǎng)站都有自己的Logo，其作用有些類似商標(biāo)，每一個(gè)Logo都是獨(dú)一無二的，用于展示網(wǎng)站形象，提高網(wǎng)站辨識度。上圖左是Citrus-SEO網(wǎng)站首頁設(shè)計(jì)，使用了網(wǎng)站Logo中飛濺果汁的橙色作為網(wǎng)頁的主色調(diào)，橙色本就是食品網(wǎng)站的最佳用色之一，而且也與商品本身的色調(diào)相關(guān)，一舉兩得。上圖右肯德基的Logo形象早已為大家所熟知，其網(wǎng)站使用Logo中的紅色作為主色調(diào)，顯得充滿熱情，也可以理解為其食品充滿能量。任務(wù)分解一、網(wǎng)站Logo決定色調(diào)任務(wù)分解

上圖左中略顯灰暗的藍(lán)色與橙色從色相關(guān)系上來說本是一組對比色的搭配，藍(lán)色代表冷靜、果敢，橙色代表警示、告誡、色彩對比鮮明而又顯穩(wěn)重，十分符合中情局的特點(diǎn)。

如上圖右所示的Poordesigners的網(wǎng)頁，Logo的顏色是簡單的黑色。Logo外形高端、大氣，網(wǎng)頁色調(diào)與Logo顏色相互呼應(yīng)，給人一種有品質(zhì)、有內(nèi)涵的視覺感受。

以上幾個(gè)網(wǎng)頁不但展現(xiàn)了常見的Logo類型，同時(shí)網(wǎng)頁的色彩搭配也是來自于Logo本身的色彩關(guān)系。使用Logo中的顏色作為網(wǎng)頁的主色調(diào)是很好的選擇，這樣規(guī)劃網(wǎng)頁色彩有以下好處：一是Logo的色彩使用較為規(guī)范，往往都考慮了網(wǎng)站本身的特點(diǎn)，能更好的展示網(wǎng)站形象。二是Logo與網(wǎng)頁色調(diào)相互呼應(yīng)，易于給訪問者留下規(guī)范、嚴(yán)謹(jǐn)?shù)挠∠蟆Ｈ蝿?wù)分解上圖左中略顯灰暗的藍(lán)色與橙色從色相關(guān)系上來說本是任務(wù)分解二、網(wǎng)站類型決定色調(diào)

1．企業(yè)形象類企業(yè)網(wǎng)站就相當(dāng)于一個(gè)企業(yè)的網(wǎng)絡(luò)名片，是企業(yè)在互聯(lián)網(wǎng)上進(jìn)行網(wǎng)絡(luò)建設(shè)和形象宣傳的平臺。企業(yè)網(wǎng)站的作用為展現(xiàn)公司形象，加強(qiáng)客戶服務(wù)，完善網(wǎng)絡(luò)業(yè)務(wù)。藍(lán)色、紅色、白色、灰色常常用于企業(yè)形象類網(wǎng)站，如圖2-3-7所示，給人帶來理性、穩(wěn)重、高效、安全的視覺感覺，有利于企業(yè)品牌形象的建立與提升。如：IBM的蔚藍(lán)色、可口可樂的紅色、聯(lián)想集團(tuán)的藍(lán)色都與企業(yè)形象融為一體，已經(jīng)成為企業(yè)的象征色彩。任務(wù)分解二、網(wǎng)站類型決定色調(diào)任務(wù)分解二、網(wǎng)站類型決定色調(diào)

2．娛樂休閑類

互聯(lián)網(wǎng)的飛速發(fā)展，產(chǎn)生了很多的娛樂休閑類網(wǎng)站，如電影網(wǎng)站、音樂網(wǎng)站、游戲網(wǎng)站、交友網(wǎng)站、社區(qū)論壇等。這些網(wǎng)站為廣大網(wǎng)民提供了娛樂休閑的場所。

娛樂休閑類網(wǎng)站的配色特點(diǎn)非常顯著，通常設(shè)計(jì)風(fēng)格或輕松活潑、或時(shí)尚另類，內(nèi)容綜合、表現(xiàn)靈活，多配以大量圖片。色彩或鮮艷亮麗，采用飽和度較高的色彩搭配；或簡潔明快，采用高明度低飽和度的色彩搭配。具體的選擇上如紅色、藍(lán)色、綠色、紅色與黑色的搭配、藍(lán)色與綠色的搭配等。如圖2-3-8和2-3-9所示，兩個(gè)同為音樂類網(wǎng)站，但配色風(fēng)格差異明顯。任務(wù)分解二、網(wǎng)站類型決定色調(diào)任務(wù)分解二、網(wǎng)站類型決定色調(diào)

3．信息資訊類

信息資訊類網(wǎng)站將無數(shù)信息整合、分類，為上網(wǎng)者打開方便之門，絕大多數(shù)網(wǎng)民通過信息資訊類網(wǎng)站來尋找自己感興趣的信息資源,其中有如搜狐、網(wǎng)易、新浪等大型門戶類網(wǎng)站，還有如百度、google等搜索引擎網(wǎng)站，如圖2-3-10和2-3-11所示的搜索類網(wǎng)站設(shè)計(jì)。

由于網(wǎng)站功能定位的問題，這類網(wǎng)站在配色上的變化不大，主要是以強(qiáng)調(diào)協(xié)調(diào)統(tǒng)一，易于長時(shí)間瀏覽，符合大多數(shù)人的基本審美需求。任務(wù)分解二、網(wǎng)站類型決定色調(diào)任務(wù)分解二、網(wǎng)站類型決定色調(diào)

4．文化教育類文化教育類網(wǎng)站也是以提供資訊為主，一部分是以宣傳學(xué)校本身為主，另一部分是提供在線教學(xué)、提供文化服務(wù)為主。文化教育類網(wǎng)站有其獨(dú)特的人文氣質(zhì)和精神內(nèi)涵，在表現(xiàn)形式上也要充分考慮到網(wǎng)站類型的特殊性。在配色上盡量使用輕松，具有活力的顏色，如紅色、藍(lán)色和綠色。再有就是使用明度較高的顏色，如白色，淺褐色，淺灰色等。如圖2-3-12和2-3-13所示的學(xué)校網(wǎng)站設(shè)計(jì)。任務(wù)分解二、網(wǎng)站類型決定色調(diào)任務(wù)分解二、網(wǎng)站類型決定色調(diào)

5．個(gè)性化類

是以個(gè)人名義開發(fā)創(chuàng)建的具有較強(qiáng)個(gè)性化的網(wǎng)站。一般是個(gè)人為了興趣愛好或展示自我等目的而創(chuàng)建的。具有較強(qiáng)的個(gè)性化特色，帶有明顯的個(gè)人色彩，無論從內(nèi)容、風(fēng)格、樣式上都形色各異、包羅萬象。這類網(wǎng)站的用色沒有明確的方向性，隨心所欲、任意而為，一般會使用平時(shí)配色中少見的搭配方式，比如多種色彩的混搭、高飽和度色彩與灰色的搭配、黑色與綠色的搭配等，如圖2-3-14和2-3-15所示的個(gè)性化網(wǎng)站設(shè)計(jì)。任務(wù)分解二、網(wǎng)站類型決定色調(diào)任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)

1．時(shí)尚風(fēng)格

適用房地產(chǎn)、珠寶、化妝品、婚紗、時(shí)尚服飾等需要特別注重視覺效果的行業(yè)。時(shí)尚風(fēng)格類型的設(shè)計(jì)特色呈現(xiàn)出簡約、精致、高品質(zhì)的感覺。色彩的運(yùn)用上建議要么使用飽和度高、對比鮮明的色彩，能吸引眼球、烘托氣氛目的；要么使用輕爽有透氣感的高明度色彩，能給人高品質(zhì)的感覺，如圖2-3-16所示。任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)

2．簡約風(fēng)格

簡約風(fēng)格網(wǎng)站一般沒有繁復(fù)的元素和色彩，給人一種穩(wěn)重、干練、大氣的感覺。政府機(jī)關(guān)、大型企業(yè)、門戶網(wǎng)站等常常使用簡約風(fēng)格的設(shè)計(jì)。

色彩的選擇上多用白底、黑字，各種降低飽和度的色彩（如藍(lán)灰色、綠灰色）和同一色彩的明度變化來表現(xiàn)沉穩(wěn)大氣與協(xié)調(diào)統(tǒng)一的感覺，如圖2-3-17所示。任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)

3．自然風(fēng)格

適用于休閑度假、旅游觀光、戶外餐廳等行業(yè)。自然風(fēng)格類網(wǎng)頁設(shè)計(jì)大多會使用戶外場景素材來營造出休閑的風(fēng)格。

自然風(fēng)格其實(shí)是一種貼近真實(shí)世界，還原自然狀態(tài)的感覺，所以色彩的選擇上多使用自然界中各種美好的色彩關(guān)系，如天的藍(lán)、云的白、樹的綠、草的青等等，同時(shí)為了使畫面看上去更加的輕松、愜意，多使用高明度與低飽和度的色彩搭配，如圖2-3-18所示。任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)

4．古典風(fēng)格

主要用于企業(yè)形象或商品風(fēng)格偏向“中國風(fēng)”或“歐洲古典風(fēng)”的網(wǎng)頁設(shè)計(jì)?！爸袊L(fēng)”網(wǎng)站，通常在設(shè)計(jì)上會使用一些毛筆字和印章圖片來傳達(dá)中國文化；“歐洲古典風(fēng)”網(wǎng)站將以復(fù)古風(fēng)格的花紋底圖或圖案效果來表現(xiàn)柔美復(fù)古感。

“中國風(fēng)”網(wǎng)站在色彩的運(yùn)用中一般常用黑色與白色來表現(xiàn)中國人獨(dú)特的陰陽理念與水墨世界，用黃褐色來代表歷史的積淀與歲月的印記。而“歐洲古典風(fēng)”的色彩往往用大紅、深紅與金色營造高貴奢華的感覺，用各種明度較底的色彩營造如油畫般厚重的感覺，如圖2-3-19所示。任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)

5．活潑風(fēng)格適用于主題樂園、童裝、學(xué)校等以兒童或年輕人為主的網(wǎng)站設(shè)計(jì)風(fēng)格。這類網(wǎng)站在頁畫設(shè)計(jì)上往往大膽隨意、不拘一格，有很強(qiáng)的靈活性，以展現(xiàn)出兒童或年輕人的心理與性格特點(diǎn)。在兒童或年輕人的眼中和心里，世界是完全另一番景象，色彩的選擇上或奇異或怪誕，總是那么的與眾不同。在具體使用上一是采用多種高飽和度色彩的搭配，以突出歡快、熱鬧的效果，二是采用輕快的色彩，也就是高明度的色彩，給人一種充滿青春氣息，熱情有活力的感覺，如圖2-3-20所示。任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)

6．沉穩(wěn)風(fēng)格

沉穩(wěn)風(fēng)格適用于高檔貴重商品網(wǎng)站，高檔商品不適合艷麗的色調(diào)，低飽和度的暗色調(diào)更能體現(xiàn)出產(chǎn)品的價(jià)值不菲。男性或者老年人主題的網(wǎng)站也適合這種風(fēng)格，成熟穩(wěn)重是男性與老年人的特征。

這類網(wǎng)站的色調(diào)通常使用暗淡的色彩作為主色調(diào)，灰暗且沒有明度的色彩適合表現(xiàn)成熟的風(fēng)采，低飽和度的顏色能營造出優(yōu)雅的格調(diào)。如紅色與紫色、黑色與灰色、褐色與咖啡色等都適用于表現(xiàn)成熟穩(wěn)重的風(fēng)格，如圖2-3-21所示。任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)

7．男性風(fēng)格

以男性用戶為主的網(wǎng)站，常用于西服品牌、游戲、體育、健身等內(nèi)容的網(wǎng)站。選用圖片帶有力量感、厚重感，畫面元素多采用直線、折線，空間常常穿插、破碎。

男性風(fēng)格常常采用成熟穩(wěn)重的藍(lán)色、棕色；陽剛開朗的紅色、橙色；憂郁深沉的黑色、灰色等，如圖2-3-22所示。任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)

8．女性風(fēng)格

在互聯(lián)網(wǎng)上，女性化的配色占的比重較大，這和女性用品多于男性用品有關(guān)，從美容化妝到時(shí)尚服飾，從娛樂休閑到衣食住行，生活中女性化產(chǎn)品無處不在。

女性網(wǎng)站色彩設(shè)計(jì)中，常用提高明度的粉紅象征輕快、俏皮的年青女性；用降低明度的暗紅象征穩(wěn)重、高雅的成熟女性；用紫色象征女性的優(yōu)雅與神秘；用藍(lán)色象征如水般的女性化特征，用藍(lán)色到白色的漸變表現(xiàn)女性的柔情；用白色象征著女性的圣潔與天真；用粉黃、明黃象征女性的清純可愛等等，如圖2-3-23所示。任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)課堂小結(jié)◆本任務(wù)我們學(xué)習(xí)了哪些知識？◆從這些知識出發(fā)引出了哪些技能？◆合作學(xué)習(xí)中，你發(fā)揮了多大的作用，有積極主動參與嗎？◆自評、互評環(huán)節(jié)的評價(jià)結(jié)果是否吻合，不吻合的原因是什么？課堂小結(jié)◆本任務(wù)我們學(xué)習(xí)了哪些知識？作業(yè)布置一、任務(wù)一課后的練一練，我們上網(wǎng)查找了五組Logo并分析其色彩關(guān)系，現(xiàn)在我們從中選擇一個(gè)品牌，并為其做一個(gè)形象頁設(shè)計(jì)。二、通過色彩的運(yùn)用，設(shè)計(jì)一個(gè)帶有明顯風(fēng)格特征的歡迎頁。作業(yè)布置一、任務(wù)一課后的練一練，我們上網(wǎng)查找了五組Log網(wǎng)頁美工設(shè)計(jì)模塊二網(wǎng)頁色彩規(guī)劃任務(wù)四走出配色誤區(qū)

網(wǎng)頁美工設(shè)計(jì)模塊二網(wǎng)頁色彩規(guī)劃任務(wù)四走出配色誤區(qū)教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．網(wǎng)頁配色錯(cuò)誤的幾種主要原因２．如何運(yùn)用相關(guān)知識避免網(wǎng)頁配色錯(cuò)誤通過學(xué)習(xí)，學(xué)生能夠：1．能理解網(wǎng)頁配色錯(cuò)誤的原因2．能運(yùn)用知識避免網(wǎng)頁配色錯(cuò)誤教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．網(wǎng)頁配色錯(cuò)誤的幾種主要原因通過學(xué)習(xí)，新課導(dǎo)入

色彩如何運(yùn)用的問題，有時(shí)不需要我們絞盡腦汁去尋找答案。我們生活的空間已經(jīng)存在很多成熟而優(yōu)秀的色彩搭配方案，如圖2-4-1所示。只要我們平時(shí)多注意觀察和分析，就能從中汲取色彩搭配的靈感：

淺灰色調(diào)適宜制作頁面背景，明度高而不刺激，生活中的報(bào)紙就是這樣的淺灰色背景配色方案，如果換成高亮度的純白紙張，版面就會刺目，不宜于閱讀。

男士著裝強(qiáng)調(diào)成熟、穩(wěn)重，所以一般無色彩系的黑、白、灰較多，這和我們網(wǎng)頁中強(qiáng)調(diào)沉穩(wěn)、大氣的網(wǎng)站色彩搭配與出一轍，灰色系更顯得低調(diào)奢華有內(nèi)涵。

女性服飾色彩豐富，色調(diào)或清新脫俗或明艷動人，這和網(wǎng)頁設(shè)計(jì)中女性用品網(wǎng)站的色彩搭配是一樣的。新課導(dǎo)入色彩如何運(yùn)用的問題，有時(shí)不需要我們絞盡腦汁去尋找目標(biāo)展示以缺乏主色調(diào)為例目標(biāo)展示以缺乏主色調(diào)為例任務(wù)分解一、缺乏主色調(diào)

在網(wǎng)上常常可以看到這樣的網(wǎng)站，網(wǎng)頁上的元素眾多、色彩凌亂，一個(gè)標(biāo)題就是一種顏色，每個(gè)欄目、每個(gè)線條顏色都不相同。這樣的網(wǎng)頁，雖然畫面色彩繁多，好象很豐富的樣子，但過多的色彩感受只能給人一種復(fù)雜混亂的視覺效果，使訪問者無法明確識別重點(diǎn)內(nèi)容，甚至讓人覺得難受、反感，不愿意再次訪問瀏覽。

一般來說，色調(diào)明確的網(wǎng)頁更受訪問者歡迎，因?yàn)檫@樣的網(wǎng)頁主次分明，易于識別、尋找，能減少訪問者負(fù)擔(dān)。如圖2-4-2所示的配色，雖然只有紅色一種色調(diào)，但色調(diào)統(tǒng)一、層次分明，視覺效果強(qiáng)烈。任務(wù)分解一、缺乏主色調(diào)任務(wù)分解二、文字能見度低

人眼識別色彩的能力有一定的限度，由于顏色色的同化作用，色與色之間對比強(qiáng)則易于分辨，對比弱則難于分辨，這在色彩學(xué)上稱為易見度。

網(wǎng)頁上的色彩通常與文字是結(jié)合在一起的，要么成為文字的背景色，要么成為文字本身的顏色，這就出現(xiàn)了文字與背景的對比問題。對瀏覽者來說，重要的是文字，因?yàn)槲淖植攀莻鬟_(dá)信息最重要、最直接的元素。因此，網(wǎng)頁色彩運(yùn)用就必須注意文字的可識別性，也就是文字的易見度。

文字與背景最簡單快捷的搭配方式就是高明度背景上用低明度文字，反之亦然，如圖2-4-3所示。如圖2-4-4所示，如果背景和文字明度接近或者差別太小，就容易出現(xiàn)文字無法識別的問題。任務(wù)分解二、文字能見度低任務(wù)分解二、文字能見度低

各種色彩對比的易見度是不同的，黃色在白色背景上的易見度最低，如圖2-4-5所示。橙色與任何一種顏色搭配都很清楚，而且它兼具紅色與黃色的優(yōu)點(diǎn)，柔和明快，易于為人們接受，如圖2-4-6所示。任務(wù)分解二、文字能見度低任務(wù)分解二、文字能見度低

黃與白、綠與紅、綠與灰、紫與紅、紫與黑、青與黑等幾種搭配的易見度低，是應(yīng)該避免使用的色彩組合，如圖2-4-7所示。任務(wù)分解二、文字能見度低任務(wù)分解三、增加視覺負(fù)擔(dān)

色彩刺激強(qiáng)度高，畫面當(dāng)然容易引人注目，但這樣的色彩不適合大面積使用，否則容易產(chǎn)生視覺疲勞，低明度色彩疲勞度雖小，但容易產(chǎn)生壓抑、沉悶的感覺。

一個(gè)能有效避免強(qiáng)烈刺激和平淡沉悶的辦法就是大面積使用明快柔和的淺色調(diào)，而鮮艷的色彩小面積出現(xiàn)，畫面呈現(xiàn)出一種既有對比又和諧統(tǒng)一的效果，如圖2-4-8所示。任務(wù)分解三、增加視覺負(fù)擔(dān)任務(wù)分解三、增加視覺負(fù)擔(dān)

紅色是彩色系中最鮮艷的色彩，對視覺刺激十分強(qiáng)烈，長時(shí)間對著大面積的紅色會產(chǎn)生煩躁、焦慮的情緒，很容易引起視覺疲勞，如果必須要用紅色作背景，如圖2-4-11所示使用低明度、沉穩(wěn)、消極的色彩與其搭配可以有效抑制紅色的視覺刺激。

任務(wù)分解三、增加視覺負(fù)擔(dān)任務(wù)分解四、風(fēng)格與主題脫離

每一個(gè)網(wǎng)站都有自己的氣質(zhì)、風(fēng)格，但在互聯(lián)網(wǎng)上卻常常可以看到這樣的現(xiàn)象，一個(gè)青年人的網(wǎng)站用了滄桑厚重的配色，一個(gè)奢華酒店的網(wǎng)站采用了簡潔明快的風(fēng)格，這樣的做法明顯背離了主題，合造成形象傳達(dá)不準(zhǔn)確、不合理。

例如設(shè)計(jì)促銷活動的網(wǎng)站，就要盡量使用熱烈活潑的色彩，如圖2-4-12所示。

任務(wù)分解四、風(fēng)格與主題脫離任務(wù)分解四、風(fēng)格與主題脫離

如果是設(shè)計(jì)一個(gè)成熟穩(wěn)重風(fēng)格的別墅網(wǎng)站，就不能使用鮮艷、亮麗的色調(diào)，而是應(yīng)該使用厚重沉穩(wěn)的灰色調(diào),即使頁面中有比較鮮艷的色彩,也要降低其飽和度,使其更沉穩(wěn)大氣，如圖2-4-13所示。

網(wǎng)頁配色涉及生理學(xué)、心理學(xué)、美學(xué)多個(gè)學(xué)科，不同的色彩能帶來不一樣的心理效應(yīng)，例如美國的國旗由紅、白、藍(lán)三色組成，這三種色彩的排列在美國人心目中能喚起愛國主義情感，但對其他國家的人可能就沒有這樣的感受。色彩引起的知覺預(yù)期能夠影響特定人群的感受，因此，色彩的選擇要十分慎重，不能隨心所欲。

任務(wù)分解四、風(fēng)格與主題脫離課堂小結(jié)◆本任務(wù)我們學(xué)習(xí)了哪些知識？◆從這些知識出發(fā)引出了哪些技能？◆合作學(xué)習(xí)中，你發(fā)揮了多大的作用，有積極主動參與嗎？◆自評、互評環(huán)節(jié)的評價(jià)結(jié)果是否吻合，不吻合的原因是什么？課堂小結(jié)◆本任務(wù)我們學(xué)習(xí)了哪些知識？作業(yè)布置一、分析別人的問題與錯(cuò)誤是避免自己出現(xiàn)問題與錯(cuò)誤的有效方法，按前面所學(xué)的知識，分小組尋找最少三種你認(rèn)為有問題的網(wǎng)頁，并寫出分析說明。二、紅色因?yàn)槠渖术r艷、刺激的特點(diǎn)，是一種網(wǎng)頁設(shè)計(jì)中經(jīng)常使用的色彩，但這樣的特點(diǎn)也使得很多紅色網(wǎng)站看上去讓人很不舒服。通過上面的學(xué)習(xí)，大家來試著設(shè)計(jì)一個(gè)讓人賞心悅目的紅色調(diào)網(wǎng)站。作業(yè)布置一、分析別人的問題與錯(cuò)誤是避免自己出現(xiàn)問題與錯(cuò)誤網(wǎng)頁美工設(shè)計(jì)模塊二網(wǎng)頁色彩規(guī)劃任務(wù)一認(rèn)識色彩情感

網(wǎng)頁美工設(shè)計(jì)模塊二網(wǎng)頁色彩規(guī)劃任務(wù)一認(rèn)識色彩情感教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．認(rèn)識色彩并區(qū)分色彩角色２．理解色彩情感及運(yùn)用相關(guān)知識確立主色調(diào)通過學(xué)習(xí)，學(xué)生能夠：1．能區(qū)分網(wǎng)頁中不同色彩的色彩角色2．能運(yùn)用色彩情感知識確立主色調(diào)教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．認(rèn)識色彩并區(qū)分色彩角色通過學(xué)習(xí)，學(xué)生新課導(dǎo)入我們生活的世界充滿了各種各樣的色彩，色彩與人的情感有著密切的聯(lián)系，不同的色彩被人們賦予不同的意義，表達(dá)特定的情感。運(yùn)用色彩時(shí)，除了色彩與色調(diào)本身的美感外，也通過色彩傳遞著相應(yīng)的色彩聯(lián)想與情感象征。

如圖所示，我們的生活中充滿了不同色彩感覺的事物：觀察四張圖片并思考：1.幾張圖片中的色彩帶給你什么樣的感受2.生活中哪些顏色給你留下了深刻的印象新課導(dǎo)入我們生活的世界充滿了各種各樣的色彩，色彩與人的情目標(biāo)展示

主色調(diào)

輔助色點(diǎn)睛色背景色一、色彩角色：以下圖為例進(jìn)行區(qū)分網(wǎng)頁色彩角色的分析。目標(biāo)展示

一、色彩角色：以下圖為例進(jìn)行區(qū)分網(wǎng)頁色彩角色的分析目標(biāo)展示二、色彩情感：如下圖以白色為例，用不同主色調(diào)的網(wǎng)頁幫助大家理解色彩情感在網(wǎng)頁中的運(yùn)用。目標(biāo)展示二、色彩情感：如下圖以白色為例，用不同主色調(diào)的網(wǎng)頁幫網(wǎng)頁美工設(shè)計(jì)模塊二--網(wǎng)頁色彩規(guī)劃[精]課件網(wǎng)頁美工設(shè)計(jì)模塊二--網(wǎng)頁色彩規(guī)劃[精]課件任務(wù)分解二、色彩情感

1．白色

白色讓人聯(lián)想到：

正面的：純粹、純潔、潔凈、正直、信賴、神圣、和平、單純、成熟、優(yōu)雅；

負(fù)面的：單調(diào)、恐懼、無力。

白色象征著純潔、神圣、明快、虛無、貧乏。純白色會帶給別人寒冷、嚴(yán)峻的感覺。白色通常需和其他色彩搭配使用，白色是萬能色，可以和任何顏色作搭配。

白色是所有色彩中亮度最高的，給人一種輕快的感覺。白色能使和它搭配的色彩顯得更加鮮明、突出，可以讓明亮的色彩更柔和、優(yōu)雅。白色與暖色搭配時(shí)可以增添華麗的感覺,與冷色搭配時(shí)可以產(chǎn)生清爽輕快的感覺。白色常用來表達(dá)明亮、潔凈的感覺，如清潔用品、衛(wèi)生用品、家居用品等，如圖所示，在網(wǎng)頁設(shè)計(jì)中白色多用做背景色與過度色。任務(wù)分解二、色彩情感任務(wù)分解二、色彩情感

2．灰色

灰色讓人聯(lián)想到：

正面的：知識、安定、斯文、氣質(zhì)、優(yōu)雅、成熟、節(jié)制、謙遜、創(chuàng)造；

負(fù)面的：悲傷、無力、陰暗、荒涼、內(nèi)向。

灰色象征謙虛、沉默、中庸、憂郁，不凸顯自身。灰色具有柔和、高雅的意象，屬于中間性格，男女皆能接受，是一種高格調(diào)的、有品位感的顏色。

使用灰色時(shí)，大多利用不同明度的灰色變化或搭配其他色彩來調(diào)和畫面的樸素、沉悶。灰色是中性色，和白色、黑色一樣是一種無色彩屬性的色彩。給人一種柔和、細(xì)致、樸素、大方、舒適、優(yōu)雅的感覺，灰色作為背景色彩非常理想，搭配其他色彩，可以有效中和華麗、張揚(yáng)的感覺。如圖所示，電子產(chǎn)品、商業(yè)經(jīng)濟(jì)、軍事類網(wǎng)站常常用灰色作為其主色調(diào)。任務(wù)分解二、色彩情感任務(wù)分解二、色彩情感

3．黑色

黑色讓人聯(lián)想到：

正面的：神秘、干練、威嚴(yán)、權(quán)威、教養(yǎng)、力量、強(qiáng)勢、攻擊；

負(fù)面的：恐怖、不安、絕望、悲傷、沉默、虛無、孤獨(dú)。

黑色象征著崇高、嚴(yán)肅、粗莽、沉默、退縮、沉穩(wěn)、黑暗，有消極、謙遜的意味，有高貴、穩(wěn)重、科技的意象。

電視、汽車、音響、儀器的色彩大多采用黑色，生活用品和服飾設(shè)計(jì)也大多利用黑色來塑造高貴的形象。黑色是萬能色，可以和任何色彩搭配,同時(shí)黑色很酷又極具個(gè)性化，被稱為永遠(yuǎn)的流行色,所以也適合用作音樂、時(shí)尚、個(gè)性化網(wǎng)頁的主色調(diào)，如圖所示的音樂網(wǎng)站設(shè)計(jì)。任務(wù)分解二、色彩情感任務(wù)分解二、色彩情感

4．紅色

紅色讓人聯(lián)想到：

正面的：熱情、感動、勇氣、力量、生命力、能量、愛情、溫暖、開放、社交性；

負(fù)面的：亢奮、攻擊、恐怖、危險(xiǎn)、欲望、沖動。

紅色象征著幸福、熱情、活潑、溫暖，是所有色彩中最鮮艷、純凈的色彩，紅色最容易引起注意，在各種媒體中被廣泛運(yùn)用。

紅色也常用來作為警告、危險(xiǎn)、禁止、防火等標(biāo)志的指定用色，在中國，紅色有著更豐富的內(nèi)涵和意義，代表喜慶、熱烈、革命、忠誠、權(quán)利。紅色與黑色搭配被譽(yù)為“商業(yè)成功色”，常被用于較前衛(wèi)時(shí)尚、娛樂休閑和個(gè)性化網(wǎng)頁中。粉紅色鮮嫩而充滿誘惑，容易營造出柔情、嬌媚、溫柔、甜蜜、純真、誘惑和艷麗等氣氛，這類顏色為主的網(wǎng)頁多用于女性主題，如化妝品、服裝網(wǎng)站等。如圖所示以紅色為主色調(diào)的網(wǎng)頁設(shè)計(jì)任務(wù)分解二、色彩情感任務(wù)分解二、色彩情感

5．橙色

橙色讓人聯(lián)想到：

正面的：活力、健康、創(chuàng)造力、能力、快樂、華麗、社交性；

負(fù)面的：警告、不安。

橙色象征著光明、華麗、甜蜜、快樂、輝煌、動感，極具擴(kuò)展性。

橙色很容易讓人聯(lián)想到金色的秋天和成熟的果實(shí)，是一種快樂而幸福的色彩，同時(shí)也是能引起食欲的色彩。在工業(yè)安全用色中，橙色是警告色，登山服裝、背包、救生衣等常用橙色引起別人的注意。如圖所示，橙色多用于餐飲、食品、運(yùn)動及表現(xiàn)年青人活力的網(wǎng)站。任務(wù)分解二、色彩情感任務(wù)分解二、色彩情感

6．黃色

黃色讓人聯(lián)想到：

正面的：快樂、輕快、撒嬌、可愛、理解、智慧、幸福、和平、明朗、希望；

負(fù)面的：卑鄙、妒嫉、欺騙、偏見、破壞、神經(jīng)質(zhì)。

黃色也象征智慧和光明，在中國古代，黃色常用于皇室，是權(quán)利和尊貴的象征。

黃色是喜慶的用色，象征著明朗、高貴、希望、發(fā)展、警示，黃色是明度最高的色彩。有警示的作用，是易于引起注意的代表色彩，有集中視線的效果，常用于道路的標(biāo)志線、禁止通行路障、工程用的大型機(jī)器等。如圖所示，在網(wǎng)頁設(shè)計(jì)中，黃色多用于商品銷售、休閑娛樂、前衛(wèi)時(shí)尚類網(wǎng)站。任務(wù)分解二、色彩情感任務(wù)分解二、色彩情感

7．綠色

綠色讓人聯(lián)想到：

正面的：生命、豐盛、繁榮、希望、和平、舒適、安定、理性、正直、寬容；

負(fù)面的：猜忌、貪婪、腐蝕、自我壓抑。

綠色傳達(dá)了清爽、理想、希望、生長的意味，代表生命、成長。

綠色綜合了藍(lán)色的冷靜與黃色的活躍，象征著新鮮、安逸、和平、青春、安全、理想，是一種中庸的、明凈的、大自然的顏色，能讓人聯(lián)想到伸展著綠葉的樹木，展示著大自然的生命力。綠色還可以緩解疲勞，有讓視覺“休息”的效果，所以綠色調(diào)網(wǎng)站較適宜長時(shí)間瀏覽，如圖所示。綠色給人一種舒適的感受，文化教育與醫(yī)療衛(wèi)生類網(wǎng)站常常使用綠色作為主色調(diào)。任務(wù)分解二、色彩情感任務(wù)分解二、色彩情感

8．藍(lán)色

藍(lán)色讓人聯(lián)想到：

正面的：博大、高遠(yuǎn)、開闊、深邃、無限、忠誠、真摯、信賴；

負(fù)面的：冷淡、冰冷、緊張、憂郁。

藍(lán)色象征著寒冷、深遠(yuǎn)、沉靜、內(nèi)斂、理智、誠實(shí)。

藍(lán)色容易讓人聯(lián)想到天空、大海、平靜而開闊的水面，給人冷靜、沉穩(wěn)，永恒的感覺，所以宣傳科技和效率的企業(yè)和商品，大多選用藍(lán)色作為標(biāo)準(zhǔn)色，如圖所示。而且大多數(shù)人比較偏愛藍(lán)色色調(diào),使得藍(lán)色成為網(wǎng)頁設(shè)計(jì)中使用最多的一種色彩。任務(wù)分解二、色彩情感任務(wù)分解二、色彩情感

9．紫色

紫色讓人聯(lián)想到：

正面的：智慧、神秘、幻想、浪漫、神圣、偉大、崇高、高貴；

負(fù)面的：悲哀、憂郁、孤獨(dú)。

紫色象征著優(yōu)雅、高貴、神秘、魅力，具有強(qiáng)烈的女性化特征。

紫色不易與其他色彩搭配，紫色為主色調(diào)的網(wǎng)頁，往往用不同明度的紫色或紫色的漸變來裝飾頁面，如圖2-1-22所示。紫色具有天然的高貴與冷傲氣質(zhì)，與女性有關(guān)的商品和企業(yè)形象常常使用紫色，如圖所示。任務(wù)分解二、色彩情感課堂小結(jié)◆本任務(wù)我們學(xué)習(xí)了哪些知識？◆從這些知識出發(fā)引出了哪些技能？◆合作學(xué)習(xí)中，你發(fā)揮了多大的作用，有積極主動參與嗎？◆自評、互評環(huán)節(jié)的評價(jià)結(jié)果是否吻合，不吻合的原因是什么？課堂小結(jié)◆本任務(wù)我們學(xué)習(xí)了哪些知識？作業(yè)布置一、打開素材文件/模塊二/任務(wù)一/“2-1-29.jpg”，在圖中的白色區(qū)域內(nèi)填充色彩,表現(xiàn)出“春、夏、秋、冬”任意一種季節(jié)給人的色彩感受。二、打開素材文件/模塊二/任務(wù)一/“2-1-30.jpg”，在圖中白色區(qū)域內(nèi)填充色彩，將“酸、甜、苦、辣”任意一種味道用色彩的方式表現(xiàn)出來。作業(yè)布置一、打開素材文件/模塊二/任務(wù)一/“2-1-29知識技能拓展一、色彩的味覺效應(yīng)

色彩的味覺效應(yīng)來自于現(xiàn)實(shí)中食品的色調(diào)關(guān)系長期作用于人的刺激體驗(yàn)，人們經(jīng)過長期生活經(jīng)驗(yàn)的積累，形成一種自然的聯(lián)想能力和條件反射，如圖所示，不同色彩的食品帶給人不同的味覺體驗(yàn)。

色彩的味覺感受不完全是一種色彩對應(yīng)一種味覺感受，很可能一種色彩與多種味覺感受相關(guān)，或者某些味覺感受需要多種色彩的搭配才能體現(xiàn)，色彩與味覺的大致對應(yīng)關(guān)系如下：

黃、黃綠色——酸，橙、粉紅色、淺褐色——甜，黑、深褐色——苦，紅、綠——辣；

白、藍(lán)、深灰色——咸，灰綠色、深綠色——澀，白——清淡，黑——厚重。知識技能拓展一、色彩的味覺效應(yīng)知識技能拓展二、色彩與性格

性格是人類的特征，色彩本身并沒有性格，但由于色彩的象征性與人類性格表現(xiàn)出的一些特征有某些對應(yīng)的關(guān)系，如圖所示的休閑風(fēng)格和沉穩(wěn)風(fēng)格，所以才讓人感覺到色彩與性格是相關(guān)聯(lián)的，如圖2-1-28所示。

紅色象征外向型性格，特點(diǎn)是剛烈、熱情、大方、健忘、善于交流、不拘小節(jié)；

黃色象征力量型性格，特點(diǎn)是喜歡支配，習(xí)慣于領(lǐng)導(dǎo)別人；

藍(lán)色象征條理型性格，特點(diǎn)是個(gè)性穩(wěn)重，不輕易做出判斷，易于親近外向型性格；

綠色象征適應(yīng)型性格，特點(diǎn)是順從、聽話，善于傾聽別人的述說。知識技能拓展二、色彩與性格網(wǎng)頁美工設(shè)計(jì)模塊二網(wǎng)頁色彩規(guī)劃任務(wù)二搭配網(wǎng)頁色彩

網(wǎng)頁美工設(shè)計(jì)模塊二網(wǎng)頁色彩規(guī)劃任務(wù)二搭配網(wǎng)頁色彩教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．從色環(huán)圖開始理解色彩基本屬性２．理解色彩搭配基礎(chǔ)知識及運(yùn)用知識搭配網(wǎng)頁色彩通過學(xué)習(xí)，學(xué)生能夠：1．能理解色彩的基本屬性2．能理解色彩搭配的基礎(chǔ)知識教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．從色環(huán)圖開始理解色彩基本屬性通過學(xué)習(xí)新課導(dǎo)入

初學(xué)者總是覺得色彩知識過于繁復(fù)深奧，不便于理解，那我們換一種思路，從圖2-2-1所示的二十四色色環(huán)圖出發(fā)來簡單認(rèn)識色彩。新課導(dǎo)入初學(xué)者總是覺得色彩知識過于繁復(fù)深奧，不便于理解，新課導(dǎo)入

色彩可以分為非彩色與彩色兩大類。非彩色指黑、白和各種深淺不一的灰色，而其他所有顏色均屬于彩色。從視覺和心理學(xué)角度出發(fā)，彩色具有三個(gè)屬性：色相、明度、純度。一、色相

指色彩的種類和名稱，如紅、橙、黃、綠、青、藍(lán)、紫等不同的色彩,色相是顏色的基本特征，是一種色彩區(qū)別于另一種色彩的標(biāo)準(zhǔn)，如圖2-2-2至2-2-5所示不同色相的事物。新課導(dǎo)入色彩可以分為非彩色與彩色兩大類。非彩色指黑、白和新課導(dǎo)入二、明度

又叫亮度，指顏色的深淺、明暗程度，如圖2-2-6展示了白色到黑色的明度變化。

色彩的明度包括兩個(gè)方面：一是指某一色相的深淺變化，如粉紅、大紅、深紅，都是紅色，但一種比一種深（圖2-2-1中內(nèi)環(huán)到外環(huán)就是同一色相由淺到深的明度變化）。二是指不同色相間存在的明度差別，如常見的七彩色中黃色明度最高，紫色明度最低，橙和綠、紅和藍(lán)處于相近的明度。如圖2-2-7和2-2-8所示相同圖像不同狀態(tài)的區(qū)別。新課導(dǎo)入二、明度新課導(dǎo)入三、純度

也叫飽和度，指色彩的鮮艷程度。純度取決于含有某一種色彩成分的比例，比例越大，純度越大；比例越小，純度越小。圖2-2-1中處于中間位置的一環(huán)純度最高，向內(nèi)加入白色，提高了明度，同時(shí)降低了飽和度；向外加入黑色，降低了明度，同時(shí)也降低了飽和度。色彩越單純其純度越高，越混合其純度越低，往色彩中加入任何其他色彩都會降低其純度。如圖2-2-9至2-2-11所示相同圖像不同純度關(guān)系時(shí)的區(qū)別。新課導(dǎo)入三、純度新課導(dǎo)入四、色彩的冷暖

是指不同色彩之間的色彩感覺形成的差別，色彩分為冷、暖兩大色調(diào)，如圖2-2-12至2-2-15所示。從圖2-2-1中可以清晰的看到從黃色到紫色的連線將整個(gè)色環(huán)分為兩種具有明顯冷暖差異的色彩體系：以紅、橙、黃為代表的曖色調(diào)，以藍(lán)、綠、紫為代表的冷色調(diào)。新課導(dǎo)入四、色彩的冷暖新課導(dǎo)入四、色彩的冷暖

雖說一般把黃色當(dāng)成暖色調(diào)色彩，紫色當(dāng)成冷色調(diào)色彩，但這二者都處于冷暖色調(diào)的過渡位置，其實(shí)他們的色彩感覺具有不確定性。特別是紫色，人們常說紫色的色彩感覺是一半海水一半火焰，是最具神秘感的色彩，常用于女性網(wǎng)站的主色調(diào)。另外，色彩的冷暖還受到明度和純度的影響，淺色感覺冷，深色感覺暖。如圖2-2-16和2-2-17所示的冷暖對比具有很強(qiáng)的視覺沖擊力。新課導(dǎo)入四、色彩的冷暖目標(biāo)展示色彩搭配基礎(chǔ)知識（以同類色搭配為例）目標(biāo)展示色彩搭配基礎(chǔ)知識（以同類色搭配為例）任務(wù)分解一、同類色搭配

同類色是指顏色在色相環(huán)上位置十分接近，大約在15°～30°左右的相鄰色彩或者同一色相關(guān)系中不同明度或純度的色彩搭配，例如深綠色與淺綠色、紅色與橙紅色等。

同類色搭配可以產(chǎn)生有秩序的漸變感覺，色相差異小，顯得協(xié)調(diào)統(tǒng)一，畫面整潔有序，但相同的色彩感覺也容易產(chǎn)生平淡、單調(diào)的感覺，如圖所示?？梢约哟竺鞫扰c純度對比來彌補(bǔ)單調(diào)感，或者加入小面積的其他顏色作點(diǎn)綴。任務(wù)分解一、同類色搭配任務(wù)分解一、同類色搭配

同類色搭配是最穩(wěn)妥的配色方案，色彩搭配比較容易顯得規(guī)范、美觀，如圖所示。是色彩運(yùn)用初期最容易掌握的搭配方式，強(qiáng)力推薦！任務(wù)分解一、同類色搭配任務(wù)分解二、近似色搭配

近似色是指顏色在色相環(huán)上的位置在30°～60°左右，距離較近，顏色之間色相差別不大，例如紅色與橙色、橙色與黃色、黃色與綠色、綠色與藍(lán)色、藍(lán)色與紫色等。

近似色的搭配是一種非常理想的色彩搭配方案，在色相關(guān)系上色彩相近而不相同，統(tǒng)一中有變化，變化又不失協(xié)調(diào)。色彩既有對比又相互調(diào)和，視覺關(guān)系上能做到清晰明朗、層次豐富。任務(wù)分解二、近似色搭配任務(wù)分解二、近似色搭配

近似色搭配是最常見，應(yīng)用范圍最廣的一種配色方案。配色難度不大卻極易出彩，如圖所示，是最值思考與運(yùn)用的色彩搭配方式，極力推薦！任務(wù)分解二、近似色搭配任務(wù)分解三、對比色搭配

對比色是指顏色在二十四色色環(huán)圖上相差120°左右的色彩,對比色在色相環(huán)中位置相距較遠(yuǎn)，顏色之間共同因素減少，色相差異較大，如三原色（紅、黃、藍(lán)）之間或者三間色（橙、綠、紫）之間的搭配。

對比色搭配屬于強(qiáng)對比搭配方案，視覺效果上強(qiáng)烈、鮮亮，畫面效果上層次清楚、結(jié)構(gòu)明顯，特別易于突出主體，展示亮點(diǎn)，如圖所示。任務(wù)分解三、對比色搭配任務(wù)分解三、對比色搭配

由于對比色搭配色相差異較大，色彩有一定的沖突感，在運(yùn)用的時(shí)候多用深淺不一的灰色做過渡，以降低色彩的不協(xié)調(diào)性。同時(shí)，必須注意色彩的主次之分，加大主色調(diào)與輔助色的面積對比，以達(dá)到色彩平衡的效果，如圖所示。任務(wù)分解三、對比色搭配任務(wù)分解四、互補(bǔ)色搭配

互補(bǔ)色是指顏色的位置位于色相環(huán)直徑的兩端，相差180°，是距離最遠(yuǎn)的色彩，色彩共同因素消失，色相差異巨大，如紅與綠、黃與紫、藍(lán)與橙是最常見的補(bǔ)色。

互補(bǔ)色搭配是最強(qiáng)烈、最富刺激性的配色方案，互補(bǔ)色對比的畫面特別鮮明、艷麗，很容易吸引人的注意力?；パa(bǔ)色又極不調(diào)和，擺放在一起的時(shí)候，各自的色相感覺會更加明顯，如圖所示。任務(wù)分解四、互補(bǔ)色搭配任務(wù)分解四、互補(bǔ)色搭配

強(qiáng)烈刺激會讓人產(chǎn)生不安定感，如果搭配不當(dāng)，容易產(chǎn)生生硬、急躁的效果。因此要通過調(diào)整主色調(diào)與輔助色的面積大小，或者分散的方法來調(diào)節(jié)，也可以同時(shí)提高或者降低互補(bǔ)色的明度或純度來進(jìn)行搭配，以降低畫面的不適感，如圖所示。任務(wù)分解四、互補(bǔ)色搭配課堂小結(jié)◆本任務(wù)我們學(xué)習(xí)了哪些知識？◆從這些知識出發(fā)引出了哪些技能？◆合作學(xué)習(xí)中，你發(fā)揮了多大的作用，有積極主動參與嗎？◆自評、互評環(huán)節(jié)的評價(jià)結(jié)果是否吻合，不吻合的原因是什么？課堂小結(jié)◆本任務(wù)我們學(xué)習(xí)了哪些知識？作業(yè)布置一、打開素材文件/模塊二/任務(wù)二/“2-2-26.psd”，將這個(gè)網(wǎng)頁的配色修改為同類色配色關(guān)系。二、打開素材文件/模塊二/任務(wù)二/“2-2-27.psd”，將網(wǎng)頁配色修改為對比色配色關(guān)系。作業(yè)布置一、打開素材文件/模塊二/任務(wù)二/“2-2-26知識技能拓展在實(shí)踐操作中，我們可以用以下幾種方法來協(xié)調(diào)配色效果1．大面積使用低純度色彩，小面積使用高純度色彩。2．多使用灰色系（如黑、白、灰）色彩作間隔色。3．用畫面中主要色彩的中間色作為過渡色。4．降低雙方或者一方色彩的純度。5．提高或降低一種色彩的明度。知識技能拓展在實(shí)踐操作中，我們可以用以下幾種方法來協(xié)調(diào)配色效網(wǎng)頁美工設(shè)計(jì)模塊二網(wǎng)頁色彩規(guī)劃任務(wù)三選擇網(wǎng)頁色調(diào)

網(wǎng)頁美工設(shè)計(jì)模塊二網(wǎng)頁色彩規(guī)劃任務(wù)三選擇網(wǎng)頁色調(diào)教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．網(wǎng)頁色調(diào)確立的原則２．網(wǎng)頁色調(diào)確立的方式通過學(xué)習(xí)，學(xué)生能夠：1．能理解網(wǎng)頁色調(diào)確立的原則2．能理解如何確立網(wǎng)頁色調(diào)教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．網(wǎng)頁色調(diào)確立的原則通過學(xué)習(xí)，學(xué)生能夠新課導(dǎo)入

網(wǎng)頁色調(diào)的選擇，首先應(yīng)注重人性化原則和藝術(shù)性原則：

人性化原則：網(wǎng)頁設(shè)計(jì)在遵從藝術(shù)規(guī)律的同時(shí)，還要考慮到人的生理特點(diǎn)。色彩搭配要給人一種和諧、愉快的感覺，盡量避免采用高純度、高明度和過于刺激的單一色彩，否則容易造成視覺疲勞。例如白色和紅色，雖然都是讓人愉悅的色彩，但刺激性很強(qiáng)，如果大面積使用并不合適。因此，降低視覺刺激的配色看起來會更舒服一些，比如用淺灰色代替白色，提高或者降低紅色的純度或者明度。如圖所示的網(wǎng)頁中，淺藍(lán)灰色的運(yùn)用使得畫面色彩搭配得當(dāng)、明度適中，清爽又不失變化，易于讓人生出親近感。新課導(dǎo)入網(wǎng)頁色調(diào)的選擇，首先應(yīng)注重人性化原則和藝術(shù)性原則新課導(dǎo)入

藝術(shù)性原則：藝術(shù)來源于生活，又高于生活，通常情況下，生活中常見的東西沒必要在網(wǎng)頁上簡單重復(fù)。人們總是喜歡看一些新鮮的、新奇的東西，因此，一個(gè)有設(shè)計(jì)感的創(chuàng)意、一個(gè)富于感染力的色彩，會增加訪問者對網(wǎng)站的興趣。如圖2-3-2所示的網(wǎng)頁中，使用了大量點(diǎn)、線的元素，具有明顯的構(gòu)成風(fēng)格；配色簡單又富有變化，具有很強(qiáng)的藝術(shù)性。新課導(dǎo)入藝術(shù)性原則：藝術(shù)來源于生活，又高于生活，通常情況目標(biāo)展示以網(wǎng)站Logo決定色調(diào)為例目標(biāo)展示以網(wǎng)站Logo決定色調(diào)為例任務(wù)分解一、網(wǎng)站Logo決定色調(diào)

幾乎所有的網(wǎng)站都有自己的Logo，其作用有些類似商標(biāo)，每一個(gè)Logo都是獨(dú)一無二的，用于展示網(wǎng)站形象，提高網(wǎng)站辨識度。上圖左是Citrus-SEO網(wǎng)站首頁設(shè)計(jì)，使用了網(wǎng)站Logo中飛濺果汁的橙色作為網(wǎng)頁的主色調(diào)，橙色本就是食品網(wǎng)站的最佳用色之一，而且也與商品本身的色調(diào)相關(guān)，一舉兩得。上圖右肯德基的Logo形象早已為大家所熟知，其網(wǎng)站使用Logo中的紅色作為主色調(diào)，顯得充滿熱情，也可以理解為其食品充滿能量。任務(wù)分解一、網(wǎng)站Logo決定色調(diào)任務(wù)分解

上圖左中略顯灰暗的藍(lán)色與橙色從色相關(guān)系上來說本是一組對比色的搭配，藍(lán)色代表冷靜、果敢，橙色代表警示、告誡、色彩對比鮮明而又顯穩(wěn)重，十分符合中情局的特點(diǎn)。

如上圖右所示的Poordesigners的網(wǎng)頁，Logo的顏色是簡單的黑色。Logo外形高端、大氣，網(wǎng)頁色調(diào)與Logo顏色相互呼應(yīng)，給人一種有品質(zhì)、有內(nèi)涵的視覺感受。

以上幾個(gè)網(wǎng)頁不但展現(xiàn)了常見的Logo類型，同時(shí)網(wǎng)頁的色彩搭配也是來自于Logo本身的色彩關(guān)系。使用Logo中的顏色作為網(wǎng)頁的主色調(diào)是很好的選擇，這樣規(guī)劃網(wǎng)頁色彩有以下好處：一是Logo的色彩使用較為規(guī)范，往往都考慮了網(wǎng)站本身的特點(diǎn)，能更好的展示網(wǎng)站形象。二是Logo與網(wǎng)頁色調(diào)相互呼應(yīng)，易于給訪問者留下規(guī)范、嚴(yán)謹(jǐn)?shù)挠∠?。任?wù)分解上圖左中略顯灰暗的藍(lán)色與橙色從色相關(guān)系上來說本是任務(wù)分解二、網(wǎng)站類型決定色調(diào)

1．企業(yè)形象類企業(yè)網(wǎng)站就相當(dāng)于一個(gè)企業(yè)的網(wǎng)絡(luò)名片，是企業(yè)在互聯(lián)網(wǎng)上進(jìn)行網(wǎng)絡(luò)建設(shè)和形象宣傳的平臺。企業(yè)網(wǎng)站的作用為展現(xiàn)公司形象，加強(qiáng)客戶服務(wù)，完善網(wǎng)絡(luò)業(yè)務(wù)。藍(lán)色、紅色、白色、灰色常常用于企業(yè)形象類網(wǎng)站，如圖2-3-7所示，給人帶來理性、穩(wěn)重、高效、安全的視覺感覺，有利于企業(yè)品牌形象的建立與提升。如：IBM的蔚藍(lán)色、可口可樂的紅色、聯(lián)想集團(tuán)的藍(lán)色都與企業(yè)形象融為一體，已經(jīng)成為企業(yè)的象征色彩。任務(wù)分解二、網(wǎng)站類型決定色調(diào)任務(wù)分解二、網(wǎng)站類型決定色調(diào)

2．娛樂休閑類

互聯(lián)網(wǎng)的飛速發(fā)展，產(chǎn)生了很多的娛樂休閑類網(wǎng)站，如電影網(wǎng)站、音樂網(wǎng)站、游戲網(wǎng)站、交友網(wǎng)站、社區(qū)論壇等。這些網(wǎng)站為廣大網(wǎng)民提供了娛樂休閑的場所。

娛樂休閑類網(wǎng)站的配色特點(diǎn)非常顯著，通常設(shè)計(jì)風(fēng)格或輕松活潑、或時(shí)尚另類，內(nèi)容綜合、表現(xiàn)靈活，多配以大量圖片。色彩或鮮艷亮麗，采用飽和度較高的色彩搭配；或簡潔明快，采用高明度低飽和度的色彩搭配。具體的選擇上如紅色、藍(lán)色、綠色、紅色與黑色的搭配、藍(lán)色與綠色的搭配等。如圖2-3-8和2-3-9所示，兩個(gè)同為音樂類網(wǎng)站，但配色風(fēng)格差異明顯。任務(wù)分解二、網(wǎng)站類型決定色調(diào)任務(wù)分解二、網(wǎng)站類型決定色調(diào)

3．信息資訊類

信息資訊類網(wǎng)站將無數(shù)信息整合、分類，為上網(wǎng)者打開方便之門，絕大多數(shù)網(wǎng)民通過信息資訊類網(wǎng)站來尋找自己感興趣的信息資源,其中有如搜狐、網(wǎng)易、新浪等大型門戶類網(wǎng)站，還有如百度、google等搜索引擎網(wǎng)站，如圖2-3-10和2-3-11所示的搜索類網(wǎng)站設(shè)計(jì)。

由于網(wǎng)站功能定位的問題，這類網(wǎng)站在配色上的變化不大，主要是以強(qiáng)調(diào)協(xié)調(diào)統(tǒng)一，易于長時(shí)間瀏覽，符合大多數(shù)人的基本審美需求。任務(wù)分解二、網(wǎng)站類型決定色調(diào)任務(wù)分解二、網(wǎng)站類型決定色調(diào)

4．文化教育類文化教育類網(wǎng)站也是以提供資訊為主，一部分是以宣傳學(xué)校本身為主，另一部分是提供在線教學(xué)、提供文化服務(wù)為主。文化教育類網(wǎng)站有其獨(dú)特的人文氣質(zhì)和精神內(nèi)涵，在表現(xiàn)形式上也要充分考慮到網(wǎng)站類型的特殊性。在配色上盡量使用輕松，具有活力的顏色，如紅色、藍(lán)色和綠色。再有就是使用明度較高的顏色，如白色，淺褐色，淺灰色等。如圖2-3-12和2-3-13所示的學(xué)校網(wǎng)站設(shè)計(jì)。任務(wù)分解二、網(wǎng)站類型決定色調(diào)任務(wù)分解二、網(wǎng)站類型決定色調(diào)

5．個(gè)性化類

是以個(gè)人名義開發(fā)創(chuàng)建的具有較強(qiáng)個(gè)性化的網(wǎng)站。一般是個(gè)人為了興趣愛好或展示自我等目的而創(chuàng)建的。具有較強(qiáng)的個(gè)性化特色，帶有明顯的個(gè)人色彩，無論從內(nèi)容、風(fēng)格、樣式上都形色各異、包羅萬象。這類網(wǎng)站的用色沒有明確的方向性，隨心所欲、任意而為，一般會使用平時(shí)配色中少見的搭配方式，比如多種色彩的混搭、高飽和度色彩與灰色的搭配、黑色與綠色的搭配等，如圖2-3-14和2-3-15所示的個(gè)性化網(wǎng)站設(shè)計(jì)。任務(wù)分解二、網(wǎng)站類型決定色調(diào)任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)

1．時(shí)尚風(fēng)格

適用房地產(chǎn)、珠寶、化妝品、婚紗、時(shí)尚服飾等需要特別注重視覺效果的行業(yè)。時(shí)尚風(fēng)格類型的設(shè)計(jì)特色呈現(xiàn)出簡約、精致、高品質(zhì)的感覺。色彩的運(yùn)用上建議要么使用飽和度高、對比鮮明的色彩，能吸引眼球、烘托氣氛目的；要么使用輕爽有透氣感的高明度色彩，能給人高品質(zhì)的感覺，如圖2-3-16所示。任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)

2．簡約風(fēng)格

簡約風(fēng)格網(wǎng)站一般沒有繁復(fù)的元素和色彩，給人一種穩(wěn)重、干練、大氣的感覺。政府機(jī)關(guān)、大型企業(yè)、門戶網(wǎng)站等常常使用簡約風(fēng)格的設(shè)計(jì)。

色彩的選擇上多用白底、黑字，各種降低飽和度的色彩（如藍(lán)灰色、綠灰色）和同一色彩的明度變化來表現(xiàn)沉穩(wěn)大氣與協(xié)調(diào)統(tǒng)一的感覺，如圖2-3-17所示。任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)

3．自然風(fēng)格

適用于休閑度假、旅游觀光、戶外餐廳等行業(yè)。自然風(fēng)格類網(wǎng)頁設(shè)計(jì)大多會使用戶外場景素材來營造出休閑的風(fēng)格。

自然風(fēng)格其實(shí)是一種貼近真實(shí)世界，還原自然狀態(tài)的感覺，所以色彩的選擇上多使用自然界中各種美好的色彩關(guān)系，如天的藍(lán)、云的白、樹的綠、草的青等等，同時(shí)為了使畫面看上去更加的輕松、愜意，多使用高明度與低飽和度的色彩搭配，如圖2-3-18所示。任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)

4．古典風(fēng)格

主要用于企業(yè)形象或商品風(fēng)格偏向“中國風(fēng)”或“歐洲古典風(fēng)”的網(wǎng)頁設(shè)計(jì)?！爸袊L(fēng)”網(wǎng)站，通常在設(shè)計(jì)上會使用一些毛筆字和印章圖片來傳達(dá)中國文化；“歐洲古典風(fēng)”網(wǎng)站將以復(fù)古風(fēng)格的花紋底圖或圖案效果來表現(xiàn)柔美復(fù)古感。

“中國風(fēng)”網(wǎng)站在色彩的運(yùn)用中一般常用黑色與白色來表現(xiàn)中國人獨(dú)特的陰陽理念與水墨世界，用黃褐色來代表歷史的積淀與歲月的印記。而“歐洲古典風(fēng)”的色彩往往用大紅、深紅與金色營造高貴奢華的感覺，用各種明度較底的色彩營造如油畫般厚重的感覺，如圖2-3-19所示。任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)

5．活潑風(fēng)格適用于主題樂園、童裝、學(xué)校等以兒童或年輕人為主的網(wǎng)站設(shè)計(jì)風(fēng)格。這類網(wǎng)站在頁畫設(shè)計(jì)上往往大膽隨意、不拘一格，有很強(qiáng)的靈活性，以展現(xiàn)出兒童或年輕人的心理與性格特點(diǎn)。在兒童或年輕人的眼中和心里，世界是完全另一番景象，色彩的選擇上或奇異或怪誕，總是那么的與眾不同。在具體使用上一是采用多種高飽和度色彩的搭配，以突出歡快、熱鬧的效果，二是采用輕快的色彩，也就是高明度的色彩，給人一種充滿青春氣息，熱情有活力的感覺，如圖2-3-20所示。任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)

6．沉穩(wěn)風(fēng)格

沉穩(wěn)風(fēng)格適用于高檔貴重商品網(wǎng)站，高檔商品不適合艷麗的色調(diào)，低飽和度的暗色調(diào)更能體現(xiàn)出產(chǎn)品的價(jià)值不菲。男性或者老年人主題的網(wǎng)站也適合這種風(fēng)格，成熟穩(wěn)重是男性與老年人的特征。

這類網(wǎng)站的色調(diào)通常使用暗淡的色彩作為主色調(diào)，灰暗且沒有明度的色彩適合表現(xiàn)成熟的風(fēng)采，低飽和度的顏色能營造出優(yōu)雅的格調(diào)。如紅色與紫色、黑色與灰色、褐色與咖啡色等都適用于表現(xiàn)成熟穩(wěn)重的風(fēng)格，如圖2-3-21所示。任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)

7．男性風(fēng)格

以男性用戶為主的網(wǎng)站，常用于西服品牌、游戲、體育、健身等內(nèi)容的網(wǎng)站。選用圖片帶有力量感、厚重感，畫面元素多采用直線、折線，空間常常穿插、破碎。

男性風(fēng)格常常采用成熟穩(wěn)重的藍(lán)色、棕色；陽剛開朗的紅色、橙色；憂郁深沉的黑色、灰色等，如圖2-3-22所示。任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)任務(wù)分解三、藝術(shù)風(fēng)格決定色調(diào)

8．女性風(fēng)格

在互聯(lián)網(wǎng)上，女性化的配色占的比重較大，這和女性用品多于男性用品有關(guān)，從美容化妝到時(shí)尚服飾，從娛樂休閑到衣食住行，生活中女性化產(chǎn)品無處不在。

女性網(wǎng)站色彩設(shè)計(jì)中