項(xiàng)目四---任務(wù)5-網(wǎng)站Banner設(shè)計(jì)ppt課件

1、 Photoshop 圖像處理項(xiàng)目四 電商圖像設(shè)計(jì) 項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)1 網(wǎng)店店標(biāo)設(shè)計(jì)任務(wù)2 網(wǎng)店店招的設(shè)計(jì)項(xiàng)目四 XIANG MU YI0102 電商圖像設(shè)計(jì)任務(wù)3 網(wǎng)店詳情頁(yè)設(shè)計(jì)03任務(wù)4 霓虹燈字設(shè)計(jì)04任務(wù)5 網(wǎng)店 Banner 設(shè)計(jì)05項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù) 5 網(wǎng)店 Banner 設(shè)計(jì)項(xiàng)目四 電商圖像設(shè)計(jì)項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)學(xué)習(xí)目標(biāo) 掌握直線工具、多邊形套索工具和文字處理工具的使用方法。 能熟練使用自定形狀工具。 掌握?qǐng)D片排版的基本技巧。 掌握藝術(shù)字體的運(yùn)用。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)分析在電商裝修中，Banne

2、r 作為一個(gè)網(wǎng)店的招牌，是商品能否吸引顧客點(diǎn)擊購(gòu)買的關(guān)鍵，也是橫幅廣告的一種表現(xiàn)形式。橫幅廣告又稱旗幟廣告，它是橫跨于網(wǎng)頁(yè)上的矩形公告牌，當(dāng)用戶點(diǎn)擊這些橫幅時(shí)，通?？梢枣溄拥綇V告的主網(wǎng)頁(yè)。網(wǎng)店 Banner 制作需要學(xué)生綜合運(yùn)用Photoshop 中所學(xué)的工具來(lái)完成。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)分析某運(yùn)動(dòng)用品網(wǎng)店需要在“618”大促活動(dòng)日來(lái)臨之際，設(shè)計(jì)制作一組網(wǎng)店 Banner 圖片，完成店鋪裝修，效果圖如圖所示。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)分析橫幅廣告設(shè)計(jì)主要由圖形、文字和矢量圖形組成。首先用多邊形套索工具和直線工具繪制多彩的背景效果，用文字工具處理文字效果，用自定形

3、狀工具繪制裝飾的五角星形，形成最終效果圖。本任務(wù)的學(xué)習(xí)重點(diǎn)是自定形狀工具的使用和文字的排版技巧。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施1新建圖像文件單擊“文件”菜單中的“新建”命令，彈出“新建”對(duì)話框，如圖 所示，設(shè)置寬度為 727 像素，高度為 416 像素，分辨率為 72 像素 / 英寸，顏色模式為 RGB 顏色、8 位，背景內(nèi)容為白色。設(shè)置好參數(shù)后，單擊“確定”按鈕。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施2制作背景（1）新建圖層組，圖層組命名為“背景”。（2） 在“背 景” 圖 層 組 中 新 建 圖 層 2，在工具箱中設(shè)置前景色為 #e8e5d4， 按“Alt+Delete

4、”鍵填充前景色，降低背景明度，提升圖片質(zhì)感。（3）新建圖層 3，單擊“多邊形套索工具”按鈕，在左上角繪制三角形選區(qū)。（4）新建圖層 4，單擊“多邊形套索工具”按鈕，在三角形下方繪制四邊形選區(qū)。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施2制作背景（5）重復(fù)使用多邊形套索工具，分別繪制右下角的四邊形，并填充相應(yīng)的顏色（從下往上的顏色：#274f57、#941f16、#466b7e、#274f57、#466b7e 和 #274f57），背景效果圖如圖所示，圖層排列順序如圖所示。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施2制作背景（6）在“背景”圖層添加線條裝飾。單擊“直線工具”按鈕，繪制三條直線

5、，線條顏色為 #274f57，填補(bǔ)背景留白處，如圖所示。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施3打開(kāi)素材圖像文件單擊“文件”菜單中的“打開(kāi)”命令，彈出“打開(kāi)”對(duì)話框，選中“籃球 .jpg”，單擊“確定”按鈕打開(kāi)素材圖片。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施4摳選素材圖片（1）因素材圖片背景為白色，顏色單一，可選用“快速選擇工具”或“魔棒工具”對(duì)籃球進(jìn)行摳圖。（2）在選框內(nèi)右擊，在彈出的快捷菜單中選擇“選擇反向”命令（或按快捷鍵“Ctrl+Shift+I”），即可選取籃球區(qū)域，如圖所示。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施4摳選素材圖片（3）單擊圖層面板中“背景”組左側(cè)的下

6、三角形，隱藏“背景”組下面的圖層，如圖所示。（4）選中“背景組”圖層，單擊“移動(dòng)工具”按鈕，將選取的籃球拖曳到新建的 Banner畫(huà)布中，按“Ctrl+T”鍵調(diào)整大小并移至合適的位置，如圖所示。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施5制作廣告字（1）單擊“橫排文字工具”按鈕，輸入“ WANG-ZHE 籃球”，字體為方正粗黑宋簡(jiǎn)體Regular，顏色為白色，字號(hào)為 100 點(diǎn)。（2）按“Ctrl+T”鍵對(duì)文字進(jìn)行自由變換，調(diào)整尺寸大小和擺放位置，如圖 所示。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施5制作廣告字（3）按“ Ctrl+J”鍵復(fù)制文字圖層，將前景色設(shè)置為 #941f15，按“

7、 Alt+Delete”鍵將復(fù)制的文字顏色填充為前景色，并將拷貝的文字圖層位置調(diào)整到白色文字圖層的下方。單擊“移動(dòng)工具”按鈕，調(diào)整位置制作出簡(jiǎn)單的藝術(shù)投影文字，如圖所示。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施5制作廣告字（4）單擊“橫排文字工具”按鈕，輸入“ CUBA 職業(yè)聯(lián)賽官方指定用球”，字體為方正粗黑宋簡(jiǎn)體 Regular，顏色為白色，字號(hào)為 33 點(diǎn)。單擊“移動(dòng)工具”按鈕，調(diào)整位置如圖所示。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施6制作角標(biāo)（1）新建圖層，單擊“矩形選框工具”按鈕，在右上角繪制矩形選框。單擊“選擇”/“修改”/“平滑”，彈出“平滑選區(qū)”對(duì)話框，設(shè)置取樣半徑為

8、8 像素，單擊“確定”按鈕，如圖所示。前景色設(shè)置為 #b23225，按“Alt+Delete”鍵將選區(qū)填充為前景色。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施6制作角標(biāo)（2）單擊“矩形選框工具”按鈕，框選出圓角矩形的上半部分，右擊選擇“自由變換”，直接向上拉長(zhǎng)出畫(huà)布，調(diào)整好后放置在合適的位置，如圖所示。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施6制作角標(biāo)（3）單擊“橫排文字工具”按鈕，輸入“618 運(yùn)動(dòng)上新”，字體為等線 Light，顏色為白色，字號(hào)為 20 點(diǎn)，字間距為 140，加粗，調(diào)整好位置，如圖所示。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施7制作“立即搶購(gòu)”效果（1）新建圖層，

9、單擊“矩形選框工具”按鈕，在右下角繪制矩形選框。單擊“選擇”/“修改”/“平滑”，彈出“平滑選區(qū)”對(duì)話框，設(shè)置取樣半徑為 8 像素。前景色設(shè)置為白色，按“Alt+Delete”鍵將選區(qū)填充為前景色。（2）按“ Ctrl+J”鍵復(fù)制圓角矩形，按“ Ctrl”鍵并單擊復(fù)制圓角矩形圖層縮覽圖區(qū)域，載入圓角矩形選區(qū)。前景色設(shè)置為 #466b7e，按“ Alt+Delete”鍵將選區(qū)填充為前景色，將復(fù)制的圓角矩形圖層移至白色矩形圖層下面。單擊“移動(dòng)工具”按鈕，將復(fù)制的圓角矩形移至合適的位置。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施7制作“立即搶購(gòu)”效果（3）選中復(fù)制的圓角矩形圖層，在圖層面板中右擊選

10、擇“混合選項(xiàng)”，在彈出的“圖層樣式”對(duì)話框中選擇“投影”，做出與廣告字一樣的樣式設(shè)計(jì)，如圖所示。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施7制作“立即搶購(gòu)”效果（4）單擊“橫排文字工具”按鈕，輸入“立即搶購(gòu) ”，在工具選項(xiàng)欄中設(shè)置字體為微軟雅黑 Light，顏色為 #466b7e，字號(hào)為 20 點(diǎn)，字間距為 140，加粗，調(diào)整好位置，如圖所示。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施8添加裝飾為了使圖像更加豐富，可以在籃球周圍添加五角星圖案。單擊“自定形狀工具”，在工具選項(xiàng)欄中設(shè)置模式為形狀，選擇“五角星”形狀，在畫(huà)布中繪制出大小不一的五角星圖案，隨意點(diǎn)綴在畫(huà)布中，效果圖如圖所示。項(xiàng)目四

11、 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)任務(wù)實(shí)施9保存圖像文件單擊“文件”菜單的“存儲(chǔ)為”命令，在彈出的對(duì)話框中分別選擇以 PSD 格式和 JPG格式保存。完成后退出 Photoshop CC 2015。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)注意事項(xiàng)1在摳圖時(shí)，當(dāng)圖片背景是純色或非常簡(jiǎn)單時(shí)，可以用“快速選擇工具”和“魔棒工具”來(lái)完成摳圖工作。2要制作具有立體感的字體時(shí)，可以通過(guò)復(fù)制字體改變顏色，通過(guò)兩層字體間的錯(cuò)位制作出投影的感覺(jué)，以增強(qiáng)字體的立體感。3裝飾畫(huà)面時(shí)，裝飾物可以通過(guò)復(fù)制再自由變換快速地完成。4. 使用直線工具繪圖時(shí)，同時(shí)按住“ Shift”鍵，可以繪制水平直線、垂直直線和 45角直線。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)相關(guān)知識(shí)一、直線工具直線工具可以繪制直線或有箭頭的線段。光標(biāo)拖曳的起始點(diǎn)為線段起點(diǎn)，拖曳的終點(diǎn)為線段終點(diǎn)。按“ Shift”鍵，可以使直線的方向控制在 0、45或 90。在“直線工具”選項(xiàng)欄中可以調(diào)整線條的粗細(xì)和顏色等，如圖所示。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)相關(guān)知識(shí)一、直線工具單擊“直線工具”選項(xiàng)欄中的 ，在其下拉菜單中可以設(shè)置箭頭的相關(guān)參數(shù)，如圖所示。項(xiàng)目四 任務(wù)5 網(wǎng)站Banner設(shè)計(jì)相關(guān)知識(shí)二、創(chuàng)建自定形狀Photoshop 自定形狀工具軟件自帶是有限的，可以在網(wǎng)上搜索下載更多需要的自定形狀圖形，添加到自定形狀中，文