淘寶天貓美工 第11章 化妝品店鋪頁面設計

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