2.4 網頁圖片修復

網頁中的圖片素材來源眾多，因此圖片素材中往往存在許多問題，這就要求網頁設計師在應用圖片時，必須解決這些問題，以保證網頁的質量。

2.4.1 修圖的必要性

在前面的章節中講解了圖片的選擇、摳圖的方法。由于圖片素材或多或少都會存在一些瑕疵和缺陷，從而影響網頁的整體效果。下面就將網頁圖片中的常見問題進行歸納與總結。

1．圖片中的污點、小面積瑕疵

污點和小面積瑕疵是很多圖片中都會出現的問題，如灰塵、雜質等污點，人物面部的痘痘，商品上的劃痕、缺陷等。

2．圖片中的大面積瑕疵

網頁中的素材圖片有一部分是從其他圖片中提取的，如摳圖，通常需要將摳取的圖片合成在一起，常會出現相互之間格格不入的情況。

3．圖片中的光影缺陷

圖片中的光影是影響網頁整體效果的重要因素，常見的光影缺陷有曝光過度、過暗或顯灰、紅眼現象等。

2.4.2 圖片的簡單修復

修復可以彌補由各種原因導致的圖片缺陷，在Photoshop中提供了相關工具，如污點修復畫筆工具、修復畫筆工具、修補工具、內容感知移動工具、仿制圖章工具等。

1．污點修復畫筆工具

污點修復畫筆工具可以輕松去除圖片中的點狀瑕疵等，適合于修復面積較小的瑕疵。單擊工具箱中的“污點修復畫筆工具”按鈕，打開污點修復畫筆工具選項欄，如圖2-131所示。

下面對各選項進行說明。

1）近似匹配。對筆觸邊緣的像素進行取樣修復。

2）創建紋理。對筆觸中的像素進行取樣修復。

3）內容識別。自動識別相近內容進行修復。

4）對所有圖層取樣。選中該復選框可對所有可見圖層中的像素進行取樣。

案例1 用污點修復畫筆工具去掉瑕疵

【案例效果】第2章\A217.jpg，如圖2-132所示。

【素材文件】第2章\217.jpg，如圖2-133所示。

【主要知識點】

利用污點修復畫筆工具進行小面積修復。

【操作過程】

1）啟動Photoshop軟件，打開素材217.jpg。

2）單擊工具箱中的“污點修復畫筆工具”按鈕，在圖片中的文字區域進行涂抹。最終效果如圖2-132所示。

3）執行“文件”→“存儲為”菜單命令，彈出“存儲為”對話框，將文件保存為A217.jpg。

2．修復畫筆工具

修復畫筆工具與污點修復畫筆工具類似，可將樣本的紋理、透明度和陰影等與所修復的像素匹配，修復后痕跡不明顯，能與周圍區域完全融合。單擊工具箱中的“修復畫筆工具”按鈕，打開修復畫筆工具選項欄，如圖2-134所示。

下面對各選項進行說明。

1）模式。該項用于設置混合模式。“替換”模式用于使用柔邊畫筆時，保留畫筆邊緣的雜色、膠片顆粒和紋理。

2）取樣。該項用于選擇修復所需要的樣本。按住〈Alt〉鍵，光標變為圓形十字形，在圖片上單擊進行取樣，在要修復的位置按住鼠標左鍵不放并拖動，可復制出取樣點及周圍的像素。

3）圖案。用“圖案”面板中選擇的圖案來填充圖片。

4）對齊。可連續對像素進行取樣。

5）樣本。從指定的圖層進行取樣，可選擇“當前圖層”“當前和下方圖層”“所有圖層”。

案例2 用修復畫筆工具修復缺陷

【案例效果】第2章\A218.jpg，如圖2-135所示。

【素材文件】第2章\218.jpg，如圖2-136所示。

【主要知識點】

利用修復畫筆工具進行小面積修復。

【操作過程】

1）啟動Photoshop軟件，打開素材218.jpg。

2）在包圖片素材中，第三個包帶有多余的掛鉤，將其去除。單擊工具箱中的“修復畫筆工具”按鈕，按住〈Alt〉鍵在白色背景上單擊取樣，然后在掛鉤位置涂抹。

3）不斷重復到步驟2，直到掛鉤被清除為止。最終效果如圖2-135所示。

4）執行“文件”→“存儲為”菜單命令，彈出“存儲為”對話框，將文件保存為A218.jpg。

3．修補工具

修補工具利用其他區域內容或圖案來修補當前選中的區域，并能將樣式的紋理、光照和陰影等與源圖片進行匹配。單擊工具箱中的“修補工具”按鈕，打開修補工具選項欄，如圖2-137所示。

下面對各選項進行說明。

1）選區方式。該項用于選擇要修補的圖片區域，其功能與前面所講的選區工具相同。

2）修補。該項用于設置修補圖片的模式。“正常”模式，對修補區域進行修補；“內容識別”模式，在修補時自動識別區域周圍效果并融入。

3）源。用目標區域修補選中的區域。

4）目標。用選中的區域修補目標區域。

5）使用圖案。用圖案來修補選中的區域。

案例3 用修補工具修復缺陷

【案例效果】第2章\A219.jpg，如圖2-138所示。

【素材文件】第2章\219.jpg，如圖2-139所示。

【主要知識點】

利用修補工具修復圖片。

【操作過程】

1）啟動Photoshop軟件，打開素材219.jpg。

2）單擊工具箱中的“修補工具”按鈕，圍著湖中雕像建立選區，如圖2-140所示。

3）將修補模式設置為“內容識別”，向右拖動選區到湖面區域后松開鼠標，如圖2-141所示。按〈Ctrl+D〉組合鍵取消選區，最終效果如圖2-138所示。

4）執行“文件”→“存儲為”菜單命令，彈出“存儲為”對話框，將文件保存為A219.jpg。

4．內容感知移動工具

內容感知移動工具用于混合被選區域內的圖片，并自動匹配區域周圍效果，單擊工具箱中的“內容感知移動工具”按鈕，打開內容感知移動工具選項欄，如圖2-142所示。

下面對各選項進行說明。

1）模式。該項用于確定是移動還是復制。建立選區后有兩種操作模式：“移動”模式下拖動選區實現位置變化；“擴展”模式下拖動選區實現選區復制。

2）適應。該項用于確定移動選區內圖片的混合適應模式，包括“非常嚴格”“嚴格”“中”“松散”“非常松散”5種模式。

案例4 用內容感知移動工具修復缺陷

【案例效果】第2章\A220.jpg，如圖2-143所示。

【素材文件】第2章\220.jpg，如圖2-144所示。

【主要知識點】

利用內容感知移動工具制作商品列表。

【操作過程】

1）啟動Photoshop軟件，打開素材220.jpg，雙擊背景圖層將其變為普通圖層。

2）單擊工具箱中的“裁剪工具”按鈕，將光標移至圖片左側邊緣時，光標變為雙向箭頭形狀，向左拖動，距離為一個商品圖片位置，如圖2-145所示。

3）在左側商品圖片的左側建立一個小的矩形選區，如圖2-146所示。按〈Ctrl+T〉組合鍵變換選區，向左側拖動可實現商品背景的復制，見圖2-147所示。

4）利用矩形選框工具選擇左側商品圖片，如圖2-148所示。在工具箱中單擊“內容感知移動工具”按鈕，選擇“擴展”模式，將商品圖片拖動到左側空白處，如圖2-149所示。5）對新生成的商品圖片進行摳圖，去掉主體圖片。

6）置入新文件A221.jpg，并柵格化該圖層，去掉圖片的背景，移動圖片到最左側的商品圖片中。最終效果如圖2-149所示。

7）執行“文件”→“存儲為”菜單命令，彈出“存儲為”對話框，將文件保存為A220.jpg。

5．仿制圖章工具

仿制圖章工具指定像素點為復制基準點（對圖片取樣），將其復制到新的區域，與修復畫筆工具類似，其操作要經過取樣、復制兩個環節。單擊工具箱中的“仿制圖章工具”按鈕，打開仿制圖章工具選項欄，如圖2-150所示。

下面對各選項進行說明。

1）切換畫筆面板。單擊該按鈕會打開“畫筆”面板，可對畫筆的筆觸、大小等進行調整。

2）切換仿制源面板。單擊該按鈕會打開“仿制源”面板，可對取樣點進行更多的操作。

3）不透明度。該項用于設置復制圖片的不透明度。

4）流量。該項用于調整畫筆涂抹時的數量。

5）對齊。勾選該復選框后，可連續對圖片進行取樣，否則始終采用初始取樣點的樣本。

6）樣本。該項用于選擇進行數據取樣的圖層，有“當前和下方圖層”“當前圖層”“所有圖層”3種模式。

案例5 用仿制圖章工具修復缺陷

【案例效果】第2章\A221.jpg，如圖2-151所示。

【素材文件】第2章\221.jpg，如圖2-152所示。

【主要知識點】

利用仿制圖章工具修復圖片。

【操作過程】

1）啟動Photoshop軟件，打開素材221.jpg，發現果盤邊緣不完整。

2）按〈Ctrl++〉組合鍵，放大圖片，單擊工具箱中的“仿制圖章工具”按鈕，按住〈Alt〉鍵在果盤有缺陷的附近單擊取樣，然后在缺陷位置涂抹。

3）不斷重復步驟2，直到果盤邊緣完整為止。最終效果如圖2-151所示。

4）執行“文件”→“存儲為”菜單命令，彈出“存儲為”對話框，將文件保存為A221.jpg。