中職 Photoshop CC網(wǎng)店視覺設計第六章教學課件

1、正版可修改PPT課件(中職） Photoshop CC網(wǎng)店視覺設計第六章教學課件第六章 網(wǎng)店視覺圖像的修飾與美化6.1 商品圖像的裁剪6.2 網(wǎng)店視覺圖像的摳取6.3 網(wǎng)店視覺圖像的編輯6.4 網(wǎng)店視覺圖像的修飾6.5 網(wǎng)店視覺圖像編輯的批處理下一頁返回6.1 商品圖像的裁剪6.1.1 圖像大小的編輯圖像大小的變化是指將數(shù)碼相機拍攝的高精度圖像，轉變?yōu)榫W(wǎng)店可用的相對容量較小的圖像。圖6.2 是一張寬度為7 000 像素，高度為4 667 像素，分辨率為300 像素/英寸，圖像大小容量為93.5 M 的大圖，具體轉換方法如下：（1）啟動Photoshop 軟件，打開圖像文件，執(zhí)行“圖像”菜單“圖

2、像大小”命令，開啟圖像大小對話框，觀察商品圖像的原始數(shù)值，如圖6.3 所示。下一頁返回6.1 商品圖像的裁剪（2）首先修改圖像的分辨率。如圖6.4 所示，把圖像的300 像素/英寸分辨率，修改為屏幕分辨率72 像素/英寸。由圖中可以看出，分辨率的改變大大縮小了圖像的大小，圖像的大小由原來的93.5 M 變?yōu)?.38 M，同時，圖像的寬度與高度也發(fā)生了改變，寬度由原來的7 000像素變?yōu)? 680 像素，高度由原來的4 667 像素變?yōu)? 120 像素。（3）上一步操作已經(jīng)大大縮小了文件本身的大小，但是相對于商品網(wǎng)絡銷售平臺來說還是太大，需要修改圖像的寬度與高度尺寸。在像素大小欄，分別設置新圖像

3、的高度和寬度值，要勾選下面的“縮放樣式”“約束比例”“重定圖像像素”三個選項。通常各個平臺網(wǎng)店上的商品信息圖像的高度是不定的，但寬度不同的平臺有不同的數(shù)字，上一頁下一頁返回6.1 商品圖像的裁剪一般情況為750 像素?，F(xiàn)在把寬度值修改為750 像素，如圖6.5 所示。由圖可以看出，圖像的高度值也隨之改變?yōu)?00像素。（4）通過上一步可知，圖像大小發(fā)生進一步縮小，由5.38 M 變?yōu)?.07 M，單擊“確定”按鈕。如圖6.6 所示，圖像外觀本身沒有什么變化，但是顯示的百分比與圖像大小發(fā)生了明顯變化。（5）保存圖像，執(zhí)行“文件”菜單中的“存儲為”命令，保存圖像文件，重新對文件名命名，選擇JPEG文

4、件格式保存文件，彈出壓縮文件對話框，可以看到文件得到進一步壓縮，變成151.8 K，但是基本沒有改變圖像的外觀視覺效果，可以用來表述商品圖像信息。如圖6.7 所示。上一頁下一頁返回6.1 商品圖像的裁剪6.1.2 圖像瑕疵部分的裁剪在商品圖像拍攝過程中，因受到各種外部因素的影響難免會存在瑕疵或不足，在使用前必須把有瑕疵的地方進行剔除，具體方法如下：（1）啟動圖像處理軟件，打開拍攝好的需要修剪的商品圖片，在鞋的背景中還有商品拍攝臺的造型，必須把不必要的部分圖像剪去。（2）運用軟件中的裁剪工具，通過設置裁剪工具的8 個控制點，選擇畫面較好的部分。（3）在圖像畫面中雙擊鼠標，完成裁剪工作，裁剪好圖像

5、備用，當然畫布的尺寸是變小的。6.1.3 圖像裁剪并重新構圖上一頁下一頁返回6.1 商品圖像的裁剪通過數(shù)碼相機拍攝產生的圖像構圖不合理，是不可避免的，為了能得到合理的構圖，把圖片用于不同的場合就需要進行裁剪，同時進行重新構圖。具體操作方法很多，要根據(jù)具體情況來決定，下面是一種裁剪方法。（1）用Photoshop 軟件打開有瑕疵的商品圖片，拍攝時商品鞋的圖像處畫面的正中間，構圖上相對不夠活潑，而且在圖像的下面和上面明顯存在拍攝時產生的不足。這就需要剪去不足的部分，對圖像進行重新構圖。（2）選用Photoshop 中的裁剪工具，進行裁剪，通過控制點把圖像的上邊與下邊有瑕疵的地方排除在外，同時把大部

6、分左邊的圖像截去，而保留右邊的圖像。上一頁下一頁返回6.1 商品圖像的裁剪（3）在裁剪工具狀態(tài)下雙擊鼠標，完成圖像裁剪，可以看出鞋子視覺重心明顯地偏向了圖像的左邊，而且視覺中心定位在了兩只交叉重合部分，符合黃金分割視覺規(guī)律。（4）最后對圖像進行簡單的修飾，方法不一而足，設計人員可以自行設計，但用來修飾的輔助對象要簡單、短小，不能喧賓奪主，只能起到烘托商品主體的作用。6.1.4 圖像固定尺寸裁剪固定尺寸裁剪是指當一批商品圖像拍攝好以后，為取得一批圖像一致的大小，而實行的一種裁剪方式，其結果是裁剪所得的圖像大小規(guī)格一致。這種圖像的裁剪方式主要是通過裁剪工具選項中的高度與寬度設計來完成。上一頁下一頁

7、返回6.1 商品圖像的裁剪6.1.5 圖像放大與旋轉裁剪放大裁剪圖像是指在設計商品詳圖的過程中，為展示商品的局部圖像，或者設計局部的細節(jié)圖時經(jīng)常以放大圖像的方法來截取，操作的方法比較簡單。上一頁返回6.2 網(wǎng)店視覺圖像的摳取摳圖是圖像處理中最常做的操作技術之一，是將圖像中需要的部分從畫面中精確地提取出來，摳圖是后續(xù)圖像處理的基礎，只有把圖摳好了，一些后繼的圖像處理工作才能展開。在網(wǎng)店商品圖像處理與網(wǎng)店視覺設計中摳圖是一項必不可少的工作。在Photoshop 圖像處理軟件中，摳圖就是把靜態(tài)圖像或動態(tài)影像的某一部分從原始圖像或影像中分離出來成為單獨的圖層，摳圖又稱去背或退底，摳圖是指把圖像中的“前

8、景”和“背景”分離的操作。摳圖的主要目的是為后期的圖像合成與處理做準備。下一頁返回6.2 網(wǎng)店視覺圖像的摳取在Photoshop 圖像處理軟件中，摳圖的方法有很多種，常見的摳圖方法有套索工具、選框工具、橡皮擦工具等直接選擇、快速蒙版、鋼筆勾畫路徑后轉選區(qū)、抽出濾鏡、外掛濾鏡抽出、通道、計算、應用圖像法，等等。具體用什么方法要看圖像處理人員的愛好，還要看圖像本身的情況，方法多樣，要靈活運用。1. 橡皮擦摳圖橡皮擦摳圖就是用橡皮擦工具擦掉不用的部分，留下有用的部分。這種方法屬外形摳圖方法，簡單好用，但處理效果不好，可用于外形線條簡單的圖形摳圖。但主要用于對其他方法摳圖后的效果進行進一步處理。2.

9、魔術棒摳圖上一頁下一頁返回6.2 網(wǎng)店視覺圖像的摳取魔術棒摳圖就是用魔術棒工具點選不用的部分，或者點選要用的部分再反選，然后刪除，留下有用的部分。這種方法屬于顏色摳圖的范疇，使用簡便，但不易達到預期效果。因此只能用于圖片要用部分和不用部分色差較大時摳圖或用于其他摳圖方法的輔助方法。3. 路徑摳圖路徑摳圖就是用鋼筆工具把需要的圖像部分描畫起來，然后將路徑作為選區(qū)載入，反選，再從圖層中刪除不用部分。這種方法也屬外形摳圖方法，可用于外形比較復雜、色差又不大的圖片摳圖。再輔之以橡皮擦工具，可取得較好的效果。上一頁下一頁返回6.2 網(wǎng)店視覺圖像的摳取4. 蒙版摳圖蒙版摳圖是綜合性摳圖方法，既利用了圖中對

10、象的外形也利用了它的顏色。先用魔術棒工具點選對象，再用添加圖形蒙版把對象選出來。其關鍵環(huán)節(jié)是用白、黑兩色畫筆反復減、添蒙版區(qū)域，從而把對象外形完整精細地選出來。5. 通道摳圖通道摳圖屬于顏色摳圖方法，利用了對象的顏色在紅、黃、藍三通道中對比度不同的特點，從而在對比度大的通道中對對象進行處理。先選取對比度大的通道，再復制該通道，在其中通過進一步增大對比度，再用魔術棒工具把對象選出來?？蛇m用于色差不大，而外形又很復雜的圖像的摳圖，如頭發(fā)、樹枝、煙花，等等。上一頁下一頁返回6.2 網(wǎng)店視覺圖像的摳取6. 快速摳圖方法Photoshop CS3 之后的版本中，添加了一款新的工具，可快速選取需要的部分，

11、初學者也可以輕易操作。選擇“魔術棒”的擴展工具中，新增加的“快速選擇工具”。根據(jù)需要選取部分的大小，對畫筆大小進行調整。選擇“增加選區(qū)”。在對象所在圖層不斷移動，選取需要的部分。過程中還可以不斷調整畫筆大小，對細小部分進行精確選取。執(zhí)行復制粘貼命令，完成摳圖。上一頁返回6.3 網(wǎng)店視覺圖像的編輯6.3.1 商品圖像的縮小放大（1）商品圖像的縮小與放大不是指視圖的縮小與放大，視圖上的縮小、放大與移動用放大鏡工具與抓手工具完成，這里的圖像的放大與縮小是指圖像本身像素區(qū)域的編輯問題。如下圖所示，啟動軟件，打開前面已經(jīng)處理好的商品文件。如圖6.67 所示。（2）在軟件中執(zhí)行建立新文件命令，創(chuàng)建一個新的

12、圖像文件，大小為1 024683，分辨率為72 像素/英寸，RGB 色彩模式，背景為白色。下一頁返回6.3 網(wǎng)店視覺圖像的編輯（3）在新創(chuàng)建的文件中，在圖層面板新建一個圖層，并運用多邊形套索工具，注意斜度的繪制。然后在新的圖層，在前景色選擇一種灰色顏色，進行填充，完成后取消選擇。（4）將準備好的、已經(jīng)完成摳圖并去除背景的商品主體圖像，用工具箱中的移動工具移到新的文件中。（5） 執(zhí)行自由變換命令，對商品圖像的大小與位置進行調整。注意調整商品圖像時應保持商品原有的結構造型，如果所設計的商品信息不符合商品的原來面貌，在銷售過程中將會帶來巨大的麻煩，商品圖像與實際商品的外觀造型一定要一致，否則有可能認

13、定存在欺詐嫌疑，遭到消費者的投訴。上一頁下一頁返回6.3 網(wǎng)店視覺圖像的編輯（6）繼續(xù)從摳好的素材圖中選取商品圖像移動到新的文件中，并對其大小與位置進行調整，（7）如圖6.74 所示，用同樣的方法設置4個商品圖像，進行縮放與位置調整以后，形成一種由近到遠的視覺商品展示圖，完成設計工作。上一頁返回6.4 網(wǎng)店視覺圖像的修飾6.4.1 商品圖像修飾的基本方法1. 使用橡皮擦工具組去除圖像背景（1） 使用橡皮擦工具抹除。橡皮擦工具可將像素更改為背景色或透明。如果您正在背景中或已鎖定透明度的圖層中工作，像素將更改為背景色；否則，像素將被抹成透明。還可以使用橡皮擦使受影響的區(qū)域返回到“歷史記錄”面板中選

14、中的狀態(tài)。操作步驟如下：首先選擇橡皮擦工具，如果在背景或已鎖定透明度的圖層中進行抹除，設置要應用的背景色。選取橡皮擦的模式?！爱嫻P”和“鉛筆”模式可將橡皮擦設置為像畫筆和鉛筆工具一樣工作。下一頁返回6.4 網(wǎng)店視覺圖像的修飾“塊”是指具有硬邊緣和固定大小的方形，并且不提供用于更改不透明度或流量的選項。對于“畫筆”和“鉛筆”模式，選取一種畫筆預設，并在選項欄中設置“不透明度”和“流量”。100%的不透明度將完全抹除像素。較低的不透明度將部分抹除像素（2） 使用魔術橡皮擦工具更改相似的像素。用魔術橡皮擦工具在圖層中單擊時，該工具會將所有相似的像素更改為透明。如果在已鎖定透明度的圖層中工作，這些像素

15、將更改為背景色。如果在背景中單擊，則將背景轉換為圖層并將所有相似的像素更改為透明。上一頁下一頁返回6.4 網(wǎng)店視覺圖像的修飾（3） 使用背景橡皮擦工具將像素更改為透明。背景橡皮擦工具可在拖動時將圖層上的像素抹成透明，從而可以在抹除背景的同時在前景中保留對象的邊緣。通過指定不同的取樣和容差選項，可以控制透明度的范圍和邊界的銳化程度。背景橡皮擦采集畫筆中心（也稱為熱點）的色樣，并刪除在畫筆內的任何位置出現(xiàn)的該顏色。它還在任何前景對象的邊緣采集顏色。因此，如果前景對象以后粘貼到其他圖像中，將看不到色暈。2. 使用修飾和修圖工具美化（1） 使用仿制圖章工具進行修飾。仿制圖章工具將圖像的一部分繪制到同一

16、圖像的另一部分或繪制到具有相同顏色模式的任何打開的文檔的另一部分。上一頁下一頁返回6.4 網(wǎng)店視覺圖像的修飾也可以將一個圖層的一部分繪制到另一個圖層。仿制圖章工具對于復制對象或移去圖像中的缺陷很有用。要使用仿制圖章工具，要從其中拷貝（仿制）像素的區(qū)域上設置一個取樣點，并在另一個區(qū)域上繪制。要在每次停止并重新開始繪畫時使用最新的取樣點進行繪制選擇“對齊”選項。取消選擇“對齊”選項將從初始取樣點開始繪制，而與停止并重新開始繪制的次數(shù)無關。可以對仿制圖章工具使用任意的畫筆筆尖，這將能夠準確控制仿制區(qū)域的大小。也可以使用不透明度和流量設置以控制對仿制區(qū)域應用繪制的方式。上一頁下一頁返回6.4 網(wǎng)店視覺

17、圖像的修飾使用該工具的操作步驟如下：首先選擇仿制圖章工具。然后在選項欄中，選擇畫筆筆尖并為混合模式、不透明度和流量設置畫筆選項。要指定如何對齊樣本像素以及如何對文檔中的圖層數(shù)據(jù)取樣，在選項欄中設置以下任一選項：對齊連續(xù)對像素進行取樣，即使釋放鼠標按鈕，也不會丟失當前取樣點。如果取消選擇“對齊”，則會在每次停止并重新開始繪制時使用初始取樣點中的樣本像素。樣本從指定的圖層中進行數(shù)據(jù)取樣。要從現(xiàn)用圖層及其下方的可見圖層中取樣，選擇“當前和下方圖層”。要僅從現(xiàn)用圖層中取樣，選擇“當前圖層”。要從所有可見圖層中取樣，選擇“所有圖層”。上一頁下一頁返回6.4 網(wǎng)店視覺圖像的修飾要從調整圖層以外的所有可見圖

18、層中取樣，選擇“所有圖層”，然后單擊“取樣”彈出式菜單右側的“忽略調整圖層”圖標?？赏ㄟ^將指針放置在任意打開的圖像中，然后按住Alt 鍵并單擊來設置取樣點。在要校正的圖像部分上拖移。（2） 使用修復畫筆工具進行修飾。修復畫筆工具可用于校正瑕疵，使它們消失在周圍的圖像中。與仿制工具一樣，使用修復畫筆工具可以利用圖像或圖案中的樣本像素來繪畫。上一頁下一頁返回6.4 網(wǎng)店視覺圖像的修飾但是，修復畫筆工具還可將樣本像素的紋理、光照、透明度和陰影與所修復的像素進行匹配。從而使修復后的像素不留痕跡地融入圖像的其余部分。（3） 使用修補工具修補區(qū)域。通過修補工具，可以用其他區(qū)域或圖案中的像素來修復選中的區(qū)域

19、。像修復畫筆工具一樣，修補工具會將樣本像素的紋理、光照和陰影與源像素進行匹配。上一頁返回6.5 網(wǎng)店視覺圖像編輯的批處理1. 動作的基本知識動作是指在單個文件或一批文件上執(zhí)行的一系列任務，如菜單命令、面板選項、工具動作等。例如，可以創(chuàng)建這樣一個動作，首先更改圖像大小，對圖像應用效果，然后按照所需格式存儲文件。動作可以包含相應步驟，使可以執(zhí)行無法記錄的任務（如使用繪畫工具等）。動作也可以包含模態(tài)控制，使可以在播放動作時在對話框中輸入值。在Photoshop 中，動作是快捷批處理的基礎，而快捷批處理是一些小的應用程序，可以自動處理拖動到其圖標上的所有文件。Photoshop 附帶安裝了預定義的動作

20、以幫助執(zhí)行常見任務?？梢园丛瓨邮褂眠@些預定義的動作，根據(jù)自己的需要來自定它們，或者創(chuàng)建新動作。動作將以組的形式存儲以幫助組織它們。下一頁返回6.5 網(wǎng)店視覺圖像編輯的批處理可以記錄、編輯、自定和批處理動作，也可以使用動作組來管理各組動作。（1） 動作面板概述。使用“動作”面板（“窗口動作”）可以記錄、播放、編輯和刪除各個動作。此面板還可以用來存儲和載入動作文件。（2） 對文件播放動作，播放動作可以在活動文檔中執(zhí)行動作記錄的命令。（一些動作需要先行選擇才可播放；而另一些動作則可對整個文件執(zhí)行。）可以排除動作中的特定命令或只播放單個命令。如果動作包括模態(tài)控制，可以在對話框中指定值或在動作暫停時使用

21、模態(tài)工具。另外，在按鈕模式下，點按一個按鈕將執(zhí)行整個動作，但不執(zhí)行先前已排除的命令。上一頁下一頁返回6.5 網(wǎng)店視覺圖像編輯的批處理2. 創(chuàng)建動作（1） 應用記錄動作時需注意以下一些原則要點：首先應該明確在動作中可以記錄大多數(shù)（而非所有）命令。可以記錄的操作有“選框”“移動”“多邊形”“套索”“魔棒”“裁剪”“切片”“魔術橡皮擦”“漸變”“油漆桶”“文字”“形狀”“注釋”“吸管”和“顏色取樣器”工具執(zhí)行的操作，也可以記錄在“歷史記錄”“色板”“顏色”“路徑”“通道”“圖層”“樣式”和“動作”面板中執(zhí)行的操作。執(zhí)行記錄動作結果取決于文件和程序設置變量，如現(xiàn)用圖層和前景色。例如，3 像素高斯模糊在

22、72 ppi 文件上創(chuàng)建的效果與在144 ppi 文件上創(chuàng)建的效果不同?！吧势胶狻币膊贿m用于灰度文件。上一頁下一頁返回6.5 網(wǎng)店視覺圖像編輯的批處理如果記錄的動作包括在對話框和面板中指定設置，則動作將反映在記錄時有效的設置。如果在記錄動作的同時更改對話框或面板中的設置，則會記錄更改的值。模態(tài)操作和工具以及記錄位置的工具都使用當前為標尺指定的單位。模態(tài)操作或工具要求按Enter 鍵或Return 鍵才可應用其效果，例如變換或裁剪。如果記錄將在大小不同的文件上播放的動作，應將標尺單位設置為百分比。這樣，動作將始終在圖像中的同一相對位置播放。最后可以記錄“動作”面板菜單上列出的“播放”命令，使一個動作播放另一個動作。上一頁下一頁返回6.5 網(wǎng)店視覺圖像編輯的批處理（2） 記錄動作步驟。創(chuàng)建新動作時，所用的命令和工具都將添加到動作中，直到停止記錄。為了防止出錯，請在副本中進行操作：在動作開始