《Photoshop CC圖像處理》課件-第10章 淘寶網(wǎng)頁的設(shè)計(jì)與制作

第10章淘寶網(wǎng)店的設(shè)計(jì)與制作主講人：本章概述本例將介紹社交通信應(yīng)用登錄界面的設(shè)計(jì)思路及制作方法，在通訊網(wǎng)絡(luò)高速發(fā)展的當(dāng)前，我們的生活進(jìn)入了移動(dòng)互聯(lián)網(wǎng)時(shí)代，社交通訊類軟件在文字傳輸?shù)幕A(chǔ)上，逐漸被事實(shí)語音所替代。要點(diǎn)難點(diǎn)護(hù)膚品網(wǎng)店★★☆女包網(wǎng)店★★☆本章內(nèi)容10.1護(hù)膚品網(wǎng)站的制作

（）課時(shí)10.2女包網(wǎng)店的制作

（）課時(shí)

跟我學(xué)案例名稱作

品

描

述案

例

預(yù)

覽10.1護(hù)膚品網(wǎng)店的制作護(hù)膚品網(wǎng)店是淘寶的熱門商品，這些商品是每個(gè)人生活中必不可少的用品，無論是淘寶、天貓、還是在當(dāng)當(dāng)、京東的眾多網(wǎng)店中，護(hù)膚品網(wǎng)店都是女士們熱搜的一個(gè)熱門標(biāo)題。本節(jié)將介紹化妝品網(wǎng)店的制作，效果如圖所示10.1.1店招和導(dǎo)航的制作店招是網(wǎng)店、微店的招牌，若想要在整個(gè)網(wǎng)店、微店中讓自己店鋪的店招脫穎而出，在店招的設(shè)計(jì)上需要具備新穎、易于傳播、便于記憶等特點(diǎn)。導(dǎo)航條是網(wǎng)店|微店裝修設(shè)計(jì)中不可缺少的部分，它是指通過一定的技術(shù)手段，為網(wǎng)店、微店的訪問者提供一定的途徑，.使其可以很方便地訪問所需的內(nèi)容，它是顧客瀏覽店鋪時(shí)快速從一個(gè)頁面轉(zhuǎn)到另一個(gè)頁面的快速通道。聽我講

10.1.1店招和導(dǎo)航的制作（1）在菜單欄中選擇【文件】【新建】命令，在彈出【新建】對(duì)話框中將【名稱】設(shè)置為【護(hù)膚品網(wǎng)店設(shè)計(jì)】，將【寬度】設(shè)置為【1440像素】，【高度】設(shè)置為【2608像素】，將【分辨率】設(shè)置為【300】像素/英寸，【顏色模式】設(shè)置為【RGB顏色】，【背景內(nèi)容】設(shè)置為【白色】，完成設(shè)置后單擊【確定】按鈕新建一幅空白圖像，如圖所示。（2）在工具箱中單擊前景色色塊，在打開的【拾色器（前景色）】面板中設(shè)置前景色RGB參數(shù)值分別為255、221、255，按下鍵盤上的Alt+Del鍵，為【背景1】圖層填充前景色，完成后的效果如圖所示。聽我講

10.1.1店招和導(dǎo)航的制作（3）在圖層面板中單擊【創(chuàng)建新圖層】按鈕新建【圖層1】圖層，然后在工具箱中選擇矩形選框工具創(chuàng)建一個(gè)矩形選區(qū)，如圖所示。（4）然后使用漸變工具為選區(qū)填充前景色到白色的線性漸變，然后取消選區(qū)，如圖所示。（5）打開【LOGO】素材圖像，在工具箱中選擇移動(dòng)工具，然后將素材圖像拖曳至背景圖像編輯窗口中的合適位置，如圖所示。聽我講

10.1.1店招和導(dǎo)航的制作（6）選取工具箱中的【直線工具】，在工具屬性欄中將【填充】色的RGB參數(shù)值分別為195、54、93，【描邊顏色】設(shè)置為無，【粗細(xì)】設(shè)置為【5點(diǎn)】，然后在圖像中依照?qǐng)D所示繪制一條直線。（7）在圖層面板中確定當(dāng)前圖層處于選擇狀態(tài)，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【柵格化圖層】，再工具箱中選擇橢圓選框工具，然后在直線上創(chuàng)建一個(gè)橢圓選區(qū)，按下鍵盤上的Del鍵刪除選區(qū)內(nèi)的圖像，如圖所示。（8）單擊【創(chuàng)建新圖層】按鈕新建【圖層2】圖層，在菜單欄中選擇【編輯】|【描邊】命令，為選區(qū)添加描邊，設(shè)置【寬度】為【2像素】、將【顏色】的RGB參數(shù)值分別為241、46、114，然后取消選區(qū)，效果如圖所示。聽我講

10.1.1店招和導(dǎo)航的制作（9）打開【按鈕.psd】素材圖像，在工具箱中選擇移動(dòng)工具然后將素材圖像拖曳至背景圖像編輯窗口中的合適位置，完成后的效果如圖所示。聽我講

10.1.2制作首頁歡迎模塊歡迎模塊中使用商品圖像與標(biāo)題文字組合的方式進(jìn)行表現(xiàn)，兩者各占據(jù)畫面的二分之一，形成自然的對(duì)稱效果，平衡了畫面的信息表現(xiàn)力。（1）打開【商品圖片1.psd】素材文件，將文件拖拽至場景文件中，調(diào)整位置效果如圖所示。（2）使用【鋼筆工具】繪制箭頭，按Ctrl+Enter組合鍵，將其轉(zhuǎn)換為選區(qū)，將前景色的RGB值設(shè)置為255、112、147，按Alt+Delete鍵填充前景色，效果如圖所示。聽我講

10.1.2制作首頁歡迎模塊（3）使用【橫排文字工具】，輸入文本，將【字體】設(shè)置為【經(jīng)典黑體簡】，將【字體大小】設(shè)置為11點(diǎn)，將【顏色】的RGB值設(shè)置為255、112、147，如圖所示。（4）選擇導(dǎo)入的【商品圖片1】素材文件，對(duì)圖層進(jìn)行復(fù)制，按Ctrl+T組合鍵，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【垂直翻轉(zhuǎn)】命令，調(diào)整對(duì)象的位置，效果如圖所示。按Enter鍵確認(rèn)（5）確認(rèn)復(fù)制后的圖層處于選中狀態(tài)，單擊【添加圖層蒙版】按鈕，選擇【漸變工具】，將漸變顏色設(shè)置為從黑色到白色，拖拽鼠標(biāo)，制作倒影效果如圖所示。聽我講

10.1.2制作首頁歡迎模塊（6）選取工具箱中的【直線工具】，在工具屬性欄中將【填充】色的RGB參數(shù)值分別為195、54、93，【描邊顏色】設(shè)置為無，【粗細(xì)】為【5點(diǎn)】，然后在圖像中依照?qǐng)D10-16所示繪制一條直線，如圖所示，右鍵單擊圖層，再彈出的快捷菜單中選擇【柵格化圖層】命令。（7）打開【標(biāo)價(jià).psd】素材文件，將文件拖拽至場景文件中，調(diào)整位置效果如圖所示。聽我講

10.1.3促銷方案的效果制作促銷區(qū)域使用大小相同的矩形對(duì)畫面進(jìn)行分割，并且能夠完整地表現(xiàn)出每個(gè)促銷方案的特點(diǎn)和形象。（1）運(yùn)用矩形工具在歡迎模塊下方繪制一個(gè)粉紅色(RGB參數(shù)值分別為255、112、147)的矩形形狀，如圖所示。（2）用同樣的方法繪制一個(gè)白色的矩形形狀，并適當(dāng)調(diào)整其位置，如圖所示。（3）打開【商品圖片2】素材圖像，運(yùn)用移動(dòng)工具將素材圖像拖曳至背景圖像編輯窗口中的合適位置處，如圖所示。聽我講

10.1.3促銷方案的效果制作（4）運(yùn)用橫排文字工具在圖像上輸入相應(yīng)文字，設(shè)置【字體】為【華文行楷】，【字體大小】為8點(diǎn)，【所選字符的字距調(diào)整】為144，【顏色】為白色，如圖所示。（5）運(yùn)用矩形工具在歡迎模塊下方繪制粉紅色(RGB參數(shù)值分別為250、14、76)的矩形形狀，運(yùn)用橫排文字工具在圖像上輸入相應(yīng)文字，設(shè)置【字體】為【黑體】，【字體大小】為4,【占所選字符的字距調(diào)整】為120，【顏色】為白色，激活【仿粗體】圖標(biāo)，如圖所示。（6）打開【文字1.psd】素材文件，將素材調(diào)整至場景合適的位置，效果如圖所示。聽我講

10.1.4制作商品展示區(qū)商品展示區(qū)域使用商品圖片與文字結(jié)合的方式進(jìn)行表現(xiàn)，每組信息中的文字和產(chǎn)品位置相反，與下面當(dāng)季熱銷區(qū)中的商品剛好形成S形的視覺引導(dǎo)線。（1）使用【橫排文本工具】輸入文本，將【字體】設(shè)置為【黑體】，將【字體大小】設(shè)置為15點(diǎn)，將【字符間距】設(shè)置為120，將RGB值設(shè)置為211、76、109，單擊【仿粗體】按鈕，如圖所示。（2）繼續(xù)輸入文本，將【字體】設(shè)置為【黑體】，將【字體大小】設(shè)置為6點(diǎn)，將【字符間距】設(shè)置為0，將【顏色】設(shè)置為黑色，如圖所示。聽我講

10.1.4制作商品展示區(qū)（3）選取工具箱中的直線工具，設(shè)置填充顏色為灰色（RGB參數(shù)值均為215)、將【描邊】設(shè)置為無，將【描邊寬度】設(shè)置為3點(diǎn)，在圖像中繪制一條直線，如圖所示。（4）復(fù)制【矩形1】圖層，得到【矩形1拷貝】圖層，修改顏色的RGB參數(shù)值分別為85、191、255，適當(dāng)調(diào)整其大小和位置，如圖所示。（5）打開【商品圖片3.psd】與【文字2.psd】素材圖像，使用【移動(dòng)工具】將素材圖像拖曳至背景圖像編輯窗口中，調(diào)整其位置，如圖所示。聽我講

10.1.4制作商品展示區(qū)（6）運(yùn)用【橫排文字工具】在圖像上輸入相應(yīng)文字，將【字體】設(shè)置為【華文中宋】，將【字體大小】設(shè)置為10點(diǎn)，將【字符間距】設(shè)置為0，將【顏色】設(shè)置為白色，單擊【仿粗體】按鈕，如圖所示。（7）設(shè)置前景色為淡黃色（RBG參數(shù)值分別為255、232、126)，運(yùn)用圓角矩形工具繪制一個(gè)【半徑】為10像素的圓角矩形，運(yùn)用橫排文字工具在圖像上輸入相應(yīng)文字，設(shè)置【字體】為【黑體】，【字體大小】為6點(diǎn)，【所選字符的字距調(diào)整】為200，【顏色】為紅色（RGB參數(shù)值分別為177、3、11)，如圖所示。聽我講

10.1.5制作商品熱銷區(qū)下面將講解如何制作商品熱銷區(qū)，具體操作步驟如下：（1）創(chuàng)建【標(biāo)題欄】圖層組，將前面制作的標(biāo)題欄的相關(guān)圖層移動(dòng)到其中，并復(fù)制該圖層組，將復(fù)制后的圖像移動(dòng)至合適位置，運(yùn)用橫排文字工具修改相應(yīng)的文字內(nèi)容，效果如圖所示。（2）打開【背景.psd】與【按鈕2.psd】素材圖像，運(yùn)用移動(dòng)工具將素材圖像拖曳至背景圖像編輯窗口中的合適位置，如圖所示。（3）輸入如圖所示的文本對(duì)象，并分別設(shè)置文本的顏色，淺灰色（RGB值為133、134、134），深藍(lán)色（RGB值為24、108、185），深綠色（RGB值為76、146、51）。（4）至此，護(hù)膚品網(wǎng)店就制作完成了，效果如圖所示。聽我講

跟我學(xué)案例名稱作

品

描

述案

例

預(yù)

覽10.2女包網(wǎng)店的制作本案例將講解如何制作女包網(wǎng)店。最終效果如圖所示。10.2.1制作商品熱銷區(qū)首先來學(xué)習(xí)一下如何制作商品熱銷區(qū)，具體操作步驟如下：（1）單擊【文件】|【新建】命令，彈出【新建】對(duì)話框，設(shè)置【名稱】為【女包網(wǎng)店的制作】，【寬度】為1440像素，【高度】為3200像素，【分辨率】為300像素/英寸，【顏色模式】為【RGB顏色】，【背景內(nèi)容】為【白色】，單擊【確定】按鈕，新建一幅空白圖像，如圖所示。（2）新建【圖層1】圖層，運(yùn)用【矩形選框工具】創(chuàng)建一個(gè)矩形選區(qū)，如圖所示。（3）設(shè)置前景色為黑色，按【Alt+Delete】組合鍵為選區(qū)填充前景色，效果如圖所示。聽我講

10.2.1制作商品熱銷區(qū)（4）取消選區(qū)，選取工具箱中的【橫排文字工具】，輸入相應(yīng)文字，設(shè)置【字體】為【黑體】，【字體大小】為3.5點(diǎn)，【顏色】為白色，效果如圖所示。（5）打開【導(dǎo)航條.psd】素材圖像，將素材拖拽至場景中，效果如圖所示。聽我講

10.2.2制作歡迎首頁本案例主要使用矩形工具制作歡迎首頁，具體操作步驟如下。（1）選取工具箱中的【矩形工具】，在工具屬性欄中設(shè)置【選擇工具模式】為【形狀】，在圖像上單擊鼠標(biāo)左鍵，彈出【創(chuàng)建矩形】對(duì)話框，設(shè)置【寬度】為1440像素、【高度】為700像素，如圖所示，單擊【確定】按鈕，即可創(chuàng)建矩形形狀，設(shè)置填充顏色為淡藍(lán)色（RGB參數(shù)值分別為244、252、252)。（2）打開【線條】素材圖像，運(yùn)用移動(dòng)工具將其拖曳至背景圖像編輯窗口中的合適位置，設(shè)置【線條】圖層的【不透明度】為30%，效果如圖所示。聽我講

10.2.2制作歡迎首頁（3）打開【女包1.psd】素材圖像，運(yùn)用移動(dòng)工具將其拖曳至背景圖像編輯窗口中的合適位置，如圖所示。（4）打開【女包文字1.psd】素材圖像，運(yùn)用移動(dòng)工具將其拖曳至背景圖像編輯窗口中的合適位置，如圖所示。聽我講

10.2.3促銷方案的制作本案例主要使用矩形工具、橫排文字工具和橢圓選框工具制作促銷方案。（1）選取工具箱中的【矩形工具】，在工具屬性欄中設(shè)置【選擇工具模式】為【形狀】，在圖像上繪制一個(gè)矩形形狀，在【屬性】面板中設(shè)置【W(wǎng)】為950像素、【H】為200像素、【X】為250像素、【Y】為910像素、填充顏色為紅色（RGB參數(shù)值分別為250、41、96)，如圖所示。

聽我講

10.2.3促銷方案的制作（2）選取工具箱中的【橫排文字工具】，在圖像編輯窗口中的適當(dāng)位置輸入相應(yīng)文字，設(shè)S【字體】為【方正綜藝簡體】，【字體大小】為15點(diǎn)，【所選字符的字距調(diào)整】為100，【顏色】為白色；雙擊文字圖層，彈出【圖層樣式】對(duì)話框，選中【投影】復(fù)選框，保持默認(rèn)設(shè)置，單擊【確定】按鈕，添加圖層樣式，效果如圖所示。（3）打開【邊框.psd】素材圖像，運(yùn)用移動(dòng)工具將其拖曳至背景圖像編輯窗口中的合適位置，效果如圖所示。

聽我講

圖10-46輸入相應(yīng)文字10.2.3促銷方案的制作（4）運(yùn)用【橢圓選框工具】，在促銷區(qū)的圖像上創(chuàng)建一個(gè)圓形選區(qū)；選取工具箱中的矩形選框工具，在工具屬性欄中單擊【從選區(qū)減去】按鈕，在橢圓選區(qū)下方繪制矩形選區(qū)，減去相應(yīng)的選區(qū)區(qū)域，如圖所示。（5）新建【圖層4】圖層，設(shè)置前景色為深紅色(RGB參數(shù)值分別為202、4、57)，為選區(qū)填充顏色并取消選區(qū)，復(fù)制【圖層4】圖層兩次，并調(diào)整圖像至合適位置，如圖所示。（6）打開【女包文字2.psd】素材圖像，運(yùn)用移動(dòng)工具將其拖曳至背景圖像編輯窗口中的合適位置，如圖所示。聽我講

10.2.4制作收藏區(qū)與廣告海報(bào)本案例主要運(yùn)用自定形狀工具、矩形工具和橫排文字工具制作收藏區(qū)與廣告海報(bào)。（1）打開【收藏區(qū).psd】素材圖像，運(yùn)用移動(dòng)工具將其拖曳至背景圖像編輯窗口中的合適位置，效果如圖所示。（2）選取工具箱中的【矩形工具】，在圖像上繪制一個(gè)相應(yīng)大小的矩形形狀，在【屬性】面板中設(shè)置【填充】為淺灰色（RGB參數(shù)值均為245)、【描邊】為深灰色(RGB參數(shù)值均為160)、【描邊寬度】為0.10點(diǎn)；選取工具箱中的【橫排文字工具】，在圖像編輯窗口中的適當(dāng)位置輸入相應(yīng)文字，設(shè)置【字體】為【黑體】，【字體大小】為6點(diǎn)，【顏色】為黑色，效果如圖所示。聽我講

10.2.4制作收藏區(qū)與廣告