畢業(yè)論文Photoshop在網(wǎng)站建設(shè)中的應(yīng)用

1、浙江水利水電?？茖W(xué)校畢業(yè)論文photoshop在網(wǎng)站建設(shè)中的應(yīng)用摘 要毋庸置疑，internet的作用在今天顯得越來(lái)越重要，網(wǎng)站的數(shù)量和規(guī)模發(fā)展迅猛。在internet的早期，網(wǎng)站只能保存單純的文本。經(jīng)過(guò)幾年的發(fā)展，圖像、聲音、圖片、動(dòng)畫(huà)、視頻，甚至3d技術(shù)開(kāi)始internet上流行，網(wǎng)站也發(fā)展成為我們今天看到的圖文并茂的樣子。在制作網(wǎng)站過(guò)程中photoshop是必不可少的網(wǎng)頁(yè)圖像處理軟件。網(wǎng)站界面設(shè)計(jì)雖然可以用dreamweaver和frontpage等網(wǎng)頁(yè)創(chuàng)作工具來(lái)完成，但是最自由和藝術(shù)化的創(chuàng)作方式，還是使用photoshop這樣的專業(yè)圖像處理軟件。photoshop的功能及其強(qiáng)大，在圖像

2、、圖形、文字、視頻、出版等方面都有涉及。制作完整體界面效果后，再進(jìn)行優(yōu)化和切片，以達(dá)到更好的網(wǎng)頁(yè)瀏覽效果。良好的運(yùn)用photoshop能在網(wǎng)站開(kāi)發(fā)及后期發(fā)展中起到很重大的作用。關(guān)鍵詞photoshop；網(wǎng)站；設(shè)計(jì)1目錄摘要 1關(guān)鍵詞 1abstract 1引言 11 photoshop的發(fā)展歷史 11.1 photoshop的開(kāi)發(fā) 11.2 photoshop的功能特色 21.3 photoshop的應(yīng)用領(lǐng)域 42 photoshop在網(wǎng)站中的應(yīng)用 5 2.1 網(wǎng)站的規(guī)劃 5 2.2 內(nèi)容的采集 5 2.3 photoshop在網(wǎng)站開(kāi)發(fā)中的應(yīng)用 5 2.4 photoshop在網(wǎng)站后期的應(yīng)用

3、103 結(jié)束語(yǔ) 10附錄 10參考文獻(xiàn) 14引言internet是強(qiáng)有力的工具，能以低代價(jià)卻很方便的把產(chǎn)品和服務(wù)信息傳遍世界的每個(gè)角落。全世界所有客戶都能夠通過(guò)網(wǎng)站，了解信息。不管網(wǎng)站怎么發(fā)展，讓客戶方便快捷得找到所需要的信息都是最重要的。因此一個(gè)網(wǎng)站信息分布式很重要的，這就需要在網(wǎng)站開(kāi)發(fā)中進(jìn)行設(shè)計(jì)。我所實(shí)習(xí)的網(wǎng)絡(luò)公司是運(yùn)營(yíng)電子商務(wù)的。隨著網(wǎng)購(gòu)的流行，電子商務(wù)是未來(lái)經(jīng)濟(jì)發(fā)展的大趨勢(shì)，電子商務(wù)類網(wǎng)站也因此蓬勃發(fā)展。設(shè)計(jì)一個(gè)電子商務(wù)類網(wǎng)站更加需要photoshop技術(shù)的支持。電子商務(wù)類網(wǎng)站需要提供更多的圖片信息，要讓客戶迅速找到所需產(chǎn)品，并能與相似產(chǎn)品進(jìn)行比較，選出最滿意的商品。這需要對(duì)網(wǎng)站的良好

4、布局，通過(guò)文字和圖形的空間結(jié)合，表達(dá)出和諧和美。1 photoshop的發(fā)展歷史1.1 photoshop的開(kāi)發(fā)photoshop是adobe公司旗下最為出名的圖像處理軟件之一。多年來(lái)以其優(yōu)異的品質(zhì)和強(qiáng)大的功能成為業(yè)界標(biāo)準(zhǔn)，是平面設(shè)計(jì)開(kāi)發(fā)人員的必備工具，也是web開(kāi)發(fā)等電腦應(yīng)用的必備軟件。1.1.1photoshop的開(kāi)發(fā)及版本1986年，密歇根州大學(xué)的一個(gè)研究生thomas編制了一個(gè)程序display，能在macintoshplus上顯示灰階圖像。之后與他兄長(zhǎng)一起開(kāi)發(fā)了早期的photoshop軟件。此后的一年多里，display不斷修改成為一個(gè)功能更強(qiáng)大的圖像編輯程序。在一個(gè)展會(huì)上有人建議把

5、程序改名為photoshop。此時(shí)的photoshop已經(jīng)具有色彩平衡，飽和度等調(diào)整了。此外他的兄弟寫(xiě)了一些程序后來(lái)成為插件（plug-in）的基礎(chǔ)。之后他們尋找買家，包括supermac和aldus，但都沒(méi)成功。1988年，與adobe簽署授權(quán)銷售協(xié)議，但這僅僅是獲得發(fā)行權(quán)，而不是買斷所有版權(quán)。1990年photoshop版本1.0.7正式發(fā)行。之后adobe開(kāi)始著手開(kāi)發(fā)適用于windows平臺(tái)的版本，正式版本編號(hào)2.5，增加了調(diào)色板和16位文件支持。版本3.0增加了一個(gè)重要的新功能層。版本4.0主要是改進(jìn)了用戶界面，與adobe的其他產(chǎn)品統(tǒng)一化。這是adobe意識(shí)到photoshop的重要

6、性，1995年買斷所有權(quán)。版本5.0引入了歷史記錄的概念，并增加了色彩管理的功能，這是photoshop歷史上的已達(dá)改進(jìn)，在業(yè)界引起很大的反響。之后一年發(fā)行了版本5.5，主要增加了支持web功能和imageready2.0。2000年推出的6.0版本改進(jìn)了其他adobe工具交換的流暢。2003年的版本7.0增加的healing brush修復(fù)畫(huà)筆和一些基本的數(shù)碼相機(jī)功能如文件瀏覽器，是一項(xiàng)非常重大的改進(jìn)。之后的的版本8.0的改成為photoshop creative suite。photoshop cs為數(shù)碼相機(jī)開(kāi)發(fā)了更多的新功能，如智能調(diào)節(jié)亮度，鏡頭修正等。9.0則變成cs2，10.0變成c

7、s3,11.0變成cs4，也就是最新的版本。adobe photoshop cs4擁有一百多項(xiàng)創(chuàng)新，特別注重簡(jiǎn)化工作流程，提高設(shè)計(jì)效率，支持基于內(nèi)容的智能縮放，支持65為操作系統(tǒng)、更大容量?jī)?nèi)存。1.1.2photoshop的開(kāi)發(fā)平臺(tái)photoshop最初的應(yīng)用平臺(tái)是macintosh麥金塔。1985年蘋(píng)果公司率先推出圖形界面的macintosh麥金塔系列電腦。當(dāng)時(shí)的thomas迷上了個(gè)人電腦，他發(fā)現(xiàn)當(dāng)時(shí)的蘋(píng)果電腦無(wú)法顯示帶灰度的黑白圖像，因此加以研究。隨著windows的流行應(yīng)用，版本2.0之后adobe開(kāi)始開(kāi)發(fā)支持windows版本，代號(hào)為brimstone,而macdonald版本為mer

8、lin。當(dāng)時(shí)photoshop在mac版本上以能大大超越對(duì)手，但是在windows上的版本則需要經(jīng)過(guò)一段時(shí)間改進(jìn)后才能趕上對(duì)手。1.2 photoshop的功能特色1.2.1photoshop的功能photoshop功能豐富實(shí)用，界面簡(jiǎn)潔，集成化程度高。與imageready 2.0相結(jié)合，提高了對(duì)web的支持能力，不斷開(kāi)發(fā)的新功能更是充分激發(fā)創(chuàng)作者的想象力。photoshop可分為圖像編輯、圖像合成、校色調(diào)色及特效制作部分。圖像編輯是圖像處理的基礎(chǔ)，可以對(duì)圖像做各種變換如放大、縮小、旋轉(zhuǎn)、傾斜、鏡像、透視等。也可以進(jìn)行復(fù)制、去除斑點(diǎn)、修補(bǔ)、修飾圖像的殘損等。這在婚紗攝影、廣告制作、人像照片處

9、理制作中有非常大的用場(chǎng)，去除人像上的不滿意部分，進(jìn)行美化加工，得到讓人非常滿意的結(jié)果。圖像合成則是將幾幅圖像通過(guò)圖層操作、工具應(yīng)用完成的，傳達(dá)明確意義的圖像，這是美術(shù)設(shè)計(jì)的必經(jīng)之路。photoshop提供的繪圖工具讓外來(lái)圖像與創(chuàng)意很好的融合，使圖像的合成天衣無(wú)縫、校色調(diào)色是photoshop中深具威力的功能之一，可方便快捷地對(duì)圖像的顏色進(jìn)行明暗、色調(diào)的調(diào)整和校正，也可在不同顏色進(jìn)行切換以滿足圖像在不同領(lǐng)域如網(wǎng)頁(yè)設(shè)計(jì)、印刷、多媒體等方面反應(yīng)。特效制作在photoshop中主要是通過(guò)濾鏡、通道及工具綜合應(yīng)用完成。包裹圖像的特效創(chuàng)意和特效字的制作，如油畫(huà)、浮雕、石膏畫(huà)、素描等常用的傳統(tǒng)美術(shù)技巧都可以

10、借由photoshop特效完成。而各種特效字的制作更是很多美術(shù)設(shè)計(jì)師熱衷于photoshop研究的原因。1.2.2常用工具photoshop的常用工具主要有選取工具，用于選取圖像的某個(gè)部分。模糊工具，對(duì)圖像進(jìn)行模糊虛化，也可以采用羽化或者濾鏡中的模糊工具進(jìn)行。銳化和減淡工具，對(duì)圖像進(jìn)行適當(dāng)調(diào)整。橡皮圖章工具，用于修改或彌補(bǔ)缺陷。編輯更改圖像顏色最主要是進(jìn)行亮度/對(duì)比度，色相/飽和度，色彩平衡和曲線，其次還可以運(yùn)用自動(dòng)對(duì)比度、自動(dòng)色階進(jìn)行調(diào)節(jié)。濾鏡的功能很強(qiáng)大，能進(jìn)行特效處理。濾鏡中最常用的是模糊濾鏡工具、銳化濾鏡工具、各種風(fēng)格化濾鏡工具、各種蘇彪效果濾鏡工具和各種藝術(shù)化濾鏡工具。1.2.3與其

11、他相似軟件相比的優(yōu)勢(shì)圖像處理的軟件很多，除了photoshop外，常用的還有fireworks，autocad，coreldraw，painter，illustrator，pagemaker，indesign。photoshop用途比較廣泛，主要是圖片的處理，圖片效果的制作。illustrator，coreldraw，indesign，pagemaker等，這些都是用于制作矢量圖的。coreldraw在矢量領(lǐng)域占有一席之地，其強(qiáng)大的實(shí)力和adobe的產(chǎn)品在平面設(shè)計(jì)領(lǐng)域共享盛譽(yù)，主要是用于排版的，文字排版功能比photoshop強(qiáng)大，可以用來(lái)設(shè)計(jì)名片，宣傳單，海報(bào)，畫(huà)冊(cè)，報(bào)紙等。illustra

12、tor與coreldraw比較相似，操作起來(lái)有點(diǎn)像photoshop和coreldrawd綜合體。它與photoshop配合有很大的又是，適合用于任何小型設(shè)計(jì)到大興的復(fù)雜項(xiàng)目。indesign是后起之秀，與photoshop和illustrator同樣是adobe公司推出的，是一款功能非常強(qiáng)大的排版軟件。pagemaker主要用于排書(shū)刊，現(xiàn)在已經(jīng)停止開(kāi)發(fā)。painter同樣是corel公司出品的專業(yè)突襲那個(gè)創(chuàng)建軟件，它完全模擬了現(xiàn)實(shí)中作畫(huà)的自然繪圖工具和紙張效果，并提供電腦作畫(huà)的特有工具。他是一個(gè)非常理想的圖像筆記和繪畫(huà)工具。painter繪畫(huà)比較方便，而photoshop做圖比較方便，兩者的

13、功能特色是有所不同的。autocad是一款專業(yè)制圖軟件，繪制的平面圖是矢量的，能嚴(yán)格反映我們所畫(huà)實(shí)物的尺寸比例，特別是在機(jī)械設(shè)計(jì)中要求更嚴(yán)格。autocad經(jīng)常被用于畫(huà)零件圖，電路圖，房屋設(shè)計(jì)等等機(jī)械，電器，建筑等領(lǐng)域，常常與photoshop結(jié)合使用。fireworks是主要面向網(wǎng)絡(luò)應(yīng)用的，側(cè)重網(wǎng)頁(yè)圖像處理，是網(wǎng)頁(yè)三劍客中輔助制作網(wǎng)頁(yè)的，可以制作動(dòng)態(tài)效果。雖然photoshop也能制作動(dòng)態(tài)的圖片，但是需要切換到imageready中進(jìn)行制作。photoshop和fireworks功能上很相似，各自都有各自的優(yōu)勢(shì)。photoshop的設(shè)計(jì)初衷是用于傳統(tǒng)平面圖像出版，在平面設(shè)計(jì)方面有很大的優(yōu)勢(shì)，

14、可以兼做網(wǎng)頁(yè)。在色彩上，photoshop的色彩管理及功能幾乎是無(wú)懈可擊的，它囊括了全部專業(yè)需求，再加上“通道”，是photoshop無(wú)可比擬。相比較fireworks由于對(duì)網(wǎng)絡(luò)的特殊考慮，大大簡(jiǎn)化了色彩管理過(guò)程，只提供了“遮罩”。photoshop的濾鏡的功能是非常豐富強(qiáng)大的，即使不精通photoshop也可以通過(guò)濾鏡制作出不可思議的藝術(shù)品。雖然fireworks能借用photoshop的濾鏡，但是在運(yùn)用上并不如photoshop那樣順暢，制作的特效遠(yuǎn)遠(yuǎn)不及photoshop。photoshop強(qiáng)大的位圖處理能力、專業(yè)的色彩管理以及長(zhǎng)期形成的各種軟件對(duì)其的支持是其它軟件無(wú)法比擬的。而fire

15、works從出生就是為了網(wǎng)絡(luò)圖形服務(wù)，其輕巧、方便，以及網(wǎng)絡(luò)功能的完善則是獨(dú)一無(wú)二的。1.3 photoshop的應(yīng)用領(lǐng)域photoshop不僅是一個(gè)很好的圖像編輯軟件，它的應(yīng)用領(lǐng)域還很廣泛，在圖像、圖形、文字、視頻、出版各方面都有涉及。photoshop在平面設(shè)計(jì)、修復(fù)照片、廣告攝影、影響創(chuàng)意、藝術(shù)文字、網(wǎng)頁(yè)制作、建筑效果圖后期修復(fù)、繪圖、繪制或處理三維貼圖、婚紗照片設(shè)計(jì)、視覺(jué)創(chuàng)意、圖標(biāo)制作、界面設(shè)計(jì)中都有很廣泛的應(yīng)用。平面設(shè)計(jì)師是photoshop中應(yīng)用最廣泛的領(lǐng)域，無(wú)論是我們正在閱讀的圖書(shū)封面，還是在大街上看到的招貼、海報(bào)，這些都是具有豐富圖像的平面印刷，基本上都需要photoshop軟

16、件對(duì)圖像進(jìn)行處理。修復(fù)照片，利用photoshop強(qiáng)大的圖像修復(fù)功能，可以快速修復(fù)破損的老照片，還可以修復(fù)照片上的斑點(diǎn)，以及人物的紅眼等缺陷。廣告攝影作為一種對(duì)視覺(jué)要求非常嚴(yán)格的工作，其最終成品往往要經(jīng)過(guò)photoshop的修改才能得到滿意的效果。影像創(chuàng)意是photoshop的特長(zhǎng)，通過(guò)photoshop的處理能將不同的對(duì)象組合在一起。利用photoshop可以使文字發(fā)生各種各樣的變化，病利用這些藝術(shù)化處理后的文字為圖像增加效果。隨著網(wǎng)絡(luò)的普及，photoshop成為制作網(wǎng)頁(yè)時(shí)必不可少的圖像處理軟件，更多的人學(xué)習(xí)和掌握photoshop。在制作建筑效果圖時(shí)，人物與配景包括場(chǎng)景的顏色常常需要在p

17、hotoshop中增加并調(diào)整。由于photoshop具有良好的繪畫(huà)和調(diào)色功能，許多插畫(huà)設(shè)計(jì)制作者往往使用鉛筆繪制草圖，然后用photoshop天色的方法來(lái)繪制插畫(huà)。除此以外，近些年來(lái)非常流行的像素畫(huà)也多為設(shè)計(jì)師運(yùn)用photoshop的創(chuàng)作作品。利用photoshop可以制作出在三維軟件中無(wú)法得到的合適的材質(zhì)，起到很好的渲染效果。當(dāng)前很多影樓都使用photoshop設(shè)計(jì)婚紗照片，通過(guò)photoshop的設(shè)計(jì)能是婚紗照片更加唯美，也使得婚紗照片設(shè)計(jì)的處理成為一個(gè)新興的行業(yè)。視覺(jué)創(chuàng)意與設(shè)計(jì)師設(shè)計(jì)藝術(shù)的一個(gè)分支，此類設(shè)計(jì)通常沒(méi)有明顯的商業(yè)目的，但由于它為廣大設(shè)計(jì)愛(ài)好者提供了廣闊的設(shè)計(jì)空間，因此越來(lái)越多

18、的設(shè)計(jì)愛(ài)好者從學(xué)習(xí)photoshop開(kāi)始，病進(jìn)行具有個(gè)人特色與風(fēng)格的視覺(jué)創(chuàng)意。圖標(biāo)制作也是photoshop的一個(gè)應(yīng)用領(lǐng)域，雖然感覺(jué)上有點(diǎn)大材小用，但是用photoshop制作的圖標(biāo)的確非常精美。界面設(shè)計(jì)師一個(gè)新興的領(lǐng)域，已經(jīng)收到越來(lái)越多的軟件企業(yè)以及開(kāi)發(fā)者的重視，雖然暫時(shí)還未成為一種全新職業(yè)，但相信不久一定能夠會(huì)出現(xiàn)專業(yè)的界面設(shè)計(jì)職業(yè)。而photoshop在現(xiàn)實(shí)中海不止這些應(yīng)用，目前在影視后期制作及二維動(dòng)畫(huà)制作中，photoshop也有所應(yīng)用。2 photoshop在網(wǎng)站開(kāi)發(fā)中的應(yīng)用2.1 網(wǎng)站的規(guī)劃在設(shè)計(jì)制作網(wǎng)站之前，首先要給網(wǎng)站一個(gè)準(zhǔn)確的定位。企業(yè)網(wǎng)站、新聞網(wǎng)站、綜合服務(wù)類網(wǎng)站、文化教育

19、類網(wǎng)站、電子商務(wù)類網(wǎng)站、個(gè)人網(wǎng)站，各個(gè)網(wǎng)站的風(fēng)格、細(xì)節(jié)都是不一樣的，所以首先要確定網(wǎng)站類型。以我所在的公司為例，這是個(gè)b2c網(wǎng)站。制作這樣一個(gè)b2c的電子商務(wù)類網(wǎng)站，包括產(chǎn)品展示、用戶管理、購(gòu)物車、新聞發(fā)布、論壇、郵件群發(fā)、團(tuán)購(gòu)?fù)ǖ赖鹊纫恍゜2c必備的功能。之后就可以確定主題與設(shè)計(jì)風(fēng)格，各個(gè)頁(yè)面的風(fēng)格要統(tǒng)一，整體性要強(qiáng)。2.2 內(nèi)容的采集用photoshop設(shè)計(jì)網(wǎng)站初期布局也是需要采集內(nèi)容的，只有了解一個(gè)網(wǎng)站所要包含的內(nèi)容，才能更好的設(shè)計(jì)出合理布局的網(wǎng)站，更準(zhǔn)確的反應(yīng)網(wǎng)站未來(lái)的樣子。采集內(nèi)容必須與標(biāo)題相符，在采集內(nèi)容的過(guò)程中，應(yīng)注重特色。主頁(yè)中的特色應(yīng)該更突出網(wǎng)站的個(gè)性，特別是制作電子商務(wù)類網(wǎng)

20、站要設(shè)置欄目，讓人根據(jù)產(chǎn)品分類，找到所需要的產(chǎn)品，而重點(diǎn)欄目要能直接從首頁(yè)到達(dá)，保證用各種瀏覽器都能看到主頁(yè)最好的效果，這些就需要制作網(wǎng)頁(yè)的人員去考慮了。2.3 photoshop在網(wǎng)站開(kāi)發(fā)中的應(yīng)用以制作我所在的公司的網(wǎng)站首頁(yè)為例。首先要明白運(yùn)用photoshop設(shè)計(jì)的網(wǎng)是各個(gè)網(wǎng)頁(yè)的整體效果呈現(xiàn)。第一次制作對(duì)這一個(gè)空白的頁(yè)面有點(diǎn)無(wú)從下手，后來(lái)找了一個(gè)同類網(wǎng)站截一個(gè)圖，放在最底層作為草圖。網(wǎng)站制作中對(duì)圖片的精準(zhǔn)度要求很重要，圖片過(guò)大會(huì)被壓縮扭曲，導(dǎo)致圖片不清晰，太小會(huì)顯得不美觀。先要拉三根垂直輔助線：左邊線，中間虛線位置，右邊線。 然后建立頭、中、底三個(gè)圖層組。建立圖層組的是很重要的的，以前制作

21、圖片沒(méi)有多少層，因此也不回建立圖層組，但是制作一個(gè)頁(yè)面會(huì)有很多層，如果都放在一起，雜亂無(wú)章，也影響工作效率。制作的時(shí)候最好盡量把文字內(nèi)容也放上去，這是我們公司的一位美工教的，說(shuō)這樣可以更接近網(wǎng)頁(yè)呈現(xiàn)的效果。一個(gè)網(wǎng)頁(yè)由若干部分組成，如logo，標(biāo)題欄，廣告欄，文字等，如果放在同一個(gè)文件里面會(huì)有非常多的圖層，可以先制作好各個(gè)部分，然后組合到一起。在主頁(yè)設(shè)計(jì)時(shí)應(yīng)考慮到： “圖片”適當(dāng)?shù)夭迦刖W(wǎng)頁(yè)中可以起到畫(huà)龍點(diǎn)睛的作用；“文字”與“背景”的合理搭配，這樣可以使文字更加醒目和突出。2.3.1網(wǎng)站logo的設(shè)計(jì)logo設(shè)計(jì)是品牌形象設(shè)計(jì)的核心因素，已經(jīng)成為企業(yè)品牌策劃的熱點(diǎn)。擁有一款優(yōu)秀的logo，可以使

22、品牌視覺(jué)形象如虎添翼，加快企業(yè)的發(fā)展步伐。網(wǎng)站logo的出現(xiàn)和豐富與網(wǎng)絡(luò)發(fā)展緊密相連。網(wǎng)站logo蘊(yùn)含著網(wǎng)絡(luò)文化與計(jì)算機(jī)文化內(nèi)涵。logo設(shè)計(jì)往往是非常復(fù)雜的，空間感，色彩的調(diào)整，各個(gè)元素的協(xié)調(diào)，等等，其工作量絲毫不亞于傳統(tǒng)設(shè)計(jì)，而且只有真正掌握了矛盾與協(xié)調(diào)的統(tǒng)一性，我們才有資格說(shuō)到設(shè)計(jì)，才有資格說(shuō)登堂入室。一個(gè)網(wǎng)站的logo不僅要美觀還要傳達(dá)一定意思，例如一個(gè)電子商務(wù)類網(wǎng)站，從logo上傳達(dá)信息，讓人能更快了解這是個(gè)怎樣的網(wǎng)站，銷售怎樣的東西。我們公司的網(wǎng)站除了這也上的logo以外，還有各個(gè)分域名也有各自的logo。不同頁(yè)面的logo要包含自己的名稱和網(wǎng)址。起初制作的時(shí)候色調(diào)上搭配很不協(xié)調(diào)，

23、放到網(wǎng)頁(yè)中顯得很突兀。而且我們網(wǎng)站的logo是橘紅色的，因?yàn)樽?cè)的關(guān)系是不能亂改的，要想讓其他信息跟橘紅色不沖突，我想只能用橘紅色，但是如果整體呈現(xiàn)這種顏色是很不顯眼的。后來(lái)突然先到后面的文字用黑色，但是部分筆畫(huà)用橘紅色，這樣即沒(méi)有改變?cè)瓉?lái)的logo，又達(dá)到了協(xié)調(diào)的目的。除了網(wǎng)站logo之外，我還要設(shè)計(jì)品牌logo作為按鈕，讓客戶通過(guò)logo連接到相應(yīng)品牌的網(wǎng)站上。logo設(shè)計(jì)要多做多想，只要有想法，都可以先做出來(lái)，看看實(shí)際的效果。（第一次設(shè)計(jì)）（最終效果）2.3.2 標(biāo)題欄的設(shè)計(jì)和制作一個(gè)版面除了頭、底要特別制作外，中間部分應(yīng)該考慮制作三種標(biāo)題樣式：左欄、右欄、通欄，也可以統(tǒng)一風(fēng)格。還要考慮

24、表頭背景、一些常用到的邊框等。一個(gè)b2c網(wǎng)站通常通欄用來(lái)展示熱銷的商品、新上市的商品及推薦的產(chǎn)品。我們公司左欄放置品牌通道，可以通過(guò)品牌通道迅速到達(dá)二級(jí)域名。右欄用于部分商品訊息展示。在制作標(biāo)題欄的時(shí)候，放個(gè)簡(jiǎn)單的小按鈕會(huì)更加增色。制作標(biāo)題欄最好將其設(shè)計(jì)成立體效果。我在制作中經(jīng)常運(yùn)用漸變色的填充已達(dá)到立體的效果。標(biāo)題欄不一定要長(zhǎng)方形的一條，可以再標(biāo)題欄上制作出一個(gè)小關(guān)卡來(lái)防止該欄的名稱，這就看制作中的創(chuàng)意設(shè)計(jì)了。2.3.3圖片的處理網(wǎng)站不能只用文字，那是枯燥乏味的，必須在頁(yè)面上適當(dāng)?shù)靥砑右恍﹫D片，增加可看性。圖片不僅要好看，還要在保證圖片質(zhì)量的情況下盡量縮小圖片的大小，另外，網(wǎng)頁(yè)中最好對(duì)圖片添

25、加注解，當(dāng)圖片的下載速度較慢，在沒(méi)有顯示出來(lái)時(shí)注解有助于讓瀏覽者知道這是關(guān)于什么的圖片，是否需要等待，是否可以單擊，特別考慮到純文本瀏覽者瀏覽的方便，很有必要為圖片添加一個(gè)注解。這是一個(gè)小地方，卻能體現(xiàn)一個(gè)網(wǎng)頁(yè)的制作水準(zhǔn)。根據(jù)網(wǎng)站的需要，圖像處理可能很簡(jiǎn)單，如把一幅圖像裁剪為合適的尺寸或在一幅圖像上疊加文字等 。商品的圖片最重要的是突出商品，因此需要對(duì)圖片明暗進(jìn)行調(diào)整，壓縮圖片的大小，盡量減少對(duì)網(wǎng)頁(yè)傳輸速度的影響；圖像處理也可能很復(fù)雜，如把多個(gè)圖像素材剪接、合并到一幅圖像中。通常處理圖像操作包括的以下幾個(gè)步驟：1.確定圖像主題及構(gòu)圖圖像的設(shè)計(jì)和處理都是圍繞著主題進(jìn)行的，因此必須首先確定主題和目

26、標(biāo)。 如制作品牌介紹的圖片，需要將品牌放在顯眼位置，放上品牌商品。2.確定圖片的尺寸及背景根據(jù)設(shè)計(jì)目標(biāo)，確定圖像的圖紙大小。可以根據(jù)基本圖像素材重采樣或裁剪 、放大到合適的尺寸。背景可以單色填充，漸變填充或者圖案填充。添加了背景的圖片是錦上添花的。背景可以在設(shè)計(jì)好風(fēng)格的時(shí)候設(shè)置，也可以再整天設(shè)計(jì)完成后根據(jù)整體設(shè)計(jì)放置背景。上網(wǎng)的時(shí)候經(jīng)?？吹狡恋膱D片素材，我都會(huì)保存下來(lái)，以備以后設(shè)計(jì)之用。3.獲取基本的數(shù)字圖像素材打開(kāi)需要處理的圖像素材。根據(jù)需要，有可能要準(zhǔn)備多幅圖像素材。圖像尺寸要基本與需要相符或稍大一些。4.素材的處理首先在各基本素材圖像中定義所需素材的選擇區(qū)，把各種素材從基本素材圖像中“

27、摳出”。色彩對(duì)比強(qiáng)烈的圖片可以快速的用魔棒摳出來(lái)，除此之外還有很多方法，如抽出，通道摳圖等。將素材置于基圖的不同圖層當(dāng)中。然后確定各個(gè)素材的大小、顯示位置、顯示順序。這些步驟需要反復(fù)操作才能達(dá)到較理想的構(gòu)圖效果。5.文字的生成如果設(shè)計(jì)中需要繪制一部分圖，或疊加文字，繪制的圖及文字都可分別生成新的圖層，便于對(duì)各圖層進(jìn)行編輯及調(diào)整圖層間的前后關(guān)系，而且各個(gè)圖層在基圖中的位置也可隨意調(diào)整以達(dá)到設(shè)計(jì)要求。 6.各對(duì)象的處理及整體效果調(diào)整首先將暫時(shí)不處理的圖層隱藏，在編輯窗口中僅露出當(dāng)前需編輯的圖層。對(duì)圖層中圖像的處理包括圖像的色調(diào)、邊緣效果及其他一些效果處理等。在圖像處理的過(guò)程中，完成的幾個(gè)較滿意的操

28、作或處理完一個(gè)圖層以后，應(yīng)注意及時(shí)保存，以便在進(jìn)行了不滿意的處理時(shí)，可恢復(fù)到前面的效果，或調(diào)出原有圖層。根據(jù)整體效果，進(jìn)行各部分的細(xì)調(diào) ，以完成最終的圖像作品。7.圖像轉(zhuǎn)換并保存文件圖像處理完成以后 ，應(yīng)保存一個(gè)psd格式的文件，以保存各圖層信息，以便將來(lái)做進(jìn)一步處理。然后，將將處理結(jié)果優(yōu)化保存由于圖片是要應(yīng)用到網(wǎng)站上的。在目前網(wǎng)絡(luò)傳輸速度不是很快的情況下，圖片的大小在很大程度上影響了網(wǎng)頁(yè)的傳輸速度。所以要特別注意圖片的大小，一般要將圖片優(yōu)化為web形式的圖片，優(yōu)化之后的圖片會(huì)小很多。小圖片一般可以控制在6kb以內(nèi)，動(dòng)畫(huà)控制在15kb以內(nèi)，較大的圖片可以“分割”成小圖片。一般來(lái)說(shuō)，圖片顏色較少

29、、色調(diào)平板均勻以及顏色在256色以內(nèi)的最好把它處理成gif圖像格式，如果是一些色彩比較豐富的圖片，最好把它處理成jpg圖像格式，因?yàn)間if和jpg圖像格式各有各的壓縮優(yōu)勢(shì)，應(yīng)根據(jù)具體的圖片來(lái)選擇壓縮比。在制作圖片的過(guò)程中經(jīng)常碰到問(wèn)題。比如我們公司某個(gè)品牌的商品圖片調(diào)整背景色為白色，原圖是灰白的，很多商品都是白色的，因此很難扣取。如果采用通道等方式較為復(fù)雜，所要制作的圖片量較多，會(huì)花費(fèi)很多時(shí)間。因此我通過(guò)容差的調(diào)整利用魔棒扣取，再加上圖層的使用，能較快做好。2.3.4廣告欄的應(yīng)用在我們的生活中已經(jīng)離不開(kāi)廣告，而作為一個(gè)網(wǎng)站，在自己的網(wǎng)站或別人的網(wǎng)站上發(fā)布廣告是吸引客戶很重要的方式，在運(yùn)營(yíng)中廣告也是一個(gè)主要收入。廣告欄的設(shè)置不僅能美化網(wǎng)站，給人以視覺(jué)享受，而且能夠迅速傳達(dá)網(wǎng)站所要表達(dá)的信息。廣告欄形式是多種多樣的，電子商務(wù)類網(wǎng)站，它最吸引人的是它的產(chǎn)品，因此以這些產(chǎn)品制作而成的圖片，再加上適當(dāng)?shù)奈淖中畔?，就能起到廣告的作用。一般網(wǎng)站的廣告欄都有個(gè)后臺(tái)系統(tǒng)，可以將若干圖片組合成flash自動(dòng)播放，這樣能提供給客戶更多的信息。每次有新商品上市，我都會(huì)制作若干張商品圖片，然后放置到廣