Photoshop在網(wǎng)頁設計上的應用計算機網(wǎng)絡技術(shù)專業(yè)畢業(yè)設計畢業(yè)論文

1、畢業(yè)設計論文photoshop在網(wǎng)頁設計上的應用系 別： 信息工程系 專 業(yè)： 計算機網(wǎng)絡技術(shù) 學生姓名： 指導教師： xxxx學院信息工程系2012年 6 月 日摘要計算機圖像技術(shù)的飛速發(fā)展，使個人電腦上的美術(shù)創(chuàng)作進入一個新的階段，各種圖像處理軟件越來越完善，普及程度不斷提高。其中的圖像處理工具photoshop是目前公認的、較好的通用平面美術(shù)設計軟件，它功能完善，性能穩(wěn)定，使用方便。使用photoshop平面設計軟件設計網(wǎng)頁簡單實用，具有很多不可代替的優(yōu)點，為大眾所推崇。比如：通過photoshop的切片工具，可將一個完整的網(wǎng)頁切割許多小片，不僅方便上傳，也容易對每一張圖塊進行單獨的優(yōu)化，

2、同時利于瀏覽下載。在使用photoshop對網(wǎng)頁進行設計和美工的過程中，所需要掌握和了解的知識很多，顏色的搭配，版面的布局，以及人機交互的繁簡性，都需要斟酌思考。 關鍵詞：photoshop；網(wǎng)頁設計；切片工具；顏色；布局 目 錄摘要2第一章 概述11.1 photoshop的簡介11.2 photoshop的運行環(huán)境3第二章 photoshop的平面設計42.1 設計特點42.1.1用計算機代替?zhèn)鹘y(tǒng)的設計工具42.1.2信息處理能力強大、快速42.1.3使平面設計走向產(chǎn)業(yè)化42.2 設計原則52.2.1 整體與局部相統(tǒng)一原則52.2.2 知識性與趣味性統(tǒng)一原則52.2.3 藝術(shù)性與觀賞性統(tǒng)一

3、原則62.2.4獨創(chuàng)性原則6第三章 photoshop的網(wǎng)頁設計73.1 網(wǎng)頁設計原則73.1.1畫面內(nèi)容73.1.2造型的組合83.1.3色彩的運用83.2 網(wǎng)站的交互可用性93.2.1眼動造成的熱點效應93.2.2注意力及可視項目113.3 切片工具的使用11第四章 photoshop網(wǎng)頁實例設計134.1網(wǎng)頁功能概述134.2網(wǎng)頁界面設計144.2.1背景及圖層文件夾144.2.2登錄框154.2.2 logo154.2.3 導航欄154.2.4 信息發(fā)布欄164.2.5 切片處理及導出網(wǎng)頁164.5網(wǎng)頁的整體設計效果17第五章 總結(jié)18參考文獻19致謝20第一章 概述1.1 photo

4、shop的簡介adobe photoshop，簡稱“ps”（其程序圖標便是“ps” ）是一個由adobe systems開發(fā)和發(fā)行的圖像處理軟件。多數(shù)人對于photoshop的了解僅限于“一個很好的圖像編輯軟件”，并不知道它的諸多應用，實際上，photoshop的應用領域很廣泛的，在圖像、圖形、文字、視頻、出版等各方面都有涉及。photoshop創(chuàng)始人的主要設計師thomasknoll的父親glennknoll是密歇根大學教授，同時也是一個攝影愛好者，他家地下室是一個暗房。他兩個兒子thomas和john從小就跟著爸爸玩暗房，但john似乎對當時剛剛開始發(fā)行的個人電腦更感興趣；此后thomas

5、也迷上個人電腦，并在1987年買一臺蘋果電腦（macplus）用來幫助完成他的博士論文。thomas發(fā)現(xiàn)當時的蘋果電腦無法顯示帶灰度的黑白圖像，因此他自己寫了一個程序display。而他兄弟（也可能是哥哥）john這時在星球大戰(zhàn)導演lucas的電影特殊效果制作公司industrylightmagic工作，對thomas的程序很感興趣。兩兄弟在此后的一年多把display不斷修改為功能更為強大的圖像編輯程序，經(jīng)過多次改名后，在一個展會上他們接受一個參展觀眾建議把程序改名為photoshop。此時的display/photoshop已經(jīng)有l(wèi)evel，色彩平衡，飽和度等調(diào)整。此外john寫了一些程序

6、后來成為插件（plug-in）的基礎。他們第一個商業(yè)成功是把photoshop交給一個掃描儀公司搭配賣，名字叫做barneyscanxp，版本是0.87。與此同時john繼續(xù)在找其他買家，包括supermac和aldus都沒有成功。最終他們找到了adobe的russellbrown，adobe的藝術(shù)總監(jiān)。russellbrown在此時已經(jīng)在研究是否考慮另外一家公司letraset的colorstudio圖像編輯程序。看過photoshop以后他認為knoll兄弟的程序更有前途。在1988年7月他們口頭決定合作，而真正的法律合同到次年4月才完成。2003年，adobe的creative suit

7、e套裝將adobe photoshop 8更名為adobe photoshop cs。因此，adobe photoshop cs5是adobe photoshop中的第12個主要版本。對cs更名也導致adobe眾多的軟件套件降價。adobe photoshop有兩個發(fā)行版本：標準版adobe photoshop和擴展版adobe photoshop extended，擴展版除包含標準版所有功能之外，還增加了3d處理功能、動畫圖形編輯功能和高級圖像分析功能。adobe只支持windows操作系統(tǒng)和mac os操作系統(tǒng)版本的photoshop，但linux操作系統(tǒng)用戶可以通過使用wine來運行ph

8、otoshop cs5。google也正在透過wine資助linux版photoshop的研究。photoshop被人們認為是最好的圖像處理軟件，但與著名的3d studio max一樣，昂貴的價格使其難以普及。但adobe不想失去中國大陸這塊市場，于是在2011年推出了“校園先鋒計劃”，價格低的令人大跌眼鏡，比如原價7707元的adobe photoshop cs5 extended在此計劃中只賣349元。不過此計劃只面向大學生與高校教師。圖 1-1 photoshop創(chuàng)始人之一thomes knoll1.2 photoshop的運行環(huán)境表 1-1運行環(huán)境表運行環(huán)境環(huán)境要求硬件cpuinte

9、l pentium 4 或 amd athlon 64 處理器ram512mbhard disk1gb 可用硬盤空間用于安裝;安裝過程中需要額外的可用空間(無法安裝在基于閃存的可移動存儲設備上)分辨率和vga1024768 屏幕(推薦 1280800)，配備符合條件的硬件加速 opengl 圖形卡、16 位顏色和 256mb vram，某些 gpu 加速功能需要 shader model 3.0 和 opengl 2.0 圖形支持cdrom無特殊要求mouse無特殊要求版本photoshop cs4操作系統(tǒng)windows xp或以上多媒體quicktime 7.6.2 軟件網(wǎng)絡在線服務需要寬帶

10、 internet 連接，通訊協(xié)議為tcp/ip第二章 photoshop的平面設計 photoshop在平面設計中扮演著極其重要的角色，它廣泛應用于我們?nèi)粘Ｉ詈蛯W習工作的各個方面，首先淺談一下photoshop平面設計軟件具有特點和常用的設計原則。2.1 設計特點根據(jù)photoshop的功能和作用，總結(jié)其明顯的特點。2.1.1用計算機代替?zhèn)鹘y(tǒng)的設計工具現(xiàn)代平面設計以計算機作為主要創(chuàng)作工具，利用 photoshop設計軟件提供的強大的工具和菜單功能，同時結(jié)合了各種傳統(tǒng)繪畫工具的特點，又能體現(xiàn)多種新的藝術(shù)風格，使創(chuàng)作技法不斷推陳出新。2.1.2信息處理能力強大、快速 photoshop 軟件在

11、文字錄入、圖像掃描、圖像存儲、圖像編輯、特效處理等方面具有超強的處理能力，同時在圖文混排圖像輸出等方面的操作方便快捷。 設計效果所見即所得，修改快捷、方便。2.1.3使平面設計走向產(chǎn)業(yè)化 photoshop軟件在平面設計中的應用，極大地改變平面設計的作業(yè)環(huán)境，使藝術(shù)創(chuàng)作逐步走向標準化、工業(yè)化、產(chǎn)業(yè)化，社會上各種創(chuàng)作設計室如雨后春筍般的發(fā)展壯大，提供豐富的就業(yè)機會，為哪些有藝術(shù)天賦而沒有藝術(shù)功底的人提供了廣闊的工作和生活天地。2.1.4促進了藝術(shù)設計創(chuàng)意photoshop軟件革新了設計師的藝術(shù)語言與表現(xiàn)手法，同時促進了創(chuàng)意的萌發(fā)機制與深化過程，許多以前想到卻做不到的事，現(xiàn)在通過計算機能夠輕而易舉

12、地實現(xiàn)。photoshop象一位神奇的魔法師，她可以在埃及的沙漠里建造出金字塔，然后將其輕輕地放在champs的愛麗舍宮上，這種逼真即使是巴黎人也不會看出有什么不妥； photoshop 象一位奇妙的藝術(shù)家，它可以使掃描的碎片和褪色的數(shù)碼相片看起來如同由高級攝影師拍攝的無可非議的照片。2.2 設計原則phtoshop 現(xiàn)代平面設計的原則是根據(jù)平面設計的性質(zhì)和目的，針對平面設計的特點進行制作，它一般遵循的原則如下。2.2.1 整體與局部相統(tǒng)一原則phtoshop平面設計的根本目的是通過平面設計作品為人們傳播直觀的信息，使人們獲得美感享受的同時獲得大量直觀的信息，充分表達用戶要求的主題，設計師通過

13、完美的平面設計形式表達符合主題的思想內(nèi)容，這也是平面設計的根基，這就要求設計師在設計中強化整體布局，合理突出局部，使整體與局部合理地統(tǒng)一，使作品取得獨特的社會與藝術(shù)價值。整體與局部合理地統(tǒng)一，就是設計師在平面設計中要強化版面各種排版要素在版面中結(jié)構(gòu)與色彩具有相互關聯(lián)性，通過版面的文圖間的整體組合與協(xié)調(diào)性的編排，使版面更具秩序美、條理美，從而獲得更好的視覺效果，力求作品的盡善盡美。2.2.2 知識性與趣味性統(tǒng)一原則phtoshop平面設計軟件具有強大的濾鏡功能，它能夠輕而易舉地實現(xiàn)設計師魔幻般的想法，激發(fā)設計師異想天開的創(chuàng)作靈感，平面設計作品中可以運用一批夸張變形漫畫、卡通、有故事性的連環(huán)組畫表

14、現(xiàn)科學幻想世界、神奇的太空景觀、物理上不能實現(xiàn)的各種現(xiàn)象等，模擬的活靈活現(xiàn)，生動逼真，容易引起讀者的閱讀興趣，具有很大的商業(yè)價值。雖然能使讀者看起來饒有興趣，但是這種趣味性必須建立在一定的科學知識的基礎上，光與色彩的處理必須符合現(xiàn)實科學和生活，符合人的視覺特性，才能夠被人們充分地接受，作品才能夠具有實質(zhì)的社會和商業(yè)價值，沒有知識支撐的趣味性就像鏡中花水中月，使人們感覺到不真實。設計該真實地反映社會生活的方方面面，不能偏離客觀實際。2.2.3 藝術(shù)性與觀賞性統(tǒng)一原則phtoshop版面設計藝術(shù)性是使人們在欣賞作品時能夠潛移默化地接受作品表達的主題內(nèi)容，充分領會到作品的意圖和設計師的意愿，這就要求

15、設計師首先構(gòu)思立意，它是設計作品中所進行的思維活動，也是體現(xiàn)作品品質(zhì)的重要環(huán)節(jié)。立意完成以后，版面構(gòu)圖布局和藝術(shù)的表現(xiàn)形式就成為版面設計藝術(shù)的核心，這種藝術(shù)性就是要求平面設計達到意新形美，變化而統(tǒng)一的藝術(shù)作品，并具有較好的審美情趣，使它具有良好的可觀賞性，藝術(shù)性與觀賞性相互統(tǒng)一，相得益彰，即使藝術(shù)性十分強烈，但如果人們不能夠充分觀賞，就不能夠領會到設計師的意圖，作品的藝術(shù)性就會大打折扣。2.2.4獨創(chuàng)性原則獨創(chuàng)性原則是平面設計中較為重要的原則，它是設計師個性的充分體現(xiàn)，它是設計師設計的作品相互區(qū)別的重要標志 它的本質(zhì)上是突出個性化特征設計的原則，清楚地傳達設計作品中設計師個性化的理念和思想，表

16、達設計師獨特的創(chuàng)作手段和方法 如：徐悲鴻的馬，齊白石的蝦，有時候鮮明的突出的個性是版面設計創(chuàng)意的靈魂。平設計必須遵循phtoshop的特點，掌握常用的設計原則，即將人的思想，素養(yǎng)、對藝術(shù)的感悟及表現(xiàn)技法，創(chuàng)造性地運用文字，圖形、色彩去設定構(gòu)圖和表現(xiàn)形式，在感知與思考，感性與理性的交互運作中追求最合理的形式組合，形成好的作品。第三章 photoshop的網(wǎng)頁設計使用photoshop平面設計軟件設計網(wǎng)頁簡單實用，具有很多不可代替的優(yōu)點，為大眾所推崇，比如：通過photoshop的切片工具，可將一個完整的網(wǎng)頁切割許多小片，不僅方便上傳，也容易對每一張進行單獨的圖塊進行優(yōu)化，以便于瀏覽下載。在使用p

17、hotoshop對網(wǎng)頁進行設計和美工的過程中，所需要掌握和了解的知識需要很多，顏色的搭配，版面的布局，以及人機交互的繁簡性，都需要斟酌思考。3.1 網(wǎng)頁設計原則好的網(wǎng)頁不僅僅是有一個好的外表，它還要將信息傳達給用戶，這可能要比起好看的外表重要得多，現(xiàn)在就談談幾個重要的原則。3.1.1畫面內(nèi)容畫面設計是有原則的，無論使用何種手法對畫面中的元素進行組合，都一定要遵循五個大的原則：統(tǒng)一、連貫、分割、對比及和諧。 統(tǒng)一，是指設計作品的整體性，一致性。設計作品的整體效果是至關重要的，在設計中切勿將各組成部分孤立分散，那樣會使畫面呈現(xiàn)出一種枝蔓紛雜的凌亂效果。 連貫，是指要注意頁面的相互關系。設計中應利用

18、各組成部分在內(nèi)容上的內(nèi)在聯(lián)系和表現(xiàn)形式上的相互呼應，并注意整個頁面設計風格的一致性，實現(xiàn)視覺上和心理上的連貫，使整個頁面設計的各個部分極為融洽，猶如一氣呵成。 分割，是指將頁面分成若干小塊，小塊之間有視覺上的不同，這樣可以使觀者一目了然。在信息量很多時為使觀者能夠看清楚，就要注意到將畫面進行有效的分割。分割不僅是表現(xiàn)形式的需要。換個角度來講，分割也可以被視為對于頁面內(nèi)容的一種分類歸納。 對比就是通過矛盾和沖突，使設計更加富有生氣。對比手法很多，例如：多與少、曲與直、強與弱、長與短、粗與細、疏與密、虛與實、主與次、黑與白、動與靜、美與丑、聚與散等等。在使用對比的時候應慎重，對比過強容易破壞美感，

19、影響統(tǒng)一。 和諧是指整個頁面符合美的法則，渾然一體。如果一件設計作品僅僅是色彩、形狀、線條等的隨意混合，那么作品將不但沒有“生命感”，而且也根本無法實現(xiàn)視覺設計的傳達功能。和諧不僅要看結(jié)構(gòu)形式，而且要看作品所形成的視覺效果能否與人的視覺感受形成一種溝通，產(chǎn)生心靈的共鳴。這是設計能否成功的關鍵。 3.1.2造型的組合在網(wǎng)頁設計中，我們主要通過視覺傳達來表現(xiàn)主題。在視覺傳達中，造型是很重要的一個元素。拋去是圖還是文字的問題，畫面上的所有元素可以統(tǒng)一作為畫面的基本構(gòu)成要素點、線、面來進行處理。在一幅成功的作品里，是需要點、線、面的共同組合與搭配來構(gòu)造整個頁面的。 通常我們可以使用的組合手法有秩序、比

20、例、均衡、對稱、連續(xù)、間隔、重疊、反復、交插、節(jié)奏、韻律、歸納、變異、特寫、反射等等，它們都有各自的特點。在設計中應根據(jù)具體情況，選擇最適合的表現(xiàn)手法，這樣有利于主題的表現(xiàn)。 通過點、線、面的組合，可以突出頁面上的重要元素，突出設計的主題，增強美感，讓觀者在感受美的過程中領會設計的主題，從而實現(xiàn)設計的任務。 造型的巧妙運用不僅能帶來極大的美感，而且能較好地突出企業(yè)形象，而且能將網(wǎng)頁上的各種元素有機的組織起來，它甚至還可以引導觀者的視線。 3.1.3色彩的運用色彩是一種奇怪的東西，它是美麗而豐富的，它能喚起人類的心靈感知。一般來說，紅色是火的顏色，熱情、奔放；也是血的顏色，可以象征生命。黃色是明

21、度最高的顏色，顯得華麗、高貴、明快。綠色是大自然草木的顏色，意味著純自然和生長，象征安寧和平與安全，如綠色食品。紫色是高貴的象征，有莊重感。白色能給人以純潔與清白的感覺，表示和平與圣潔。 我們知道，顏色是光的折射產(chǎn)生的，紅、黃、藍是三原色，其它的色彩都可以用這三種色彩調(diào)和而成。換一種思路，我們可以用顏色的變化來表現(xiàn)光影效果，這無疑將使我們的作品更貼近現(xiàn)實。 色彩代表了不同的情感，有著不同的象征含義。這些象征含義是人們思想交流當中的一個復雜問題，它因人的年齡、地域、時代、民族、階層、經(jīng)濟地區(qū)、工作能力、教育水平、風俗習慣、宗教信仰、生活環(huán)境、性別差異而有所不同。 單純的顏色并沒有實際的意義，和不

22、同的顏色搭配，它所表現(xiàn)出來的效果也不同。比如綠色和金黃、淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。藍色和白色混合，能體現(xiàn)柔順、淡雅、浪漫的氣氛。紅色和黃色、金色的搭配能渲染喜慶的氣氛。而金色和粟色的搭配則會給人帶來暖意。設計的任務不同，配色方案也隨之不同?？紤]到網(wǎng)頁的適應性，應盡量使用網(wǎng)頁安全色。 但顏色的使用并沒有一定的法則，如果一定要用某個法則去套，效果只會適得其反。經(jīng)驗上我們可先確定一種能表現(xiàn)主題的主體色，然后根據(jù)具體的需要，應用顏色的近似和對比來完成整個頁面的配色方案。整個頁面在視覺上應是一個整體，以達到和諧、悅目的視覺效果。 圖3-1 網(wǎng)站標題和導航的基本色塊3.2 網(wǎng)站的交互可用性網(wǎng)站的

23、目的就是邀請用戶訪問和互動。網(wǎng)站的設計者希望用戶以期望的方式使用網(wǎng)站，網(wǎng)站可用性可以用目標與它交互的難易程度來衡量。不合理的網(wǎng)站會拒人于外，精心設計的網(wǎng)站設計的網(wǎng)站則將用戶導向預期的目標。3.2.1眼動造成的熱點效應眼球追蹤是測量我們凝視的點，或者相對于頭部來說眼睛移動的過程。眼球追蹤研究可以幫助估計瀏覽網(wǎng)站的用戶是否舒適地使用網(wǎng)站，以及他們理解網(wǎng)站背后的架構(gòu)和系統(tǒng)有多快。用戶眼球的第一運動聚焦于網(wǎng)頁的左上角，用戶瀏覽網(wǎng)頁時，首先觀察網(wǎng)頁的左上部和上層部分，之后再往下閱讀，瀏覽右邊的內(nèi)容用戶普遍的瀏覽方式呈現(xiàn)出“f”的形狀。保證網(wǎng)站內(nèi)容的重要要素集中于這些關鍵區(qū)域，以此確保讀者的參與，在此放置

24、頭條，副題，熱點以及重要文章，這樣可以吸引到讀者進行閱讀，標題能吸引眼球，確保網(wǎng)頁的所有相關鏈接暢通和有效，以讓讀者順利的通過網(wǎng)站進一步搜索。視線往往只停留幾分之一秒，因此讀者會忽視橫幅廣告，而花哨的字體和格式被忽視，因此該努力保持網(wǎng)站的清爽，不要因為華而不實的表面，讓重要的信息被忽略。圖3-2網(wǎng)頁中視點停留的熱點圖像圖3-3 網(wǎng)頁中眼動追蹤圖像3.2.2注意力及可視項目注意力本身可以集中、分散和轉(zhuǎn)移。集中一般出于明確的需求、潛在的興趣；分散則由于信息干擾和不可控的時間；轉(zhuǎn)移一般發(fā)生在需求探索階段。以網(wǎng)站信息結(jié)構(gòu)內(nèi)的各元素為單位，加上每個頁面的所有視覺元素，可以得到網(wǎng)站總的注意力“項”。用戶就

25、是利用這些項去滿足自己的需求，交互設計則是這些項的描繪者、組織者。如果假設注意力有限，那么每個項分享到的注意力應該是固定值。加上因為個體差異，興趣和需求的等級不同，便得到了以下公式。圖3-4 注意力轉(zhuǎn)化率計算公式一般來說，交互設計的重頭工作是項設計。如確定信息結(jié)構(gòu)、元素詞典、視覺形式等。為什么說可視項數(shù)量越大，注意力越小呢？這是由認知特點決定的。選項越 多，步驟越長，人越需要耗費理解力。理解力帶給人的壓力比較大，需要求助于向內(nèi)的注意力，把注意力的任務屬性，轉(zhuǎn)向邏輯屬性，造成交互能力降低。加上對注 意力轉(zhuǎn)移所使用時間的預期，對鼠標和鍵盤操作的苛求（體力），人們普遍反感冗長的表單，頁面跳轉(zhuǎn)等情況。

26、于是便出現(xiàn)了“響應式展開”、“彈出泡”、“彈窗”、“標簽”等交互形式。圖3-5網(wǎng)頁中項的組織和展3.3 切片工具的使用任何一個網(wǎng)頁都包含大量的表格, 難道這些表格都是設計者一點點設計出來的嗎? 其實不然, 現(xiàn)在很多的網(wǎng)頁都是使用photoshop編輯后再通過dreamweaver來輕松布局網(wǎng)頁表格。圖3-6 在ps中對切片工具的使用第四章 photoshop網(wǎng)頁實例設計本網(wǎng)頁實例的設計，主要以學院信息工程系主頁的設計為例。4.1網(wǎng)頁功能概述本網(wǎng)頁要求實現(xiàn)以下功能：l 網(wǎng)頁界面簡潔、大方，色彩搭配合理。具有規(guī)范的版式，各版面布局合理。 l 支持各種主頁模塊的添加，保證操作簡單、便捷，實現(xiàn)交互的友

27、善。l 在主頁添加最新的微博等交互內(nèi)容，支持登錄操作的表單。通過對進網(wǎng)頁的需求分析，可以將本網(wǎng)頁的導航劃分為登錄框，導航，圖片錦集、系部介紹、系部新聞、通告通知、黨團建設、實訓基地、微博互動、招生就業(yè)、招生聯(lián)系、合作伙伴。劃分布局如圖所示。圖4-1 網(wǎng)站的劃分結(jié)構(gòu)4.2網(wǎng)頁界面設計4.2.1背景及圖層文件夾1.新建寬高為1004*1474的rgb圖像，背景為白色。2.建立各個圖層的文件夾，并重命名。2.新建圖層“背景”使用“漸變工具”在背景上端上充填一灰白色的漸變。3.在灰色的漸變背景上，使用“矩形工具”，繪出數(shù)個白邊小框作為背景底紋。圖4-2 網(wǎng)頁背景的顏色充填及底紋圖4-3 圖層文件夾4.

28、2.2登錄框1.使用“矩形工具”在背景的上端上制作出一條矩形，改變矩形的不透明度為32%，并設置其投影的樣式。2.在矩形上繼續(xù)制作兩個背景為白色，邊框為灰色的矩形作為登錄框，使用“字體工具”輸入字體為：微軟雅黑，大小11，顏色為藍灰的學號，密碼等文字項。圖4-3 登錄欄的樣式及字體4.2.2 logo1.使用“鋼筆工具”繪制藍灰色系標，并在旁邊輸入文字，字體：漢鼎行楷，顏色藍，字體41。2.使用“圓角矩形工具”繪制一圓角矩形，在調(diào)整好其顏色和透明度后，在上輸入文字，格式：宋體，大小13。圖4-4 系標及其文字的樣式4.2.3 導航欄1.使用“文字工具”輸入導航內(nèi)容，字體：黑體，顏色藍墨，字體1

29、7。2.使用“鉛筆工具”繪制導航之間的風格線，并在文字下繪出淡藍色虛線。圖4-5 導航文字格式4.2.4 信息發(fā)布欄1.使用“矩形工具”繪制一定長度的白色矩形，設置其樣式為“投影”“描邊” 2.使用“鋼筆工具”繪制一藍底的矩形，作為標題欄的裝飾，并用“鋼筆工具”繪制一小橢圓，選中橢圓后，在圖層上進行裁剪的處理。3. 使用“字體工具”輸入標題，字體：黑體，大小15，顏色為藍灰?！案唷?文字按鈕使用字體：宋體，大小10，灰色。4.正文通過其后臺的設計決定，但基本的字體：宋體，大小13，顏色為藍灰。圖4-6 網(wǎng)頁所有消息發(fā)布欄的基本4.2.5 切片處理及導出網(wǎng)頁1.使用“切片工具”對頁面的導航，欄目進行細致的切割。2.選擇“文件”， 選擇“將優(yōu)化結(jié)果儲存為”，將作品以html的形式保存。圖4-7 對網(wǎng)頁使用“切片工具”4.5網(wǎng)頁的整體設計效果圖4-8 信息工程系主頁的整體效果第五章 總結(jié)現(xiàn)在是it時代，幾乎沒有哪一行能和網(wǎng)絡脫離關系，因此網(wǎng)站的規(guī)劃與建設已經(jīng)成為一項專門職業(yè)。在網(wǎng)站規(guī)劃建設中，網(wǎng)頁美工布局設計是其至關重要的一環(huán)，它關系到網(wǎng)站能否吸引更多人的眼