Photoshop平面設(shè)計(jì)基礎(chǔ) 課件 任務(wù)8.2 制作生鮮超市H5推廣頁(yè)面

LOGOPhotoshop平面設(shè)計(jì)基礎(chǔ)任務(wù)8.2制作生鮮超市H5推廣頁(yè)面任務(wù)8.2制作生鮮超市H5推廣頁(yè)面2134目錄任務(wù)描述知識(shí)技能任務(wù)實(shí)施任務(wù)小結(jié)RENWUMIAOSHUZHISHIJINENGRENWUSHISHIRENWUXIAOJIE任務(wù)描述RENWUSHISHI1任務(wù)描述

年度電商節(jié)即將到來(lái)，各大電商平臺(tái)分別推出了促銷(xiāo)優(yōu)惠，生鮮超市委托UI設(shè)計(jì)公司為超市的年度電商節(jié)設(shè)計(jì)超市H5推廣頁(yè)面，生鮮超市H5推廣頁(yè)面以微信推廣與用戶(hù)互動(dòng)，其中包含內(nèi)容鮮美食材展示、優(yōu)惠活動(dòng)介紹、便捷下單、顧客評(píng)價(jià)和推薦、最新資訊等，最終達(dá)到促銷(xiāo)推廣目的。生鮮超市H5推廣頁(yè)面主要使用CameraRAW功能更好地處理圖片，配合使用自動(dòng)摳圖工具快速摳出圖像，并使用預(yù)設(shè)分組功能規(guī)范化制作生鮮超市H5推廣頁(yè)面，結(jié)合所學(xué)的頁(yè)面構(gòu)圖知識(shí)，最后為生鮮超市制作H5推廣頁(yè)面，完成效果如圖8-2-1所示。圖8-2-1生鮮超市H5推廣頁(yè)面知識(shí)技能ZHISHIJINENG2知識(shí)技能-自動(dòng)摳圖工具學(xué)會(huì)利用自動(dòng)摳圖工具進(jìn)行復(fù)雜圖片，完成簡(jiǎn)單的超市H5推廣頁(yè)面。1.

CameraRaw功能

CameraRaw提供圖像編輯和調(diào)整功能，優(yōu)化色彩、曝光等，直接處理RAW文件，保留原始圖像信息和質(zhì)量。（1）色彩校正：通過(guò)微調(diào)白平衡、色溫、色調(diào)、飽和度等參數(shù)，對(duì)圖像的色彩進(jìn)行校正，使其更加準(zhǔn)確和自然。（2）曝光調(diào)整：提供曝光補(bǔ)償、高光/陰影恢復(fù)、曲線(xiàn)調(diào)整等工具，用于修正圖像的亮度和對(duì)比度，使細(xì)節(jié)得到更好的展示。（3）色彩調(diào)整：可以對(duì)整體圖像或者特定區(qū)域進(jìn)行顏色修正、色相調(diào)整、飽和度調(diào)整等操作，以滿(mǎn)足不同的調(diào)色需求。（4）銳化和降噪：提供銳化和降噪工具，用于增強(qiáng)圖像的細(xì)節(jié)和清晰度，同時(shí)減少因高ISO或其他因素導(dǎo)致的噪點(diǎn)。（5）幾何校正：提供傾斜校正、透視校正等功能，用于修復(fù)圖像中的線(xiàn)條和形狀傾斜問(wèn)題，使圖像更加準(zhǔn)確和穩(wěn)定。知識(shí)技能-自動(dòng)摳圖工具2.自動(dòng)摳圖工具

自動(dòng)摳圖工具又稱(chēng)為"選擇主題"（SelectSubject）工具，"選擇主題"工具是一項(xiàng)非常便捷的自動(dòng)摳圖工具，適用于簡(jiǎn)單背景和清晰主題的圖像處理，"選擇主題"工具能夠自動(dòng)識(shí)別照片中的主題，并將其從背景中準(zhǔn)確地分離出來(lái)。"選擇主題"工具在分離復(fù)雜的背景或具有復(fù)雜邊緣的主題時(shí)，可能不夠精確，在這種情況下，可能需要手動(dòng)進(jìn)行選區(qū)調(diào)整或使用其他更具體的選擇工具來(lái)完成摳圖。3.預(yù)設(shè)分組功能

預(yù)設(shè)分組是一種組織和管理預(yù)設(shè)（如圖層樣式、調(diào)色板、筆刷等）的功能。預(yù)設(shè)分組允許您將相關(guān)的預(yù)設(shè)放置在同一個(gè)分組內(nèi)，以便更方便地找到和使用它們。通過(guò)預(yù)設(shè)分組，可以整理和分類(lèi)相應(yīng)的預(yù)設(shè)，以便在需要時(shí)更快地找到它們，還可以使用面板中的拖放功能重新排列它們的順序。任務(wù)實(shí)施RENWUSHISHI3任務(wù)實(shí)施新建文檔01繪制折紙風(fēng)效果底圖02制作推廣頁(yè)面文案03制作推廣頁(yè)面按鈕04添加超市生鮮素材05任務(wù)實(shí)施—1.新建文檔01新建文檔新建文檔，選擇“移動(dòng)設(shè)備”→“iphone8/7/6”，數(shù)值使用默認(rèn)。任務(wù)實(shí)施—2.繪制折紙風(fēng)效果底圖圖8-1-4圖層面板

圖8-1-5創(chuàng)建矩形數(shù)值

圖8-1-6“返回”圖層效果圖02繪制折紙風(fēng)效果底圖

（1）新建“組”，命名為“第一層”，選擇“油漆桶工具”，填充“背景圖層”圖層顏色為深藍(lán)色“#124877”。在組內(nèi)建立一個(gè)新的“圖層”，選擇“鋼筆工具”，選擇工具模式為“形狀”，設(shè)置形狀填充類(lèi)型為“無(wú)顏色”，設(shè)置形狀描邊類(lèi)型為“黑色”、“1像素”、“直線(xiàn)”繪制一個(gè)如圖8-2-2所示圖形。(2)選擇“形狀1”圖層，按快捷鍵<Ctrl+J>，拷貝2個(gè)相同圖層。選擇“形狀1拷貝2”圖層，調(diào)整形狀填充顏色為“#ffe362”，形狀描邊類(lèi)型為“無(wú)顏色”；選擇“形狀1拷貝”圖層，調(diào)整形狀填充類(lèi)型為“#b59b32”，形狀描邊類(lèi)型為“無(wú)顏色”,調(diào)整圖層“形狀1拷貝”位置，完成后效果如圖8-2-3所示。

圖8-2-2繪制圖形效果

圖8-2-3拷貝圖形效果任務(wù)實(shí)施—2.繪制折紙風(fēng)效果底圖

圖8-2-4高光形狀

圖8-2-5高光效果02繪制折紙風(fēng)效果底圖(3)選擇“形狀1”圖層，添加圖層樣式“顏色疊加”，調(diào)整疊加顏色為“#fff4c3”,其他數(shù)值為默認(rèn)數(shù)值。調(diào)整“形狀1拷貝”圖層不可見(jiàn)，方便觀(guān)察效果。單擊“鋼筆工具”，為“形狀1”圖層繪制高光，設(shè)置形狀填充顏色為“#fff198”，設(shè)置形狀描邊類(lèi)型為“無(wú)顏色”,效果如圖8-2-4所示，把新建圖形命名為“高光”。選擇“高光圖層”，右擊“轉(zhuǎn)換為智能對(duì)象”，選擇“濾鏡”→“模糊”→“高斯模糊”，調(diào)整模糊半徑數(shù)值為“50像素”。選擇“高光圖層”，右擊“創(chuàng)建剪貼蒙板”,最終效果如圖8-2-5所示。

圖8-2-4高光形狀

圖8-2-5高光效果任務(wù)實(shí)施—2.繪制折紙風(fēng)效果底圖圖8-1-4圖層面板

圖8-1-5創(chuàng)建矩形數(shù)值

圖8-1-6“返回”圖層效果圖02繪制折紙風(fēng)效果底圖

（4）調(diào)整“形狀1”、“形狀1拷貝2”和“高光”圖層不可見(jiàn)，方便觀(guān)察效果。單擊“鋼筆工具”，為“形狀1拷貝”圖層繪制投影，設(shè)置形狀填充顏色為“#a08029”，設(shè)置形狀描邊類(lèi)型為“無(wú)顏色”,效果如圖8-2-6所示，把新建圖形命名為“投影”。選擇“投影圖層”，右擊“轉(zhuǎn)換為智能對(duì)象”，選擇“濾鏡”→“模糊”→“高斯模糊”，調(diào)整模糊半徑數(shù)值為“30像素”。選擇“高光圖層”，右擊“創(chuàng)建剪貼蒙板”,最終效果如圖8-2-7所示。

圖8-2-6投影形狀

圖8-2-7投影效果任務(wù)實(shí)施—2.繪制折紙風(fēng)效果底圖

圖8-2-8投影1數(shù)值設(shè)置

圖8-2-9投影2數(shù)值設(shè)置02繪制折紙風(fēng)效果底圖

（5）調(diào)整所有圖層可視狀態(tài)，選擇“第一層”圖層組，添加“圖層樣式”→“投影”，調(diào)整“投影”數(shù)值如圖8-2-8所示；單擊

，添加多個(gè)“投影”效果，增強(qiáng)畫(huà)面質(zhì)感，調(diào)整第二個(gè)“投影”數(shù)值如圖8-2-9所示，完成后執(zhí)行“確認(rèn)”。

圖8-2-8投影1數(shù)值設(shè)置

圖8-2-9投影2數(shù)值設(shè)置任務(wù)實(shí)施—2.繪制折紙風(fēng)效果底圖圖8-1-4圖層面板

圖8-1-5創(chuàng)建矩形數(shù)值

圖8-1-6“返回”圖層效果圖02繪制折紙風(fēng)效果底圖

（6）根據(jù)效果圖示，重復(fù)上述步驟，分別繪制“第二層”和“第三層”效果，最終效果如圖8-2-10所示。

（7）選擇“第一層”圖層組，添加圖層樣式“投影”，輸入數(shù)值如圖8-2-11所示，單擊投影位置

增加多一個(gè)投影效果，輸入數(shù)值如圖8-2-12所示。根據(jù)此方法，參照效果圖8-2-13，分別對(duì)“第二層”、“第三層”圖層組進(jìn)行“投影”的圖層樣式添加。

圖8-2-10折紙繪制效果

圖8-2-11投影1數(shù)值設(shè)置

圖8-2-13折紙繪制效果

圖8-2-12投影2數(shù)值設(shè)置任務(wù)實(shí)施—3..制作推廣頁(yè)面文案

圖8-2-13投影圖層樣式數(shù)值設(shè)置

圖8-2-14大標(biāo)題效果圖03.制作推廣頁(yè)面文案

（1）創(chuàng)建新“組”，命名為“文案”，在“文案”組內(nèi)創(chuàng)建2個(gè)新“組”，分別命名為“標(biāo)題”和“副標(biāo)題”兩個(gè)組。選擇“標(biāo)題”組，單擊“文字工具”，輸入大標(biāo)題文本，設(shè)置字符的樣式、大小、顏色等，完成后選擇文字添加“圖層樣式”→“投影”，調(diào)整“投影”數(shù)值如圖8-2-13所示。完成后，單擊“文字工具”，輸入文本“上萬(wàn)件商品一網(wǎng)打盡

超市會(huì)員享7折優(yōu)惠”，設(shè)置字符的樣式、大小、顏色等，最終完成效果如圖8-2-14所示。

圖8-2-13投影圖層樣式數(shù)值設(shè)置

圖8-2-14大標(biāo)題效果圖任務(wù)實(shí)施—3..制作推廣頁(yè)面文案

圖8-1-7創(chuàng)建矩形數(shù)值

圖8-1-8“跳過(guò)”圖層效果圖03.制作推廣頁(yè)面文案

（2）選擇“副標(biāo)題圖層組”，單擊“文字工具”，輸入文本“生鮮超市”，設(shè)置字符的樣式、大小、顏色等；單擊“文字工具”，分兩行輸入文本“年中

大促”，設(shè)置字符的樣式、大小、顏色等；完成后，運(yùn)用“矩形工具”為文本“年中大促”添加線(xiàn)條裝飾，調(diào)整裝飾線(xiàn)位置，把文本“年中大促”放置在內(nèi)，最終完成效果如圖8-2-15所示。圖8-2-15副標(biāo)題效果圖任務(wù)實(shí)施—4.制作推廣頁(yè)面按鈕04制作推廣頁(yè)面按鈕

（1）在圖層面板新建“組”，命名為“圖標(biāo)”，選擇“矩形工具”，創(chuàng)建一個(gè)寬高為24280像素，顏色為綠色的矩形。

（2）按快捷鍵<T>新建文字，輸入文本“立即搶購(gòu)”，設(shè)置字符的樣式、大小、顏色等。選擇“多邊形工具”，創(chuàng)建一個(gè)寬高為1219像素，邊數(shù)為3的三角形，完成后把文字和三角形放置在矩形內(nèi)，完成效果圖如圖8-2-16所示。圖8-2-16按鈕制作效果圖任務(wù)實(shí)施—5.添加超市生鮮素材05添加超市生鮮素材

（1）打開(kāi)素材“橙子.jpg”，執(zhí)行命令“濾鏡”→“CameraRaw濾鏡”，選擇“曲線(xiàn)”調(diào)整圖片亮度，調(diào)整數(shù)值如圖8-2-17所示，按快捷鍵<Ctrl+Shift+P>執(zhí)行“創(chuàng)建預(yù)設(shè)”命令，把名稱(chēng)命名為“圖片亮度調(diào)整”，勾選預(yù)設(shè)內(nèi)容，數(shù)值如圖8-2-18所示，調(diào)整完畢執(zhí)行“確認(rèn)”命令。

圖8-2-17圖片調(diào)整數(shù)值設(shè)置

圖8-2-18創(chuàng)建預(yù)設(shè)任務(wù)實(shí)施—5.添加超市生鮮素材05添加超市生鮮素材

（2）單擊“對(duì)象選擇工具”，框選橙子部分，系統(tǒng)自動(dòng)識(shí)別內(nèi)容后，刪除背景，保留透明效果，如圖8-2-19所示。圖8-2-19圖片去底效果任務(wù)實(shí)施—5.添加超市生鮮素材

圖8-2-20置入圖片預(yù)設(shè)效果

圖8-2-21圖片去底效果05添加超市生鮮素材

（3）打開(kāi)圖片素材“玻璃瓶.jpg”，執(zhí)行命令“濾鏡”→“CameraRaw濾鏡”，單擊“更多”，選擇“載入設(shè)置”，選擇“圖片亮度設(shè)置”預(yù)設(shè)效果，如圖8-2-20所示，完成效果后，單擊“對(duì)象選擇工具”，完成“玻璃瓶.jpg”自動(dòng)摳圖效果，如圖8-2-21所示。

圖8-2-20置入圖片預(yù)設(shè)效果

圖8-2-21圖片去底效果

（4）重復(fù)以上步驟，分別運(yùn)用“預(yù)設(shè)分組效果”和“自動(dòng)摳圖工具”，分別對(duì)素材“雪糕.jpg”、“菠蘿.jpg”、“面包.jpg”進(jìn)行圖片處理。完成后，把素材全部導(dǎo)入到H5頁(yè)面中，根據(jù)效果圖更改和調(diào)整素材圖層位置，效果如圖8-2-1所示。任務(wù)小結(jié)RENWUSHISHI4任務(wù)小結(jié)CameraRaw提供了豐富的調(diào)整工具和功能，如曝光、對(duì)比度、白平衡、色調(diào)、飽和度等，用戶(hù)可以通過(guò)直觀(guān)的界面進(jìn)行操作，實(shí)現(xiàn)對(duì)圖像的精細(xì)調(diào)整。使用戶(hù)快速調(diào)整圖片，利用預(yù)設(shè)功能可以讓同類(lèi)照片快速套用調(diào)整效果，大大提高工作效率。本次任務(wù)主要學(xué)習(xí)利用CameraRaw工具，快速調(diào)整圖效果，最終完成制作生鮮超市推廣H5頁(yè)面效果。拓展任務(wù)利用CameraRAW功能、預(yù)設(shè)分組功能、自動(dòng)摳圖，“制作抽獎(jiǎng)H5頁(yè)面”。效果如圖8-2-22所示。1.新建畫(huà)板7201280像素，導(dǎo)入素材“8-2拓展任務(wù)背景圖.psd”素材，調(diào)整背景圖大小，放置在畫(huà)板中心。2.繪制抽獎(jiǎng)輪盤(pán)底圖（1）新建“圖層組”，命名為“抽獎(jiǎng)輪盤(pán)底圖”，繪制一個(gè)6401225像素，10像素的圓角矩形，根據(jù)效果圖所示分別為圓角矩形添加內(nèi)陰影、外發(fā)光圖層樣式。（2）選擇“橢圓工具”，繪制一個(gè)1616像素的圓形，設(shè)置圖形顏色為“#ffde2b”，根據(jù)效果圖分別添加圖層樣式“斜面和浮雕”、“投影”。完成后，按快捷鍵<Ctrl+J>拷貝圖層，填充為白色，根據(jù)效果圖分別添加圖層樣式“斜面和浮雕”、“投影”。同時(shí)選擇兩個(gè)橢圓，復(fù)制更多圖形，運(yùn)用“對(duì)齊與分布工具”，調(diào)整圓形的位置。3.制作抽獎(jiǎng)輪盤(pán)（1）新建“圖層組”，命名為“抽獎(jiǎng)輪盤(pán)”,選擇“圓角矩形工具”，繪制一個(gè)寬高為188154像素，圓角為20像素的圖形，完成后分別添加白色的“顏色疊加”、灰色的“內(nèi)陰影”