《Photoshop圖像處理（第二版）》 課件 項目四 電商圖像的設(shè)計

項目四電商圖像的設(shè)計2271任務(wù)1設(shè)計網(wǎng)店標(biāo)志2任務(wù)2設(shè)計網(wǎng)店招牌目錄CONTENTS2283任務(wù)3設(shè)計網(wǎng)店詳情頁4任務(wù)4設(shè)計霓虹燈字5任務(wù)5設(shè)計網(wǎng)店橫幅廣告任務(wù)1設(shè)計網(wǎng)店標(biāo)志2291.掌握路徑的布爾運算操作。2.掌握形狀的填色和描邊方法。3.能使用各種形狀工具進(jìn)行復(fù)雜圖形的繪制。230網(wǎng)店標(biāo)志（后文簡稱“店標(biāo)”）是網(wǎng)店視覺傳達(dá)的主要形象之一，是一種“視覺語言”。在網(wǎng)店的日常推廣運營中，店標(biāo)是向顧客通過視覺傳達(dá)信息的重要元素，有著不可忽視的作用。某電商匯精展示用品準(zhǔn)備對店面進(jìn)行裝修改造，要求重新設(shè)計店標(biāo)。本任務(wù)要求根據(jù)該網(wǎng)店的經(jīng)營特點和店主的需求，設(shè)計制作“匯精展示用品”店標(biāo)，如圖所示。231232“匯精展示用品”店標(biāo)店標(biāo)是一種圖形符號，一般由圖案、顏色和文字構(gòu)成，用于表達(dá)商家的核心訴求。常見的店標(biāo)分為靜態(tài)店標(biāo)和動態(tài)店標(biāo)兩大類，靜態(tài)店標(biāo)分為文字型、圖案型和組合型三類。本任務(wù)制作的店標(biāo)為靜態(tài)店標(biāo)，“匯精展示用品”店標(biāo)的圖案主要由同一個圓形上的4段圓弧、4個直角和4個矩形構(gòu)成。在使用Photoshop設(shè)計此店標(biāo)時，首先使用橢圓工具和路徑布爾運算繪制圓弧，然后使用路徑選擇工具繪制直角，使用矩形工具繪制矩形，依次為形狀填充顏色，最后添加文字。本任務(wù)的學(xué)習(xí)重點是路徑布爾運算的操作方法。233一、路徑布爾運算路徑可以進(jìn)行相加、相減的布爾運算。操作方法如下：先繪制一個路徑或形狀，如圖所示，在工具選項欄中單擊“路徑操作”按鈕，在其下拉菜單中選擇一種操作方式，如圖所示，然后繪制另一個路徑或形狀，即可得到布爾運算結(jié)果。路徑與形狀的運算結(jié)果是一樣的，路徑操作方式有以下幾種。234235

繪制路徑或形狀“路徑操作”下拉菜單1.?新建圖層

：默認(rèn)選項為新建圖層，自動在新圖層中繪制新形狀。2.?合并形狀

：將新繪制的形狀添加到原有的形狀中，如圖所示。3.?減去頂層形狀

：可以從原有的形狀中減去新繪制的形狀，如圖所示。236合并形狀減去頂層形狀4.?與形狀區(qū)域相交

：可以得到新形狀與原有形狀的交叉區(qū)域，如圖所示。5.?排除重疊形狀

：可以得到新形狀與原有形狀重疊部分以外的區(qū)域，如圖所示。6.?合并形狀組件

：可以將新形狀與原有形狀合并為一個形狀組件。237與形狀區(qū)域相交排除重疊形狀二、路徑選擇工具“路徑選擇工具”選項欄如圖所示，通過此工具欄可以進(jìn)行對齊、分布路徑和調(diào)整路徑排列方式等操作。238“路徑選擇工具”選項欄1.?對齊、分布路徑通過對齊、分布路徑可以對形狀或者路徑進(jìn)行操作。首先單擊工具箱中的“路徑選擇工具”選擇多個路徑，然后單擊工具選項欄中的“路徑對齊方式”按鈕，在其下拉面板中對所選的路徑進(jìn)行對齊、分布的設(shè)置。2.?調(diào)整路徑排列方式當(dāng)文件中包含多個路徑時，路徑的上下順序會影響圖像的效果，此時需要調(diào)整路徑的堆疊順序，首先選擇路徑，然后單擊工具選項欄中的“路徑排列方式”按鈕，在其下拉菜單中選擇相應(yīng)的命令，可以將選中的路徑的層次關(guān)系進(jìn)行相應(yīng)的排列。239任務(wù)2設(shè)計網(wǎng)店招牌2401.了解常見網(wǎng)店招牌的類型及特點。2.掌握圖層對齊與分布的方式及操作方法。3.掌握圖層在網(wǎng)店招牌設(shè)計與制作中的應(yīng)用。4.能使用矩形工具和文字工具設(shè)計網(wǎng)店招牌背景。5.能歸納總結(jié)網(wǎng)店招牌設(shè)計的要點和基本思路。241網(wǎng)店招牌（后文簡稱“店招”）主要用于展示店鋪名稱和經(jīng)營特色，以達(dá)到宣傳店鋪的目的。店招的設(shè)計要新穎、醒目、簡明，既要引人注目，又要與店面設(shè)計融為一體，其風(fēng)格應(yīng)與經(jīng)營內(nèi)容一致，以增強(qiáng)感召力。本任務(wù)要求為網(wǎng)店“匯精展示用品”設(shè)計店招，效果如圖所示。242243店招設(shè)計效果“匯精展示用品”店招設(shè)計主要由矩形背景圖、店標(biāo)、小圖標(biāo)和文字說明組成。在使用Photoshop進(jìn)行該店招設(shè)計時，首先使用矩形工具和移動工具繪制背景外形，然后置入不同的背景圖片制作背景，最后導(dǎo)入店標(biāo)和小圖標(biāo)，并添加說明文字。本任務(wù)的學(xué)習(xí)重點是店招設(shè)計的要點和基本思路。一、店招的類型1.?標(biāo)準(zhǔn)型此類型的店招將店標(biāo)、店名和主營業(yè)務(wù)等元素全部展示出來。2.?普通型此類型的店招主要展示店名和商品關(guān)鍵詞這兩個元素，突出銷售產(chǎn)品。3.?營銷型此類型的店招主要展示品牌推廣和主營業(yè)務(wù)，吸引買家瀏覽。244二、圖層的對齊與分布1.?對齊圖層操作方法：選中多個需要對齊的圖層，單擊工具箱中的“移動工具”，在工具選項欄中選擇相應(yīng)的對齊方式進(jìn)行設(shè)置，如圖所示。245

圖層的對齊方式2.?分布圖層分布圖層是指將多個圖層在圖像中按照一定的規(guī)律進(jìn)行均勻分布。操作方法：選中要進(jìn)行分布的圖層，單擊工具箱中的“移動工具”，在工具選項欄中選擇相應(yīng)的分布方式進(jìn)行設(shè)置。246任務(wù)3設(shè)計網(wǎng)店詳情頁2471.了解常用模糊濾鏡的使用方法和應(yīng)用場景。2.掌握網(wǎng)店詳情頁設(shè)計中圖文排版和配色的技巧。3.能使用畫筆工具、直線工具、橢圓工具、矩形工具及自定形狀工具等繪制網(wǎng)店詳情頁中的圖形。4.能使用圖層蒙版、圖層樣式及模糊濾鏡制作圖像特效。5.能歸納并總結(jié)網(wǎng)店詳情頁的設(shè)計思路和基本方法。248一個好的產(chǎn)品需要由好的網(wǎng)店詳情頁支撐，詳情頁是提高轉(zhuǎn)化率的入口，是店鋪產(chǎn)品能夠交易成功的關(guān)鍵因素，成功的詳情頁可以有效地吸引客戶并激發(fā)其購買欲望，本任務(wù)要求對“匯精展示用品”網(wǎng)店的詳情頁進(jìn)行設(shè)計，效果如圖所示。249網(wǎng)店詳情頁效果網(wǎng)店詳情頁包含的主要內(nèi)容有商品基本信息、商品展示圖、商品焦點圖和商品細(xì)節(jié)圖。首先利用矩形選框工具和漸變工具將詳情頁分為上下兩個部分；然后使用文字工具對上下兩部分導(dǎo)入的商品圖片進(jìn)行文字說明，展示商品的優(yōu)勢和基本信息；再在詳情頁的中間部分通過導(dǎo)入圖片，使用文字工具對商品的功能進(jìn)行詳細(xì)說明；最后對詳情頁背景中的圖片進(jìn)行濾鏡處理，形成最終效果圖。本任務(wù)的學(xué)習(xí)重點是各種繪圖工具在詳情頁設(shè)計中的靈活運用及網(wǎng)店詳情頁的設(shè)計思路和基本方法。250一、網(wǎng)店詳情頁的尺寸要求適用于計算機(jī)端的網(wǎng)店詳情頁的圖片寬度不超過750像素、大小一般不超過2?MB；適用于手機(jī)端的網(wǎng)店詳情頁的圖片寬度為480～1?242像素、高度不超過1?546像素、大小不超過2?560?KB。251二、網(wǎng)店詳情頁包含的主要內(nèi)容1.?商品基本信息這是網(wǎng)店詳情頁最基本的內(nèi)容之一，主要用于介紹商品的名稱、品牌、型號、結(jié)構(gòu)、材質(zhì)、作用、尺寸及質(zhì)量等。2.?商品展示圖精選少量商品圖片用于展示商品，讓顧客對商品建立直接印象。2523.?商品焦點圖通過挖掘商品的特點、表現(xiàn)商品的獨特優(yōu)勢、呈現(xiàn)商品的賣點吸引顧客。4.?商品細(xì)節(jié)圖主要對商品的一部分關(guān)鍵細(xì)節(jié)進(jìn)行詳細(xì)描述，讓顧客近距離地了解商品的優(yōu)點。253三、模糊濾鏡1.?高斯模糊高斯模糊是最常用、最重要的模糊濾鏡，它可以向圖像中添加低頻細(xì)節(jié)，使圖像產(chǎn)生一種朦朧的模糊效果。2.?徑向模糊徑向模糊是一種特殊的模糊濾鏡，是模擬縮放或旋轉(zhuǎn)相機(jī)時產(chǎn)生的模糊，可以將圖像圍繞一個指定的圓心，沿著圓的圓周或半徑方向進(jìn)行模糊，從而產(chǎn)生一種柔化的模糊效果。3.?方框模糊方框模糊基于相鄰像素的平均顏色值模糊圖像。254任務(wù)4

設(shè)計霓虹燈字2551.掌握電商中藝術(shù)字體的設(shè)計思路和方法。2.能通過圖層的復(fù)制等操作制作立體文字效果。3.能用描邊、內(nèi)陰影、外發(fā)光及投影等圖層樣式制作文字特效。256文字是網(wǎng)店展示商品的重要形式，是傳達(dá)商品信息的主要載體，可以對圖片無法表述的內(nèi)容進(jìn)行補充說明，經(jīng)過精心設(shè)計的藝術(shù)字體更加能吸引用戶，增強(qiáng)視覺體驗。無論在電商設(shè)計還是在廣告設(shè)計中，藝術(shù)字體都有廣泛的應(yīng)用，它不僅能準(zhǔn)確表達(dá)信息，還可以表達(dá)設(shè)計的主題和意圖，展示圖片的風(fēng)格，起到一定的裝飾作用。257本任務(wù)以“3.8”霓虹燈字的設(shè)計為例，介紹電商文字設(shè)計的基本思路和方法，設(shè)計效果如圖所示。制作霓虹燈字時，先做出字體的立體效果，然后對字體進(jìn)行描邊，再通過添加內(nèi)陰影、內(nèi)發(fā)光、外發(fā)光、投影4種圖層樣式設(shè)置內(nèi)部文字樣式，最后運用圖層樣式調(diào)整線條效果。本任務(wù)的學(xué)習(xí)重點是運用圖層設(shè)計電商特效文字。258“3.8”霓虹燈字設(shè)計效果一、“內(nèi)陰影”圖層樣式“內(nèi)陰影”圖層樣式可以在緊靠圖層內(nèi)容的邊緣處添加陰影，使圖像內(nèi)容產(chǎn)生向畫面內(nèi)側(cè)凹陷的效果。如圖所示為“內(nèi)陰影”圖層樣式的設(shè)置界面。259“內(nèi)陰影”圖層樣式的設(shè)置界面1.?結(jié)構(gòu)（1）混合模式：設(shè)置陰影與下面圖層的混合模式，默認(rèn)設(shè)置為“正片疊底”。（2）不透明度：設(shè)置陰影不透明度，數(shù)值越小，陰影越淡。（3）角度：設(shè)置陰影應(yīng)用于圖層的光照角度，指針方向為光源方向，與指針方向相反的方向為陰影方向。260（4）使用全局光：如果勾選該復(fù)選框，則可以保持所有圖層的光照角度一致；如果取消勾選該復(fù)選框，則可以為不同的圖層分別設(shè)置光照角度。（5）距離：設(shè)置陰影偏移圖層內(nèi)容的距離。（6）阻塞：可以在模糊之前收縮內(nèi)陰影的邊界。（7）大小：設(shè)置陰影的模糊范圍，數(shù)值越大，陰影模糊范圍越廣，反之，陰影模糊范圍越小。2612.?品質(zhì)（1）等高線：通過調(diào)整曲線的形狀控制陰影的形狀，可以手動調(diào)整曲線形狀，也可以選擇內(nèi)置預(yù)設(shè)。（2）消除鋸齒：混合等高線邊緣的像素，使陰影更加平滑。（3）雜色：用于在陰影中添加顆粒感和雜色效果，數(shù)值越大，顆粒感越強(qiáng)。262二、“內(nèi)發(fā)光”與“外發(fā)光”圖層樣式“內(nèi)發(fā)光”圖層樣式可以沿圖層內(nèi)容的邊緣向內(nèi)創(chuàng)建發(fā)光效果，其設(shè)置界面如圖所示。263“內(nèi)發(fā)光”圖層樣式的設(shè)置界面1.?結(jié)構(gòu)（1）混合模式：設(shè)置發(fā)光效果與下面圖層的混合模式，默認(rèn)設(shè)置為“濾色”。（2）不透明度：設(shè)置發(fā)光效果的不透明度。（3）雜色：在發(fā)光效果中添加隨機(jī)的雜色效果，使光暈產(chǎn)生顆粒感。（4）發(fā)光顏色：可以設(shè)置單色，也可以設(shè)置漸變色。（5）方法：設(shè)置發(fā)光的方式。選擇“柔和”，發(fā)光效果比較柔和；選擇“精確”，可以得到精確的發(fā)光邊緣。2642.?圖素（1）源：控制光源的位置。（2）阻塞：用于在模糊之前收縮發(fā)光的邊界。（3）大小：設(shè)置光暈范圍的大小。2653.?品質(zhì)（1）等高線：使用等高線可以控制發(fā)光的形狀。（2）范圍：用于設(shè)置發(fā)光效果的輪廓范圍。（3）抖動：用于改變漸變顏色和不透明度的范圍。外發(fā)光圖層樣式與內(nèi)發(fā)光圖層樣式相似，可以沿圖層內(nèi)容的邊緣向外創(chuàng)建發(fā)光效果，可用于制作光暈效果。266三、“投影”圖層樣式“投影”圖層樣式可以為圖層模擬出投影效果，用于增加某部分的層次感和立體感，其設(shè)置界面如圖所示。267“投影”圖層樣式的設(shè)置界面1.?結(jié)構(gòu)（1）混合模式：設(shè)置投影與下面圖層的混合模式，默認(rèn)設(shè)置為“正片疊底”。（2）投影顏色：設(shè)置投影的顏色。（3）不透明度：設(shè)置投影的不透明度，數(shù)值越小，投影越淡。（4）角度：設(shè)置投影應(yīng)用于圖層的光照角度，指針方向為光源方向，與指針方向相反的方向為投影方向。268（5）使用全局光：如果勾選該復(fù)選框，則可以保持所有圖層的光照角度一致；如果取消勾選該復(fù)選框，則可以為不同的圖層分別設(shè)置光照角度。（6）距離：設(shè)置投影偏移圖層內(nèi)容的距離。（7）擴(kuò)展：設(shè)置投影的擴(kuò)展范圍。注意，該值受“大小”選項的影響。（8）大?。涸O(shè)置投影的模糊范圍，數(shù)值越大，投影的模糊范圍越廣，反之，投影的模糊范圍越小。2692.?品質(zhì)（1）等高線：通過調(diào)整曲線的形狀控制投影的形狀，可以手動調(diào)整曲線形狀，也可以選擇內(nèi)置預(yù)設(shè)。（2）消除鋸齒：混合等高線邊緣的像素，使投影更加平滑。（3）雜色：用于在投影中添加顆粒感和雜色效果，數(shù)值越大，顆粒感越強(qiáng)。（4）圖層挖空投影：用于控制半透明圖層中投影的可見性。270任務(wù)5

設(shè)計網(wǎng)店橫幅廣告2711.掌握直線工具、多邊形套索工具的使用方法。2.掌握文字工具的使用方法和文字制作技巧。3.能使用多邊形工具修飾圖像。4.能歸納并總結(jié)網(wǎng)店橫幅廣告的設(shè)計思路。272在電商裝修中，橫幅廣告是商品吸引顧客單擊購買的關(guān)鍵，橫幅廣告又稱旗幟廣告，它是橫跨于網(wǎng)頁上的矩形公告牌，當(dāng)用戶單擊這些橫幅時，通?？梢枣溄拥綇V告的主網(wǎng)頁。網(wǎng)店橫幅廣告的制作需要綜合運用Photoshop中的工具完成。273某運動用品網(wǎng)店需要在“618”促銷活動來臨之際，設(shè)計一張網(wǎng)店橫幅廣告，設(shè)計效果如圖所示。橫幅廣告設(shè)計主要由圖形、文字組成。首先用多邊形套索工具和直線工具繪制多彩的背景效果，然后用文字工具和矩形選框工具處理文字效果，最后用多邊形工具繪制裝飾的五角星圖案。本任務(wù)的學(xué)習(xí)重點是多邊形工具的使用方法和文字制作技巧。274

網(wǎng)店橫幅廣告設(shè)計效果一、直線工具直線工具是形狀工具組中的工具之一，可以繪制直線或帶有箭頭的線段。光標(biāo)拖動的起始點為線段起點，拖動的終點為線段終點。在“直線工具”選項欄中可以調(diào)整線條的顏色、粗細(xì)和線型等參數(shù)，如圖所示。2