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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

52、;　　4.2.2登錄框</b></p><p>　　1.使用“矩形工具”在背景的上端上制作出一條矩形，改變矩形的不透明度為32%，并設置其投影的樣式。</p><p>　　2.在矩形上繼續(xù)制作兩個背景為白色，邊框為灰色的矩形作為登錄框，使用“字體工具”輸入字體為：微軟雅黑，大小11，顏色為藍灰的學號，密碼等文字項。</p><p>　　圖4-3 登錄欄的

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

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

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

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

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

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

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

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

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

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

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