2.5 網頁圖片變形

網頁圖片素材的處理一般要經過4個步驟，一是選擇網頁圖片，如摳圖；二是修復圖片，彌補圖片的缺陷；三是形狀變換；四是色彩變換，以適應網頁整體配色方案的要求。本節主要講解第3步，即圖片的大小、形狀等的變換。

1．變換命令

案例1 用變換命令變形圖片

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

【素材文件】第2章\222-1.jpg、222-2.jpg、222-3.jpg，如圖2-154所示；第2章\222.jpg作為背景圖片，如圖2-155所示。

【主要知識點】

利用“編輯”→“變換”菜單命令進行圖片變形。

【操作過程】

1）啟動Photoshop軟件，打開素材222.jpg（背景圖）。

2）置入222-1.jpg、222-2.jpg、222-3.jpg手機素材圖，如圖2-156～圖2-158所示，分別將3個圖層柵格化。

3）執行“編輯”→“變換”菜單命令，利用縮放對222-1.jpg圖片進行大小變換，利用旋轉對圖片進行角度變換，利用透視使圖片向右傾斜。調整后的效果如圖2-159所示。

4）對222-1.jpg所在圖層添加“投影”圖層樣式，設置混合模式為“正常”，顏色為白色，不透明度為22%，角度為90度，距離為23像素，也可自行進行設置，以達到滿意效果。

5）同理重復步驟3、4，對圖片222-2.jpg、222-3.jpg進行向左傾斜效果設置，如圖2-160所示。

6）在222-1.jpg圖片的左側，使用橫排文字工具輸入“燃情夏日”，作為廣告宣傳語，設置字體為“楷體”，大小為72，字體顏色為f0d03a。

7）對“燃情夏日”圖層進行柵格化，利用矩形選框工具建立選區，執行“選擇”→“變換選區”菜單命令，旋轉選區，然后刪除“日”字的右下角。效果如圖2-161所示。

8）在下方輸入文本“低價燃情，禮動夏日”，設置字體為“仿宋”，其他自定義。

9）在右側輸入文本“MX3”，設置字體為Calibri，其他自定義，柵格化該圖層以對“X”進行字體變形，利用矩形選框工具建立選區，執行“選擇”→“變換選區”菜單命令，旋轉選區方向，使選區呈菱形，刪除選區使“X”中心呈空心狀，如圖2-162所示。

10）添加背景層次化效果。設置初始顏色為深藍色，在“顏色”面板中調整明度，使顏色變淺，使用畫筆工具在背景圖層上涂抹出不規則區域。

11）可添加多個新圖層，在每個圖層中繪制各種形狀，填充設置初始顏色為深藍色，通過降低圖層透明度的方法，使背景呈現深淺不一的效果，提升背景的層次感。最終效果如圖2-153所示。

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

2．操控變形命令

使用操控變形命令，可以改變動作的形狀，從而制作出不同形態的圖片效果。執行“編輯”→“操控變形”菜單命令，打開操控變形命令選項欄，如圖2-163所示。

1）模式。該項有“剛性”“正常”和“扭曲”3種模式?！皠傂浴蹦Ｊ绞棺冃涡Ч_，但缺少柔和的過渡；“正?！蹦Ｊ绞棺冃涡Ч麥蚀_，且有柔和過渡；“扭曲”模式有變形和透視效果。

2）濃度。該項可選擇“較少點”“正?！被颉拜^多點”。三者的區別就是所要處理的圖像中網狀數量不同。

3）擴展。該項可選擇設置變形效果的縮減范圍。當像素值較大時，變形網格的范圍會向外擴張，且變形之后圖像的邊緣會更加平滑；當像素值較小時，則圖像的邊緣變化效果會很生硬。

4）顯示網格。勾選該復選框后，在圖像上顯示變形網格；取消勾選后，則隱藏網格。

5）圖釘深度。選擇一個圖釘，單擊第一個按鈕，可以將其向上層移動一個堆疊順序；單擊第二個按鈕，可以將其向下層移動一個堆疊順序。

6）旋轉。如果選擇“自動”，在拖動圖釘對圖像進行扭曲時，會自動對圖像內容進行旋轉操作；如果選擇“固定”，可在其后的文本框中輸入需要角度值，設置準確的旋轉角度。選擇一個圖釘后，按住〈Alt〉鍵，會出現一個變換框，拖動即可旋轉圖像。

7）復位/撤銷/應用。單擊第一個按鈕可還原圖像；單擊第二個按鈕可退出編輯；單擊第三個按鈕可應用變換。

案例2 用操控變形命令變形字體

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

【主要知識點】

利用操控變形命令進行圖片、字體變形。

【操作過程】

1）啟動Photoshop軟件，新建文件，設置寬度為400像素，高度為200像素。

2）單擊工具箱中的“文字工具”按鈕，設置字體為“微軟雅黑”，大小為18，斜體加粗，字體顏色為d72103，輸入文本“長職大學生在線”，如圖2-165所示。

3）在文本圖層上右擊，在彈出的快捷菜單中選擇“轉化為智能對象”或“柵格化圖層”命令，觀察要變形的“大”“學”“線”3個字要與其他字分開，可通過設置字體來實現。

4）對“大”字建立選區，執行“編輯”→“操控變形”菜單命令，在選項欄中設置“濃度”為“較多點”，在“大”字上添加圖釘。因為要變動筆畫，需要在字的主體結構上添加圖釘，以固定不變的部分，將要變形的筆畫向下拖動，如圖2-166所示。

5）重復步驟4，對“學”和“線”兩個字進行操控變形，如圖2-167和圖2-168所示。

6）單擊“提交操控變形”按鈕或使用移動工具，對操控變形進行應用，利用橡皮工具等對形狀進行再修改。

7）新建文本圖層，輸入網址www.cvitd.com。最終效果如圖2-164所示。

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