網(wǎng)頁設(shè)計-Photoshop網(wǎng)頁效果圖設(shè)計

Photoshop網(wǎng)頁效果圖設(shè)計Photoshop網(wǎng)頁效果圖設(shè)計8/20/20201主要內(nèi)容1網(wǎng)頁logo設(shè)計12網(wǎng)頁導(dǎo)航設(shè)計23主頁欄目設(shè)計34登錄界面設(shè)計45圖像切片制作8/20/2020258/20/202031網(wǎng)頁logo設(shè)計8/20/20204網(wǎng)頁logo內(nèi)容，采用圖形與文字相結(jié)合的方式，使用校標(biāo)，文字和圖片組合而成，色彩采用藍色、紅色和黃色相結(jié)合的方式，體現(xiàn)嚴謹、科技的色彩。1.1

logo內(nèi)容分析8/20/202051.2

Photoshop

CS3界面介紹8/20/202061.3網(wǎng)頁logo的設(shè)計1.新建文件啟動Photoshop

CS3，選擇菜單“文

件|新建”命令，設(shè)置文件大小為1109*1021（寬度*高度），分辨率72像素/英寸（dpi），色彩模式為RGB，背景顏色為白色，文件名稱為網(wǎng)站首頁。在設(shè)計效果圖時，我們需要注意，由于網(wǎng)頁是需要用瀏覽器打開顯示的，需要考慮瀏覽器的菜單、工具欄、滾動條等窗口元素所占據(jù)的空間，因此當(dāng)顯示器的分辨率為800*600像素時，網(wǎng)頁效果圖標(biāo)準尺寸是775*435像素。當(dāng)顯示器的分辨率為1024*768像素時，網(wǎng)頁尺寸為1004*600像素，注意設(shè)置網(wǎng)頁的左右、上下邊距為0。8/20/202071.3網(wǎng)頁logo的設(shè)計2.創(chuàng)建圖層單擊圖層面板右下角的創(chuàng)建新圖層按鈕，創(chuàng)建“圖層一”，雙擊“圖層一”文字，修改為“網(wǎng)頁背景”。注意：當(dāng)前選中哪個圖層，單擊創(chuàng)建新圖層按

鈕后，新圖層就出現(xiàn)在當(dāng)前選中的圖層之上，可以用鼠標(biāo)拖動圖層改變層次順序，或按【CTRL+[】或【CTRL+]】來調(diào)整當(dāng)前圖層的順序。8/20/202081.3網(wǎng)頁logo的設(shè)計

3.創(chuàng)建矩形選區(qū)選擇圖層面板最上方的圖層，單擊創(chuàng)建新圖層圖標(biāo)創(chuàng)建新圖層，雙擊圖層的名字改名為“l(fā)ogo區(qū)域”。使用矩形選框工具，建立矩形選區(qū)填充顏色（藍色），并添加投影效果和光照效果。4.導(dǎo)入校標(biāo)圖片,去除背景，增加陰影和鏡頭光暈效果5.導(dǎo)入bj3.jpg和學(xué)校圖片.JPG，將圖片裁剪到適當(dāng)尺寸，放入網(wǎng)站的頭部，調(diào)整圖片的不透明度和顏色，使其與整個藍色背景融合在一起8/20/20209設(shè)置字符字體設(shè)置字符字號設(shè)置字型設(shè)置行間距，即每行文字間的間隔。設(shè)置水平縮放設(shè)置垂直縮放設(shè)置字符的比例間距設(shè)置字符的字間距設(shè)置基線偏移量設(shè)置字符寬度設(shè)置字符顏色設(shè)置文字輸入樣式語言設(shè)置

防鋸齒功能設(shè)置6.增加文字使用文本工具，輸入網(wǎng)站名稱“數(shù)學(xué)與計算機科學(xué)學(xué)院College

OfMathematics

And

Computer

Science”，設(shè)置顏色為黃色，增加投影、外發(fā)光、內(nèi)發(fā)光、斜面和浮雕、顏色疊加、光澤、和描邊等效果8/20/2020102網(wǎng)頁導(dǎo)航設(shè)計8/20/202011為了突出網(wǎng)頁導(dǎo)航的功能，將導(dǎo)航文字安排在矩形的

藍色背景之上，并對矩形背景做加陰影，浮雕效果處理，以

使導(dǎo)航顯得更加明顯，文字采用白色宋體，在背景的襯托下，顯得不是那么生硬。2.1導(dǎo)航背景的設(shè)計1.創(chuàng)建矩形選擇矩形工具右側(cè)下方的三角形，選擇矩形工具8/20/2020122.1導(dǎo)航背景的設(shè)計3.填充漸變顏色選擇漸變工具，設(shè)置漸變顏色帶為左側(cè)（R：104，G：179，B：221），右側(cè)（R：38，G：108，B：178），從選取左下角向右上角拖曳鼠標(biāo)，填充藍色的漸變，按【CTRL+D】可以取消當(dāng)前區(qū)域的選擇，后面會經(jīng)常用到這一快捷鍵。8/20/2020132.2導(dǎo)航文字的設(shè)計使用文字工具，設(shè)置文字字體為宋體，大小為17點，顏色為白色，輸入導(dǎo)航文字。8/20/2020143主頁欄目設(shè)計1.主頁布局分三個區(qū)域上方區(qū)域為三個內(nèi)

容，用漸變矩形框區(qū)

分；中間為圖片展覽，用兩條分隔線標(biāo)識；

下方也有三個內(nèi)容，

用三個矩形框區(qū)分8/20/2020151.素材的選擇處理打開圖片素材，使用矩形選擇工具，選擇圖片的主體，選擇菜單“編輯|復(fù)制【CTRT+C】”，選擇“網(wǎng)頁背景”圖層，單擊創(chuàng)建新圖層圖標(biāo)，在“網(wǎng)頁背景”圖層上面創(chuàng)建新圖層，改名為“圖片”，選擇菜單“編輯|粘貼【CTRL+V】”。注意：快捷方法是，使用移動工具直接將選中的圖形拖動到目標(biāo)效果圖中，Photoshop會自動新建圖層放置該圖形。3.1網(wǎng)頁主圖的設(shè)計8/20/2020163.1網(wǎng)頁主圖的設(shè)計2.欄目圖標(biāo)和文字處理選擇合適圖標(biāo)，做去背景處理導(dǎo)入背景圖案，復(fù)制圖層，放到合適位置上8/20/2020173.2網(wǎng)頁底部的設(shè)計選擇漸變工具，設(shè)置顏色從左至右依次為（R：229，G：246，B：254），（R：87，G：195，B：241），（R：32，G：112，B：172），不透明度從左至右依次為10%，80%，100%，注意漸變色帶上面的標(biāo)志為不透明度設(shè)置，下面的標(biāo)志為顏色設(shè)置，單擊標(biāo)志，再改變不透明度或顏色，從上向下填充漸變顏色，按【CTRL+D】取消選區(qū)。8/20/2020183.2網(wǎng)頁底部的設(shè)計2.文字信息的輸入使用文本工具，輸入版權(quán)信息，顏色為白色，對齊方式為右對齊，上面字體大小為12，下面字體大小為10，行間距為18，并添加“描邊”圖層樣式。8/20/202019登陸界面設(shè)計8/20/202020步驟：處理背景圖片，去除無關(guān)內(nèi)容導(dǎo)入校標(biāo)和學(xué)校風(fēng)景圖，并處理增加文字內(nèi)容，并增加合適效果Photoshop的圖像修補工具8/20/2020215網(wǎng)頁圖像切片制作8/20/202022圖像切片的作用在PhotoShop中設(shè)計好的網(wǎng)頁效果圖，需要導(dǎo)入到Dreamweaver中進行

排版布局。在導(dǎo)入到Dreamweaver之前，可以使用PhotoShop或Fireworks對效果圖進行切片和優(yōu)化，然后才能夠把優(yōu)化好的切片輸出到Dreamweaver的站點中進行布局。制作網(wǎng)頁圖像切片的目的是為了獲得圖片素材并對圖片進行優(yōu)

化，使得整個圖片分為多個不同的小圖片分開下載，這樣下載的時間就大大

地縮短了，從而提高網(wǎng)頁加載的速度，能夠通過網(wǎng)頁設(shè)計軟件實現(xiàn)效果的部

分，就不需要切片，而必須用圖像的地方，則一定要切片。另外，通過切片

可以導(dǎo)出不同類型的圖片，從而有效的減小圖片的大小，再有就是切片之后

的圖片便于設(shè)置超級鏈接。制作網(wǎng)頁切片的軟件主要Photoshop和Fireworks，我們采取Photoshop進行切片的制作。切片步驟8/20/202023打開PS

CS3軟件導(dǎo)入所要切片的圖右擊工具欄中的切片工具，選擇切片選擇工具右擊圖上的任何位置，選擇劃分切片

填寫幾行幾列。水平劃分為M行，垂直劃分為N列。點擊確定。此為平均切片，還有用戶切片，自定義的。這里暫時不說。如3行3列，即圖被分成了九片點擊——文件——保存為WEB所用格式

定好文件名，選擇保存路徑，得到一個HTML文件及此

HTML中應(yīng)用到的圖片即images文件夾。文件夾中保存有這圖的小片，共九片。圖像切片的制作1.打開效果圖文件打開效果圖文件“網(wǎng)站首頁.PNG”，使用切片工具進行圖片切片的制作，可以放大圖形，選擇部分選定工具進行圖片邊界的調(diào)整，如圖所示。8/20/2020245.4圖像切片的導(dǎo)出1.全部切片的導(dǎo)出選擇菜單“文件”命令，選存儲為HTML和圖

像，單擊保存按鈕導(dǎo)出網(wǎng)頁文件和圖像切片，如圖所示。8/20/202025練習(xí)1：制作登陸界面利用所學(xué)知識，結(jié)合所給的素材，按要求合成“登陸界面”效果，效果圖如下。8/20/202026步驟：處理背景圖片，去除無關(guān)內(nèi)容導(dǎo)入校標(biāo)和學(xué)校風(fēng)景圖，并處理增加文字內(nèi)容，并增加合適效果8/20/202027練習(xí)2：制作學(xué)校網(wǎng)站首頁logo要求：利用所給素材制作首頁logo新建文件，設(shè)置文件大小為1109*1021（寬度*高度），分辨率72像素/ 英寸（dpi），色彩模式為RGB，背景顏色為白色，文件名稱為網(wǎng)站

首頁。創(chuàng)建矩形，大小1109*1713、導(dǎo)入圖片“校標(biāo)”.JPG，去除背景，添加新圖層，圖層命名為校標(biāo)，將校標(biāo)復(fù)制入新圖層，并增加陰影和鏡頭光暈效果。4、導(dǎo)入圖片“學(xué)校圖片”.JPG和bj3.jpg，添加新圖層，圖層命名為學(xué)校圖片和背景3，將圖片復(fù)制入新圖層，并做相應(yīng)處理。5、選擇文字工具，使用文本工具，輸入網(wǎng)站名稱“數(shù)學(xué)與計算機科學(xué)學(xué)院College

Of

Mathematics

And