商務(wù)網(wǎng)頁(yè)實(shí)例項(xiàng)目07課件

1、 內(nèi)容提要Photoshop是目前非常流行的一款平面設(shè)計(jì)軟件，在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域里Photoshop是不可缺少的一個(gè)設(shè)計(jì)軟件，一個(gè)好的網(wǎng)頁(yè)創(chuàng)意離不開(kāi)圖片，只要涉及到圖像，就會(huì)用到圖像處理軟件，Photoshop理所當(dāng)然成為網(wǎng)頁(yè)設(shè)計(jì)中的一員。使用Photoshop不僅可以對(duì)圖像進(jìn)行精確的加工，還可以將圖像制作成網(wǎng)頁(yè)動(dòng)畫(huà)上傳到網(wǎng)頁(yè)中。本項(xiàng)目主要介紹Photoshop CS5的主要功能、界面組成，學(xué)習(xí)利用Photoshop CS5來(lái)進(jìn)行網(wǎng)頁(yè)效果設(shè)計(jì)和網(wǎng)頁(yè)圖像元素的處理和制作。1Photoshop CS5概述Photoshop是Adobe公司旗下最為著名的圖像處理軟件之一，也是圖像處理界最為著名的軟件。P

2、hotoshop從誕生到現(xiàn)在，已經(jīng)走過(guò)了二十多年。在這二十多年里，歷經(jīng)了許多版本的更迭。從最早的1.0，到CS5，其功能越來(lái)越強(qiáng)大、越來(lái)越完善，用戶界面也越來(lái)越友好。本書(shū)介紹的Photoshop的版本為Photoshop CS5。2010年4月12日北京時(shí)間23時(shí)，Adobe（奧多比）公司正式發(fā)布Adobe Creative Suite 5設(shè)計(jì)套裝軟件。Adobe CS5總共有15個(gè)獨(dú)立程序和相關(guān)技術(shù)，五種不同的組合構(gòu)成了五個(gè)不同的組合版本，分別是大師典藏版、設(shè)計(jì)高級(jí)版、設(shè)計(jì)標(biāo)準(zhǔn)版、網(wǎng)絡(luò)高級(jí)版、產(chǎn)品高級(jí)版。我們最熟悉的Photoshop CS5就在其中，Photoshop CS5有標(biāo)準(zhǔn)版和擴(kuò)展

3、版兩個(gè)版本。Photoshop CS5標(biāo)準(zhǔn)版適合攝影師以及印刷設(shè)計(jì)人員使用，Photoshop CS5擴(kuò)展版除了包含標(biāo)準(zhǔn)版的功能外還添加了用于創(chuàng)建和編輯3D和基于動(dòng)畫(huà)內(nèi)容的突破性工具。活動(dòng)1 認(rèn)識(shí)Photoshop CS5 2Photoshop CS5的特點(diǎn)與新增功能Photoshop CS5新增功能如下（摘自Photoshop CS5幫助文檔）：使用實(shí)時(shí)工作區(qū)輕松進(jìn)行界面管理。自動(dòng)存儲(chǔ)反映設(shè)計(jì)者的工作流程、針對(duì)特定任務(wù)的工作區(qū)，并且在工作區(qū)之間快速切換。智能選區(qū)技術(shù)。更快且更準(zhǔn)確地從背景中抽出主體，從而創(chuàng)建逼真的復(fù)合圖像。內(nèi)容識(shí)別填充和修復(fù)。輕松刪除圖像元素并用其他內(nèi)容替換，與其周邊環(huán)境天衣

4、無(wú)縫地融合在一起。1）HDR Pro。應(yīng)用更強(qiáng)大的色調(diào)映射功能，從而創(chuàng)建從逼真照片到超現(xiàn)實(shí)照片的高動(dòng)態(tài)范圍圖像?；蛘咄ㄟ^(guò)HDR色調(diào)調(diào)整，將一種HDR外觀應(yīng)用于多個(gè)標(biāo)準(zhǔn)圖像。2）非凡的繪畫(huà)效果。利用逼真的繪畫(huà)效果，混合畫(huà)布上的顏色并模擬硬毛刷以產(chǎn)生傳統(tǒng)繪畫(huà)介質(zhì)的媲美效果。3）操控變形。徹底變換特定的圖像區(qū)域，同時(shí)固定其他圖像區(qū)域。 4）自動(dòng)進(jìn)行鏡頭校正。使用已安裝的常見(jiàn)鏡頭的配置文件快速修復(fù)扭曲問(wèn)題，或自定其他型號(hào)的配置文件。5）使用3D凸紋輕松實(shí)現(xiàn)凸出。將2D文本和圖稿轉(zhuǎn)換為3D對(duì)象，然后凸出并膨脹其表面。增強(qiáng)3D性能、工作流程和材質(zhì)。使用專用的3D首選項(xiàng)快速優(yōu)化性能。能夠更快地預(yù)覽，并使用改

5、進(jìn)的Adobe Ray Tracer引擎進(jìn)行渲染。6）簡(jiǎn)化的創(chuàng)意審閱。CS Review是一種可加速審閱流程的聯(lián)機(jī)服務(wù)，通過(guò)它可以與同事進(jìn)行協(xié)作并快速獲取用戶反饋。7）集成的介質(zhì)管理。利用Adobe Bridge CS5中經(jīng)過(guò)改進(jìn)的水印、Web畫(huà)廊和批處理。使用Mini Bridge面板直接在Photoshop中訪問(wèn)資源。8）RAW處理的尖端技術(shù)。在保留顏色和細(xì)節(jié)的同時(shí)刪除高ISO圖像中的雜色。添加創(chuàng)意效果，如膠片顆粒和剪裁后暈影?；蛘呤褂米畹统潭鹊牟蛔匀桓芯_地銳化圖像。 9）新增GPU加速功能。充分利用增強(qiáng)的硬件處理能力，新增畫(huà)筆預(yù)覽、吸管工具的顏色取樣器環(huán)以及裁剪工具的“三等分”網(wǎng)格等功

6、能。10）通過(guò)跨平臺(tái)的64位支持實(shí)現(xiàn)更快的性能。在64位版本的Mac OS和Windows上完成日常成像任務(wù)的速度至少要快10%。3系統(tǒng)硬件配置要求Photoshop CS5配置要求如下。1）Intel Pentium 4或AMD Athlon 64處理器。2）Microsoft Windows XP（帶有Service Pack 3）；Windows Vista Home Premium、Business、Ultimate或Enterprise（帶有Service Pack 1，推薦Service Pack 2）；或Windows 7。3）1GB內(nèi)存。4）1GB可用硬盤(pán)空間用于安裝；安裝過(guò)程

7、中需要額外的可用空間（無(wú)法安裝在基于閃存的可移動(dòng)存儲(chǔ)設(shè)備上）。5）1024768像素屏幕（推薦1280800像素），配備符合條件的硬件加速OpenGL圖形卡、16位顏色和256MB VRAM。 6）某些GPU加速功能需要Shader Model 3.0和OpenGL 2.0圖形支持 。7）DVD-ROM驅(qū)動(dòng)器。8）多媒體功能需要QuickTime 7.6.2軟件。9）在線服務(wù)需要寬帶Internet連接。4認(rèn)識(shí)Photoshop CS5界面Photoshop CS5安裝完畢后，會(huì)自動(dòng)在“開(kāi)始”按鈕的“程序”菜單中添加啟動(dòng)項(xiàng)，同時(shí)也會(huì)在桌面上創(chuàng)建Photoshop CS5快捷方式圖標(biāo)。單擊“程序

8、”菜單中相應(yīng)的啟動(dòng)項(xiàng)或雙擊桌面快捷方式，都可以啟動(dòng)Photoshop CS5，如圖7-1、圖7-2所示。 1Photoshop CS5基本操作（1）文件新建、保存與關(guān)閉1）新建文件。啟動(dòng)Photoshop CS5后，打開(kāi)“文件”菜單，選擇“新建”選項(xiàng)新建一個(gè)文件。參數(shù)設(shè)置如圖7-3所示，寬度1004像素、高度800像素，分辨率72像素/in，顏色模式為RGB顏色8位。然后單擊“確定”按鈕?；顒?dòng)2 使用Photoshop CS5制作頁(yè)面效果圖 2）保存文件。完成設(shè)計(jì)后，一般需要對(duì)設(shè)計(jì)成果進(jìn)行保存。打開(kāi)“文件”菜單，選擇“另存為”選項(xiàng)，出現(xiàn)如圖7-4所示的“存儲(chǔ)為”對(duì)話框。選擇文件存儲(chǔ)的位置，并且

9、給文件命名，然后單擊“保存”按鈕。文件就被存儲(chǔ)在本地磁盤(pán)上了。 3）關(guān)閉文件。需要關(guān)閉一個(gè)文件時(shí)可以單擊工作區(qū)的關(guān)閉按鈕或者按組合鍵可以關(guān)閉當(dāng)前文件。需要退出整個(gè)Photoshop軟件時(shí)單擊界面右上角的關(guān)閉按鈕或按組合鍵即可退出軟件。Photoshop CS5界面，如圖7-5所示。 （2）工具箱的顯示與隱藏每個(gè)設(shè)計(jì)者的設(shè)計(jì)習(xí)慣不一樣，可以在Photoshop CS5中設(shè)定自己喜歡的界面布局效果。通過(guò)單擊標(biāo)題欄（見(jiàn)圖7-6）上的快速界面控制按鈕，可以將界面快速切換為基本功能界面布局、設(shè)計(jì)界面布局、繪畫(huà)界面布局、攝影界面布局，如圖7-7圖7-10所示。 左側(cè)的工具箱也可以根據(jù)個(gè)人喜好進(jìn)行調(diào)整，單擊

10、箭頭 圖標(biāo)可以對(duì)工具箱進(jìn)行單列和雙列布局模式切換。右側(cè)的功能面板同樣可以通過(guò)單擊箭頭圖標(biāo)進(jìn)行展開(kāi)和收縮。按鍵可以快速隱藏和顯示工具箱和右側(cè)的功能面板。按組合鍵只能快速隱藏和顯示右側(cè)功能面板，如圖7-11、圖7-12所示。 2利用Photoshop CS5設(shè)計(jì)頁(yè)面（1）活動(dòng)分析用Photoshop設(shè)計(jì)網(wǎng)頁(yè)是目前網(wǎng)站制作的常用方法。先用Photoshop做出樣圖，再進(jìn)行細(xì)化和修改，最后切圖，就可以生成網(wǎng)頁(yè)。（2）知識(shí)要點(diǎn) Photoshop的基本操作。 掌握Photoshop設(shè)計(jì)網(wǎng)頁(yè)的一個(gè)技巧和方法。（3）動(dòng)手操作步驟1 使用Photoshop的工具繪圖1）新建文檔大小為寬1004像素、高800像

11、素、分辨率72像素/in、顏色模式RGB顏色8位、背景顏色白色。2）進(jìn)入圖層面板，單擊創(chuàng)建新組 ，對(duì)新組命名為head。 3）在head組下新建圖層，命名為搜索框。4）選擇工具面板中矩形選區(qū)工具 ，在工具欄上設(shè)置為路徑模式 ，設(shè)置固定大小為寬300px、高25px。 5）在頁(yè)面上單擊鼠標(biāo)。一個(gè)高25px、寬300px的路徑就畫(huà)好了，如圖7-13所示。6）進(jìn)入路徑面板，選擇工作路徑并單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“建立選區(qū)”命令，如圖7-14所示。打開(kāi)“建立選區(qū)”對(duì)話框，如圖7-15所示。 7）選擇“編輯”“描邊”命令，在彈出的“描邊”對(duì)話框中設(shè)置描邊參數(shù)。寬度為1px，顏色為#babeb

12、f，位置為內(nèi)部，如圖7-16所示。 8）最后效果，如圖7-17所示。 圖7-17 搜索框效果 步驟2 圖像的導(dǎo)入與編輯1）打開(kāi)本書(shū)配套資源中的素材文件夾中的logo.gif圖片。選擇“圖像”“模式”“RGB顏色”命令，如圖7-18所示。 圖7-18 轉(zhuǎn)換模式 2）選擇“選擇”“全選”命令，選擇整個(gè)圖像，再選擇“編輯”“復(fù)制”命令，復(fù)制整個(gè)圖像。3）回到網(wǎng)頁(yè)設(shè)計(jì)文件，選擇“編輯”“粘貼”命令，將圖像粘貼到文檔中。4）在工具面板中選擇選擇工具 ，選擇圖片，按住鼠標(biāo)左鍵，適量調(diào)整圖片位置。5）選擇圖片圖層，選擇“編輯”“自由變換”命令，此時(shí)圖片四周出現(xiàn)8個(gè)控制點(diǎn)，可以通過(guò)鼠標(biāo)和屬性參數(shù)改變圖像效果，

13、如圖7-19所示。 圖7-19 自由變換圖片 6）用同樣的方法導(dǎo)入和編輯圖片，搜索.gif、banner.bmp、新品上架.bmp、熱賣(mài)商品.bmp、推薦商品.bmp，如圖7-20所示。 步驟3 添加文字效果1）添加文字。選擇文本工具 ，在網(wǎng)頁(yè)頭部添加文字“請(qǐng)登錄 免費(fèi)注冊(cè) 幫助中心”，并設(shè)置文字效果為宋體、14點(diǎn)、樣式無(wú)。如圖7-21所示。2）添加版權(quán)。用同樣的方法給頁(yè)面添加版權(quán)信息。3）左側(cè)全部商品效果添加。新建“全部商品”圖層，選擇選區(qū)工具 ，在左側(cè)畫(huà)出一個(gè)區(qū)域。隨便給選區(qū)上個(gè)顏色。雙擊圖層，彈出“圖層樣式”對(duì)話框。設(shè)置為描邊和顏色疊加效果。如圖7-22、圖7-23所示。 圖7-21 設(shè)

14、置文字效果 圖7-22 設(shè)置描邊屬性圖7-23 設(shè)置顏色疊加屬性 步驟4 切圖選擇工具面板上的切片工具 ，對(duì)頁(yè)面進(jìn)行切圖，如圖7-24、圖7-25所示。 圖7-24 切圖工具圖7-25 切片后的效果 步驟5 導(dǎo)出為網(wǎng)頁(yè)圖像1）網(wǎng)頁(yè)切片完成后可以導(dǎo)出網(wǎng)頁(yè)圖像。選擇“文件”“存儲(chǔ)為Web和設(shè)備所用格式”命令。2）在彈出的對(duì)話框中設(shè)置圖片格式為GIF、可選擇、擴(kuò)散、顏色256，如圖7-26所示。 3）單擊“存儲(chǔ)”按鈕，彈出“將優(yōu)化結(jié)果存儲(chǔ)為”對(duì)話框，“格式”為HTML和圖像，“切片”為所有切片，如圖7-27所示。 4）Photoshop會(huì)自動(dòng)生成網(wǎng)頁(yè)文件和圖片文件夾，如圖7-28所示。5）打開(kāi)頁(yè)面，

15、效果如圖7-29所示。1活動(dòng)分析特效文字是網(wǎng)頁(yè)中給頁(yè)面增加亮點(diǎn)的一個(gè)手段。很多網(wǎng)頁(yè)的LOGO都是特效文字。2知識(shí)要點(diǎn) Photoshop設(shè)計(jì)特效文字的過(guò)程和方法。 掌握?qǐng)D層管理、選區(qū)操作、路徑操作。3動(dòng)手操作1）新建“我的設(shè)計(jì).psd”文件，進(jìn)入圖層面板，單擊面板底部“創(chuàng)建新組”按鈕，在圖層中創(chuàng)建一個(gè)新組“組1”，如圖7-30所示。活動(dòng)3 制作特效文字 2）雙擊“組1”，更改組名稱為logo，如圖7-31所示。3）展開(kāi)logo組，在組內(nèi)新建圖層1，如圖7-32所示。 圖7-30 新建組“組1”圖7-31 給文件組改名 4）單擊文字工具，在圖層1中輸入“Mao”。設(shè)置字體為方正綜藝簡(jiǎn)體，大小為6

16、0點(diǎn)，字形為加粗，文字方式為平滑，如圖7-33所示。 5）將文字轉(zhuǎn)換成路徑。按住鍵同時(shí)用鼠標(biāo)左鍵單擊圖層1，這時(shí)文字出現(xiàn)螞蟻線效果。進(jìn)入路徑面板，單擊第4個(gè)按鈕“從選區(qū)生成路徑”，如圖7-34所示。 6）調(diào)整路徑文字。回到圖層面板，單擊取消文字層“Mao”前的眼睛，使文字層不顯示?；氐铰窂矫姘濉ｋp擊“工作路徑”，改名為“文字”。用轉(zhuǎn)換點(diǎn)工具對(duì)路徑進(jìn)行編輯調(diào)整，如圖7-35、圖7-36所示。 編輯調(diào)整后的效果，如圖7-37所示。 7）路徑轉(zhuǎn)換為文字圖案。在圖層面板中新建圖層1，回到路徑面板，選擇文字路徑，單擊底部將“路徑作為選區(qū)載入”按鈕，使得路徑變成選區(qū)。使用油漆桶工具，給路徑填充顏色為黑色（

17、#000000），如圖7-38、圖7-39所示。 8）添加愛(ài)心小圖案。進(jìn)入路徑面板，新建路徑命名為“紅心”，用鋼筆工具和調(diào)整工具繪制心形路徑，如圖7-40所示。 9）進(jìn)入圖層面板，新建圖層2，回到路徑面板，選擇紅心路徑，單擊面板底部將“路徑轉(zhuǎn)換為選區(qū)”按鈕，將路徑轉(zhuǎn)換為選區(qū)。用油漆桶工具給選區(qū)上色（#c20057），如圖7-41所示。 10）給圖層2的心形圖案添加描邊效果。雙擊圖層2，出現(xiàn)圖層樣式面板，選擇描邊選項(xiàng)，設(shè)置大小為3像素，位置為外部，顏色為黑色，如圖7-42所示。單擊“確定”按鈕后的效果如圖7-43所示。 11）回到圖層面板，復(fù)制logo組，得到logo副本，用移動(dòng)工具移動(dòng)整個(gè)lo

18、go副本組，效果如圖7-44所示。12）在圖層面板新建圖層3，選擇畫(huà)筆工具 ，設(shè)置大小為3px，前景顏色為黑色，如圖7-45所示。按住鍵同時(shí)畫(huà)出一條橫線。效果如圖7-46所示。圖7-45 筆刷設(shè)置 10）給圖層2的心形圖案添加描邊效果。雙擊圖層2，出現(xiàn)圖層樣式面板，選擇描邊選項(xiàng)，設(shè)置大小為3像素，位置為外部，顏色為黑色，如圖7-42所示。單擊“確定”按鈕后的效果如圖7-43所示。 13）選擇文字工具，設(shè)置文字大小為“24點(diǎn)”，字體為“方正卡通簡(jiǎn)體”，字體平滑，如圖7-47所示。最終效果，如圖7-48所示。 1活動(dòng)分析網(wǎng)頁(yè)按鈕在頁(yè)面中一般起強(qiáng)調(diào)或者修飾作用。合適的按鈕可以使頁(yè)面更加生動(dòng)豐富。網(wǎng)頁(yè)

19、按鈕分為幾種：一種是使用文本內(nèi)容為主的按鈕；一種是以圖案內(nèi)容為主的按鈕，另外還有綜合使用圖案和文字的按鈕。本活動(dòng)將實(shí)現(xiàn)用Photoshop制作圖案文字綜合的按鈕。2知識(shí)要點(diǎn) Photoshop的基本操作。 掌握Photoshop漸變、圖層疊加模式的使用。3動(dòng)手操作先看一下最終效果，如圖7-49所示。1）新建文件，新建圖層，使用矩形選區(qū)工具進(jìn)行選擇，選區(qū)大小為6020像素，如圖7-50所示?；顒?dòng)4 制作網(wǎng)頁(yè)按鈕 2）前景色設(shè)置為#afee00，背景色設(shè)置為#3b9d00 ，使用漸變工具從選區(qū)的上方拉到中央進(jìn)行填充，如圖7-51所示。3）將前景色和背景色設(shè)置為黑色和白色，新建圖層，雙擊新圖層，對(duì)描

20、邊選項(xiàng)進(jìn)行設(shè)置，如圖7-52所示。 圖7-52 描邊設(shè)置 4）圖層模式更改為疊加，透明度設(shè)置為40%。5）新建圖層，創(chuàng)建如下選區(qū)，如圖7-53所示。6）使用漸變工具，顏色為白色到透明，從上向下進(jìn)行填充，如圖7-54所示。7）圖層模式設(shè)置為疊加，透明度降低到30%，如圖7-55所示。8）使用文字工具輸入需要的文字，字體為T(mén)ahoma，大小為11pt，如圖7-56所示。 1活動(dòng)分析導(dǎo)航條是網(wǎng)頁(yè)設(shè)計(jì)中不可缺少的部分，它是指通過(guò)一定的技術(shù)手段，為網(wǎng)站的訪問(wèn)者提供一定的途徑，使其可以方便地訪問(wèn)到所需的內(nèi)容，是人們?yōu)g覽網(wǎng)站時(shí)可以快速?gòu)囊粋€(gè)頁(yè)面轉(zhuǎn)到另一個(gè)頁(yè)面的快速通道。利用導(dǎo)航條，就可以快速找到想要瀏覽的頁(yè)

21、面。本例通過(guò)Photoshop制作導(dǎo)航條效果。2知識(shí)要點(diǎn) Photoshop的基本操作。 掌握Photoshop設(shè)計(jì)網(wǎng)頁(yè)的技巧和方法。3動(dòng)手操作先看做好的效果圖，如圖7-57所示。活動(dòng)5 制作導(dǎo)航條圖像 1）用形狀工具或者選框工具設(shè)計(jì)出導(dǎo)航條的背景，如圖7-58所示。 2）新建一個(gè)圖層，用縮放工具放大到1000%，用畫(huà)筆在這個(gè)新建圖層上畫(huà)出一條適當(dāng)長(zhǎng)度的1px豎線，顏色為#ffffff，如圖7-59所示。 3）給這個(gè)圖層加“漸變疊加”混合選項(xiàng)，設(shè)置如圖7-60、圖7-61所示。 在圖7-62中，1處的顏色為白色豎線的下端附近的背景顏色值，2處的顏色為白色豎線的上端附近的背景顏色值，3處的顏色為

22、#d7d7d7。漸變效果，如圖7-62所示。4）復(fù)制這個(gè)圖層，用箭頭工具將復(fù)制的圖層向左移動(dòng)1px，修改漸變參數(shù)，如圖7-63所示。 分割線效果如圖7-64所示。100%比例下的效果，如圖7-65所示。剩下的工作就是加上文字，復(fù)制圖層及排版的問(wèn)題了。1活動(dòng)分析GIF動(dòng)畫(huà)是網(wǎng)頁(yè)中動(dòng)態(tài)呈現(xiàn)內(nèi)容的一個(gè)方式，吸引瀏覽者的注意力。很多軟件都可以快速地制作滾動(dòng)文字的效果。使用Photoshop可能還有點(diǎn)復(fù)雜，但是大家只要學(xué)會(huì)這種方法，靈活地運(yùn)用再加上自己的創(chuàng)意，就能制作出多種個(gè)性化的效果。本例學(xué)習(xí)用Photoshop軟件制作簡(jiǎn)單的GIF滾動(dòng)文字的動(dòng)畫(huà)效果。2知識(shí)要點(diǎn) Photoshop的基本操作。 掌握Photoshop制作GIF動(dòng)畫(huà)的技巧和方法。3動(dòng)手操作1）首先使用Photoshop CS5打