Dreamweaver+FlashCS6第2章---使用Photoshop編輯網(wǎng)頁(yè)圖像課件

1、第2章 使用Photoshop編輯網(wǎng)頁(yè)圖像普通高等學(xué)校計(jì)算機(jī)教育“十二五”規(guī)劃教材網(wǎng)頁(yè)設(shè)計(jì)與制作立體化教程（Photoshop+Dreamweaver+Flash CS6雙色微課版）22.1 課堂案例：處理商品展示效果內(nèi)容導(dǎo)航2.2 課堂案例：制作banner區(qū)海報(bào)2.3 項(xiàng)目實(shí)訓(xùn)2.4 課后練習(xí)課堂案例：處理商品圖片展示效果 米拉想為電商網(wǎng)站設(shè)計(jì)效果圖，老洪告訴米拉，最好先將網(wǎng)頁(yè)中需要用到的商品展示圖片設(shè)計(jì)好，這樣有利于提升網(wǎng)頁(yè)的美觀度，并提高界面效果圖的制作效率。完成后的部分效果如圖所示商品圖片展示效果2.1.1圖像處理基礎(chǔ)知識(shí)1網(wǎng)頁(yè)中的圖片格式JPEG（*.jpg）格式PNG（*.png

2、）格式TIFF（*.tif；*.tiff）格式EPS（*.eps）格式PDF（*.pdf）格式PCX（*.pcx）格式BMP（*.bmp）格式PSD（*.psd）格式GIF（*.gif）格式PICT（*.pct）格式2.1.1圖像處理基礎(chǔ)知識(shí)2位圖3矢量圖4分辨率2.1.2旋轉(zhuǎn)并裁剪商品圖片1. 打開(kāi)圖片2. 旋轉(zhuǎn)圖像對(duì)香水圖片先使用裁剪工具進(jìn)行旋轉(zhuǎn)，然后將其裁剪為正方形，其具體操作如下。2.1.2旋轉(zhuǎn)并裁剪商品圖片3. 旋轉(zhuǎn)圖像后的效果4. 選擇選項(xiàng)2.1.2旋轉(zhuǎn)并裁剪商品圖片6. 調(diào)整裁剪框位置5. 裁剪圖像大小和分辨率7. 查看效果2.1.3修復(fù)商品圖片打開(kāi)“服裝模特.jpg”商品圖片，

3、處理模特的臉部瑕疵，讓模特展現(xiàn)出的效果更加完美，其具體操作如下。（1）打開(kāi)圖像（2）設(shè)置污點(diǎn)修復(fù)畫(huà)筆屬性1處理模特瑕疵2.1.3修復(fù)商品圖片（3） 處理額頭斑點(diǎn)（4）處理面部污點(diǎn)2.1.3修復(fù)商品圖片（5）處理鼻子斑點(diǎn)（6）查看面部效果2.1.3修復(fù)商品圖片（7）設(shè)置仿圖章工具屬性（8）處理衣服瑕疵2.1.3修復(fù)商品圖片（10）調(diào)整曲線(xiàn)（11）查看效果（9）銳化衣服2.1.3修復(fù)商品圖片對(duì)“酒水.jpg”圖片使用修補(bǔ)工具去除上面多余的樹(shù)葉，其具體操作如下。（1）打開(kāi)素材圖片2使用修補(bǔ)工具處理產(chǎn)品背景（2）設(shè)置屬性并框選樹(shù)葉2.1.3修復(fù)商品圖片（3） 擦除樹(shù)葉（4） 查看效果2.1.3修復(fù)商品

4、圖片打開(kāi)“酒瓶.jpg”圖像文件，使用內(nèi)容感知移動(dòng)工具將右側(cè)酒瓶復(fù)制到左側(cè)的空白區(qū)域，其具體操作如下。（1）打開(kāi)素材圖片3使用內(nèi)容感知工具復(fù)制圖像（2）設(shè)置屬性并框選酒瓶2.1.3修復(fù)商品圖片（3）移動(dòng)并復(fù)制酒瓶（4）查看效果2.1.3修復(fù)商品圖片打開(kāi)“冰箱.jpg”圖像文件，對(duì)繪制的冰箱添加圖案，使其更具有質(zhì)感，其具體操作如下。（1）創(chuàng)建選區(qū)4使用圖案圖章工具美化冰箱（2）設(shè)置圖案圖章工具屬性2.1.3修復(fù)商品圖片（3）替換選區(qū)圖案（4）添加文字效果2.1.4使用液化濾鏡處理圖片（1）選擇“液化”命令（2）設(shè)置“液化”對(duì)話(huà)框使用液化濾鏡對(duì)人物進(jìn)行處理，使人物更加婀娜多姿，其具體操作如下。2.

5、1.4使用液化濾鏡處理圖片（3）修飾臉型（4）查看效果2.1.5調(diào)整圖片顏色處理戶(hù)外旅行包產(chǎn)品圖片，在處理時(shí)先對(duì)旅行包的亮度、對(duì)比度和色彩進(jìn)行調(diào)整，使其顯示效果更佳，然后為其添加背景，達(dá)到吸引消費(fèi)者點(diǎn)擊的目的，其具體操作如下。1.打開(kāi)素材2.設(shè)置亮度和對(duì)比度3.設(shè)置色階2.1.5調(diào)整圖片顏色4.設(shè)置曲線(xiàn)5.設(shè)置曝光度6.設(shè)置色相飽和度2.1.5調(diào)整圖片顏色7.創(chuàng)建選區(qū)8. 添加素材效果2.1.6 使用濾鏡處理圖片使用相關(guān)的圖像處理工具結(jié)合濾鏡來(lái)修復(fù)圖片，使其體現(xiàn)鐲子的金屬質(zhì)感，其具體操作如下。1.繪制路徑2.完成手鐲路徑繪制2.1.6 使用濾鏡處理圖片3.替換背景顏色4.進(jìn)行USM銳化5.查看

6、銳化后的效果6.羽化選區(qū)7.涂抹選區(qū)2.1.6 使用濾鏡處理圖片2.1.6 使用濾鏡處理圖片8.減淡選區(qū)9.對(duì)選區(qū)進(jìn)行加深處理10.創(chuàng)建的花紋選區(qū)圖像2.1.6 使用濾鏡處理圖片11.增加金屬質(zhì)感12.填充黑色13.模糊陰影2.1.6 使用濾鏡處理圖片14.完成鐲子金屬質(zhì)感效果15.高斯模糊手鐲2.1.6 使用濾鏡處理圖片16.制作投影17.完成手鐲處理效果18.添加背景2.1.7 摳取素材圖片打開(kāi)“手機(jī)殼.jpg”圖像文件，使用磁性套索工具摳取手機(jī)殼，并將其應(yīng)用到背景圖層中，其具體操作如下。（1）繪制選區(qū)1. 使用工具摳取簡(jiǎn)單規(guī)則的圖片（2）更換背景2.1.7 摳取素材圖片（1）創(chuàng)建第一個(gè)錨

7、點(diǎn)（2）創(chuàng)建另一個(gè)錨點(diǎn)（3）創(chuàng)建其他錨點(diǎn)打開(kāi)“杯子.jpg”商品圖片，使用鋼筆工具摳圖，并將雜色背景換為黑色背景，其具體操作如下。2. 使用鋼筆工具摳圖2.1.7 摳取素材圖片（4）調(diào)整錨點(diǎn)（5）轉(zhuǎn)換為選區(qū)（6）更改背景2.1.7 摳取素材圖片（1）復(fù)制圖層以摳取婚紗為例講解半透明商品圖片的摳圖方法，其具體操作如下。3. 使用通道摳圖（2）繪制路徑2.1.7 摳取素材圖片（3）新建通道（4）復(fù)制并編輯通道2.1.7 摳取素材圖片（5）計(jì)算通道（6）載入人物選區(qū)2.1.7 摳取素材圖片（7）查看婚紗摳圖效果（8）載入人物選區(qū)2.1.8 為圖像添加文本和形狀（1）輸入并設(shè)置文字（2）輸入并設(shè)置文本

8、在不銹鋼炒鍋素材中添加文字和形狀，使商品圖片展現(xiàn)的更加直觀，其具體操作如下。2.1.8 為圖像添加文本和形狀（3）繪制直線(xiàn)（4）輸入并設(shè)置文本（5）選擇形狀（6）繪制直線(xiàn)并輸入文本2.1.8 為圖像添加文本和形狀（7）繪制橢圓（8）繪制形狀（9）添加文本（10）查看效果422.1 課堂案例：處理商品展示效果內(nèi)容導(dǎo)航2.2 課堂案例：制作banner區(qū)海報(bào)2.3 項(xiàng)目實(shí)訓(xùn)2.4 課后練習(xí)2.2.1通過(guò)圖層制作海報(bào)使用圖層來(lái)制作海報(bào)圖像效果，其具體操作如下。（1）繪制矩形（2）添加地板素材（3）添加圖像素材（4）調(diào)整圖層順序2.2.1通過(guò)圖層制作海報(bào)為海報(bào)添加文本，并添加圖層樣式，其具體操作如下。

9、（1）添加文本（2）設(shè)置投影圖層樣式（3）繪制選區(qū)并填充顏色（4）添加文本2.2.1通過(guò)圖層制作海報(bào)（5）繪制矩形并添加文本（6）繪制形狀462.1 課堂案例：處理商品展示效果內(nèi)容導(dǎo)航2.2 課堂案例：制作banner區(qū)海報(bào)2.3 項(xiàng)目實(shí)訓(xùn)2.4 課后練習(xí)2.3.1制作海報(bào)廣告本實(shí)訓(xùn)的目標(biāo)是為某燈飾電商網(wǎng)站設(shè)計(jì)一個(gè)橫幅廣告。本實(shí)訓(xùn)完成后的參考效果如圖所示。1實(shí)訓(xùn)目標(biāo)2.3.1制作海報(bào)廣告橫幅廣告在網(wǎng)頁(yè)中多用于傳遞最新的商品信息，店鋪?zhàn)钚聝?yōu)惠活動(dòng)及店鋪理念等。2. 專(zhuān)業(yè)背景3. 操作思路（1）合成圖像效果（2）添加文字說(shuō)明信息2.3.2制作網(wǎng)頁(yè)廣告本實(shí)訓(xùn)是為網(wǎng)頁(yè)設(shè)計(jì)一張廣告推廣圖片。本實(shí)訓(xùn)完成后

10、的參考效果如圖所示。1實(shí)訓(xùn)目標(biāo)2.3.1制作海報(bào)廣告廣告推廣圖主要用于在本網(wǎng)站或其他網(wǎng)頁(yè)中以懸浮窗的方式顯示，增加點(diǎn)擊量，是網(wǎng)站或商品推廣的主要方式。2. 專(zhuān)業(yè)背景3. 操作思路（1）合成圖像（2）添加并設(shè)置文本512.1 課堂案例：處理商品展示效果內(nèi)容導(dǎo)航2.2 課堂案例：制作banner區(qū)海報(bào)2.3 項(xiàng)目實(shí)訓(xùn)2.4 課后練習(xí)練習(xí)1：制作直通車(chē)圖片制作一個(gè)淘寶直通車(chē)圖片，要求通過(guò)文本來(lái)說(shuō)明網(wǎng)站的保修服務(wù)內(nèi)容。制作時(shí)可打開(kāi)本書(shū)提供的素材文件進(jìn)行操作，參考效果如圖所示。要求操作如下。填充背景，添加素材。添加并美化文本。練習(xí)2：制作“幫助中心”求制作一個(gè)本“幫助中心”頁(yè)面圖像，參考效果如圖所示。要求操作如下。打開(kāi)“bangzhu.psd”素材，在其中設(shè)置前景色。使用漸變工具填充圖形。54Thank you!海量圖書(shū)方便查詢(xún)免費(fèi)申請(qǐng)樣書(shū)下