淘寶天貓美工 第11章 化妝品店鋪頁面設(shè)計(jì)

在設(shè)計(jì)店鋪首頁前，可以多參考同類別的優(yōu)秀店鋪來獲取靈感，然后再根據(jù)自身店鋪的受眾人群和產(chǎn)品特點(diǎn)來搜集好相案例名稱首頁海報(bào)設(shè)計(jì)素材文件光盤/素材/11/模特.jpg、瓶子.png效果文件光盤/效果/11/首頁海報(bào).psd視頻文件掃右側(cè)二維碼制作首頁海報(bào)。最終效果如圖11-1所示。圖1-1●STEP1新建一個(gè)尺寸為1920×4000像素、分辨率為72像素/英寸的的空白文件，設(shè)置紅色系的漸變顏色，然后將背景進(jìn)行線性漸變填充，并拉出參考線確定店招、海報(bào)的位置，如圖11-2所示。色標(biāo)圖11-2●STEP2新建圖層，使用矩形選框工具工具繪制矩形選區(qū)，然后使用漸變工具填充選區(qū)，如圖11-3所示?！馭TEP3新建圖層，使用矩形工具繪制矩形，然后使用直接選擇工具調(diào)整錨點(diǎn)，并為其添加淡黃色的漸變疊加，如圖11-4所示。圖11-3●STEP4使用相同的方法繪制另外的矩形，并調(diào)整錨點(diǎn)位置，然后分別對(duì)其設(shè)置不同的漸變顏色，如圖11-5所示?！馭TEP5新建圖層，使用鋼筆工具沿形狀菱角繪制路徑，然后使用白色的畫筆工具描邊路徑(描邊時(shí)要選中“模擬壓力”復(fù)選框),如圖11-6所示?！馭TEP6使用相同的方法對(duì)豎著的邊添加描邊，如圖11-7所示。●STEP7使用鋼筆工具繪制路徑，然后填充為紅色到深紅的漸變，如圖11-8所示。圖11-7圖11-8圖11-7●STEP8設(shè)置前景色為淺一些的紅色，取消選區(qū)后并新建圖層，使用畫筆工具按【Shift】鍵繪制一條紅色的線條，注意設(shè)置畫筆的筆記大小，然后按【Ctrl+T】組合鍵調(diào)整如圖11-9所示。●STEP9雙擊紅色的圖像圖層，為其添加投影的圖層樣式，如圖11-10所示。圖11-9圖11-10圖11-9鍵創(chuàng)建圖層組?！馭TEP11繪制矩形并調(diào)整錨點(diǎn)位置，然后為該形狀圖層設(shè)置漸變疊加，如圖11-11所示?！馭TEP12繼續(xù)繪制矩形，調(diào)整錨點(diǎn)并為其設(shè)置不同的漸變顏色，如圖11-12所示。圖11-12●STEP13繪制矩形，使用直接選擇工具調(diào)整錨點(diǎn)位置，并設(shè)置漸變疊加，復(fù)制3個(gè)形狀矩形，分別調(diào)整錨點(diǎn)和更改漸變疊加顏色，如圖11-13所示?！馭TEP14繼續(xù)繪制矩形形狀，使用直接選擇工具調(diào)整錨點(diǎn)位置，為其添加描邊的圖層樣式，然后將圖層內(nèi)部不透明度為0%,如圖11-14所示。圖11-14圖11-13圖11-14●STEP16在右側(cè)的面中繪制矩形，并為該形狀圖層設(shè)置漸變疊加、內(nèi)發(fā)光和外發(fā)光的圖層樣式，如圖11-16所示。新變●STEP17使用鋼筆工具沿圖像的邊繪制形狀路徑，在整個(gè)立體矩形的下方新建圖層，然后設(shè)置黑色畫筆描邊路徑(這里不選中“模擬壓力”復(fù)選框),如圖11-17所示。選擇“濾鏡/模糊/高斯模糊”命令，在打開的“高斯模糊”對(duì)話框中設(shè)置模糊效果，完成后如圖11-18所圖11-18圖11-17圖11-18●STEP20使用相同的方法繪制其他的立體矩形，將其放在圖層組中，并放置在大的立體圖形下方，如圖11-19所示。●STEP21復(fù)制紅色的立體圖層到畫面右側(cè)，放大圖形后，更改各個(gè)面的漸變疊加顏色，如圖11-20所示。圖11-19圖11-20圖11-19●STEP22繼續(xù)在紅色的立體圖形后面繪制長(zhǎng)方立體圖形，并設(shè)置不同的漸變疊加顏色，然后調(diào)整圖形和角度和位置并為其繪制陰影效果，如圖11-21所示?！馭TEP23使用鋼筆工具繪制路徑并使用白色的畫筆工具描邊，并將關(guān)于該圖形的所有圖層創(chuàng)建圖層組，如圖11-22所示?！馭TEP24新建圖層，使用鋼筆工具繪制陰影路徑，將其轉(zhuǎn)換為選區(qū)后填充為黑色，如圖11-23所示。圖11-24圖11-25圖11-24點(diǎn)，然后分別為其添加圖層蒙版，再使用漸變工具將下半部分圖像隱藏，如圖11-26所示。●STEP28在所有圖層最上方按【Ctrl+Alt+Shift+E】組合鍵蓋印圖層，然后選擇“濾鏡/雜色/添加雜色”命令，打開“添加雜色”對(duì)話框，在其中設(shè)置相關(guān)參數(shù)，完成后如圖11-27所示。圖11-27●STEP29使用矩形工具繪制矩形，然后使用直接選擇工具向中心縮放形狀圖形，完成后將外面的矩形設(shè)置為淡黃色，如圖11-28所示。●STEP30將素材文件“模特.tif”拖動(dòng)到圖像文件中，剪貼蒙版，如圖11-29所示。的圖層樣式，完成后如圖11-30所示。角度(:不適明度(0)不適明度(0):圖11-30●STEP32繼續(xù)繪制矩形并調(diào)整錨點(diǎn)，設(shè)置填充顏色比相框稍微深一些的黃，將其作為相框的厚度，如圖11-31所示。●STEP33整體放大相框圖像，使用前面相同的方法為其添加陰影效果，如圖11-32所示?！馭TEP34將素材文件"瓶子.png"拖動(dòng)到圖像文件中，縮放至合適大小后，使用橡皮擦工具擦除多余的圖像，如圖制投影，如圖11-34所示。●STEP36將素材文件“瓶子.png”拖動(dòng)到圖像文件中，縮放至合適大小后，將其放置在相框的下方，如圖11-35所示。●STEP37再在絲帶下方新建圖層，用同樣的方法繪制陰影，如圖11-36所示?！馭TEP38輸入文字，設(shè)置字體后將文字圖層復(fù)制兩個(gè)。先隱藏復(fù)制的文字圖層，雙擊原文字圖層，為其添加漸變疊加和描邊的圖層樣式，如圖11-37所示。歲末好禮歲末好禮圖11-38圖11-39圖11-38●STEP43將文字創(chuàng)建為圖層組，然后按【Ctrl+T】組合鍵調(diào)整文字斜切角度，并將其放置在絲帶圖層的下方(注意調(diào)整絲帶的位置，不要擋住文字),如圖11-42所示。11.2制作店招和導(dǎo)航案例名稱店招和導(dǎo)航制作素材文件無效果文件光盤/效果/11/店鋪首頁.psd視頻文件掃右側(cè)二維碼息等，這里只是把店招位置預(yù)留出來，直接制作導(dǎo)航。最終效果如圖11-43所示?！馭TEP1拉出參考線確定店招和導(dǎo)航的位置，如圖11-44●STEP2使用圓角矩形工具繪制1200×30像素的圓角矩形(可在工具屬性欄中將圓角半徑設(shè)置大一些),居中對(duì)其畫布后，雙擊該形狀圖層，為其添加漸變疊加的圖層樣式，如圖11-45所示?！馭TEP3繪制矩形形狀，為其添加紅色系的漸變疊加顏色，然后在上面輸入文字，注意與導(dǎo)航條對(duì)齊，如圖11-46●STEP4隱藏參考線，然后依次在導(dǎo)航條上輸入其他相關(guān)文字，并設(shè)置字體與顏色，如圖11-47所示?！馭TEP5將關(guān)于導(dǎo)航的所有圖層創(chuàng)建為圖層組，并將圖層組名稱更改為導(dǎo)航。套裝專享區(qū)面膜補(bǔ)水專區(qū)明星產(chǎn)品夜間護(hù)膚所有產(chǎn)品收藏店鋪11.3制作寶貝陳列區(qū)案例名稱制作寶貝陳列區(qū)素材文件光盤/素材/11/面膜.png、產(chǎn)品.psd效果文件光盤/效果/11/店鋪首頁.psd視頻文件掃右側(cè)二維碼列和相關(guān)單品陳列，最終效果如圖11-48所示?！馭TEP1為了在操作時(shí)不影響其他圖層，可將所有圖層組鎖定?！馭TEP2繪制矩形，并設(shè)置形狀填充顏色為深紅色，將該形狀圖層放置在背景圖層的上方，如圖11-49所示?！馭TEP3繪制矩形，使用直接選擇工具調(diào)整錨點(diǎn)，然后為形狀圖層添加圖層蒙版，使用漸變工具將矩形下半部分顯示透明，如圖11-50所示圖11-49圖11-50圖11-49●STEP4繪制矩形，使用直接選擇工具調(diào)整錨點(diǎn)，然后為該形狀圖層添加漸變疊加的圖層樣式，如圖11-51所示?！馭TEP5使用相同的方法繪制立體圖形的其他兩個(gè)面，并設(shè)置較深一些的漸變疊加顏色，然后為其添加圖層蒙版，使用漸變工具將矩形下半部分顯示透明，如圖11-52所圖11-51圖11-52圖11-51●STEP6將該立體圖形中所有矩形圖層創(chuàng)建為圖層組，然后復(fù)制圖層組，并縮放其大小，移動(dòng)到相應(yīng)位置，如圖11-53所示?！馭TEP7選擇相應(yīng)的圖層，分別對(duì)圖層的漸變顏色進(jìn)行更改，再分別調(diào)整各個(gè)行政圖層的圖層蒙版，如圖11-54所示?！馭TEP8繼續(xù)復(fù)制一個(gè)圖層組到畫面的右側(cè)，如圖11-55所示。●STEP9顯示參考線，繪制一個(gè)白色矩形，將視頻的位置預(yù)留出來，如圖11-56所示。●STEP10繪制矩形，為其添加淺灰到深灰的漸變疊加圖層樣式，如圖11-57所示?！馭TEP11繪制矩形，為其添加深灰到淺灰的漸變疊加圖層樣式，然后按【Ctrl+T】組合鍵進(jìn)入變換狀態(tài)后，再按【Ctrl+Alt+Shift】組合鍵將鼠標(biāo)移到變換點(diǎn)上，向中心變換，完成后將該形狀圖層放置在剛剛繪制的矩形后面，如圖11-58所示。圖11-57●STEP12設(shè)置前景色為淺灰色，使用畫筆工具并選擇柔邊的筆尖形狀，先將矩形形狀載入選區(qū)，然后新建圖層，使用畫筆工具進(jìn)行涂抹，如圖11-59所示?！馭TEP13取消選區(qū)后，在使用矩形繪制變換矩形的厚度，為其設(shè)置相應(yīng)的漸變疊加效果，如圖11-60所示。圖11-59●STEP14新建圖層，設(shè)置前景色為白色，設(shè)置畫筆筆尖大小為5像素，然后使用鋼筆工具沿矩形邊緣繪制路徑，使用畫筆對(duì)路徑進(jìn)行模擬壓力描邊，如圖11-61所示。層樣式，完成后隱藏參考線，如圖11-62所示。尊和陸們圖11-62●STEP16將關(guān)于黑色的所有矩形創(chuàng)建為圖層組。Alt+Shift】組合鍵對(duì)矩形進(jìn)行變形，然后為其設(shè)置漸變疊加，如圖11-63所示。葡變不述明度()(丘向間位才驗(yàn)認(rèn)值●STEP18繼續(xù)繪制矩形，并設(shè)置相應(yīng)的漸變疊加顏色，如圖11-64所示。●STEP19新建圖層，設(shè)置前景色為白色，設(shè)置畫筆筆尖大小為3像素，然后使用鋼筆工具沿矩形邊緣繪制路徑，使用畫筆對(duì)路徑進(jìn)行模擬壓力描邊，如圖11-65所示?！馭TEP20將關(guān)于紅色圖形的所有圖層創(chuàng)建為圖層組，然后對(duì)其整體縮放，并放置在相應(yīng)位置，如圖11-66所示。●STEP21將海報(bào)中的產(chǎn)品圖層組復(fù)制到編輯的位置上方，并縮放其大小(為了便于區(qū)分可以將產(chǎn)品圖按【Ctrl+E】組合鍵合并),如圖11-67所示?！馭TEP22將素材文件“面膜.png”拖動(dòng)到圖像文件中，并放置在需要的位置，如圖11-68所示。圖11-67圖11-68●STEP23選擇工具箱中的自定義形狀工具，在工具屬性欄中選擇箭頭圖形，在圖像中繪制，然后將其旋轉(zhuǎn)到一定角度，再為其設(shè)置相應(yīng)的漸變疊加顏色，如圖11-69所示?！馭TEP24選擇工具箱中的直接選擇工具，對(duì)箭頭的錨點(diǎn)進(jìn)行調(diào)整，如圖11-70所示。圖11-69圖11-70●STEP25輸入文字，并設(shè)置不同的字體大小，將文字組合放置在箭頭形狀上，如圖11-71所示?！馭TEP26選擇價(jià)格文字圖層，為其添加金色的漸變疊加，如圖11-72所示。圖11-72圖11-71圖11-72然后為圖層組添加漸變疊加和投影的圖層樣式，如圖11-漸變石榴深補(bǔ)水養(yǎng)出水嫩肌膚原價(jià)：389元圖11-73●STEP28繪制圓角矩形圖形，為矩形添加描邊、漸變疊加和投影的圖層樣式，如圖11-74所示。保濕修護(hù)套裝石榴深補(bǔ)水養(yǎng)出水嫩肌膚①柔膚水180ml②保濕乳液150ml原價(jià)：389元●STEP29使用自定義形狀工具繪制箭頭圖形，使用鋼筆工具刪除尖角的錨點(diǎn)，然后為該形狀圖層添加漸變疊加和投影的圖層樣式，如圖11-75所示。保濕修護(hù)套裝石榴深補(bǔ)水養(yǎng)出水嫩肌膚①柔膚水180ml②保濕乳液150ml原價(jià)：389元圖11-75●STEP30在形狀圖形上輸入相關(guān)的文字信息，然后分別為文字設(shè)置相應(yīng)的顏色，如圖11-76所示。保濕修護(hù)套裝石榴深補(bǔ)水養(yǎng)出水嫩肌膚①柔膚水180ml②保濕乳液150ml原價(jià)：389元活動(dòng)價(jià)●STEP31在之前的文字說明圖層組中的原價(jià)格文字上繪制直線，將原件劃掉，繪制的直線為直接應(yīng)用設(shè)置的圖層組圖層樣式，如圖11-77所示。石榴深補(bǔ)水養(yǎng)出水嫩肌膚①柔膚水180ml②保濕乳液150ml●STEP32繼續(xù)輸入相應(yīng)的文字，并設(shè)置字體和大小，如圖圖11-78●STEP33繪制圓形形狀，為該形狀圖層設(shè)置紅色的漸變疊加和白色的投影圖層樣式，如圖11-79所示。清除圖層樣式，并為其設(shè)置白色的描邊，無填充顏色，如圖11-80所示。圖11-79●STEP35在圓形上繪制白色的直線，并輸入白色的文字，如圖11-81所示。●STEP36將產(chǎn)品、文字和背后的輔助圖形全部創(chuàng)建為圖層組，將圖層組重命名為“寶貝推薦區(qū)”,如圖11-82所示。矩形21組11拷貝3組11拷貝2組11拷貝●STEP37復(fù)制該圖層組，將其放置在原圖層組下方，并調(diào)整灰色的輔助圖形，如圖11-83所示?！馭TEP38新建圖層，設(shè)置前景色為深灰色，調(diào)整畫面筆尖剪貼蒙版，如圖11-84所示。圖11-83圖11-84●STEP39在視頻區(qū)域和下面的寶貝區(qū)域之間的空隙中，使用制作海報(bào)文字的方法制作標(biāo)題文字，如圖11-85所示。●STEP40在文字兩側(cè)繪制直線，為圖層創(chuàng)建圖層蒙版，使用漸變工具將外側(cè)部分變?yōu)橥该鳎鐖D11-86所示。●STEP42選擇“圖像/畫布大小”命令，在打開的“畫布大小"對(duì)話框中將畫布高度調(diào)整為4200像素，并設(shè)置在下方擴(kuò)展，如圖11-87所示。●STEP43選擇底部的紅色背景，使其鋪滿整個(gè)畫布?！馭TEP44使用矩形工具繪制矩形，并設(shè)置不同的填充顏色，然后分別調(diào)整相應(yīng)矩形的錨點(diǎn)，完成后再為各個(gè)矩形設(shè)置相應(yīng)的漸變顏色，如圖11-88所示寬度：1920像素高度：4200像素像素像素畫布擴(kuò)展顏色：背景●STEP45在上方繪制一個(gè)矩形，設(shè)置無填充顏色，描邊為淡紅色，粗細(xì)為8像素，如圖11-89所示。●STEP46在繼續(xù)繪制一個(gè)與描邊顏色相同的矩形，如圖11-90圖11-89圖11-90動(dòng)到圖像文件中，縮放至合適大小，如圖11-91所示。如圖11-92所示?！馭TEP49在文字下方繪制圓角矩形，設(shè)置白色的填充顏色，淡黃色