商務(wù)網(wǎng)頁實例項目07課件

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

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

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

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

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

6、能。10）通過跨平臺的64位支持實現(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可用硬盤空間用于安裝；安裝過程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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