項(xiàng)目1網(wǎng)頁(yè)平面構(gòu)成的表達(dá)

項(xiàng)目1網(wǎng)頁(yè)平面構(gòu)成的表達(dá) 11.1知識(shí)準(zhǔn)備了解網(wǎng)頁(yè)及其頁(yè)面 11.2任務(wù)2運(yùn)用點(diǎn)、線(xiàn)、面的相關(guān)知識(shí)制作網(wǎng)頁(yè)Banner 191.3任務(wù)3運(yùn)用點(diǎn)、線(xiàn)、面的相關(guān)知識(shí)制作簡(jiǎn)單網(wǎng)頁(yè) 27相關(guān)操作知識(shí) 40拓展探索 41小結(jié) 42項(xiàng)目1網(wǎng)頁(yè)平面構(gòu)成的表達(dá)平面構(gòu)成是網(wǎng)頁(yè)設(shè)計(jì)的重要理論依據(jù)和知識(shí)基礎(chǔ)，如何運(yùn)用有限的網(wǎng)頁(yè)界面，最大限度的鎖住瀏覽者的注意力呢？這其中除了要抓住瀏覽者的興趣和實(shí)際需求外，視覺(jué)效果就顯得尤為重要。怎樣把圖片，文字等眾多內(nèi)容合理又美觀的呈現(xiàn)在同一界面內(nèi)，就是我們本章要探索的問(wèn)題。學(xué)習(xí)本章后，你將能夠：1.了解網(wǎng)頁(yè)及其界面；2.掌握網(wǎng)頁(yè)界面設(shè)計(jì)與平面構(gòu)成的表現(xiàn)形式；3.掌握平面構(gòu)成的設(shè)計(jì)原則；4．學(xué)會(huì)平面構(gòu)成在網(wǎng)頁(yè)界面設(shè)計(jì)中的應(yīng)用方法。1.1知識(shí)準(zhǔn)備了解網(wǎng)頁(yè)及其頁(yè)面1.案例欣賞下面為北京智奧光明廣告設(shè)計(jì)公司的網(wǎng)站界面截圖，如圖1-1所示。圖1-1北京智奧光明廣告設(shè)計(jì)公司的網(wǎng)站界面2.案例分析：此網(wǎng)站為北京智奧光明廣告設(shè)計(jì)公關(guān)策劃責(zé)任公司網(wǎng)站界面，該網(wǎng)站瀏覽人群主要為，有設(shè)計(jì)需求的商家、設(shè)計(jì)師同行以及對(duì)網(wǎng)站設(shè)計(jì)有興趣的愛(ài)好者等，為了使網(wǎng)站更醒目，吸引人眼球，設(shè)計(jì)師從以下幾個(gè)方面設(shè)計(jì)了網(wǎng)頁(yè)界面：（1）表現(xiàn)形式：用平面構(gòu)成原理中分割的方式進(jìn)行頁(yè)面設(shè)計(jì)，配以獨(dú)特的企業(yè)Logo，色彩鮮明的圖片和整潔大方的字體。（2）色彩運(yùn)用：色彩上使用極富華麗色彩感覺(jué)的紅色和金色作為色彩的主色調(diào)，其中穿插強(qiáng)對(duì)比的綠色，使網(wǎng)頁(yè)具有強(qiáng)烈的視覺(jué)效果。（3）欄目設(shè)置：依據(jù)易用性原則，設(shè)置了網(wǎng)站的導(dǎo)航界面及各部分內(nèi)容的鏈接。（4）動(dòng)態(tài)效果設(shè)計(jì)：當(dāng)鼠標(biāo)點(diǎn)擊導(dǎo)航條或相關(guān)內(nèi)容時(shí)，輕松進(jìn)入鏈接，簡(jiǎn)單，明了，易于操作。3.理論概要（1）網(wǎng)頁(yè)及其界面隨著科技的發(fā)展，網(wǎng)站高效傳播信息的功能被越來(lái)越多的人所熟識(shí)，許多企業(yè)或個(gè)人為了提高品牌效應(yīng)，實(shí)現(xiàn)某種需求，開(kāi)始建立具有各自特色的網(wǎng)站。網(wǎng)頁(yè)是網(wǎng)站中的一頁(yè)，當(dāng)瀏覽者打開(kāi)一個(gè)網(wǎng)站，首先映入眼簾的就是風(fēng)格各異的網(wǎng)站界面，或簡(jiǎn)單清新，如圖1-2所示；或莊重嚴(yán)肅，如圖1-3所示；或色彩艷麗，如圖1-4所示。讓人賞心悅目的網(wǎng)頁(yè)界面應(yīng)該具有合理的排版布局，突出的文字效果，質(zhì)量清晰的圖片等幾個(gè)要素。圖1-2簡(jiǎn)單清新的某食品網(wǎng)頁(yè)界面圖1-3莊重嚴(yán)肅的某銀行網(wǎng)頁(yè)界面圖1-4色彩艷麗的麥當(dāng)勞網(wǎng)頁(yè)界面（2）網(wǎng)頁(yè)界面設(shè)計(jì)與平面構(gòu)成的表現(xiàn)形式網(wǎng)頁(yè)界面設(shè)計(jì)是指，在有限的網(wǎng)頁(yè)界面空間內(nèi)將多種元素運(yùn)用均衡，統(tǒng)一，對(duì)比，節(jié)奏，留白等方式相結(jié)合，根據(jù)網(wǎng)站主題制作出具有某種功能并符合審美情趣的一種設(shè)計(jì)方式。在網(wǎng)頁(yè)設(shè)計(jì)中，我們主要通過(guò)視覺(jué)傳達(dá)來(lái)表現(xiàn)網(wǎng)站的主題，而點(diǎn)、線(xiàn)、面是構(gòu)成平面空間內(nèi)容的基本要素，也是構(gòu)成網(wǎng)頁(yè)的基本視覺(jué)元素。平面構(gòu)成就是研究點(diǎn)，線(xiàn)，面等元素的特性、構(gòu)成規(guī)律、審美原理并加以合理運(yùn)用的一種藝術(shù)表現(xiàn)形式。網(wǎng)頁(yè)設(shè)計(jì)實(shí)際上就是經(jīng)營(yíng)好三者關(guān)系的設(shè)計(jì)，不管是任何視覺(jué)形象或者版式構(gòu)成，歸結(jié)到底，都可以歸納為點(diǎn)、線(xiàn)和面。平面構(gòu)成中的元素：點(diǎn)點(diǎn)是平面構(gòu)成中的基本的要素，是構(gòu)成一個(gè)圖像的最小單元。它可以是一個(gè)簡(jiǎn)單符號(hào)，如圖1-5所示，也可以是一個(gè)圖形，如圖1-6所示。圖1-5以簡(jiǎn)單符號(hào)作為視覺(jué)要素的某奢侈品網(wǎng)頁(yè)界面圖1-6以簡(jiǎn)單圖形作為視覺(jué)要素的某公司網(wǎng)頁(yè)界面所謂的點(diǎn)其實(shí)是相對(duì)于周?chē)h(huán)境而言的一個(gè)相對(duì)概念。在幾何形中，點(diǎn)只有位置沒(méi)有任何形態(tài)和大小，在平面設(shè)計(jì)中，點(diǎn)必須有形態(tài)，大小，位置等視覺(jué)特征。點(diǎn)越小，點(diǎn)的感覺(jué)越強(qiáng)烈，多個(gè)點(diǎn)臨近排列具有線(xiàn)的感覺(jué)，多個(gè)點(diǎn)靠攏排列具有面得感覺(jué)。也就是說(shuō)當(dāng)平面上只有一個(gè)點(diǎn)時(shí)，我們就會(huì)將視線(xiàn)集中在這個(gè)點(diǎn)上，如圖1-7所示；當(dāng)平面上有兩個(gè)等大的且有一定距離的點(diǎn)時(shí)，我們就會(huì)將視線(xiàn)集中在兩個(gè)點(diǎn)之間，從而形成線(xiàn)的感覺(jué)，如圖1-8所示；當(dāng)平面上有兩個(gè)以上點(diǎn)時(shí)，我們的視線(xiàn)就會(huì)在三個(gè)點(diǎn)之間轉(zhuǎn)移，從而形成面的感覺(jué)，如圖1-9所示。圖1-7平面上只有一個(gè)點(diǎn)時(shí)，我們就會(huì)將視線(xiàn)集中在這個(gè)點(diǎn)上圖1-8平面上有兩個(gè)等大的且有一定距離的點(diǎn)時(shí)，我們就會(huì)將視線(xiàn)集中在兩個(gè)點(diǎn)之間圖1-9平面上有兩個(gè)以上點(diǎn)時(shí)，我們的視線(xiàn)就會(huì)在幾個(gè)點(diǎn)之間轉(zhuǎn)移在具體的設(shè)計(jì)中，點(diǎn)并不是都以圓點(diǎn)的形狀出現(xiàn)的，一些個(gè)體較小的元素都可視為點(diǎn)(方形，三角形，任何自由形狀)，例如，網(wǎng)頁(yè)中的按鈕，一個(gè)文字，一張圖片，一個(gè)Logo都可當(dāng)做點(diǎn)來(lái)處理，同實(shí)際上的點(diǎn)有相同的作用和功能。點(diǎn)最重要的功能就是表明位置和進(jìn)行聚集，在空間中單一的點(diǎn)有集中醒目的特點(diǎn)，所以可利用點(diǎn)的這一特性強(qiáng)調(diào)將要重點(diǎn)表現(xiàn)的對(duì)象。點(diǎn)具有很強(qiáng)的調(diào)節(jié)和修飾功能，運(yùn)用得當(dāng)甚至可以起到畫(huà)龍點(diǎn)睛的作用。線(xiàn)點(diǎn)的延伸形成線(xiàn)，我們常說(shuō)兩點(diǎn)構(gòu)成一條直線(xiàn)就是這個(gè)道理。如圖1-10所示。圖1-10點(diǎn)的延伸構(gòu)成線(xiàn)在網(wǎng)頁(yè)中線(xiàn)具有長(zhǎng)度，寬度，粗細(xì)，方向等特征。因?yàn)榫€(xiàn)具有分割頁(yè)面，決定頁(yè)面現(xiàn)象的功能，所以是網(wǎng)頁(yè)設(shè)計(jì)中最有力的表現(xiàn)工具，優(yōu)秀的設(shè)計(jì)師常用線(xiàn)來(lái)傳遞豐富的視覺(jué)信息和心理情感。大體來(lái)說(shuō)，線(xiàn)分為直線(xiàn)和曲線(xiàn)兩種，不同的線(xiàn)會(huì)產(chǎn)生不同的視覺(jué)效果。例如，直線(xiàn)給人的感覺(jué)是安寧，穩(wěn)定，明晰等，如圖1-11所示；曲線(xiàn)給人的感覺(jué)是不安，彈力，運(yùn)動(dòng)等，如圖1-12所示。圖1-11直線(xiàn)給人以安寧，穩(wěn)定，明晰等感覺(jué)圖1-12曲線(xiàn)給人以不安，彈力，運(yùn)動(dòng)等感覺(jué)線(xiàn)比點(diǎn)具有更強(qiáng)的表現(xiàn)力和張力，線(xiàn)的方向不同所呈現(xiàn)的視覺(jué)效果也大不相同，例如，水平方向的線(xiàn)，可給人以均衡，安定的感覺(jué)，如圖1-13所示；垂直方向的線(xiàn)，可給人以穩(wěn)固，威嚴(yán)的感覺(jué)，如圖1-14所示；傾斜的線(xiàn)，給人以生動(dòng)，活潑的感覺(jué)如圖1-15所示；而線(xiàn)的縱橫交錯(cuò)又能形成一種框架的空間感和區(qū)域感，如圖1-16所示。圖1-13水平方向的線(xiàn)給人以均衡，安定等感覺(jué)圖1-14垂直方向的線(xiàn)給人以穩(wěn)固，威嚴(yán)等感覺(jué)圖1-15傾斜的線(xiàn)給人以生動(dòng)，活潑的感覺(jué)圖1-16線(xiàn)的縱橫交錯(cuò)又能形成一種框架的空間感和區(qū)域感面面面是平面設(shè)計(jì)中較大的元素。多個(gè)點(diǎn)密集或擴(kuò)大而形成面，如圖1-17所示；線(xiàn)的推移也會(huì)形成面，如圖1-18所示。圖1-17多個(gè)點(diǎn)密集或擴(kuò)大而形成面圖1-18線(xiàn)的推移形成面也就是說(shuō)，面是無(wú)數(shù)點(diǎn)和線(xiàn)組合而成，簡(jiǎn)單的說(shuō)就是不在同一平面上的三個(gè)以上的點(diǎn)構(gòu)成一個(gè)面，線(xiàn)的聚集和閉合構(gòu)成一個(gè)面。在網(wǎng)頁(yè)中，面可以是圖形、大塊文字、動(dòng)畫(huà)、影像等視覺(jué)傳達(dá)元素。與點(diǎn)、線(xiàn)相比，面引發(fā)的注意力更大，視覺(jué)沖擊力更強(qiáng)烈。面的造型較為豐富，大體分為幾何形態(tài)的面（圓形,方形，三角形等視覺(jué)形態(tài)），自由形態(tài)的面（不受約素的視覺(jué)形態(tài)），偶然形態(tài)的面（偶然獲得的視覺(jué)形態(tài)）。不同形狀的面所產(chǎn)生的感覺(jué)和效果是不同的，幾何形態(tài)的面具有簡(jiǎn)潔，明快的理性特征，如圖1-19所示；自由形態(tài)的面具有動(dòng)感，富于變化的特征，如圖1-20所示；偶然形態(tài)的面更自然，隨意，具有超然的吸引力，如圖1-21所示。多個(gè)面的疊加、穿插和組合又可以產(chǎn)生新的效果。面又可以是虛無(wú)的空間，畫(huà)面空白、圖形間隙也都能成為面的形態(tài)，給人以無(wú)限遐想的空間。如圖1-21。圖1-19幾何形態(tài)（方形）的面具有簡(jiǎn)潔，明快的理性特征圖1-20自由形態(tài)的面具有動(dòng)感，富于變化的特征圖1-21偶然形態(tài)的面更自然，隨意，具有超然的吸引力圖1-22大量的留白形成面的形態(tài)④點(diǎn)，線(xiàn)，面的綜合應(yīng)用點(diǎn)、線(xiàn)、面是構(gòu)成網(wǎng)頁(yè)的基本元素，是最基本設(shè)計(jì)語(yǔ)言。點(diǎn)、線(xiàn)、面在網(wǎng)頁(yè)中的運(yùn)用往往不是孤立存在的，而是相互依存，相互作用的?？傊?，點(diǎn)，線(xiàn)的強(qiáng)調(diào)、美化、分割、提醒等作用都是為了更好的為整個(gè)頁(yè)面服務(wù)，如圖1-23所示。圖1-23點(diǎn)、線(xiàn)、面得綜合運(yùn)用（3）平面構(gòu)成中的形式美法則：點(diǎn)、線(xiàn)、面具有各自的情感特征，任何一個(gè)元素的變化都在影響著頁(yè)面的整體設(shè)計(jì)風(fēng)格和變化，在網(wǎng)頁(yè)設(shè)計(jì)中，我們都在有意無(wú)意的進(jìn)行著對(duì)幾種元素的組織和創(chuàng)造，任何設(shè)計(jì)都是創(chuàng)造美的過(guò)程，只有將情感規(guī)律將藝術(shù)規(guī)律相結(jié)合，才能創(chuàng)造出豐富多彩的，具有美感的作品。這里說(shuō)的藝術(shù)規(guī)律就是普遍存在的形式美法則。①統(tǒng)一與變化統(tǒng)一和變化總是同時(shí)存在的，是平面構(gòu)成中形式美的基本規(guī)律。在設(shè)計(jì)中，點(diǎn)，線(xiàn)，面的有機(jī)組合構(gòu)成一個(gè)整體，統(tǒng)一是尋求三者的內(nèi)在聯(lián)系、共同點(diǎn)和共同特征，也就是說(shuō)網(wǎng)頁(yè)是文字、圖形等多種元素組成的統(tǒng)一體，而不是幾個(gè)互相不關(guān)聯(lián)的獨(dú)立部分；變化是尋求三者間的差異，區(qū)別。沒(méi)有變化，設(shè)計(jì)單調(diào)乏味，缺少生命力；沒(méi)有統(tǒng)一，設(shè)計(jì)雜亂無(wú)章，缺乏和諧和次序。兩者的完美結(jié)合是版面設(shè)計(jì)的最根本要求，如圖1-24所示。圖1-24在統(tǒng)一的長(zhǎng)方形元素中尋求了變化，強(qiáng)調(diào)個(gè)性的同時(shí)也形成了視覺(jué)上的跳躍。②對(duì)稱(chēng)與平衡對(duì)稱(chēng)是指兩個(gè)同一型以中心線(xiàn)為軸，形成的上下或左右對(duì)稱(chēng)。軸對(duì)稱(chēng)是最簡(jiǎn)單的對(duì)稱(chēng)形式，以點(diǎn)為中心的放射型對(duì)稱(chēng)和以面為出發(fā)點(diǎn)的鏡面對(duì)稱(chēng)也是常用的對(duì)稱(chēng)方式，對(duì)稱(chēng)其實(shí)是一種形式上的對(duì)等，也就是說(shuō)用對(duì)折的方法，可以重疊的圖形稱(chēng)為對(duì)稱(chēng)。而平衡是指各種元素通過(guò)組合變化，使瀏覽者從心里感到一種空間、中心、力量等方面等量不等型的相對(duì)平衡感覺(jué)，也就是在不對(duì)稱(chēng)中求穩(wěn)，。對(duì)稱(chēng)的編排典雅，穩(wěn)重；而平衡是更富有變化的形式美。如圖1-25所示。圖1-25相同的形象沿頁(yè)面中軸左右對(duì)稱(chēng)排列，此種形式是對(duì)稱(chēng)和平衡最基本的表現(xiàn)形式。③節(jié)奏與韻律節(jié)奏是指各元素符合一定規(guī)律的，有一定差別的反復(fù)出現(xiàn)在同一界面內(nèi)而產(chǎn)生的運(yùn)動(dòng)感，它是相同因素有規(guī)律的重復(fù)。也就是說(shuō)節(jié)奏是由構(gòu)成頁(yè)面的點(diǎn)、線(xiàn)、面的分布，通過(guò)大小，長(zhǎng)短，粗細(xì)，曲直，明暗等的反復(fù)出現(xiàn)而呈現(xiàn)的。反復(fù)是節(jié)奏的重要標(biāo)志，節(jié)奏是通過(guò)反復(fù)來(lái)實(shí)現(xiàn)的。在網(wǎng)站設(shè)計(jì)中，節(jié)奏是針對(duì)點(diǎn)、線(xiàn)、面等元素，以集中或分散的排列差異變化將導(dǎo)致視覺(jué)及心理上的不同感受。節(jié)奏是單調(diào)的重復(fù)，韻律是富于變化的節(jié)奏。在節(jié)奏中注入美的因素和情感，就有了韻律，韻律是指元素連續(xù)交替反復(fù)產(chǎn)生的美感，有韻律的構(gòu)成更具有生氣，它能增強(qiáng)版面的感染力和藝術(shù)表現(xiàn)力。如圖1-26所示。圖1-26水滴型的反復(fù)出現(xiàn)構(gòu)成了節(jié)奏，水滴型的變化又構(gòu)成了韻律，豐富而趣味的反復(fù)和交替，增強(qiáng)了頁(yè)面的感染力。④對(duì)比與調(diào)和對(duì)比又稱(chēng)對(duì)照，是指為了使互為相反的兩要素為更好的突出各自的特點(diǎn)，同時(shí)置放在一起時(shí)所產(chǎn)生的現(xiàn)象。對(duì)比是通過(guò)大小，強(qiáng)弱，粗細(xì)，明暗等對(duì)立因素來(lái)達(dá)到的，它的主要作用在于使設(shè)計(jì)產(chǎn)生生動(dòng)活潑的效果。對(duì)比的最基本作用是顯示主從關(guān)系和統(tǒng)一變化的效果。調(diào)和是近似的強(qiáng)調(diào)，是在各種不同要素之間尋找相互協(xié)調(diào)的因素，是人為有意識(shí)的合理配合使兩者或兩者以上的要素相互具有共性。對(duì)比與協(xié)調(diào)在網(wǎng)頁(yè)設(shè)計(jì)中發(fā)揮著不同的作用：對(duì)比產(chǎn)生動(dòng)感、活潑與鮮明的個(gè)性；協(xié)調(diào)則產(chǎn)生穩(wěn)定、柔和與優(yōu)雅的感覺(jué)。如圖1-27所示。圖1-27把多個(gè)圓放在同一頁(yè)面中使之既相互聯(lián)系，又形成差異不大的變化，產(chǎn)生協(xié)調(diào)的美感啊比例與適度比例與適度有一種協(xié)調(diào)的美感，成為形式美法則的重要內(nèi)容。說(shuō)到比例就一定要說(shuō)到黃金分割，黃金分割是指事物各部分間符合一定的數(shù)學(xué)比例關(guān)系，即將整體一分為二，較大部分與較小部分之比等于整體與較大部分之比，其比值為1：0．618或1．618：1，即長(zhǎng)段為全段的0．618。0．618被譽(yù)為最具審美意義的比例數(shù)字，這種最能表現(xiàn)美感的比例被稱(chēng)為黃金比例。以人體比例為例,如果肚臍到腳底的距離占整個(gè)身長(zhǎng)的0．618，這種身型則為最完美身型，因?yàn)樗w現(xiàn)了人類(lèi)形態(tài)比例的最基本的恒定參照比值，黃金分割被廣泛地運(yùn)用在生活中的許多設(shè)計(jì)中，很多網(wǎng)頁(yè)的設(shè)計(jì)也運(yùn)用了黃金分割，從而達(dá)到完美和諧的效果。適度是指適合要求的程度，也就是說(shuō)版面的設(shè)計(jì)要適合瀏覽者的某些特定標(biāo)準(zhǔn)和視覺(jué)心理。比例與適度，通常具有秩序、明朗的特性，給人一種清新、自然的新感覺(jué)。美的比例是網(wǎng)頁(yè)設(shè)計(jì)成功的基礎(chǔ)，好頁(yè)面的首部、菜單、頁(yè)面和底部的合理安排和選擇，首先取決于良好的比例。如圖1-28所示。圖1-28運(yùn)用適當(dāng)?shù)谋壤M(jìn)行頁(yè)面的分割，構(gòu)成頁(yè)面的各要素條理清晰，給人明朗，清新的視覺(jué)印象。虛實(shí)與留白頁(yè)面中的“實(shí)體”是指文字，圖形等內(nèi)容，而頁(yè)面中未放置任何東西的空間、較為細(xì)小的文字、對(duì)比較弱的色塊都可以看做是“虛體”，也就是“留白”。也就是說(shuō)，頁(yè)面中的主題是“實(shí)”，陪襯和背景是“虛”，虛體是為了更好的突出主題。實(shí)體和虛體是相互依存的，留白的感覺(jué)比較輕松，最大的作用是引人注意。在頁(yè)面設(shè)計(jì)中，巧妙地運(yùn)用文字與圖片之間的空白、字與字之間的空白、單個(gè)字比劃之間的空白，都可以更好地襯托主題，集中視線(xiàn)和造成頁(yè)面的空間層次。在網(wǎng)頁(yè)設(shè)計(jì)中，空白的外形、大小、方向，以及大大小小空白在一個(gè)網(wǎng)頁(yè)中形成的整體感覺(jué)，直接影響著網(wǎng)頁(yè)的質(zhì)量、水平，影響著讀者的視覺(jué)心理。如圖1-29所示。圖1-28頁(yè)面中大量的留白更好的襯托了主題部分，使頁(yè)面更具空間感，給瀏覽者留下無(wú)限的想象空間1.2任務(wù)2運(yùn)用點(diǎn)、線(xiàn)、面的相關(guān)知識(shí)制作網(wǎng)頁(yè)Banner一、任務(wù)分析本實(shí)例將是制作網(wǎng)頁(yè)Banner，該實(shí)例在制作前已提供了相關(guān)素材，結(jié)合學(xué)習(xí)過(guò)的點(diǎn)，線(xiàn)，面的相關(guān)知識(shí)，在遵循形式美法則的基礎(chǔ)上，運(yùn)用暖色調(diào)作為背景顏色，繪制簡(jiǎn)單的Banner，如圖1-29所示。圖1-29網(wǎng)頁(yè)Banner效果圖二、任務(wù)實(shí)施1.啟動(dòng)PhotoshopCS5，選擇“文件”→“新建”菜單命令，新建一個(gè)大小為900×450像素，分辨率為72，顏色模式為RGB顏色，背景內(nèi)容為白色的文件，并將其命名為“新品”，如題1-30所示。圖1-30新建“新品”文件設(shè)置①R:248G:219B:182#f8dbb6①R:248G:219B:182#②R:214G:178B:86#①②圖1-31背景漸變圖1-32完成效果3．新建圖層，運(yùn)用“鋼筆”工具如圖-1-33所示，繪制三角形，并填充顏色為藍(lán)色，如圖1-34所示。重復(fù)以上動(dòng)作，繪制其它四個(gè)三角形，并依此疊加，完成效果如圖1-35所示。圖1-33鋼筆工具圖1-34繪制三角形圖1-35完成效果4.運(yùn)用“鋼筆工具”繪制翻角，并填充漸變顏色如圖1-36所示，為翻角填加圖層樣式，如圖1-37所示，在為翻角的下部分填加灰色到透明的漸變高光如圖1-38所示。①R:172①R:172G:172B:172#②R:226G:226B:226#③R:111G:112B:114#6f④R:230G:231B:23①②③④圖1-36漸變編輯器圖1-37添加投影①R:218①R:218G:215B:211#②透明①②圖1-38漸變編輯器5.插入背景圖片。打開(kāi)“素材╱項(xiàng)目1╱任務(wù)1╱背景素材”，把素材置放在背景圖層的右側(cè)，調(diào)整其位置，完成效果如圖1-39所示。圖1-39插入素材6.運(yùn)用“自由形狀工具”→“絲帶1”繪制徽章，如圖1-40所示，并填充顏色為“紅色”，如圖1-41所示。圖1-40自由形態(tài)工具圖1-41填充顏色7.添加文字。（1）添加文字“NEW”,選擇“窗口”→“字符”，打開(kāi)“字符”面板，相關(guān)設(shè)置如圖1-42所示。圖1-42字符面板（2）添加文字“新品上市”，選擇“窗口”→“字符”打開(kāi)“字符”面板，相關(guān)設(shè)置如圖1-43所示。圖1-43字符面板（3）添加文字“限量”，選擇“窗口”→“字符”打開(kāi)“字符”面板，相關(guān)設(shè)置如圖1-44所示。圖1-44字符面板（4）填加文字“9元秒殺，超值神秘，限時(shí)包郵”，選擇“窗口”→“字符”打開(kāi)“字符”面板，相關(guān)設(shè)置如圖1-45所示。圖1-45字符面板1.3任務(wù)3運(yùn)用點(diǎn)、線(xiàn)、面的相關(guān)知識(shí)制作簡(jiǎn)單網(wǎng)頁(yè)一、任務(wù)分析本實(shí)例將是運(yùn)用點(diǎn)、線(xiàn)、面的基本知識(shí)，和形式美法則的基本原理，制作簡(jiǎn)單網(wǎng)頁(yè)。該實(shí)例不需要任何素材，結(jié)合學(xué)習(xí)過(guò)的相關(guān)知識(shí)，運(yùn)用有提醒和強(qiáng)調(diào)作用的點(diǎn)，有美化和分割作用的線(xiàn)和各要素及留白構(gòu)成的面，繪制簡(jiǎn)單的網(wǎng)頁(yè)，如圖1-46所示。圖1-46美蜂網(wǎng)效果二、任務(wù)實(shí)施1.啟動(dòng)PhotoshopCS5，選擇“文件”→“新建”菜單命令，新建一個(gè)大小為766×700像素，分辨率為72，顏色模式為RGB顏色，背景內(nèi)容為白色的文件，并將其命名為“美蜂網(wǎng)”，如題1-47所示。圖1-47“美蜂網(wǎng)”文件設(shè)置2.繪制背景。（1）添加背景漸變顏色。選擇“圖層樣式”→“漸變疊加”，具體參數(shù)設(shè)置如圖1-48,1-49所示，完成效果如1-50所示。圖1-48添加圖層樣式①R:243①R:243G:18B:189#②R:161G:32B:94#①②圖1-49漸變編輯器圖1-50漸變效果（2）繪制背景的放射線(xiàn)。新建圖層，選擇“鋼筆工具”繪制第一條放射線(xiàn)，填充顏色為“c51468”,如圖1-51所示；然后復(fù)制圖層，選擇“Ctrl＋T”,以頁(yè)面中心為原點(diǎn)旋轉(zhuǎn)圖層，并拉伸，如圖1-52所示；重復(fù)以上動(dòng)作，繪制出全部放射線(xiàn)。如圖1-53所示。需要說(shuō)明的是，為了使畫(huà)面更美觀可由深到淺改變放射線(xiàn)的顏色，在此不一一列舉。圖1-51繪制第一條放射線(xiàn)圖1-52“Ctrl＋T”旋轉(zhuǎn)圖層圖1-53放射線(xiàn)完成效果（3）繪制白色的點(diǎn)。新建圖層，選擇“畫(huà)筆工具”→“粗邊圓形鋼筆”，大小為“800”如圖1-54所示；完成效果如圖1-55所示。圖1-54選擇畫(huà)筆圖1-55完成效果3.繪制頁(yè)面中心部分內(nèi)容。（1）繪制白色背景。新建一個(gè)圖層，選擇“矩形工具”繪制長(zhǎng)方形，添加顏色為“白色”部分，并給圖層添加“圖層樣式”，具體設(shè)置如圖1-56所示。完成效果如圖1-57所示。圖1-56添加圖層樣式圖1-57白色背景完成效果（2）繪制灰色背景。新建一個(gè)圖層，選擇“矩形工具”繪制長(zhǎng)方形，填充顏色為“4a4a4a”圖1-58灰色背景完成效果（3）繪制彩色背景。新建一個(gè)圖層，選擇“矩形工具”繪制長(zhǎng)方形，添加顏色為“白色”部分，并給圖層添加“圖層樣式”→“漸變疊加”如圖1-59所示；“投影”如圖1-60所示，完成效果如圖1-61所示；新建圖層，選擇“畫(huà)筆工具”→“粗邊圓形鋼筆”，繪制散點(diǎn)的效果，完成如圖1-62所示。①②①②①R:42G:212B:174#②R:255G:212B:227#圖1-59添加圖層樣式圖1-60添加圖層樣式圖1-61彩色背景完成效果圖1-62繪制散點(diǎn)完成效果（4）繪制導(dǎo)航條。繪制第一條分割線(xiàn)，新建圖層，選擇“畫(huà)筆工具”→“硬邊圓”，大小為“5”，顏色為“5a5aba”如圖1-63所示；重復(fù)以上動(dòng)作，繪制出其它三條分割線(xiàn)，完成效果如圖1-64所示。圖1-63繪制第一條分割線(xiàn)圖1-64分割線(xiàn)完成效果4.添加文字。（1）為導(dǎo)航條按鈕添加文字。添加第一個(gè)按鈕文字，新建文字圖層，將其命名為“首頁(yè)”。選擇“橫排文字工具”，在選項(xiàng)欄上選擇文字字體“Adobe黑體Std”，選擇字號(hào)“20”，顏色為“白色”，效果如圖1-65所示；重復(fù)以上動(dòng)作，繪制其它四個(gè)按鈕文字，效果如圖1-66所示。圖1-65添加第一個(gè)按鈕文字圖1-66按鈕文字完成效果（2）添加內(nèi)容文字。①添加頁(yè)面左，右側(cè)標(biāo)題。添加左側(cè)標(biāo)題，新建文字圖層，將其命名為“美蜂年中慶”。選擇“橫排文字工具”，在選項(xiàng)欄上選擇文字字體“方正舒體”，選擇字號(hào)“40”，顏色為“a51f63”，并添加“圖層樣式”→“投影”，混合模式為“正片疊底”，顏色為“黑色”，新建文字圖層，將其命名為“2011”。選擇“橫排文字工具”，在選項(xiàng)欄上選擇文字字體“方正舒體”，選擇字號(hào)“20”，顏色為“白色”完成效果如圖1-6添加右側(cè)標(biāo)題，新建文字圖層，將其命名為“Year-endcelebration”。選擇“橫排文字工具”，在選項(xiàng)欄上選擇文字字體“BrushScriptStd”，選擇字號(hào)“24”，顏色為“2dd5ae”，并添加“圖層樣式”→“投影”，混合模式為“正片疊底”，顏色為“黑色”，完成效果如圖1-68所示。圖1-67添加左側(cè)標(biāo)題圖1-68添加右側(cè)標(biāo)題②添加頁(yè)面左，右側(cè)內(nèi)容文字。添加左側(cè)內(nèi)容文字，新建文字圖層，選擇“橫排文字工具”，在選項(xiàng)欄上選擇文字字體“方正舒體”，選擇字號(hào)“20”，顏色為“a51f63”，并將中間兩行文字顏色改為“a圖1-69左側(cè)內(nèi)容完成效果圖1-70右側(cè)內(nèi)容完成效果5.繪制Logo。（1）繪制圓形。新建圖層，選擇“橢圓選框工具”繪制三個(gè)正圓，選擇“描邊”，寬度為“5”，顏色為“ff64e2”圖1-71繪制圓形效果（2）添加文字。新建文字圖層，將其命名為“美蜂網(wǎng)”選擇“橫排文字工具”，在選項(xiàng)欄上選擇文字字體“方正舒體”，選擇字號(hào)“72”，顏色為“白色”，并添加“圖層樣式”→“投影”，混合模式為“正片疊底”，顏色為“黑色”，完成效果如圖1-72所示；重復(fù)以上動(dòng)作，添加文字“meifeng”，選擇文字字體“BrushScriptStd”，選擇字號(hào)“18”，顏色為“白色”，并添加“圖層樣式”→“投影”，混合模式為“正片疊底”，顏色為“黑色”，完成后效果如圖1-73所示。圖1-72添加文字效果圖1-73Logo完成效果相關(guān)操作知識(shí)網(wǎng)頁(yè)是集音頻、視頻、文字，圖片等視覺(jué)要素為一體的多媒體界面。打開(kāi)一個(gè)網(wǎng)站，首先呈現(xiàn)給瀏覽者的便是整個(gè)頁(yè)面的視覺(jué)印象，從平面構(gòu)成的角度來(lái)看，其重點(diǎn)在于網(wǎng)頁(yè)分隔秩序及各要素的有序排放。因此在運(yùn)用平面構(gòu)成的基本原理設(shè)計(jì)網(wǎng)頁(yè)時(shí)應(yīng)注意以下幾個(gè)問(wèn)題：1．布局合理，比例適當(dāng)合理的布局，適當(dāng)?shù)谋壤?是我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)的時(shí)候要考慮的重要問(wèn)題,布局的好壞,直接影響到瀏覽者的情緒，過(guò)于緊湊的頁(yè)面易造成混亂的視覺(jué)效果,從而導(dǎo)致瀏覽者的視覺(jué)疲勞；過(guò)于松散的頁(yè)面易造成空洞、乏味的視覺(jué)效果,從而導(dǎo)致瀏覽者失去瀏覽的興致。因此，我們?cè)谶M(jìn)行頁(yè)面設(shè)置的時(shí)候，一定要遵循形式美法則比例適度的原則,使頁(yè)面美觀,和