畢業(yè)設(shè)計(jì)----photoshop在網(wǎng)頁(yè)設(shè)計(jì)上的應(yīng)用

1、<p><b>　　畢業(yè)設(shè)計(jì)論文</b></p><p>　　Photoshop在網(wǎng)頁(yè)設(shè)計(jì)上的應(yīng)用</p><p>　　系 別： 信息工程系 </p><p>　　專 業(yè)： 計(jì)算機(jī)網(wǎng)絡(luò)技術(shù) </p><p>　　學(xué)生姓名： </p><

2、p>　　指導(dǎo)教師： </p><p>　　XXXX學(xué)院信息工程系</p><p>　　2012年 6 月 日</p><p><b>　　摘要</b></p><p>　　計(jì)算機(jī)圖像技術(shù)的飛速發(fā)展，使個(gè)人電腦上的美術(shù)創(chuàng)作進(jìn)入一個(gè)新的階段，各種圖像處理軟件越來(lái)越完善，普及程度不斷提

3、高。其中的圖像處理工具Photoshop是目前公認(rèn)的、較好的通用平面美術(shù)設(shè)計(jì)軟件，它功能完善，性能穩(wěn)定，使用方便。使用PhotoShop平面設(shè)計(jì)軟件設(shè)計(jì)網(wǎng)頁(yè)簡(jiǎn)單實(shí)用，具有很多不可代替的優(yōu)點(diǎn)，為大眾所推崇。比如：通過(guò)PhotoShop的切片工具，可將一個(gè)完整的網(wǎng)頁(yè)切割許多小片，不僅方便上傳，也容易對(duì)每一張圖塊進(jìn)行單獨(dú)的優(yōu)化，同時(shí)利于瀏覽下載。在使用Photoshop對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)計(jì)和美工的過(guò)程中，所需要掌握和了解的知識(shí)很多，顏色的搭配，版面

4、的布局，以及人機(jī)交互的繁簡(jiǎn)性，都需要斟酌思考。 </p><p>　　關(guān)鍵詞：Photoshop；網(wǎng)頁(yè)設(shè)計(jì)；切片工具；顏色；布局</p><p><b>　　目 錄</b></p><p><b>　　摘要2</b></p><p><b>　　第一章 概述1</b>&

5、lt;/p><p>　　1.1 Photoshop的簡(jiǎn)介1</p><p>　　1.2 Photoshop的運(yùn)行環(huán)境3</p><p>　　第二章 Photoshop的平面設(shè)計(jì)4</p><p>　　2.1 設(shè)計(jì)特點(diǎn)4</p><p>　　2.1.1用計(jì)算機(jī)代替?zhèn)鹘y(tǒng)的設(shè)計(jì)工具4</p><p&

6、gt;　　2.1.2信息處理能力強(qiáng)大、快速4</p><p>　　2.1.3使平面設(shè)計(jì)走向產(chǎn)業(yè)化4</p><p>　　2.2 設(shè)計(jì)原則5</p><p>　　2.2.1 整體與局部相統(tǒng)一原則5</p><p>　　2.2.2 知識(shí)性與趣味性統(tǒng)一原則5</p><p>　　2.2.3 藝術(shù)性與觀賞性統(tǒng)一原則

7、6</p><p>　　2.2.4獨(dú)創(chuàng)性原則6</p><p>　　第三章 Photoshop的網(wǎng)頁(yè)設(shè)計(jì)7</p><p>　　3.1 網(wǎng)頁(yè)設(shè)計(jì)原則7</p><p>　　3.1.1畫(huà)面內(nèi)容7</p><p>　　3.1.2造型的組合8</p><p>　　3.1.3色彩的運(yùn)用8&l

8、t;/p><p>　　3.2 網(wǎng)站的交互可用性9</p><p>　　3.2.1眼動(dòng)造成的熱點(diǎn)效應(yīng)9</p><p>　　3.2.2注意力及可視項(xiàng)目11</p><p>　　3.3 切片工具的使用11</p><p>　　第四章 Photoshop網(wǎng)頁(yè)實(shí)例設(shè)計(jì)13</p><p>　　4.

9、1網(wǎng)頁(yè)功能概述13</p><p>　　4.2網(wǎng)頁(yè)界面設(shè)計(jì)14</p><p>　　4.2.1背景及圖層文件夾14</p><p>　　4.2.2登錄框15</p><p>　　4.2.2 LOGO15</p><p>　　4.2.3 導(dǎo)航欄15</p><p>　　4.2.4 信息

10、發(fā)布欄16</p><p>　　4.2.5 切片處理及導(dǎo)出網(wǎng)頁(yè)16</p><p>　　4.5網(wǎng)頁(yè)的整體設(shè)計(jì)效果17</p><p><b>　　第五章 總結(jié)18</b></p><p><b>　　參考文獻(xiàn)19</b></p><p><b>　　致謝

11、20</b></p><p><b>　　第一章 概述</b></p><p>　　1.1 Photoshop的簡(jiǎn)介</p><p>　　Adobe Photoshop，簡(jiǎn)稱“PS”（其程序圖標(biāo)便是“PS” ）是一個(gè)由Adobe Systems開(kāi)發(fā)和發(fā)行的圖像處理軟件。多數(shù)人對(duì)于PHOTOSHOP的了解僅限于“一個(gè)很好的圖像編輯軟件

12、”，并不知道它的諸多應(yīng)用，實(shí)際上，Photoshop的應(yīng)用領(lǐng)域很廣泛的，在圖像、圖形、文字、視頻、出版等各方面都有涉及。</p><p>　　Photoshop創(chuàng)始人的主要設(shè)計(jì)師ThomasKnoll的父親GlennKnoll是密歇根大學(xué)教授，同時(shí)也是一個(gè)攝影愛(ài)好者，他家地下室是一個(gè)暗房。他兩個(gè)兒子Thomas和John從小就跟著爸爸玩暗房，但John似乎對(duì)當(dāng)時(shí)剛剛開(kāi)始發(fā)行的個(gè)人電腦更感興趣；此后Thomas也迷

13、上個(gè)人電腦，并在1987年買一臺(tái)蘋果電腦（MacPlus）用來(lái)幫助完成他的博士論文。</p><p>　　Thomas發(fā)現(xiàn)當(dāng)時(shí)的蘋果電腦無(wú)法顯示帶灰度的黑白圖像，因此他自己寫了一個(gè)程序Display。而他兄弟（也可能是哥哥）John這時(shí)在星球大戰(zhàn)導(dǎo)演Lucas的電影特殊效果制作公司IndustryLightMagic工作，對(duì)Thomas的程序很感興趣。兩兄弟在此后的一年多把Display不斷修改為功能更為強(qiáng)大的圖

14、像編輯程序，經(jīng)過(guò)多次改名后，在一個(gè)展會(huì)上他們接受一個(gè)參展觀眾建議把程序改名為Photoshop。此時(shí)的Display/Photoshop已經(jīng)有Level，色彩平衡，飽和度等調(diào)整。此外John寫了一些程序后來(lái)成為插件（Plug-in）的基礎(chǔ)。</p><p>　　他們第一個(gè)商業(yè)成功是把Photoshop交給一個(gè)掃描儀公司搭配賣，名字叫做BarneyscanXP，版本是0.87。與此同時(shí)John繼續(xù)在找其他買家，包括

15、SuperMac和Aldus都沒(méi)有成功。最終他們找到了Adobe的RussellBrown，Adobe的藝術(shù)總監(jiān)。RussellBrown在此時(shí)已經(jīng)在研究是否考慮另外一家公司Letraset的ColorStudio圖像編輯程序?？催^(guò)Photoshop以后他認(rèn)為Knoll兄弟的程序更有前途。在1988年7月他們口頭決定合作，而真正的法律合同到次年4月才完成。</p><p>　　2003年，Adobe的Creati

16、ve Suite套裝將Adobe Photoshop 8更名為Adobe Photoshop CS。因此，Adobe Photoshop CS5是Adobe Photoshop中的第12個(gè)主要版本。對(duì)CS更名也導(dǎo)致Adobe眾多的軟件套件降價(jià)。Adobe Photoshop有兩個(gè)發(fā)行版本：標(biāo)準(zhǔn)版Adobe Photoshop和擴(kuò)展版Adobe Photoshop Extended，擴(kuò)展版除包含標(biāo)準(zhǔn)版所有功能之外，還增加了3D處理功能、動(dòng)

17、畫(huà)圖形編輯功能和高級(jí)圖像分析功能。Adobe只支持Windows操作系統(tǒng)和Mac OS操作系統(tǒng)版本的Photoshop，但Linux操作系統(tǒng)用戶可以通過(guò)使用Wine來(lái)運(yùn)行Photoshop CS5。Google也正在透過(guò)Wine資助Linux版Photoshop的研究。</p><p>　　Photoshop被人們認(rèn)為是最好的圖像處理軟件，但與著名的3D Studio Max一樣，昂貴的價(jià)格使其難以普及。但Ado

18、be不想失去中國(guó)大陸這塊市場(chǎng)，于是在2011年推出了“校園先鋒計(jì)劃”，價(jià)格低的令人大跌眼鏡，比如原價(jià)7707元的Adobe Photoshop CS5 Extended在此計(jì)劃中只賣349元。不過(guò)此計(jì)劃只面向大學(xué)生與高校教師。</p><p>　　圖 1-1 Photoshop創(chuàng)始人之一Thomes Knoll</p><p>　　1.2 Photoshop的運(yùn)行環(huán)境</p>

19、<p>　　表 1-1運(yùn)行環(huán)境表</p><p>　　第二章 Photoshop的平面設(shè)計(jì)</p><p>　　Photoshop在平面設(shè)計(jì)中扮演著極其重要的角色，它廣泛應(yīng)用于我們?nèi)粘Ｉ詈蛯W(xué)習(xí)工作的各個(gè)方面，首先淺談一下Photoshop平面設(shè)計(jì)軟件具有特點(diǎn)和常用的設(shè)計(jì)原則。</p><p><b>　　2.1 設(shè)計(jì)特點(diǎn)</b>&

20、lt;/p><p>　　根據(jù)Photoshop的功能和作用，總結(jié)其明顯的特點(diǎn)。</p><p>　　2.1.1用計(jì)算機(jī)代替?zhèn)鹘y(tǒng)的設(shè)計(jì)工具</p><p>　　現(xiàn)代平面設(shè)計(jì)以計(jì)算機(jī)作為主要?jiǎng)?chuàng)作工具，利用 Photoshop設(shè)計(jì)軟件提供的強(qiáng)大的工具和菜單功能，同時(shí)結(jié)合了各種傳統(tǒng)繪畫(huà)工具的特點(diǎn)，又能體現(xiàn)多種新的藝術(shù)風(fēng)格，使創(chuàng)作技法不斷推陳出新。</p><

21、p>　　2.1.2信息處理能力強(qiáng)大、快速</p><p>　　Photoshop 軟件在文字錄入、圖像掃描、圖像存儲(chǔ)、圖像編輯、特效處理等方面具有超強(qiáng)的處理能力，同時(shí)在圖文混排圖像輸出等方面的操作方便快捷。 設(shè)計(jì)效果所見(jiàn)即所得，修改快捷、方便。</p><p>　　2.1.3使平面設(shè)計(jì)走向產(chǎn)業(yè)化 </p><p>　　Photoshop軟件在平面設(shè)計(jì)中的應(yīng)用，

22、極大地改變平面設(shè)計(jì)的作業(yè)環(huán)境，使藝術(shù)創(chuàng)作逐步走向標(biāo)準(zhǔn)化、工業(yè)化、產(chǎn)業(yè)化，社會(huì)上各種創(chuàng)作設(shè)計(jì)室如雨后春筍般的發(fā)展壯大，提供豐富的就業(yè)機(jī)會(huì)，為哪些有藝術(shù)天賦而沒(méi)有藝術(shù)功底的人提供了廣闊的工作和生活天地。</p><p>　　2.1.4促進(jìn)了藝術(shù)設(shè)計(jì)創(chuàng)意</p><p>　　Photoshop軟件革新了設(shè)計(jì)師的藝術(shù)語(yǔ)言與表現(xiàn)手法，同時(shí)促進(jìn)了創(chuàng)意的萌發(fā)機(jī)制與深化過(guò)程，許多以前想到卻做不到的事，現(xiàn)在

23、通過(guò)計(jì)算機(jī)能夠輕而易舉地實(shí)現(xiàn)。Photoshop象一位神奇的魔法師，她可以在埃及的沙漠里建造出金字塔，然后將其輕輕地放在Champs的愛(ài)麗舍宮上，這種逼真即使是巴黎人也不會(huì)看出有什么不妥； Photoshop 象一位奇妙的藝術(shù)家，它可以使掃描的碎片和褪色的數(shù)碼相片看起來(lái)如同由高級(jí)攝影師拍攝的無(wú)可非議的照片。</p><p><b>　　2.2 設(shè)計(jì)原則</b></p><

24、p>　　Phtoshop 現(xiàn)代平面設(shè)計(jì)的原則是根據(jù)平面設(shè)計(jì)的性質(zhì)和目的，針對(duì)平面設(shè)計(jì)的特點(diǎn)進(jìn)行制作，它一般遵循的原則如下。</p><p>　　2.2.1 整體與局部相統(tǒng)一原則</p><p>　　Phtoshop平面設(shè)計(jì)的根本目的是通過(guò)平面設(shè)計(jì)作品為人們傳播直觀的信息，使人們獲得美感享受的同時(shí)獲得大量直觀的信息，充分表達(dá)用戶要求的主題，設(shè)計(jì)師通過(guò)完美的平面設(shè)計(jì)形式表達(dá)符合主題的思想

25、內(nèi)容，這也是平面設(shè)計(jì)的根基，這就要求設(shè)計(jì)師在設(shè)計(jì)中強(qiáng)化整體布局，合理突出局部，使整體與局部合理地統(tǒng)一，使作品取得獨(dú)特的社會(huì)與藝術(shù)價(jià)值。</p><p>　　整體與局部合理地統(tǒng)一，就是設(shè)計(jì)師在平面設(shè)計(jì)中要強(qiáng)化版面各種排版要素在版面中結(jié)構(gòu)與色彩具有相互關(guān)聯(lián)性，通過(guò)版面的文圖間的整體組合與協(xié)調(diào)性的編排，使版面更具秩序美、條理美，從而獲得更好的視覺(jué)效果，力求作品的盡善盡美。</p><p>　　2

26、.2.2 知識(shí)性與趣味性統(tǒng)一原則</p><p>　　Phtoshop平面設(shè)計(jì)軟件具有強(qiáng)大的濾鏡功能，它能夠輕而易舉地實(shí)現(xiàn)設(shè)計(jì)師魔幻般的想法，激發(fā)設(shè)計(jì)師異想天開(kāi)的創(chuàng)作靈感，平面設(shè)計(jì)作品中可以運(yùn)用一批夸張變形漫畫(huà)、卡通、有故事性的連環(huán)組畫(huà)表現(xiàn)科學(xué)幻想世界、神奇的太空景觀、物理上不能實(shí)現(xiàn)的各種現(xiàn)象等，模擬的活靈活現(xiàn)，生動(dòng)逼真，容易引起讀者的閱讀興趣，具有很大的商業(yè)價(jià)值。雖然能使讀者看起來(lái)饒有興趣，但是這種趣味性必須建

27、立在一定的科學(xué)知識(shí)的基礎(chǔ)上，光與色彩的處理必須符合現(xiàn)實(shí)科學(xué)和生活，符合人的視覺(jué)特性，才能夠被人們充分地接受，作品才能夠具有實(shí)質(zhì)的社會(huì)和商業(yè)價(jià)值，沒(méi)有知識(shí)支撐的趣味性就像鏡中花水中月，使人們感覺(jué)到不真實(shí)。設(shè)計(jì)該真實(shí)地反映社會(huì)生活的方方面面，不能偏離客觀實(shí)際。</p><p>　　2.2.3 藝術(shù)性與觀賞性統(tǒng)一原則</p><p>　　Phtoshop版面設(shè)計(jì)藝術(shù)性是使人們?cè)谛蕾p作品時(shí)能夠潛移

28、默化地接受作品表達(dá)的主題內(nèi)容，充分領(lǐng)會(huì)到作品的意圖和設(shè)計(jì)師的意愿，這就要求設(shè)計(jì)師首先構(gòu)思立意，它是設(shè)計(jì)作品中所進(jìn)行的思維活動(dòng)，也是體現(xiàn)作品品質(zhì)的重要環(huán)節(jié)。立意完成以后，版面構(gòu)圖布局和藝術(shù)的表現(xiàn)形式就成為版面設(shè)計(jì)藝術(shù)的核心，這種藝術(shù)性就是要求平面設(shè)計(jì)達(dá)到意新形美，變化而統(tǒng)一的藝術(shù)作品，并具有較好的審美情趣，使它具有良好的可觀賞性，藝術(shù)性與觀賞性相互統(tǒng)一，相得益彰，即使藝術(shù)性十分強(qiáng)烈，但如果人們不能夠充分觀賞，就不能夠領(lǐng)會(huì)到設(shè)計(jì)師的意圖，作

29、品的藝術(shù)性就會(huì)大打折扣。</p><p>　　2.2.4獨(dú)創(chuàng)性原則</p><p>　　獨(dú)創(chuàng)性原則是平面設(shè)計(jì)中較為重要的原則，它是設(shè)計(jì)師個(gè)性的充分體現(xiàn)，它是設(shè)計(jì)師設(shè)計(jì)的作品相互區(qū)別的重要標(biāo)志 它的本質(zhì)上是突出個(gè)性化特征設(shè)計(jì)的原則，清楚地傳達(dá)設(shè)計(jì)作品中設(shè)計(jì)師個(gè)性化的理念和思想，表達(dá)設(shè)計(jì)師獨(dú)特的創(chuàng)作手段和方法 如：徐悲鴻的馬，齊白石的蝦，有時(shí)候鮮明的突出的個(gè)性是版面設(shè)計(jì)創(chuàng)意的靈魂。平設(shè)計(jì)必須遵

30、循Phtoshop的特點(diǎn)，掌握常用的設(shè)計(jì)原則，即將人的思想，素養(yǎng)、對(duì)藝術(shù)的感悟及表現(xiàn)技法，創(chuàng)造性地運(yùn)用文字，圖形、色彩去設(shè)定構(gòu)圖和表現(xiàn)形式，在感知與思考，感性與理性的交互運(yùn)作中追求最合理的形式組合，形成好的作品。</p><p>　　第三章 Photoshop的網(wǎng)頁(yè)設(shè)計(jì)</p><p>　　使用PhotoShop平面設(shè)計(jì)軟件設(shè)計(jì)網(wǎng)頁(yè)簡(jiǎn)單實(shí)用，具有很多不可代替的優(yōu)點(diǎn)，為大眾所推崇，比如：通過(guò)

31、PhotoShop的切片工具，可將一個(gè)完整的網(wǎng)頁(yè)切割許多小片，不僅方便上傳，也容易對(duì)每一張進(jìn)行單獨(dú)的圖塊進(jìn)行優(yōu)化，以便于瀏覽下載。在使用Photoshop對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)計(jì)和美工的過(guò)程中，所需要掌握和了解的知識(shí)需要很多，顏色的搭配，版面的布局，以及人機(jī)交互的繁簡(jiǎn)性，都需要斟酌思考。</p><p>　　3.1 網(wǎng)頁(yè)設(shè)計(jì)原則</p><p>　　好的網(wǎng)頁(yè)不僅僅是有一個(gè)好的外表，它還要將信息傳達(dá)給

32、用戶，這可能要比起好看的外表重要得多，現(xiàn)在就談?wù)剮讉€(gè)重要的原則。</p><p><b>　　3.1.1畫(huà)面內(nèi)容</b></p><p>　　畫(huà)面設(shè)計(jì)是有原則的，無(wú)論使用何種手法對(duì)畫(huà)面中的元素進(jìn)行組合，都一定要遵循五個(gè)大的原則：統(tǒng)一、連貫、分割、對(duì)比及和諧。 </p><p>　　統(tǒng)一，是指設(shè)計(jì)作品的整體性，一致性。設(shè)計(jì)作品的整體效果是至關(guān)重要

33、的，在設(shè)計(jì)中切勿將各組成部分孤立分散，那樣會(huì)使畫(huà)面呈現(xiàn)出一種枝蔓紛雜的凌亂效果。 </p><p>　　連貫，是指要注意頁(yè)面的相互關(guān)系。設(shè)計(jì)中應(yīng)利用各組成部分在內(nèi)容上的內(nèi)在聯(lián)系和表現(xiàn)形式上的相互呼應(yīng)，并注意整個(gè)頁(yè)面設(shè)計(jì)風(fēng)格的一致性，實(shí)現(xiàn)視覺(jué)上和心理上的連貫，使整個(gè)頁(yè)面設(shè)計(jì)的各個(gè)部分極為融洽，猶如一氣呵成。 </p><p>　　分割，是指將頁(yè)面分成若干小塊，小塊之間有視覺(jué)上的不同，這樣可以

34、使觀者一目了然。在信息量很多時(shí)為使觀者能夠看清楚，就要注意到將畫(huà)面進(jìn)行有效的分割。分割不僅是表現(xiàn)形式的需要。換個(gè)角度來(lái)講，分割也可以被視為對(duì)于頁(yè)面內(nèi)容的一種分類歸納。 </p><p>　　對(duì)比就是通過(guò)矛盾和沖突，使設(shè)計(jì)更加富有生氣。對(duì)比手法很多，例如：多與少、曲與直、強(qiáng)與弱、長(zhǎng)與短、粗與細(xì)、疏與密、虛與實(shí)、主與次、黑與白、動(dòng)與靜、美與丑、聚與散等等。在使用對(duì)比的時(shí)候應(yīng)慎重，對(duì)比過(guò)強(qiáng)容易破壞美感，影響統(tǒng)一。 &l

35、t;/p><p>　　和諧是指整個(gè)頁(yè)面符合美的法則，渾然一體。如果一件設(shè)計(jì)作品僅僅是色彩、形狀、線條等的隨意混合，那么作品將不但沒(méi)有“生命感”，而且也根本無(wú)法實(shí)現(xiàn)視覺(jué)設(shè)計(jì)的傳達(dá)功能。和諧不僅要看結(jié)構(gòu)形式，而且要看作品所形成的視覺(jué)效果能否與人的視覺(jué)感受形成一種溝通，產(chǎn)生心靈的共鳴。這是設(shè)計(jì)能否成功的關(guān)鍵。 </p><p>　　3.1.2造型的組合</p><p>　　在

36、網(wǎng)頁(yè)設(shè)計(jì)中，我們主要通過(guò)視覺(jué)傳達(dá)來(lái)表現(xiàn)主題。在視覺(jué)傳達(dá)中，造型是很重要的一個(gè)元素。拋去是圖還是文字的問(wèn)題，畫(huà)面上的所有元素可以統(tǒng)一作為畫(huà)面的基本構(gòu)成要素點(diǎn)、線、面來(lái)進(jìn)行處理。在一幅成功的作品里，是需要點(diǎn)、線、面的共同組合與搭配來(lái)構(gòu)造整個(gè)頁(yè)面的。 </p><p>　　通常我們可以使用的組合手法有秩序、比例、均衡、對(duì)稱、連續(xù)、間隔、重疊、反復(fù)、交插、節(jié)奏、韻律、歸納、變異、特寫、反射等等，它們都有各自的特點(diǎn)。在設(shè)計(jì)

37、中應(yīng)根據(jù)具體情況，選擇最適合的表現(xiàn)手法，這樣有利于主題的表現(xiàn)。 通過(guò)點(diǎn)、線、面的組合，可以突出頁(yè)面上的重要元素，突出設(shè)計(jì)的主題，增強(qiáng)美感，讓觀者在感受美的過(guò)程中領(lǐng)會(huì)設(shè)計(jì)的主題，從而實(shí)現(xiàn)設(shè)計(jì)的任務(wù)。 造型的巧妙運(yùn)用不僅能帶來(lái)極大的美感，而且能較好地突出企業(yè)形象，而且能將網(wǎng)頁(yè)上的各種元素有機(jī)的組織起來(lái)，它甚至還可以引導(dǎo)觀者的視線。 </p><p>　　3.1.3色彩的運(yùn)用</p><p>　

38、　色彩是一種奇怪的東西，它是美麗而豐富的，它能喚起人類的心靈感知。一般來(lái)說(shuō)，紅色是火的顏色，熱情、奔放；也是血的顏色，可以象征生命。黃色是明度最高的顏色，顯得華麗、高貴、明快。綠色是大自然草木的顏色，意味著純自然和生長(zhǎng)，象征安寧和平與安全，如綠色食品。紫色是高貴的象征，有莊重感。白色能給人以純潔與清白的感覺(jué)，表示和平與圣潔。 </p><p>　　我們知道，顏色是光的折射產(chǎn)生的，紅、黃、藍(lán)是三原色，其它的色彩都可

39、以用這三種色彩調(diào)和而成。換一種思路，我們可以用顏色的變化來(lái)表現(xiàn)光影效果，這無(wú)疑將使我們的作品更貼近現(xiàn)實(shí)。 </p><p>　　色彩代表了不同的情感，有著不同的象征含義。這些象征含義是人們思想交流當(dāng)中的一個(gè)復(fù)雜問(wèn)題，它因人的年齡、地域、時(shí)代、民族、階層、經(jīng)濟(jì)地區(qū)、工作能力、教育水平、風(fēng)俗習(xí)慣、宗教信仰、生活環(huán)境、性別差異而有所不同。 </p><p>　　單純的顏色并沒(méi)有實(shí)際的意義，和不同

40、的顏色搭配，它所表現(xiàn)出來(lái)的效果也不同。比如綠色和金黃、淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。藍(lán)色和白色混合，能體現(xiàn)柔順、淡雅、浪漫的氣氛。紅色和黃色、金色的搭配能渲染喜慶的氣氛。而金色和粟色的搭配則會(huì)給人帶來(lái)暖意。設(shè)計(jì)的任務(wù)不同，配色方案也隨之不同?？紤]到網(wǎng)頁(yè)的適應(yīng)性，應(yīng)盡量使用網(wǎng)頁(yè)安全色。 </p><p>　　但顏色的使用并沒(méi)有一定的法則，如果一定要用某個(gè)法則去套，效果只會(huì)適得其反。經(jīng)驗(yàn)上我們可先確定一種能表現(xiàn)

41、主題的主體色，然后根據(jù)具體的需要，應(yīng)用顏色的近似和對(duì)比來(lái)完成整個(gè)頁(yè)面的配色方案。整個(gè)頁(yè)面在視覺(jué)上應(yīng)是一個(gè)整體，以達(dá)到和諧、悅目的視覺(jué)效果。 </p><p>　　圖3-1 網(wǎng)站標(biāo)題和導(dǎo)航的基本色塊</p><p>　　3.2 網(wǎng)站的交互可用性</p><p>　　網(wǎng)站的目的就是邀請(qǐng)用戶訪問(wèn)和互動(dòng)。網(wǎng)站的設(shè)計(jì)者希望用戶以期望的方式使用網(wǎng)站，網(wǎng)站可用性可以用目標(biāo)與它交互

42、的難易程度來(lái)衡量。不合理的網(wǎng)站會(huì)拒人于外，精心設(shè)計(jì)的網(wǎng)站設(shè)計(jì)的網(wǎng)站則將用戶導(dǎo)向預(yù)期的目標(biāo)。</p><p>　　3.2.1眼動(dòng)造成的熱點(diǎn)效應(yīng)</p><p>　　眼球追蹤是測(cè)量我們凝視的點(diǎn)，或者相對(duì)于頭部來(lái)說(shuō)眼睛移動(dòng)的過(guò)程。眼球追蹤研究可以幫助估計(jì)瀏覽網(wǎng)站的用戶是否舒適地使用網(wǎng)站，以及他們理解網(wǎng)站背后的架構(gòu)和系統(tǒng)有多快。</p><p>　　用戶眼球的第一運(yùn)動(dòng)聚焦于

43、網(wǎng)頁(yè)的左上角，用戶瀏覽網(wǎng)頁(yè)時(shí)，首先觀察網(wǎng)頁(yè)的左上部和上層部分，之后再往下閱讀，瀏覽右邊的內(nèi)容用戶普遍的瀏覽方式呈現(xiàn)出“F”的形狀。保證網(wǎng)站內(nèi)容的重要要素集中于這些關(guān)鍵區(qū)域，以此確保讀者的參與，在此放置頭條，副題，熱點(diǎn)以及重要文章，這樣可以吸引到讀者進(jìn)行閱讀，標(biāo)題能吸引眼球，確保網(wǎng)頁(yè)的所有相關(guān)鏈接暢通和有效，以讓讀者順利的通過(guò)網(wǎng)站進(jìn)一步搜索。視線往往只停留幾分之一秒，因此讀者會(huì)忽視橫幅廣告，而花哨的字體和格式被忽視，因此該努力保持網(wǎng)站的清

44、爽，不要因?yàn)槿A而不實(shí)的表面，讓重要的信息被忽略。</p><p>　　圖3-2網(wǎng)頁(yè)中視點(diǎn)停留的熱點(diǎn)圖像</p><p>　　圖3-3 網(wǎng)頁(yè)中眼動(dòng)追蹤圖像</p><p>　　3.2.2注意力及可視項(xiàng)目</p><p>　　注意力本身可以集中、分散和轉(zhuǎn)移。集中一般出于明確的需求、潛在的興趣；分散則由于信息干擾和不可控的時(shí)間；轉(zhuǎn)移一般發(fā)生在需求探

45、索階段。以網(wǎng)站信息結(jié)構(gòu)內(nèi)的各元素為單位，加上每個(gè)頁(yè)面的所有視覺(jué)元素，可以得到網(wǎng)站總的注意力“項(xiàng)”。用戶就是利用這些項(xiàng)去滿足自己的需求，交互設(shè)計(jì)則是這些項(xiàng)的描繪者、組織者。如果假設(shè)注意力有限，那么每個(gè)項(xiàng)分享到的注意力應(yīng)該是固定值。加上因?yàn)閭€(gè)體差異，興趣和需求的等級(jí)不同，便得到了以下公式。</p><p>　　圖3-4 注意力轉(zhuǎn)化率計(jì)算公式</p><p>　　一般來(lái)說(shuō)，交互設(shè)計(jì)的重頭工作是項(xiàng)

46、設(shè)計(jì)。如確定信息結(jié)構(gòu)、元素詞典、視覺(jué)形式等。為什么說(shuō)可視項(xiàng)數(shù)量越大，注意力越小呢？這是由認(rèn)知特點(diǎn)決定的。選項(xiàng)越 多，步驟越長(zhǎng)，人越需要耗費(fèi)理解力。理解力帶給人的壓力比較大，需要求助于向內(nèi)的注意力，把注意力的任務(wù)屬性，轉(zhuǎn)向邏輯屬性，造成交互能力降低。加上對(duì)注 意力轉(zhuǎn)移所使用時(shí)間的預(yù)期，對(duì)鼠標(biāo)和鍵盤操作的苛求（體力），人們普遍反感冗長(zhǎng)的表單，頁(yè)面跳轉(zhuǎn)等情況。于是便出現(xiàn)了“響應(yīng)式展開(kāi)”、“彈出泡”、“彈窗”、“標(biāo)簽”等交互形式。</p&

47、gt;<p>　　圖3-5網(wǎng)頁(yè)中項(xiàng)的組織和展</p><p>　　3.3 切片工具的使用</p><p>　　任何一個(gè)網(wǎng)頁(yè)都包含大量的表格, 難道這些表格都是設(shè)計(jì)者一點(diǎn)點(diǎn)設(shè)計(jì)出來(lái)的嗎? 其實(shí)不然, 現(xiàn)在很多的網(wǎng)頁(yè)都是使用Photoshop編輯后再通過(guò)Dreamweaver來(lái)輕松布局網(wǎng)頁(yè)表格。</p><p>　　圖3-6 在PS中對(duì)切片工具的使用<

48、;/p><p>　　第四章 Photoshop網(wǎng)頁(yè)實(shí)例設(shè)計(jì)</p><p>　　本網(wǎng)頁(yè)實(shí)例的設(shè)計(jì)，主要以學(xué)院信息工程系主頁(yè)的設(shè)計(jì)為例。</p><p><b>　　4.1網(wǎng)頁(yè)功能概述</b></p><p>　　本網(wǎng)頁(yè)要求實(shí)現(xiàn)以下功能：</p><p>　　網(wǎng)頁(yè)界面簡(jiǎn)潔、大方，色彩搭配合理。具有規(guī)范的

49、版式，各版面布局合理。 </p><p>　　支持各種主頁(yè)模塊的添加，保證操作簡(jiǎn)單、便捷，實(shí)現(xiàn)交互的友善。</p><p>　　在主頁(yè)添加最新的微博等交互內(nèi)容，支持登錄操作的表單。</p><p>　　通過(guò)對(duì)進(jìn)網(wǎng)頁(yè)的需求分析，可以將本網(wǎng)頁(yè)的導(dǎo)航劃分為登錄框，導(dǎo)航，圖片錦集、系部介紹、系部新聞、通告通知、黨團(tuán)建設(shè)、實(shí)訓(xùn)基地、微博互動(dòng)、招生就業(yè)、招生聯(lián)系、合作伙伴。劃分

50、布局如圖所示。</p><p>　　圖4-1 網(wǎng)站的劃分結(jié)構(gòu)</p><p><b>　　4.2網(wǎng)頁(yè)界面設(shè)計(jì)</b></p><p>　　4.2.1背景及圖層文件夾</p><p>　　1.新建寬高為1004*1474的RGB圖像，背景為白色。</p><p>　　2.建立各個(gè)圖層的文件夾，并重命

51、名。</p><p>　　2.新建圖層“背景”使用“漸變工具”在背景上端上充填一灰白色的漸變。</p><p>　　3.在灰色的漸變背景上，使用“矩形工具”，繪出數(shù)個(gè)白邊小框作為背景底紋。</p><p>　　圖4-2 網(wǎng)頁(yè)背景的顏色充填及底紋</p><p>　　圖4-3 圖層文件夾</p><p><b>

52、;　　4.2.2登錄框</b></p><p>　　1.使用“矩形工具”在背景的上端上制作出一條矩形，改變矩形的不透明度為32%，并設(shè)置其投影的樣式。</p><p>　　2.在矩形上繼續(xù)制作兩個(gè)背景為白色，邊框?yàn)榛疑木匦巫鳛榈卿浛?，使用“字體工具”輸入字體為：微軟雅黑，大小11，顏色為藍(lán)灰的學(xué)號(hào)，密碼等文字項(xiàng)。</p><p>　　圖4-3 登錄欄的

53、樣式及字體</p><p>　　4.2.2 LOGO</p><p>　　1.使用“鋼筆工具”繪制藍(lán)灰色系標(biāo)，并在旁邊輸入文字，字體：漢鼎行楷，顏色藍(lán)，字體41。</p><p>　　2.使用“圓角矩形工具”繪制一圓角矩形，在調(diào)整好其顏色和透明度后，在上輸入文字，格式：宋體，大小13。</p><p>　　圖4-4 系標(biāo)及其文字的樣式<

54、/p><p><b>　　4.2.3 導(dǎo)航欄</b></p><p>　　1.使用“文字工具”輸入導(dǎo)航內(nèi)容，字體：黑體，顏色藍(lán)墨，字體17。</p><p>　　2.使用“鉛筆工具”繪制導(dǎo)航之間的風(fēng)格線，并在文字下繪出淡藍(lán)色虛線。</p><p>　　圖4-5 導(dǎo)航文字格式</p><p>　　4.2

55、.4 信息發(fā)布欄</p><p>　　1.使用“矩形工具”繪制一定長(zhǎng)度的白色矩形，設(shè)置其樣式為“投影”“描邊” </p><p>　　2.使用“鋼筆工具”繪制一藍(lán)底的矩形，作為標(biāo)題欄的裝飾，并用“鋼筆工具”繪制一小橢圓，選中橢圓后，在圖層上進(jìn)行裁剪的處理。</p><p>　　3. 使用“字體工具”輸入標(biāo)題，字體：黑體，大小15，顏色為藍(lán)灰?！案唷?文字按鈕使用字

56、體：宋體，大小10，灰色。</p><p>　　4.正文通過(guò)其后臺(tái)的設(shè)計(jì)決定，但基本的字體：宋體，大小13，顏色為藍(lán)灰。</p><p>　　圖4-6 網(wǎng)頁(yè)所有消息發(fā)布欄的基本</p><p>　　4.2.5 切片處理及導(dǎo)出網(wǎng)頁(yè)</p><p>　　1.使用“切片工具”對(duì)頁(yè)面的導(dǎo)航，欄目進(jìn)行細(xì)致的切割。</p><p>

57、;　　2.選擇“文件”， 選擇“將優(yōu)化結(jié)果儲(chǔ)存為”，將作品以HTML的形式保存。</p><p>　　圖4-7 對(duì)網(wǎng)頁(yè)使用“切片工具”</p><p>　　4.5網(wǎng)頁(yè)的整體設(shè)計(jì)效果</p><p>　　圖4-8 信息工程系主頁(yè)的整體效果</p><p><b>　　第五章 總結(jié)</b></p><p&

58、gt;　　現(xiàn)在是IT時(shí)代，幾乎沒(méi)有哪一行能和網(wǎng)絡(luò)脫離關(guān)系，因此網(wǎng)站的規(guī)劃與建設(shè)已經(jīng)成為一項(xiàng)專門職業(yè)。在網(wǎng)站規(guī)劃建設(shè)中，網(wǎng)頁(yè)美工布局設(shè)計(jì)是其至關(guān)重要的一環(huán)，它關(guān)系到網(wǎng)站能否吸引更多人的眼球，直接反映網(wǎng)站的點(diǎn)擊率，而點(diǎn)擊率正是網(wǎng)站的生命所在。所以網(wǎng)頁(yè)布局設(shè)計(jì)是否美觀、規(guī)范、合理越來(lái)越受到網(wǎng)頁(yè)設(shè)計(jì)師的重視。</p><p>　　本次畢業(yè)設(shè)計(jì)，最大的收獲是對(duì)網(wǎng)站的設(shè)計(jì)有了更熟練的運(yùn)用，對(duì)網(wǎng)站頁(yè)面整體的設(shè)計(jì)有了很好的把握。

59、畢業(yè)設(shè)計(jì)的制作從開(kāi)始的想法，到實(shí)際的規(guī)劃設(shè)計(jì)，以及工具的選擇，到最后的實(shí)際的制作，后期的調(diào)整，這整個(gè)過(guò)程自己遇到了很多的問(wèn)題，由于這是一個(gè)完整的程序設(shè)計(jì)過(guò)程，涉及的各個(gè)方面比較多，所以實(shí)現(xiàn)起來(lái)困難是肯定的，通過(guò)自己的查閱圖書(shū)，上網(wǎng)搜索，以及輔導(dǎo)老師的指導(dǎo)下，克服了種種困難，在此特別感謝輔導(dǎo)老師不厭其煩的指導(dǎo)。</p><p>　　整個(gè)網(wǎng)頁(yè)基本上實(shí)現(xiàn)了設(shè)計(jì)之初的目標(biāo)，完成了系統(tǒng)規(guī)劃階段的構(gòu)想。但限于水平有限，不夠完

60、善，如用CCS的布局問(wèn)題、WEB安全色異常等問(wèn)題，不過(guò)相信，我會(huì)在后面的學(xué)習(xí)中將其完善，從而使其具有實(shí)際使用意義。</p><p><b>　　參考文獻(xiàn) </b></p><p>　　[1] 趙冠南：《PHOTOSHOP平面設(shè)計(jì)淺議》四川工程職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2009</p><p>　　[2]尤崢：《圖形圖像處理技術(shù)》[M].北京

61、：化學(xué)工業(yè)出版社，2005</p><p>　　[3]方堅(jiān)主：《photoshop7.0教程》[M].北京：北京希望電子出版社，2002</p><p>　　[4]羅代升：《計(jì)算機(jī)圖形圖像處理技術(shù)》[M].成都：西南交通大學(xué)出版社，2005</p><p>　　[6] 許偉民，袁鵬飛：《Photoshop七大核心技術(shù)》人民郵電出版社</p><p

62、>　　[7] 毛小平, 徐春紅, 魏瓊：《Photoshop CS4完全學(xué)習(xí)手冊(cè)》北京，人民郵電出版社</p><p><b>　　致謝</b></p><p>　　畢業(yè)論文是我們?cè)诖笕龑W(xué)期主要的任務(wù)之一，對(duì)于論文的選題是我們一直頭痛不已的問(wèn)題。在這里我感謝張老師和同學(xué)的指導(dǎo)和幫助，在我為選題糾結(jié)不已時(shí)，能夠適時(shí)的幫助我理清思路，縮小命題范圍。這一次的畢業(yè)論文是

63、考量我能力的一次挑戰(zhàn)，我不敢懈怠。在書(shū)寫論文，制作系統(tǒng)的時(shí)候，對(duì)自己想要研究的知道的問(wèn)題有了一定的認(rèn)識(shí)和了解，并且也發(fā)現(xiàn)自身不足之處。</p><p>　　通過(guò)對(duì)畢業(yè)論文的書(shū)寫，我自主動(dòng)手能力，閱讀資料的能力增強(qiáng)了。很慶幸這一次的選題，讓我廣泛的接觸了大量的文獻(xiàn)，使得自己的編程水平有了一定程度的提升。計(jì)算機(jī)是一門非常復(fù)雜且龐大的學(xué)科，一項(xiàng)課題往往需要多項(xiàng)技術(shù)才可以完成的。在設(shè)計(jì)階段，通過(guò)對(duì)課題的深入分析與研究，迫