中文版Photoshop設(shè)計與制作項目教程第三版項目4 網(wǎng)站界面設(shè)計應(yīng)用

中文版photoshop設(shè)計與制作項目教程網(wǎng)站界面設(shè)計應(yīng)用掌握網(wǎng)站標(biāo)志的設(shè)計方法；掌握網(wǎng)站導(dǎo)航的設(shè)計方法；掌握網(wǎng)站模板的設(shè)計方法

；熟悉網(wǎng)頁切片工具的使用方法。教學(xué)目標(biāo)效果圖

網(wǎng)站標(biāo)志，也稱網(wǎng)站LOGO，是網(wǎng)站中不可或缺的組成部分，也可作為其它網(wǎng)站與本網(wǎng)站鏈接的標(biāo)志。本任務(wù)是運用自定形狀工具、矩形選區(qū)工具、多邊形套索工具、文字工具和圖層樣式等為一酒店網(wǎng)站制作標(biāo)志。案例：網(wǎng)站標(biāo)志設(shè)計效果圖本案例主要是用漸變工具、文字工具和圖層樣式等為某公司網(wǎng)站制作導(dǎo)航，效果如圖所示。案例：網(wǎng)站導(dǎo)航設(shè)計在Photoshop中制作網(wǎng)頁圖像，除了要設(shè)置成與屏幕分辨率相符的分辨率外，還需要通過切片工具將其裁切為小尺寸圖像。這樣才能組合為網(wǎng)頁，生成網(wǎng)頁文件，上傳到網(wǎng)絡(luò)中。切片是使用HTML表或CSS圖層將圖像劃分為若干較小的圖像，這些圖像可在Web頁上重新組合，通過劃分圖像，可以指定不同的URL鏈接以創(chuàng)建頁面導(dǎo)航，或使用其自身的優(yōu)化設(shè)置對你圖像的部分進(jìn)行優(yōu)化。1.切片工具相關(guān)知識相關(guān)知識（1）創(chuàng)建切片切片按照其內(nèi)容類型以及創(chuàng)建方法進(jìn)行分類。文檔中存在參考線的話可以使用基于參考線的切片；使用“切片工具”創(chuàng)建的切片稱作用戶切片；通過圖層創(chuàng)建的切片稱作基于圖層的切片。當(dāng)創(chuàng)建新的用戶切片或基于圖層的切片時，將會生成附加自動切片來占據(jù)圖像的其余區(qū)域?；趨⒖季€創(chuàng)建切片在文檔中存在參考線的前提下，選擇工具箱中的“切片工具”，單擊工具欄中的“基于參考線的切片”按鈕，即可根據(jù)文檔中的參考線創(chuàng)建切片。如圖所示。相關(guān)知識

相關(guān)知識使用切片工具創(chuàng)建切片在工具箱中選擇“切片工具”后，在畫布中單擊并且拖動即可創(chuàng)建切片，如圖所示，其中，灰色為自動切片。相關(guān)知識基于圖層創(chuàng)建切片基于圖層創(chuàng)建切片是根據(jù)當(dāng)前圖層中的對像邊緣創(chuàng)建切片。方法是選中某個圖層后，選擇菜單“圖層”|“新建基于圖層的切片”選項，如圖所示。相關(guān)知識（2）編緝切片查看切片當(dāng)創(chuàng)建切片后發(fā)現(xiàn)，切片本身具有顏色、線條、編號與標(biāo)記等屬性，其中具有圖像的切片、無圖像切片、自動切片與基于圖層的切片等標(biāo)記有所不同。選擇切片編緝所有切片之前，首先要選擇切片。在Photoshop中選擇切片有其專屬的工具，那就是“切片選擇工具”。選擇“切片選擇工具”，在畫布中單擊，即可選中切片。相關(guān)知識切片選項Photoshop中的每一個切片除了包括顯示屬性外，還包括Web屬性。使用“切片選擇工具”選中一個切片后，點擊工具欄上的“為當(dāng)前切片設(shè)置選項”按鈕，即可打開“切片選項”對話框，如圖所示。相關(guān)知識對話框中的參數(shù)說明如下：切片類型：用來設(shè)置切片數(shù)據(jù)在瀏覽器中的顯示方式，分為圖像、無圖像與表；名稱：用來設(shè)置切片名稱；URL：用來為切片指定完整的網(wǎng)址；目標(biāo)：用來設(shè)置鏈接的打開方式，分別為_blank、_self、_parent、_top；信息文本：為選定的一個或多個切片更改瀏覽器狀態(tài)區(qū)域中的默認(rèn)信息；Alt標(biāo)記:指定選定切片的標(biāo)記文本；尺寸：用來設(shè)置切片的尺寸和切片坐標(biāo)；切片背景類型：選擇一種背景來填充透明區(qū)域。相關(guān)知識（3）導(dǎo)出切片當(dāng)切片創(chuàng)建完成后，大尺寸的圖像并沒有變成小尺寸的圖像，還需要一個命令將圖像逐個保存，方法是選擇“文件”|“存儲為Web和設(shè)備所用格式”選項，即可打開“存儲為Web和設(shè)備所用格式”對話框，如圖所示。相關(guān)知識對話框中的參數(shù)說明如下：查看切片：在對話框左側(cè)區(qū)域中包括查看切片的不同工具，依次是“抓手工具”、“切片選擇工具”、“縮放工具”、“吸管工具”與“切換切片可見性”。圖像預(yù)覽：在圖像預(yù)覽窗口中包括原圖、優(yōu)化、雙聯(lián)與四聯(lián)四種不同的顯示方式。優(yōu)化選項：在該選項區(qū)域中，選擇下拉列表中的不同文件格式選項，會顯示相應(yīng)的參數(shù)。播放動畫控件：如果是針對動畫圖像進(jìn)行優(yōu)化，那么在該區(qū)域中可以設(shè)置動畫播放選項。相關(guān)知識2.網(wǎng)頁配色

確定網(wǎng)站的主色彩是相當(dāng)重要的一步。不同的色彩搭配會產(chǎn)生不同的效果，并可能影響到訪問者的情緒。一般來說，網(wǎng)頁設(shè)計者根據(jù)網(wǎng)頁的主題以及網(wǎng)站的受眾群體（不同的人們對顏色的情感與聯(lián)想）來選擇顏色，而色彩還要烘托主題，并能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵。還可以配合下面的配色標(biāo)準(zhǔn)以及配色規(guī)律，如圖所示的色相環(huán)，從圖中可以直接看出同類色、鄰近色、對比色、互補色。相關(guān)知識相關(guān)知識同類色：色環(huán)中相隔45的兩個色相。屬較弱的對比效果，適合技術(shù)和專業(yè)性網(wǎng)站，是極為協(xié)調(diào)和單純的色調(diào)。鄰近色：色環(huán)中相隔90的兩個色相。色彩傾向近似，色調(diào)統(tǒng)一和諧，感情特征一致。而鄰近色的搭配可使整個頁面色彩豐富而不花哨。對比色：色環(huán)中相隔135的兩個色相。屬中強對比效果。對比色搭配時，應(yīng)以一種顏色為主調(diào)（占有較大面積），同時輔以對比色，起到豐富點綴的作用?；パa色：色環(huán)中相隔180的兩個色相。是對比最強的色組，富于刺激性，有強烈的視覺沖擊力和熱烈感。黑白是最簡單、最基本的搭配；灰色是萬能色，可以和任何色彩搭配，也可幫助兩種對立的色彩和諧過渡。

相關(guān)知識

從人的記憶效果看，對彩色的記憶是黑白的3.5倍，因此彩色頁面比完全的黑白頁面更吸引人。如圖所示，黑白網(wǎng)頁與彩色網(wǎng)頁之間存在著非常大的差異，大多數(shù)情況下，黑白網(wǎng)頁給瀏覽者的視覺沖擊力不如彩色網(wǎng)頁效果強烈，同時對作品網(wǎng)頁的風(fēng)格也有一些局限性。而彩色的選擇不僅僅決定了作品的風(fēng)格，同時也使作品更加飽滿、富有魅力。相關(guān)知識

相關(guān)知識（1）配色步驟確定主色首先根據(jù)網(wǎng)站的主題以及色彩給人的感情因素以及象征意思來確定主色，另外根據(jù)網(wǎng)站的受眾群體，例如受眾群體的職業(yè)、年齡、社會角色等。用主要配色方法配置主輔色使用單色盡管網(wǎng)站設(shè)計要避免采用單一色彩，以免產(chǎn)生單調(diào)的感覺，但通過調(diào)整色彩的飽和度和透明度也可以產(chǎn)生變化，使網(wǎng)站避免單調(diào)。如圖所示的色板，在設(shè)計網(wǎng)頁時候可以采用色板改變同一顏色的飽和度和透明度。相關(guān)知識相關(guān)知識使用鄰近色所謂鄰近色，就是在色帶上相鄰近的顏色，如圖4.67所示的色相環(huán)。綠色和藍(lán)色，紅色和黃色就互為鄰近色。采用鄰近色設(shè)計網(wǎng)頁可以使網(wǎng)頁避免色彩雜亂，易于達(dá)到頁面的和諧統(tǒng)一。使用對比色對比色可以突出重點，產(chǎn)生了強烈的視覺效果，通過合理使用對比色能夠使網(wǎng)站很有特色、重點突出。在設(shè)計時一般以一種顏色為主色調(diào)，對比色作為點綴，可以起到畫龍點睛的作用。相關(guān)知識不同色彩之間的對比會有不同的效果。當(dāng)兩種顏色同時在一起時，這兩種顏色各自走向自己的極端。例如：紅色與綠色對比，紅的更紅，綠的更綠；黑色與白色對比，黑的更黑，白的更白。由于人的視覺不同，對比的效果通常也會有不同。當(dāng)大家長時間看一種純色，例如紅色，然后再看看周圍的人，你會發(fā)現(xiàn)周圍的人臉色會成綠色，正是因為紅色與周圍顏色的對比，形成了對我們視覺的刺激。色彩的對比會受很多因素影響，例如色彩的面積、時間、亮度等等。

相關(guān)知識色彩的對比有很多方面，當(dāng)我們用湖藍(lán)與深藍(lán)對比時，你會發(fā)覺深藍(lán)帶點紫味，而湖藍(lán)則有點綠味。各種純色的對比會產(chǎn)生鮮明的色彩效果，很容易給人帶來視覺與心理的滿足。

紅色與黃色對比：紅色會使人想起玫瑰的味道，而黃色則會使人想起檸檬的味道。

綠色和紫色對比：綠色被譽為紫色的絕配色。主色調(diào)是飽和度降低明度較低的紫色，輔色調(diào)是色彩明度較高的草綠色及沉穩(wěn)的深藍(lán)色。如圖所示的網(wǎng)頁配色就是紫色與綠色的對比。相關(guān)知識相關(guān)知識使用互補色黑與白：非常對立而又有共性，

是色彩最后的抽象。能夠用來表達(dá)富有哲理性的東西，是廣義上的互補色，在色環(huán)上劃直徑，正好相對（與此色對面）的兩種色彩互為補色。如：紅色是綠色的補色；橙色是藍(lán)色的補色；黃色是紫色的補色。補色的運用可以造成最強烈的對比效果。如圖所示就是采用黑色和白色。是黑色白色的對比。黑色和白色是永恒色，比較經(jīng)典的搭配。相關(guān)知識相關(guān)知識下檢驗配色合理標(biāo)準(zhǔn)網(wǎng)頁如何配色是合理的，可以參考下面幾點。色彩的鮮明性：網(wǎng)頁的色彩要鮮艷，才能引人注目。

色彩的獨特性：要有與眾不同的色彩，使得大家對網(wǎng)頁的印象強烈。色彩的合適性：色彩和你表達(dá)的內(nèi)容氣氛相適合，如用粉色體現(xiàn)女性站點的柔美性。色彩的聯(lián)想性：不同色彩會產(chǎn)生不同的聯(lián)想，如藍(lán)色想到天空，黑色想到黑夜，紅色想到節(jié)日和喜慶的事等，選擇色彩要和你網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。

相關(guān)知識（3）一般常見的配色規(guī)律紅色紅色的色感溫暖，性格剛烈而外向，是一種對人刺激性很強的顏色。紅色容易引起人的注意和警覺，也容易使人興奮、激動、緊張、沖動、因此紅色在標(biāo)志、旗幟、宣傳等用色占據(jù)首位，成為最有力的宣傳色，同時也是一種容易造成人視覺疲勞的顔色。如圖所示的網(wǎng)頁主要采用紅色。紅色主要用在食品、化工、藥品、金融、百貨、建筑等行業(yè)。相關(guān)知識在紅色中加入少量的黃，會使其熱力強盛，趨于躁動、不安。在紅色中加入少量的藍(lán)，會使其熱性減弱，趨于文雅、柔和。在紅色中加入少量的黑，會使其性格變得沉穩(wěn)，趨于厚重、樸實。在紅中加入少量的白，會使其性格變得溫柔，趨于含蓄、羞澀、嬌嫩。相關(guān)知識相關(guān)知識粉色粉色類似玫紅屬于暖色調(diào)，具有柔軟感、活潑感和跳躍性。如圖所示的網(wǎng)頁主要采用粉色作為主色，然后加入白，黃，藍(lán)，綠等色。跟白色搭配，清純可愛，保險又出彩。跟鵝黃色搭配，襯托出溫柔可人的柔和氣質(zhì)。跟常用對比色藍(lán)色搭配，會顯得亮麗，鮮明，活力四射。跟亮綠色搭配，具有視覺沖擊，配好了非常出彩，但對衣服的感覺不出眾者此種搭配請慎重。跟黑色搭配，甜甜的小性感中可透出帥氣、率性。相關(guān)知識相關(guān)知識藍(lán)色藍(lán)色的所在，往往是人類所知之甚少的地方，如宇宙和深海。古代人認(rèn)為那是天神水怪的住所，令人感到神秘莫測?，F(xiàn)代人把它作為科學(xué)探討的領(lǐng)域。藍(lán)色的色感冷嘲熱諷，性格樸實、穩(wěn)重而內(nèi)向，是一種有助于人頭腦清醒的顏色。藍(lán)色的樸實、內(nèi)向性格，常為那些性格活躍、具有較強擴張力的色彩，提供一個深遠(yuǎn)、廣闊、平靜的空間，成為襯托活躍色彩友善而謙虛的朋友。藍(lán)色還是一種在淡化后仍然似能保持較強個性的顏色。如果在藍(lán)色中分別加入少量的紅、黃、黑、橙、白等色，均不會對藍(lán)色的性格構(gòu)成較明顯的影響力。相關(guān)知識如圖所示是微軟的網(wǎng)頁。主要采用藍(lán)色為主色調(diào)。從網(wǎng)頁就能看出Microsoft的風(fēng)格、目標(biāo)、作風(fēng)，以及具有雄厚的實力，藍(lán)色調(diào)主要用在理性、科技、科研、教學(xué)等主題的網(wǎng)站。相關(guān)知識橙色橙色又稱橘黃色或者橘色，在自然界里，玉米、鮮花、果實、霞光等都有豐富的橙色，橙色具有明亮、健康、興奮、溫暖、歡樂、輝煌等色感，所以女性較喜歡用此色做裝飾色，橙色的穿透力僅次于紅色。如果在橙色中黃的成份較多，其性格趨于甜美、芳香。在橙色中混入小量的白，可使橙色的知覺趨于亮麗、焦躁、無力。相關(guān)知識如圖所示的網(wǎng)頁主要采用橙色調(diào)。橙色主要用在食品行業(yè)較多，另外也用在石化、建筑、百貨等行業(yè)。相關(guān)知識綠色如圖所示主要采用綠色為主色調(diào)，綠色是具有黃色和藍(lán)色兩種成份的顏色。在綠色中，將黃色的擴張感和藍(lán)色的收縮感相中和，將黃色的溫暖感與藍(lán)色的寒冷感相抵消。這樣使得綠色的性格最為平和、安穩(wěn)、中庸。是一種環(huán)保、柔順、恬靜、滿足、優(yōu)美的顏色。綠色主要用在金融、林業(yè)、果蔬、建筑等行業(yè)。在綠色中黃的成份較多時，其性格就趨于活潑、友善，具有幼稚性。在綠色中加入少量的黑，其性格就趨于莊重、老練、成熟。在綠色中加入少量的白，其性格就趨于潔凈、清爽、鮮嫩。相關(guān)知識相關(guān)知識紫色如圖所示的網(wǎng)頁主要采用紫色調(diào)，紫色的亮度在有彩色的色料中是最低的。紫色的低亮度給人一種沉悶、神秘的感覺。紫色是神秘、高貴、紳士的顏色。紫色主要用在化妝品、裝飾品、服裝業(yè)、出版業(yè)。在紫色中紅的成份較多時，其知覺具有壓抑感、威脅感。在紫色中加入少量的黑，其感覺就趨于沉悶、傷感、恐怖。在紫色中加入白，可使紫色沉悶的性格消失，變得優(yōu)雅、嬌氣，并充滿女性的魅力。相關(guān)知識相關(guān)知識白色如圖所示的網(wǎng)頁主要采用白色調(diào)，白色的色感光明，性格樸實、純潔、神圣、快樂。白色具有圣潔的不容侵犯性。如果在白色中加入其它任何色，都會影響其純潔性，使其性格變的含蓄。在白色中加入少量的紅，就成為淡淡的粉色，鮮嫩而充滿誘惑。在白色中加入少量的黃，則成為一種乳黃色，給人一種香膩的印象。在白色中加入少量的藍(lán)，給人感覺清冷、潔凈。在白色中加入少量的橙，有一種干燥的氣氛。在白色中加入少量的綠，給人一種稚嫩、柔和的感覺。在白色中加入少量的紫，可誘導(dǎo)人聯(lián)想到淡淡的芳香。相關(guān)知識相關(guān)知識黃色如圖所示的網(wǎng)頁主要采用黃色調(diào)，黃色的性格冷漠、高傲、敏感、富貴、權(quán)威、具有擴張和不安寧的視覺印象。黃色是各種色彩中，最為嬌氣的一種色。只要在純黃色中混入少量的其它色，其色相感和色性格均會發(fā)生較大程度的變化。黃色與橙色調(diào)在應(yīng)用的時候要注意不要用成土黃色。否則效果適得其反。黃色主要用在電器、化工、照明、食品等行業(yè)。相關(guān)知識相關(guān)知識在黃色中加入少量的藍(lán)，會使其轉(zhuǎn)化為一種鮮嫩