Photoshop在網(wǎng)頁制作中的應(yīng)用-吳明宇.doc

.畢業(yè)設(shè)計(jì)論文Photoshop在網(wǎng)頁設(shè)計(jì)中的應(yīng)用 作者姓名： 吳明宇 入學(xué)年月： 2011年9月 學(xué)科專業(yè)： 計(jì)算機(jī) 應(yīng)用技術(shù) 指導(dǎo)老師： 梁膠東 2015 年 09 月 09 日摘要隨著計(jì)算機(jī)技術(shù)的發(fā)展，圖像處理以滲透我們的學(xué)習(xí)、生活和工作等各個(gè)方面。圖像以其視覺上的沖擊力，已成為了現(xiàn)代社會(huì)傳遞信息的首選。不論是在高級(jí)文化中還是在技工文化中，Photoshop課程都是非常重要的，Photoshop是圖像處理軟件中一款比較優(yōu)秀的軟件，我們運(yùn)用它可以隨心所欲的制作出符合自己意圖的各種圖片，隨著電腦的大眾化普及，越來越多的人們開始接觸電腦，接觸圖像處理軟件，并利用Photoshop等軟件制作具有自己個(gè)性的桌面，電子相冊(cè)等，來豐富自己的業(yè)余生活。在制作各種有特色的圖片的同時(shí)，需要增加各種點(diǎn)綴來美化自己的圖片。本文利用了Adobe公司的Photoshop軟件，對(duì)計(jì)算機(jī)合成文件進(jìn)行了一些嘗試性的設(shè)計(jì)，設(shè)計(jì)出一幅圖，對(duì)Photoshop中一些相關(guān)的工具進(jìn)行了詳細(xì)的講解。概述Photoshop的簡(jiǎn)介Adobe Photoshop，簡(jiǎn)稱“PS”（其程序圖標(biāo)便是“PS” ）是一個(gè)由Adobe Systems開發(fā)和發(fā)行的圖像處理軟件。多數(shù)人對(duì)于Photoshop的了解僅限于“一個(gè)很好的圖像編輯軟件”，并不知道它的諸多應(yīng)用，實(shí)際上，Photoshop的應(yīng)用領(lǐng)域很廣泛的，在圖像、圖形、文字、視頻、出版等各方面都有涉及。Photoshop掌握繪畫的基礎(chǔ)理論，學(xué)習(xí)色彩原理和選取顏色、范圍選取、工具與繪圖、圖像編輯、控制圖像色彩和色調(diào)、使用圖層、路徑、通道和蒙板的應(yīng)用、濾鏡等。Photoshop的平面設(shè)計(jì)Photoshop在平面設(shè)計(jì)中扮演著極其重要的角色，它廣泛應(yīng)用于我們?nèi)粘Ｉ詈蛯W(xué)習(xí)工作的各個(gè)方面，首先淺談一下Photoshop平面設(shè)計(jì)軟件具有特點(diǎn)和常用的設(shè)計(jì)原則。設(shè)計(jì)特點(diǎn)：根據(jù)Photoshop的功能和作用，總結(jié)其明顯的特點(diǎn)。用計(jì)算機(jī)代替?zhèn)鹘y(tǒng)的設(shè)計(jì)工具：現(xiàn)代平面設(shè)計(jì)以計(jì)算機(jī)作為主要?jiǎng)?chuàng)作工具，利用 Photoshop設(shè)計(jì)軟件提供的強(qiáng)大的工具和菜單功能，同時(shí)結(jié)合了各種傳統(tǒng)繪畫工具的特點(diǎn)，又能體現(xiàn)多種新的藝術(shù)風(fēng)格，使創(chuàng)作技法不斷推陳出新。信息處理能力強(qiáng)大、快速：Photoshop 軟件在文字錄入、圖像掃描、圖像存儲(chǔ)、圖像編輯、特效處理等方面具有超強(qiáng)的處理能力，同時(shí)在圖文混排圖像輸出等方面的操作方便快捷。 設(shè)計(jì)效果所見即所得，修改快捷、方便。設(shè)計(jì)原則：Phtoshop 現(xiàn)代平面設(shè)計(jì)的原則是根據(jù)平面設(shè)計(jì)的性質(zhì)和目的，針對(duì)平面設(shè)計(jì)的特點(diǎn)進(jìn)行制作，它一般遵循的原則如下。整體與局部相統(tǒng)一原則：Phtoshop平面設(shè)計(jì)的根本目的是通過平面設(shè)計(jì)作品為人們傳播直觀的信息，使人們獲得美感享受的同時(shí)獲得大量直觀的信息，充分表達(dá)用戶要求的主題，設(shè)計(jì)師通過完美的平面設(shè)計(jì)形式表達(dá)符合主題的思想內(nèi)容，這也是平面設(shè)計(jì)的根基，這就要求設(shè)計(jì)師在設(shè)計(jì)中強(qiáng)化整體布局，合理突出局部，使整體與局部合理地統(tǒng)一，使作品取得獨(dú)特的社會(huì)與藝術(shù)價(jià)值，整體與局部合理地統(tǒng)一，就是設(shè)計(jì)師在平面設(shè)計(jì)中要強(qiáng)化版面各種排版要素在版面中結(jié)構(gòu)與色彩具有相互關(guān)聯(lián)性，通過版面的文圖間的整體組合與協(xié)調(diào)性的編排，使版面更具秩序美、條理美，從而獲得更好的視覺效果，力求作品的盡善盡美。1.1網(wǎng)站Logo圖標(biāo)的制作Logo圖標(biāo)是一個(gè)網(wǎng)站的形象標(biāo)志。在當(dāng)今品牌時(shí)代,一個(gè)優(yōu)秀的Logo圖標(biāo),不但能點(diǎn)綴界面,而且還可以加深瀏覽者對(duì)該網(wǎng)站的印象,提高網(wǎng)站的知名度。Photoshop提供了矢量圖繪制功能。使用鋼筆(或形狀)工具,可直接繪制出矢量線條;也可以首先建立選區(qū),再通過路徑調(diào)板上的“將選區(qū)轉(zhuǎn)化為路徑”按鈕,實(shí)現(xiàn)矢量線條的繪制。然后,通過路徑調(diào)板上的“填充路徑”按鈕,為路徑填充上顏色。最終實(shí)現(xiàn)矢量圖形的繪制。使用這種方法制作出的Logo圖標(biāo),具有任意放大不失真的優(yōu)點(diǎn)。1.2網(wǎng)頁頂部圖片制作網(wǎng)頁頂部圖片一般位于網(wǎng)頁的頂端,同時(shí)包含了網(wǎng)站Logo圖標(biāo)和網(wǎng)站名稱等重要信息。此圖片的制作工作,在網(wǎng)頁設(shè)計(jì)中占有舉足輕重的地位。在Photoshop環(huán)境下,先把網(wǎng)站Logo圖標(biāo)的圖像復(fù)制到頂部圖文件中,并將其調(diào)至背景層上方;然后,在圖層調(diào)板上按“添加圖層蒙版”按鈕,為該層添加圖層蒙版;再利用畫筆或漸變工具在圖層蒙版上處理,使兩層圖片實(shí)現(xiàn)“無縫”銜接。最后利用文字工具添加網(wǎng)站標(biāo)題;將文件保存成JPG文件完成頂部圖片制作的同時(shí),將文件另存為PSD文件,保留各圖層的圖層信息,以便將來對(duì)頂部圖片的再編輯。1.3網(wǎng)頁背景圖片的制作網(wǎng)頁背景圖片是網(wǎng)頁制作過程中不可缺少的基本元素之一,是網(wǎng)頁美工的基礎(chǔ)。GIF和JPEG是網(wǎng)頁制作中最常見的兩種圖像文件格式。在Photoshop環(huán)境下,可通過“圖像/模式/.”命令,將圖像文件轉(zhuǎn)換成相應(yīng)的顏色模式;然后,在保存文件時(shí)的“格式”選擇項(xiàng)中,選取相應(yīng)的文件格式進(jìn)行保存,即可實(shí)現(xiàn)兩種文件格式間的相互轉(zhuǎn)換。同時(shí),GIF文件還支持圖片背景透明效果。2、網(wǎng)頁中的動(dòng)畫制作在網(wǎng)頁制作過程中,動(dòng)畫制作和圖片制作占有著同樣重要的地位。精美的動(dòng)畫不但能美化網(wǎng)頁,而且還可以增加網(wǎng)頁的信息容量。Photoshop所整合的Imag eReady軟件包,可以方便地制作出GIF和SWF動(dòng)畫。其中GIF動(dòng)畫具有文件體積小、IE支持穩(wěn)定、網(wǎng)絡(luò)傳輸速度快等優(yōu)點(diǎn),被廣泛應(yīng)用于網(wǎng)頁制作。下面通過一個(gè)簡(jiǎn)單的動(dòng)畫制作實(shí)例,介紹如何利用Imag eReady來創(chuàng)建動(dòng)畫。在ImageReady環(huán)境下打開兩張GIF格式的素材圖片(素材1是睜著眼睛的人物;素材2是閉著眼睛的人物,其它部位完全相同),并通過“窗口/動(dòng)畫”打開動(dòng)畫調(diào)板。把素材2文件中的人物圖層,復(fù)制到素材1文件中,并將該圖層命名為“圖層2”;在動(dòng)畫調(diào)板上點(diǎn)擊“復(fù)制當(dāng)前幀”按鈕,復(fù)制一個(gè)動(dòng)畫幀;在動(dòng)畫調(diào)板中選中第1幀,在圖層調(diào)板中隱藏“圖層2”的顯示,并在第1幀下方的“選擇幀延遲時(shí)間”設(shè)置為“1秒”;然后選擇第2幀,在圖層調(diào)板中將“圖層2”顯示出來;在動(dòng)畫調(diào)板上,設(shè)置循環(huán)次數(shù)為“一直有效”;點(diǎn)擊動(dòng)畫調(diào)板上的“播放/停止”按鈕,即可預(yù)覽動(dòng)畫效果(每隔1秒鐘,人物眨一下眼睛);最后,執(zhí)行菜單“文件/將優(yōu)化結(jié)果存儲(chǔ)為”命令,打開“將優(yōu)化結(jié)果存儲(chǔ)為”對(duì)話框,將“保存類型”設(shè)為“*.gif”,點(diǎn)擊“保存”,即可生成GIF動(dòng)畫。利用Photoshop制作SWF動(dòng)畫,與上述的制作GIF動(dòng)畫十分相似,僅在保存文件時(shí)有所不同，預(yù)覽動(dòng)畫后,執(zhí)行菜單“文件/導(dǎo)出/MacromediaRFlashTMSWF”,即可生成SWF動(dòng)畫。3、設(shè)計(jì)簡(jiǎn)單WEB頁面設(shè)計(jì)WEB頁的軟件有很多,但是大部分的專業(yè)設(shè)計(jì)師還是喜歡使用Photoshop來進(jìn)行初稿設(shè)計(jì)。因?yàn)樵赑hotoshop環(huán)境中,進(jìn)行彩色搭配十分方便、直觀,將其用于網(wǎng)頁制作的初稿設(shè)計(jì)上是極為合理。首先用Photoshop把整個(gè)頁面的大體輪廓設(shè)計(jì)出來,可保留各圖層信息,因?yàn)樵诶们衅ぞ哌M(jìn)行切割圖片時(shí),可以基于圖層進(jìn)行切割。相應(yīng)的就產(chǎn)生了流行于網(wǎng)絡(luò)的PSD網(wǎng)頁模板,這種網(wǎng)頁模板大多是利用Photoshop來進(jìn)行設(shè)計(jì)的。大體輪廓做好之后,利用切片工具和切片選擇工具,對(duì)圖像進(jìn)行分割,將文件分割成若干個(gè)小的圖片組切割圖像的原因是在瀏覽器中,一組小幅圖像比單個(gè)大幅圖像下載起來要快速得多。運(yùn)行ImageReady環(huán)境,創(chuàng)建動(dòng)畫效果,使部分圖像動(dòng)起來。同時(shí)創(chuàng)建網(wǎng)站地圖定義交互區(qū)域,以及翻轉(zhuǎn)圖片等。最后將文件進(jìn)行優(yōu)化,并存儲(chǔ)為網(wǎng)頁文件格式。利用Photoshop設(shè)計(jì)WEB頁面時(shí),也可以通過第三方的軟件來配合設(shè)計(jì)。如常見的網(wǎng)頁制作軟件Dreamweaver、FrontPage等。首先利用Photoshop設(shè)計(jì)出大體輪廓,并進(jìn)行切片切割,保存成網(wǎng)頁文件;然后再利用第三方軟件來對(duì)網(wǎng)頁文件進(jìn)行后期處理、優(yōu)化,這種做法也被廣大的網(wǎng)頁設(shè)計(jì)人員所采用。4、網(wǎng)站改版網(wǎng)站改版可以保持網(wǎng)站的新鮮感,吸引更多的瀏覽者。而網(wǎng)站中往往存在著大量的圖像文件(如頂部圖片、背景圖片、GIF動(dòng)畫圖像等),增加了網(wǎng)站改版的難度。利用Photoshop提供的圖層信息、動(dòng)作調(diào)板,以及任務(wù)自動(dòng)化處理等功能,可以簡(jiǎn)化操作、提高效率。4.1使用圖層信息在網(wǎng)頁圖像制作過程中,合理保存圖層信息可以簡(jiǎn)化圖像文件的再編輯。在生成網(wǎng)頁素材圖像文件的同時(shí),可通過菜單“文件/存儲(chǔ)為”命令,打開“存儲(chǔ)為”對(duì)話框,在“格式”下拉項(xiàng)中選擇“Photoshop(*.psd)”格式,進(jìn)行保存。再編輯圖像文件時(shí),可以打開相應(yīng)的PSD格式文件,可有針對(duì)性的對(duì)相應(yīng)圖層進(jìn)行編輯。4.2使用動(dòng)作調(diào)板動(dòng)作可將用戶的操作步驟和設(shè)置進(jìn)行記錄,在對(duì)其它圖像文件進(jìn)行相同操作時(shí),只需單擊這個(gè)動(dòng)作按鈕,就可以完成同樣的操作。打開圖像文件,并通過“窗口”顯示出動(dòng)作調(diào)板;單擊動(dòng)作調(diào)板上的“創(chuàng)建新動(dòng)作”按鈕,填充相應(yīng)的“名稱”和“序列”后,單擊“記錄”按鈕,即可開始錄制新動(dòng)作;然后開始對(duì)當(dāng)前圖像文件進(jìn)行編輯,編輯完成后,單擊動(dòng)作調(diào)板上的“停止/播放記錄”按鈕,這樣就完成了新動(dòng)作的創(chuàng)建。再打開其它圖像文件,在動(dòng)作調(diào)板上選擇相應(yīng)的動(dòng)作,單擊“播放動(dòng)作”按鈕,就可以對(duì)該圖像文件進(jìn)行相同的操作。4.3使用自動(dòng)化批處理命令自動(dòng)化批處理命令可以對(duì)文件夾或子文件夾中的所有圖像文件進(jìn)行播放動(dòng)作。主要用于對(duì)多個(gè)圖像文件進(jìn)行相同操作,從而簡(jiǎn)化繁重的重復(fù)性工作。首先將需要處理的圖像文件放至同一文件夾(源文件夾)中,并新建一個(gè)文件夾(目標(biāo)文件夾)用于存放目標(biāo)文件。打開動(dòng)作調(diào)板,選擇相應(yīng)的動(dòng)作;執(zhí)行菜單“文件/自動(dòng)/批處理”命令,打開“批處理”對(duì)話框,將“源”設(shè)置為“文件夾”,并單擊“選取”瀏覽選取源文件夾;再將“目的”設(shè)置為“文件夾”,單擊“選取”瀏覽選取目標(biāo)文件夾;單擊“好”按鈕,Photoshop即可自動(dòng)完成批處理工作。5、創(chuàng)建WEB照片畫廊在Photoshop環(huán)境下,用戶可以直接創(chuàng)建網(wǎng)頁形式的WEB照片畫廊。它有個(gè)包含縮略圖片的主頁和若干包含全尺寸圖像的畫廊頁,通過鏈接可以方便地訪問各個(gè)頁面。執(zhí)行菜單“文件/自動(dòng)/WEB照片畫廊”命令,打開“WEB”照片畫廊”對(duì)話框,選擇一種網(wǎng)站的“樣式”,并可選擇填寫“電子郵件地址”信結(jié)束語息。選擇源圖像項(xiàng)中的“使用”項(xiàng)為“文件夾”,并“瀏覽”指定圖像文件夾;然后,設(shè)置“目的”按鈕選擇網(wǎng)頁的存放位置;單擊“好”按鈕,即可完成WEB照片畫廊的制作。Photoshop在網(wǎng)頁制作中的應(yīng)用還有