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

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

教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．認(rèn)識(shí)色彩并區(qū)分色彩角色２．理解色彩情感及運(yùn)用相關(guān)知識(shí)確立主色調(diào)通過(guò)學(xué)習(xí)，學(xué)生能夠：1．能區(qū)分網(wǎng)頁(yè)中不同色彩的色彩角色2．能運(yùn)用色彩情感知識(shí)確立主色調(diào)新課導(dǎo)入我們生活的世界充滿了各種各樣的色彩，色彩與人的情感有著密切的聯(lián)系，不同的色彩被人們賦予不同的意義，表達(dá)特定的情感。運(yùn)用色彩時(shí)，除了色彩與色調(diào)本身的美感外，也通過(guò)色彩傳遞著相應(yīng)的色彩聯(lián)想與情感象征。如下圖，我們的生活中充滿了不同色彩感覺(jué)的事物：觀察四張圖片并思考：1.幾張圖片中的色彩帶給你什么樣的感受2.生活中哪些顏色給你留下了深刻的印象目標(biāo)展示

主色調(diào)

輔助色點(diǎn)睛色背景色一、色彩角色：以以下圖為例進(jìn)行區(qū)分網(wǎng)頁(yè)色彩角色的分析。目標(biāo)展示二、色彩情感：如以下圖以白色為例，用不同主色調(diào)的網(wǎng)頁(yè)幫助大家理解色彩情感在網(wǎng)頁(yè)中的運(yùn)用。任務(wù)分解一、色彩角色網(wǎng)頁(yè)中色彩的角色主要是根據(jù)其面積多少來(lái)區(qū)分主次關(guān)系，如果不同的顏色使用面積相當(dāng)，會(huì)感覺(jué)頁(yè)面主次不分、沒(méi)有整體感；當(dāng)使用顏色過(guò)多，會(huì)感覺(jué)頁(yè)面過(guò)于瑣碎、花俏，網(wǎng)頁(yè)會(huì)顯得輕浮而缺乏內(nèi)涵。為網(wǎng)頁(yè)配色的時(shí)候，應(yīng)根據(jù)主題內(nèi)容主次需要，選擇不同的顏色發(fā)揮不同的功能，讓其扮演不同的角色，根據(jù)色彩的視覺(jué)主次關(guān)系分為：1．主色調(diào)在網(wǎng)頁(yè)中面積最大，出現(xiàn)次數(shù)最多，貫穿網(wǎng)頁(yè)中所有頁(yè)面的色彩。主色調(diào)好似樂(lè)曲中的主旋律，在創(chuàng)造特定的氣氛與意境上發(fā)揮主導(dǎo)作用，是整個(gè)網(wǎng)站的色彩表現(xiàn)力的靈魂。在描述網(wǎng)頁(yè)是什么色調(diào)時(shí)也是特指其主色調(diào)。2．輔助色僅次于主色調(diào)視覺(jué)面積的色彩，是襯托、支撐主色調(diào)，起到調(diào)和畫面色彩關(guān)系，融合畫面色彩感覺(jué)的色彩。3．點(diǎn)睛色在小范圍內(nèi)用強(qiáng)烈的顏色來(lái)突出效果、活潑氣氛，使頁(yè)面更加鮮明生動(dòng)的色彩。主要使用于占用范圍較小的按鈕、標(biāo)簽等。同一個(gè)畫面的點(diǎn)睛色可能是一種色彩，也可能是多種色彩，點(diǎn)睛色的數(shù)量根據(jù)畫面需要而定。4．背景色用于網(wǎng)站背景的顏色，起到協(xié)調(diào)、襯托整體色彩關(guān)系的作用。有的背景色作用不大，僅僅起到陪襯的作用，在畫面中顯露的面積很小，但有些網(wǎng)頁(yè)的背景色對(duì)畫面的影響很大，既是背景，也是主色調(diào)。任務(wù)分解一、色彩角色

圖2-1-5使用了多種色彩，讓我們來(lái)區(qū)分其中的色彩究竟扮演何種角色：

主色調(diào)

輔助色點(diǎn)睛色背景色任務(wù)分解二、色彩情感1．白色白色讓人聯(lián)想到：正面的：純粹、純潔、潔凈、正直、信賴、神圣、和平、單純、成熟、優(yōu)雅；負(fù)面的：?jiǎn)握{(diào)、恐懼、無(wú)力。白色象征著純潔、神圣、明快、虛無(wú)、貧乏。純白色會(huì)帶給別人寒冷、嚴(yán)峻的感覺(jué)。白色通常需和其他色彩搭配使用，白色是萬(wàn)能色，可以和任何顏色作搭配。白色是所有色彩中亮度最高的，給人一種輕快的感覺(jué)。白色能使和它搭配的色彩顯得更加鮮明、突出，可以讓明亮的色彩更柔和、優(yōu)雅。白色與暖色搭配時(shí)可以增添華美的感覺(jué),與冷色搭配時(shí)可以產(chǎn)生清爽輕快的感覺(jué)。白色常用來(lái)表達(dá)明亮、潔凈的感覺(jué)，如清潔用品、衛(wèi)生用品、家居用品等，如下圖，在網(wǎng)頁(yè)設(shè)計(jì)中白色多用做背景色與過(guò)度色。任務(wù)分解二、色彩情感2．灰色灰色讓人聯(lián)想到：正面的：知識(shí)、安定、斯文、氣質(zhì)、優(yōu)雅、成熟、節(jié)制、謙遜、創(chuàng)造；負(fù)面的：悲傷、無(wú)力、陰暗、荒涼、內(nèi)向?；疑笳髦t虛、沉默、中庸、憂郁，不凸顯自身。灰色具有柔和、高雅的意象，屬于中間性格，男女皆能接受，是一種高風(fēng)格的、有品位感的顏色。使用灰色時(shí)，大多利用不同明度的灰色變化或搭配其他色彩來(lái)調(diào)和畫面的樸素、沉悶?；疑侵行陨桶咨?、黑色一樣是一種無(wú)色彩屬性的色彩。給人一種柔和、細(xì)致、樸素、大方、舒適、優(yōu)雅的感覺(jué)，灰色作為背景色彩非常理想，搭配其他色彩，可以有效中和華美、張揚(yáng)的感覺(jué)。如下圖，電子產(chǎn)品、商業(yè)經(jīng)濟(jì)、軍事類網(wǎng)站常常用灰色作為其主色調(diào)。任務(wù)分解二、色彩情感3．黑色黑色讓人聯(lián)想到：正面的：神秘、干練、威嚴(yán)、權(quán)威、教養(yǎng)、力量、強(qiáng)勢(shì)、攻擊；負(fù)面的：恐怖、不安、絕望、悲傷、沉默、虛無(wú)、孤獨(dú)。黑色象征著崇高、嚴(yán)肅、粗莽、沉默、退縮、沉穩(wěn)、黑暗，有消極、謙遜的意味，有高貴、穩(wěn)重、科技的意象。電視、汽車、音響、儀器的色彩大多采用黑色，生活用品和服飾設(shè)計(jì)也大多利用黑色來(lái)塑造高貴的形象。黑色是萬(wàn)能色，可以和任何色彩搭配,同時(shí)黑色很酷又極具個(gè)性化，被稱為永遠(yuǎn)的流行色,所以也適合用作音樂(lè)、時(shí)尚、個(gè)性化網(wǎng)頁(yè)的主色調(diào)，如下圖的音樂(lè)網(wǎng)站設(shè)計(jì)。任務(wù)分解任務(wù)分解二、色彩情感5．橙色橙色讓人聯(lián)想到：正面的：活力、健康、創(chuàng)造力、能力、快樂(lè)、華美、社交性；負(fù)面的：警告、不安。橙色象征著光明、華美、甜蜜、快樂(lè)、輝煌、動(dòng)感，極具擴(kuò)展性。橙色很容易讓人聯(lián)想到金色的秋天和成熟的果實(shí)，是一種快樂(lè)而幸福的色彩，同時(shí)也是能引起食欲的色彩。在工業(yè)平安用色中，橙色是警告色，登山服裝、背包、救生衣等常用橙色引起別人的注意。如下圖，橙色多用于餐飲、食品、運(yùn)動(dòng)及表現(xiàn)年青人活力的網(wǎng)站。任務(wù)分解二、色彩情感6．黃色黃色讓人聯(lián)想到：正面的：快樂(lè)、輕快、撒嬌、可愛(ài)、理解、智慧、幸福、和平、明朗、希望；負(fù)面的：卑劣、妒嫉、欺騙、偏見(jiàn)、破壞、神經(jīng)質(zhì)。黃色也象征智慧和光明，在中國(guó)古代，黃色常用于皇室，是權(quán)利和尊貴的象征。黃色是喜慶的用色，象征著明朗、高貴、希望、開展、警示，黃色是明度最高的色彩。有警示的作用，是易于引起注意的代表色彩，有集中視線的效果，常用于道路的標(biāo)志線、禁止通行路障、工程用的大型機(jī)器等。如下圖，在網(wǎng)頁(yè)設(shè)計(jì)中，黃色多用于商品銷售、休閑娛樂(lè)、前衛(wèi)時(shí)尚類網(wǎng)站。任務(wù)分解二、色彩情感7．綠色綠色讓人聯(lián)想到：正面的：生命、豐富、繁榮、希望、和平、舒適、安定、理性、正直、寬容；負(fù)面的：猜忌、貪婪、腐蝕、自我壓抑。綠色傳達(dá)了清爽、理想、希望、生長(zhǎng)的意味，代表生命、成長(zhǎng)。綠色綜合了藍(lán)色的冷靜與黃色的活潑，象征著新鮮、安逸、和平、青春、平安、理想，是一種中庸的、明凈的、大自然的顏色，能讓人聯(lián)想到伸展著綠葉的樹木，展示著大自然的生命力。綠色還可以緩解疲勞，有讓視覺(jué)“休息〞的效果，所以綠色調(diào)網(wǎng)站較適宜長(zhǎng)時(shí)間瀏覽，如下圖。綠色給人一種舒適的感受，文化教育與醫(yī)療衛(wèi)生類網(wǎng)站常常使用綠色作為主色調(diào)。任務(wù)分解二、色彩情感8．藍(lán)色藍(lán)色讓人聯(lián)想到：正面的：博大、高遠(yuǎn)、開闊、深邃、無(wú)限、忠誠(chéng)、真摯、信賴；負(fù)面的：冷淡、冰冷、緊張、憂郁。藍(lán)色象征著寒冷、深遠(yuǎn)、沉靜、內(nèi)斂、理智、老實(shí)。藍(lán)色容易讓人聯(lián)想到天空、大海、平靜而開闊的水面，給人冷靜、沉穩(wěn)，永恒的感覺(jué)，所以宣傳科技和效率的企業(yè)和商品，大多項(xiàng)選擇用藍(lán)色作為標(biāo)準(zhǔn)色，如下圖。而且大多數(shù)人比較偏愛(ài)藍(lán)色色調(diào),使得藍(lán)色成為網(wǎng)頁(yè)設(shè)計(jì)中使用最多的一種色彩。任務(wù)分解二、色彩情感9．紫色紫色讓人聯(lián)想到：正面的：智慧、神秘、夢(mèng)想、浪漫、神圣、偉大、崇高、高貴；負(fù)面的：悲哀、憂郁、孤獨(dú)。紫色象征著優(yōu)雅、高貴、神秘、魅力，具有強(qiáng)烈的女性化特征。紫色不易與其他色彩搭配，紫色為主色調(diào)的網(wǎng)頁(yè)，往往用不同明度的紫色或紫色的漸變來(lái)裝飾頁(yè)面，如圖2-1-22所示。紫色具有天然的高貴與冷傲氣質(zhì)，與女性有關(guān)的商品和企業(yè)形象常常使用紫色，如下圖。課堂小結(jié)◆本任務(wù)我們學(xué)習(xí)了哪些知識(shí)？◆從這些知識(shí)出發(fā)引出了哪些技能？◆合作學(xué)習(xí)中，你發(fā)揮了多大的作用，有積極主動(dòng)參與嗎？◆自評(píng)、互評(píng)環(huán)節(jié)的評(píng)價(jià)結(jié)果是否吻合，不吻合的原因是什么？作業(yè)布置一、翻開素材文件/模塊二/任務(wù)一/“2-1-29.jpg〞，在圖中的白色區(qū)域內(nèi)填充色彩,表現(xiàn)出“春、夏、秋、冬〞任意一種季節(jié)給人的色彩感受。二、翻開素材文件/模塊二/任務(wù)一/“2-1-30.jpg〞，在圖中白色區(qū)域內(nèi)填充色彩，將“酸、甜、苦、辣〞任意一種味道用色彩的方式表現(xiàn)出來(lái)。知識(shí)技能拓展一、色彩的味覺(jué)效應(yīng)色彩的味覺(jué)效應(yīng)來(lái)自于現(xiàn)實(shí)中食品的色調(diào)關(guān)系長(zhǎng)期作用于人的刺激體驗(yàn)，人們經(jīng)過(guò)長(zhǎng)期生活經(jīng)驗(yàn)的積累，形成一種自然的聯(lián)想能力和條件反射，如下圖，不同色彩的食品帶給人不同的味覺(jué)體驗(yàn)。色彩的味覺(jué)感受不完全是一種色彩對(duì)應(yīng)一種味覺(jué)感受，很可能一種色彩與多種味覺(jué)感受相關(guān)，或者某些味覺(jué)感受需要多種色彩的搭配才能表達(dá)，色彩與味覺(jué)的大致對(duì)應(yīng)關(guān)系如下：黃、黃綠色——酸，橙、粉紅色、淺褐色——甜，黑、深褐色——苦，紅、綠——辣；白、藍(lán)、深灰色——咸，灰綠色、深綠色——澀，白——清淡，黑——厚重。知識(shí)技能拓展二、色彩與性格性格是人類的特征，色彩本身并沒(méi)有性格，但由于色彩的象征性與人類性格表現(xiàn)出的一些特征有某些對(duì)應(yīng)的關(guān)系，如下圖的休閑風(fēng)格和沉穩(wěn)風(fēng)格，所以才讓人感覺(jué)到色彩與性格是相關(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)是順從、聽(tīng)話，善于傾聽(tīng)別人的述說(shuō)。網(wǎng)頁(yè)美工設(shè)計(jì)模塊二網(wǎng)頁(yè)色彩規(guī)劃任務(wù)二搭配網(wǎng)頁(yè)色彩

教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．從色環(huán)圖開始理解色彩根本屬性２．理解色彩搭配根底知識(shí)及運(yùn)用知識(shí)搭配網(wǎng)頁(yè)色彩通過(guò)學(xué)習(xí)，學(xué)生能夠：1．能理解色彩的根本屬性2．能理解色彩搭配的根底知識(shí)新課導(dǎo)入

初學(xué)者總是覺(jué)得色彩知識(shí)過(guò)于繁復(fù)深?yuàn)W，不便于理解，那我們換一種思路，從圖2-2-1所示的二十四色色環(huán)圖出發(fā)來(lái)簡(jiǎn)單認(rèn)識(shí)色彩。新課導(dǎo)入色彩可以分為非彩色與彩色兩大類。非彩色指黑、白和各種深淺不一的灰色，而其他所有顏色均屬于彩色。從視覺(jué)和心理學(xué)角度出發(fā)，彩色具有三個(gè)屬性：色相、明度、純度。一、色相指色彩的種類和名稱，如紅、橙、黃、綠、青、藍(lán)、紫等不同的色彩,色相是顏色的根本特征，是一種色彩區(qū)別于另一種色彩的標(biāo)準(zhǔn)，如圖2-2-2至2-2-5所示不同色相的事物。新課導(dǎo)入二、明度又叫亮度，指顏色的深淺、明暗程度，如圖2-2-6展示了白色到黑色的明度變化。色彩的明度包括兩個(gè)方面：一是指某一色相的深淺變化，如粉紅、大紅、深紅，都是紅色，但一種比一種深〔圖2-2-1中內(nèi)環(huán)到外環(huán)就是同一色相由淺到深的明度變化〕。二是指不同色相間存在的明度差異，如常見(jiàn)的七彩色中黃色明度最高，紫色明度最低，橙和綠、紅和藍(lán)處于相近的明度。如圖2-2-7和2-2-8所示相同圖像不同狀態(tài)的區(qū)別。新課導(dǎo)入三、純度也叫飽和度，指色彩的鮮艷程度。純度取決于含有某一種色彩成分的比例，比例越大，純度越大；比例越小，純度越小。圖2-2-1中處于中間位置的一環(huán)純度最高，向內(nèi)參加白色，提高了明度，同時(shí)降低了飽和度；向外參加黑色，降低了明度，同時(shí)也降低了飽和度。色彩越單純其純度越高，越混合其純度越低，往色彩中參加任何其他色彩都會(huì)降低其純度。如圖2-2-9至2-2-11所示相同圖像不同純度關(guān)系時(shí)的區(qū)別。新課導(dǎo)入四、色彩的冷暖是指不同色彩之間的色彩感覺(jué)形成的差異，色彩分為冷、暖兩大色調(diào)，如圖2-2-12至2-2-15所示。從圖2-2-1中可以清晰的看到從黃色到紫色的連線將整個(gè)色環(huán)分為兩種具有明顯冷暖差異的色彩體系：以紅、橙、黃為代表的曖色調(diào)，以藍(lán)、綠、紫為代表的冷色調(diào)。新課導(dǎo)入目標(biāo)展示色彩搭配根底知識(shí)〔以同類色搭配為例〕任務(wù)分解一、同類色搭配同類色是指顏色在色相環(huán)上位置十分接近，大約在15°～30°左右的相鄰色彩或者同一色相關(guān)系中不同明度或純度的色彩搭配，例如深綠色與淺綠色、紅色與橙紅色等。同類色搭配可以產(chǎn)生有秩序的漸變感覺(jué)，色相差異小，顯得協(xié)調(diào)統(tǒng)一，畫面整潔有序，但相同的色彩感覺(jué)也容易產(chǎn)生平淡、單調(diào)的感覺(jué)，如下圖?？梢约哟竺鞫扰c純度比照來(lái)彌補(bǔ)單調(diào)感，或者參加小面積的其他顏色作點(diǎn)綴。任務(wù)分解一、同類色搭配同類色搭配是最穩(wěn)妥的配色方案，色彩搭配比較容易顯得標(biāo)準(zhǔn)、美觀，如下圖。是色彩運(yùn)用初期最容易掌握的搭配方式，強(qiáng)力推薦！任務(wù)分解二、近似色搭配近似色是指顏色在色相環(huán)上的位置在30°～60°左右，距離較近，顏色之間色相差異不大，例如紅色與橙色、橙色與黃色、黃色與綠色、綠色與藍(lán)色、藍(lán)色與紫色等。近似色的搭配是一種非常理想的色彩搭配方案，在色相關(guān)系上色彩相近而不相同，統(tǒng)一中有變化，變化又不失協(xié)調(diào)。色彩既有比照又相互調(diào)和，視覺(jué)關(guān)系上能做到清晰明朗、層次豐富。任務(wù)分解二、近似色搭配近似色搭配是最常見(jiàn)，應(yīng)用范圍最廣的一種配色方案。配色難度不大卻極易出彩，如下圖，是最值思考與運(yùn)用的色彩搭配方式，竭力推薦！任務(wù)分解三、比照色搭配比照色是指顏色在二十四色色環(huán)圖上相差120°左右的色彩,比照色在色相環(huán)中位置相距較遠(yuǎn)，顏色之間共同因素減少，色相差異較大，如三原色〔紅、黃、藍(lán)〕之間或者三間色〔橙、綠、紫〕之間的搭配。比照色搭配屬于強(qiáng)比照搭配方案，視覺(jué)效果上強(qiáng)烈、鮮亮，畫面效果上層次清楚、結(jié)構(gòu)明顯，特別易于突出主體，展示亮點(diǎn)，如下圖。任務(wù)分解三、比照色搭配由于比照色搭配色相差異較大，色彩有一定的沖突感，在運(yùn)用的時(shí)候多用深淺不一的灰色做過(guò)渡，以降低色彩的不協(xié)調(diào)性。同時(shí)，必須注意色彩的主次之分，加大主色調(diào)與輔助色的面積比照，以到達(dá)色彩平衡的效果，如下圖。任務(wù)分解四、互補(bǔ)色搭配互補(bǔ)色是指顏色的位置位于色相環(huán)直徑的兩端，相差180°，是距離最遠(yuǎn)的色彩，色彩共同因素消失，色相差異巨大，如紅與綠、黃與紫、藍(lán)與橙是最常見(jiàn)的補(bǔ)色。互補(bǔ)色搭配是最強(qiáng)烈、最富刺激性的配色方案，互補(bǔ)色比照的畫面特別鮮明、艷麗，很容易吸引人的注意力?；パa(bǔ)色又極不調(diào)和，擺放在一起的時(shí)候，各自的色相感覺(jué)會(huì)更加明顯，如下圖。任務(wù)分解四、互補(bǔ)色搭配強(qiáng)烈刺激會(huì)讓人產(chǎn)生不安定感，如果搭配不當(dāng)，容易產(chǎn)生生硬、急躁的效果。因此要通過(guò)調(diào)整主色調(diào)與輔助色的面積大小，或者分散的方法來(lái)調(diào)節(jié)，也可以同時(shí)提高或者降低互補(bǔ)色的明度或純度來(lái)進(jìn)行搭配，以降低畫面的不適感，如下圖。課堂小結(jié)◆本任務(wù)我們學(xué)習(xí)了哪些知識(shí)？◆從這些知識(shí)出發(fā)引出了哪些技能？◆合作學(xué)習(xí)中，你發(fā)揮了多大的作用，有積極主動(dòng)參與嗎？◆自評(píng)、互評(píng)環(huán)節(jié)的評(píng)價(jià)結(jié)果是否吻合，不吻合的原因是什么？作業(yè)布置一、翻開素材文件/模塊二/任務(wù)二/“2-2-26.psd〞，將這個(gè)網(wǎng)頁(yè)的配色修改為同類色配色關(guān)系。二、翻開素材文件/模塊二/任務(wù)二/“2-2-27.psd〞，將網(wǎng)頁(yè)配色修改為比照色配色關(guān)系。知識(shí)技能拓展在實(shí)踐操作中，我們可以用以下幾種方法來(lái)協(xié)調(diào)配色效果1．大面積使用低純度色彩，小面積使用高純度色彩。2．多使用灰色系〔如黑、白、灰〕色彩作間隔色。3．用畫面中主要色彩的中間色作為過(guò)渡色。4．降低雙方或者一方色彩的純度。5．提高或降低一種色彩的明度。網(wǎng)頁(yè)美工設(shè)計(jì)模塊二網(wǎng)頁(yè)色彩規(guī)劃任務(wù)三選擇網(wǎng)頁(yè)色調(diào)

教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．網(wǎng)頁(yè)色調(diào)確立的原那么２．網(wǎng)頁(yè)色調(diào)確立的方式通過(guò)學(xué)習(xí)，學(xué)生能夠：1．能理解網(wǎng)頁(yè)色調(diào)確立的原那么2．能理解如何確立網(wǎng)頁(yè)色調(diào)新課導(dǎo)入新課導(dǎo)入目標(biāo)展示以網(wǎng)站Logo決定色調(diào)為例任務(wù)分解一、網(wǎng)站Logo決定色調(diào)幾乎所有的網(wǎng)站都有自己的Logo，其作用有些類似商標(biāo)，每一個(gè)Logo都是獨(dú)一無(wú)二的，用于展示網(wǎng)站形象，提高網(wǎng)站辨識(shí)度。上圖左是Citrus-SEO網(wǎng)站首頁(yè)設(shè)計(jì)，使用了網(wǎng)站Logo中飛濺果汁的橙色作為網(wǎng)頁(yè)的主色調(diào)，橙色本就是食品網(wǎng)站的最正確用色之一，而且也與商品本身的色調(diào)相關(guān)，一舉兩得。上圖右肯德基的Logo形象早已為大家所熟知，其網(wǎng)站使用Logo中的紅色作為主色調(diào)，顯得充滿熱情，也可以理解為其食品充滿能量。任務(wù)分解上圖左中略顯灰暗的藍(lán)色與橙色從色相關(guān)系上來(lái)說(shuō)本是一組比照色的搭配，藍(lán)色代表冷靜、果敢，橙色代表警示、告誡、色彩比照鮮明而又顯穩(wěn)重，十分符合中情局的特點(diǎn)。如上圖右所示的Poordesigners的網(wǎng)頁(yè)，Logo的顏色是簡(jiǎn)單的黑色。Logo外形高端、大氣，網(wǎng)頁(yè)色調(diào)與Logo顏色相互照應(yīng)，給人一種有品質(zhì)、有內(nèi)涵的視覺(jué)感受。以上幾個(gè)網(wǎng)頁(yè)不但展現(xiàn)了常見(jiàn)的Logo類型，同時(shí)網(wǎng)頁(yè)的色彩搭配也是來(lái)自于Logo本身的色彩關(guān)系。使用Logo中的顏色作為網(wǎng)頁(yè)的主色調(diào)是很好的選擇，這樣規(guī)劃網(wǎng)頁(yè)色彩有以下好處：一是Logo的色彩使用較為標(biāo)準(zhǔn)，往往都考慮了網(wǎng)站本身的特點(diǎn)，能更好的展示網(wǎng)站形象。二是Logo與網(wǎng)頁(yè)色調(diào)相互照應(yīng)，易于給訪問(wèn)者留下標(biāo)準(zhǔn)、嚴(yán)謹(jǐn)?shù)挠∠?。任?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è)和形象宣傳的平臺(tái)。企業(yè)網(wǎng)站的作用為展現(xiàn)公司形象，加強(qiáng)客戶效勞，完善網(wǎng)絡(luò)業(yè)務(wù)。藍(lán)色、紅色、白色、灰色常常用于企業(yè)形象類網(wǎng)站，如圖2-3-7所示，給人帶來(lái)理性、穩(wěn)重、高效、平安的視覺(jué)感覺(jué)，有利于企業(yè)品牌形象的建立與提升。如：IBM的蔚藍(lán)色、可口可樂(lè)的紅色、聯(lián)想集團(tuán)的藍(lán)色都與企業(yè)形象融為一體，已經(jīng)成為企業(yè)的象征色彩。任務(wù)分解二、網(wǎng)站類型決定色調(diào)2．娛樂(lè)休閑類互聯(lián)網(wǎng)的飛速開展，產(chǎn)生了很多的娛樂(lè)休閑類網(wǎng)站，如電影網(wǎng)站、音樂(lè)網(wǎng)站、游戲網(wǎng)站、交友網(wǎng)站、社區(qū)論壇等。這些網(wǎng)站為廣闊網(wǎng)民提供了娛樂(lè)休閑的場(chǎng)所。娛樂(lè)休閑類網(wǎng)站的配色特點(diǎn)非常顯著，通常設(shè)計(jì)風(fēng)格或輕松活潑、或時(shí)尚另類，內(nèi)容綜合、表現(xiàn)靈活，多配以大量圖片。色彩或鮮艷亮麗，采用飽和度較高的色彩搭配；或簡(jiǎn)潔明快，采用高明度低飽和度的色彩搭配。具體的選擇上如紅色、藍(lán)色、綠色、紅色與黑色的搭配、藍(lán)色與綠色的搭配等。如圖2-3-8和2-3-9所示，兩個(gè)同為音樂(lè)類網(wǎng)站，但配色風(fēng)格差異明顯。任務(wù)分解二、網(wǎng)站類型決定色調(diào)3．信息資訊類信息資訊類網(wǎng)站將無(wú)數(shù)信息整合、分類，為上網(wǎng)者翻開方便之門，絕大多數(shù)網(wǎng)民通過(guò)信息資訊類網(wǎng)站來(lái)尋找自己感興趣的信息資源,其中有如搜狐、網(wǎng)易、新浪等大型門戶類網(wǎng)站，還有如百度、google等搜索引擎網(wǎng)站，如圖2-3-10和2-3-11所示的搜索類網(wǎng)站設(shè)計(jì)。由于網(wǎng)站功能定位的問(wèn)題，這類網(wǎng)站在配色上的變化不大，主要是以強(qiáng)調(diào)協(xié)調(diào)統(tǒng)一，易于長(zhǎng)時(shí)間瀏覽，符合大多數(shù)人的根本審美需求。任務(wù)分解二、網(wǎng)站類型決定色調(diào)4．文化教育類文化教育類網(wǎng)站也是以提供資訊為主，一局部是以宣傳學(xué)校本身為主，另一局部是提供在線教學(xué)、提供文化效勞為主。文化教育類網(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)5．個(gè)性化類是以個(gè)人名義開發(fā)創(chuàng)立的具有較強(qiáng)個(gè)性化的網(wǎng)站。一般是個(gè)人為了興趣愛(ài)好或展示自我等目的而創(chuàng)立的。具有較強(qiáng)的個(gè)性化特色，帶有明顯的個(gè)人色彩，無(wú)論從內(nèi)容、風(fēng)格、樣式上都形色各異、包羅萬(wàn)象。這類網(wǎng)站的用色沒(méi)有明確的方向性，隨心所欲、任意而為，一般會(huì)使用平時(shí)配色中少見(jiàn)的搭配方式，比方多種色彩的混搭、高飽和度色彩與灰色的搭配、黑色與綠色的搭配等，如圖2-3-14和2-3-15所示的個(gè)性化網(wǎng)站設(shè)計(jì)。任務(wù)分解任務(wù)分解任務(wù)分解任務(wù)分解任務(wù)分解任務(wù)分解任務(wù)分解任務(wù)分解課堂小結(jié)◆本任務(wù)我們學(xué)習(xí)了哪些知識(shí)？◆從這些知識(shí)出發(fā)引出了哪些技能？◆合作學(xué)習(xí)中，你發(fā)揮了多大的作用，有積極主動(dòng)參與嗎？◆自評(píng)、互評(píng)環(huán)節(jié)的評(píng)價(jià)結(jié)果是否吻合，不吻合的原因是什么？作業(yè)布置一、任務(wù)一課后的練一練，我們上網(wǎng)查找了五組Logo并分析其色彩關(guān)系，現(xiàn)在我們從中選擇一個(gè)品牌，并為其做一個(gè)形象頁(yè)設(shè)計(jì)。二、通過(guò)色彩的運(yùn)用，設(shè)計(jì)一個(gè)帶有明顯風(fēng)格特征的歡送頁(yè)。網(wǎng)頁(yè)美工設(shè)計(jì)模塊二網(wǎng)頁(yè)色彩規(guī)劃任務(wù)四走出配色誤區(qū)

教學(xué)目標(biāo)教學(xué)重難點(diǎn)１．網(wǎng)頁(yè)配色錯(cuò)誤的幾種主要原因２．如何運(yùn)用相關(guān)知識(shí)防止網(wǎng)頁(yè)配色錯(cuò)誤通過(guò)學(xué)習(xí)，學(xué)生能夠：1．能理解網(wǎng)頁(yè)配色錯(cuò)誤的原因2．能運(yùn)用知識(shí)防止網(wǎng)頁(yè)配色錯(cuò)誤新課導(dǎo)入

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

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

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

女性服飾色彩豐富，色調(diào)或清新脫俗或明艷動(dòng)人，這和網(wǎng)頁(yè)設(shè)計(jì)中女性用品網(wǎng)站的色彩搭配是一樣的。目標(biāo)展示以缺乏主色調(diào)為例任務(wù)分解一、缺乏主色調(diào)在網(wǎng)上常常可以看到這樣的網(wǎng)站，網(wǎng)頁(yè)上的元素眾多、色彩凌亂，一個(gè)標(biāo)題就是一種顏色，每個(gè)欄目、每個(gè)線條顏色都不相同。這樣的網(wǎng)頁(yè)，雖然畫面色彩繁多，好象很豐富的樣子，但過(guò)多的色彩感受只能給人一種復(fù)雜混亂的視覺(jué)效果，使訪問(wèn)者無(wú)法明確識(shí)別重點(diǎn)內(nèi)容，甚至讓人覺(jué)得難受、反感，不愿意再次訪問(wèn)瀏覽。一般來(lái)說(shuō)，色調(diào)明確的網(wǎng)頁(yè)更受訪問(wèn)者歡送，因?yàn)檫@樣的網(wǎng)頁(yè)主次清楚，易于識(shí)別、尋找，能減少訪問(wèn)者負(fù)擔(dān)。如圖2-4-2所示的配色，雖然只有紅色一種色調(diào)，但色調(diào)統(tǒng)一、層次清楚，視覺(jué)效果強(qiáng)烈。任務(wù)分解二、文字能見(jiàn)度低人眼識(shí)別色彩的能力有一定的限度，由于顏色色的同化作用，色與色之間比照強(qiáng)那么易于分辨，比照弱那么難于分辨，這在色彩學(xué)上稱為易見(jiàn)度。網(wǎng)頁(yè)上的色彩通常與文字是結(jié)合在一起的，要么成為文字的背景色，要么成為文字本身的顏色，這就出現(xiàn)了文字與背景的比照問(wèn)題。對(duì)瀏覽者來(lái)說(shuō)，重要的是文字，因?yàn)槲淖植攀莻鬟_(dá)信息最重要、最直接的元素。因此，網(wǎng)頁(yè)色彩運(yùn)用就必須注意文字的可識(shí)別性，也就是文字的易見(jiàn)度。文字與背景最簡(jiǎn)單快捷的搭配方式就是高明度背景上用低明度文字，反之亦然，如圖2-4-3所示。如圖2-4-4所示，如果背景和文字明度接近或者差異太小，就容易出現(xiàn)文字無(wú)法識(shí)別的問(wèn)題。任務(wù)分解二、文字能見(jiàn)度低各種色彩比照的易見(jiàn)度是不同的，黃色在白色背景上的易見(jiàn)度最低，如圖2-4-5所示。橙色與任何一種顏色搭配都很清楚，而且它兼具紅色與黃色的優(yōu)點(diǎn)，柔和明快，易于為人們接受，如圖2-4-6所示。任務(wù)分解