項目8 店鋪首頁的設(shè)計

項目八

店鋪首頁的設(shè)計網(wǎng)店美工項目實戰(zhàn)教程CONTENTS目錄珠寶配飾店鋪首頁設(shè)計8.1拓展藍色數(shù)碼店鋪首頁設(shè)計8.2課后思考8.38.1.1設(shè)計理念8.18.1.2工具方法8.1.3實現(xiàn)過程珠寶配飾店鋪首頁設(shè)計珠寶配飾店鋪主要針對一部分追求生活情調(diào)的知性女性人群，在本案例中，針對女性適用人群的喜好特點，選取柔和又高貴的色彩，搭配同色調(diào)的干花和絲帶等元素，營造出和諧柔美又知性的整體效果。如右圖所示，為珠寶配飾店鋪首頁的效果圖。8.1珠寶配飾店鋪首頁設(shè)計8.1.1設(shè)計理念采用以珊瑚粉、白色為主，點綴亮橙色的淺色系，使得整個畫面典雅、高貴，貼合女性溫婉迷人又時尚大方的氣質(zhì)。鏤空花半圓紋、珊瑚粉干花束、絲帶等元素的添加，使得畫面中增添了幾分知性和甜美。采用纖細又時尚的字體來編輯文字，使得整個畫面風(fēng)格統(tǒng)一、富有時尚感。首頁整體布局內(nèi)容豐富，可以提高用戶的轉(zhuǎn)化率，布局圖如右圖所示。8.1.2工具方法添加參考線來實現(xiàn)多個對象的對齊和區(qū)域限定，使得頁面更整齊、更規(guī)范。通過創(chuàng)建剪貼蒙版的方式來利用下層形狀控制上層素材圖片的顯示區(qū)域，來達到圖片大小的統(tǒng)一。使用不同的圖層混合模式來為實現(xiàn)圖片合成和調(diào)色，利用“漸變疊加”、“投影”等圖層樣式為對象增添效果。通過“矩形工具”、“鋼筆工具”等繪制不同形狀，達到頁面的多樣性。8.1.3實現(xiàn)過程繪制參考線，分別使用“直線工具”、“自定義形狀工具”、“矩形工具”繪制分隔直線、收藏圖標、搜索框及導(dǎo)航條，并加入相應(yīng)文字。8.1.3實現(xiàn)過程依次加入banner配圖素材，使用圖層蒙版控制顯示區(qū)域，并根據(jù)實際需要使用“色相/飽和度”調(diào)色、添加圖層樣式以及繪制陰影。8.1.3實現(xiàn)過程依次加入項鏈、戒指素材，使用圖層蒙版控制顯示區(qū)域，并結(jié)合圖層混合模式為戒指添加柔光效果。使用“橫排文字工具”結(jié)合“圓角矩形工具”為banner加入文字。8.1.3實現(xiàn)過程使用“直線工具”繪制banner區(qū)域和優(yōu)惠券區(qū)域的分隔線，并為其添加圖層樣式。使用“矩形工具”繪制優(yōu)惠券底板，并繪制陰影效果。使用“橫排文字工具”、“直線工具”在白底矩形的上方輸入文字及繪制優(yōu)惠券分隔線。8.1.3實現(xiàn)過程先使用“矩形工具”和“橫排文字工具”制作人氣熱賣精品區(qū)的標題和框架。再加入素材圖片并使用“曲線”工具調(diào)色，最后加入商品名稱及價格信息。8.1.3實現(xiàn)過程先使用“矩形工具”和“橫排文字工具”制作分類導(dǎo)航區(qū)的標題和框架。再加入素材圖片，使用剪貼蒙版控制其顯示區(qū)域及大小，最后加入分類信息。8.1.3實現(xiàn)過程先使用“矩形工具”、“直線工具”和“橫排文字工具”制作客服區(qū)的標題和框架。再加入旺旺頭像素材，最后加入客服名稱等信息。8.1.3實現(xiàn)過程仿照人氣熱賣精品區(qū)的制作方法，先使用“矩形工具”和“橫排文字工具”制作標題和框架，再加入素材圖片并使用“曲線”工具調(diào)色，最后加入商品名稱及價格信息。8.1.3實現(xiàn)過程運用為漸變色圖層創(chuàng)建剪貼蒙版的方式，制作漸變的菱形框，并為菱形框輸入文字。應(yīng)用為圖片創(chuàng)建剪貼蒙版的方式，制作兩張店鋪特色圖。8.1.3實現(xiàn)過程使用“橫排文字工具”輸入文字并設(shè)置格式，使用“矩形工具”繪制框線，使用“直線工具”繪制三段直線，再使用“鋼筆工具”繪制多個圖形，完成頁面底部的制作。8.2拓展藍色數(shù)碼店鋪首頁設(shè)計8.2.1設(shè)計理念8.2.2實現(xiàn)過程8.2.1設(shè)計理念在數(shù)碼產(chǎn)品常用的藍色系基礎(chǔ)上進行變化，加入數(shù)碼相機用于戶外拍攝的功能屬性，選取符合主題的背景和廣告詞，達到和諧統(tǒng)一的效果。運用平臺效果營造出相機擺放的空間感。運用對角線布局兩款熱銷爆款商品、超值優(yōu)惠套裝商品，突出重點的同時又有變化?！笆詹亍蹦K通過禮盒和優(yōu)惠券的元素，可以為店鋪提升轉(zhuǎn)化率。首頁效果如圖所示。8.2.2實現(xiàn)過程在Photoshop中新建一個文檔，添加“背景”素材，并使用圖層蒙版來控制其顯示區(qū)域，通過不透明度、添加柔光層的方式修飾背景。8.2.2實現(xiàn)過程輸入LOGO文字，設(shè)置其格式，并為其添加圖層樣式，在首頁的左上方制作出LOGO。8.2.2實現(xiàn)過程加入相機圖片，并使用“光照效果”的渲染濾鏡來調(diào)整圖片，使其與背景自然地融為一體。結(jié)合使用圖層樣式、圖層混合模式、鋼筆工具等方式，制作出多樣化的Banner文字，Banner。8.2.2實現(xiàn)過程運用形狀的邏輯運算繪制出優(yōu)惠券的特別形狀。效果如圖2-4-5所示。應(yīng)用多種圖層樣式，突顯出優(yōu)惠券的層次感。文字的格式和大小設(shè)置，實現(xiàn)主次效果。8.2.2實現(xiàn)過程結(jié)合使用漸變疊加圖層樣式和亮光效果，制作富有立體感的HOTSALE標題框。按照對角線的方式布局兩款熱銷爆款商品，運用多種圖層樣式，制作出不同的文字效果。8.2.2實現(xiàn)過程結(jié)合使用圓角矩形、漸變疊加、高斯模糊等方式制作富有立體感的分類大底板，小底板采用純色的平面圓角矩形。運用圖層蒙版完成摳圖后將素材圖片置于其中。8.2.2實現(xiàn)過程結(jié)合使用畫筆工具和矩形工具，制作出鋸齒狀的優(yōu)惠券邊緣。加入禮物素材圖片、旺旺頭像圖片，更方便辨認收藏區(qū)、客服區(qū)的功能。8.2.2實現(xiàn)過程超值優(yōu)惠套裝區(qū)的制作與熱銷爆款專區(qū)相似，以商品為主，在設(shè)計中稍有變化。8.2.2實現(xiàn)過程使用多個矩形、圓角矩形再加入文字，制作出富用代表性的搜索條。運用剪貼蒙版的方式，制作出副導(dǎo)航的圖片。使用鋼筆工具繪制頁面底部的圖形。8.3課后思考8.3.1思政思考8.3.2技能思考8.3.1思政思考SUCCESS滿足客戶們的期望讓他們發(fā)現(xiàn)自己真正想要的商品能很方便地點擊進入了解商品詳情和購買①從客戶群的需求出發(fā)②建立起店鋪的信譽③使用客戶群喜好的色彩渲染點綴頁面④運用他們習(xí)慣的方式合理布局⑤展示出精美又真實的商品圖片⑥撰寫富有吸引力的文本訪客來到網(wǎng)店首頁，如果能吸引到客戶在頁面上多瀏覽一會兒，并且點擊進入下一個鏈接，那么裝修網(wǎng)店首頁的目標就達到了。8.3.1思政思考技術(shù)上要有一定的經(jīng)驗積累12要懂得客戶群的想法內(nèi)容上要熟悉店鋪和商品的特色及銷售數(shù)據(jù)具備較強的創(chuàng)新意識34要成為一個有責(zé)任擔(dān)當、能吃苦耐勞的綜合性多面手實現(xiàn)交易贏得更多客戶的信任和關(guān)注促進購物欲望客戶深入了解店鋪活動和商品信息不同的網(wǎng)絡(luò)平臺上，各家店鋪都使出渾身解數(shù)來裝修自己的首頁，以達到增加客戶的信任度，留住客戶，降低跳轉(zhuǎn)率，提升點擊率和成交率。請大家到常用的網(wǎng)絡(luò)平臺（如：淘寶、京東等）上找?guī)讉€你喜歡的、優(yōu)秀的店鋪首頁，并將其以圖片的形式保存。對比上述網(wǎng)店首頁中的框架組成、配色方案等，分析各家網(wǎng)店首頁的特色和優(yōu)勢。8.3.2技能思考謝謝觀看01財務(wù)計劃報表您的內(nèi)容打在這里，或者通過您的內(nèi)容打在這里，或者您的內(nèi)容打在這里，添加標題您的內(nèi)容打在這里，或者通過您的內(nèi)容打在這里，或者您的內(nèi)容打在這里，添加標題添加內(nèi)容添加內(nèi)容您的內(nèi)容打在這里，或者通過您的內(nèi)容打在這里，或者您的內(nèi)容打在這里，添加標題您的內(nèi)容打在這里，或者通過您的內(nèi)容打在這里，或者您的內(nèi)容打在這里，添加標題添加內(nèi)容添加內(nèi)容01項目背景研究PyramidLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.UtwisienimadminimSettingLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.UtwisienimadminimBrightIdesLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.UtwisienimadminimIntroductionLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.UtwisienimadminimClockLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.UtwisienimadminimNoodleLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.Utwisienimadminim01財務(wù)計劃報表FirstStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajorityOurStartTherearemanysufferedTherearemore.FourthStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajoritySecondStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajorityFifthStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajorityThirdStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajoritySixthStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajority01財務(wù)計劃報表SUCCESSIDEAPLANNINGREALIZATIONLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.工作完成情況★完成概述★完成階段★團隊完成★完成比例★季度完成★月計劃完成01[第二部分]PART0101市場評估分析單擊此處添加文本單擊此處添加1單擊此處添加文本單擊此處添加2單擊此處添加文本單擊此處添加3單擊此處添加文本單擊此處添加4單擊此處添加文本單擊此處添加5單擊此處添加文本單擊此處添加6單擊此處添加文本單擊此處添加7標題文字01市場評估分析2001-2001LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1520112001-2001LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1520122000-2001LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1520102006-2007LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe15201301市場評估分析201635%Therearemanyvariationsofpassagesofloremipsumavailable,butthemajorityhavesufferedalterationinsomeform,byinjectedhumourrandomizedwordswhichdon'tlookevenslightlybelievable65%Therearemanyvariationsofpassagesofloremipsumavailable,butthemajorityhavesufferedalterationinsomeform,byinjectedhumourrandomizedwordswhichdon'tlookevenslightlybelievable成果展示及問題★項目前期★執(zhí)行過程★存在問題★解決方法★成果展示★收益增值01[第三部分]PART0101項目特色展示產(chǎn)品一單擊此處添加對圖片的說明文字單擊此處添加對圖片的說明文字.產(chǎn)品二產(chǎn)品三產(chǎn)品四單擊此處添加對圖片的說明文字單擊此處添加對圖片的說明文字.單擊此處添加對圖片的說明文字單擊此處添加對圖片的說明文字.單擊此處添加對圖片的說明文字單擊此處添加對圖片的說明文字.添加標題添加標題添加標題添加標題01項目特色展示W(wǎng)ebDesignTherearemanyvariationsofLoremIpsumavailable,butthemajorityhavesufferedTherearemanyvariationsofLorem

Ipsumavailable,MobileAppsTherearemanyvariationsofLoremIpsumavailable,butthemajorityhavesufferedTherearemanyvariationsofLorem

IpsumavailableDataAnalysisTherearemanyvariationsofLoremIpsumavailable,butthemajorityhavesufferedTherearemanyvariationsofLorem

IpsumavailableManagementTherearemanyvariationsofLoremIpsumavailable,butthemajorityhavesufferedTherearemanyvariationsofLorem

Ipsumavailable01項目特色展示TitleGoesHere

ofloremipsumavailable,butthemajorityhavesufferedTitleGoesHere

ofloremipsumavailable,butthemajorityhavesufferedalterationinsomeform,byinjectedhumour

randomizedTitleGoesHere

ofloremipsumavailable,butthemajorityhavesufferedTitleGoesHere

ofloremipsumavailable,butthemajorityhavesufferedTitleGoesHere

ofloremipsumavailable,butthemajorityhavesufferedTitleGoesHere

ofloremipsumavailable,butthemajorityhavesuffered01項目特色展示TitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalterationTitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalterationTitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalterationTitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalterationTitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalterationTitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalteration工作不足及提高★努力方向★工作效率★團隊提高★擴展銷售01[第四部分]PART0101團隊成員介紹Portfolio1Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummyPortfolio2Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummyPortfolio3Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummyPortfolio4Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummy01團隊成員介紹TitleGoesHere

Therearemanyvariationsofpassagesofloremipsumavailable,butthemajority亮亮圖文旗艦店tobesure.TitleGoeshereTherearemanyvariationsofthemetotheheavenTwo50%TitleGoesHere

Therearemanyvariationsofpassagesofloremipsumavailable,butthemajorityhavesufferedalterationinsomeform,byinjectedhumourrandomizewordswhichdon'tlookevenslightlybelievable.IfyouaregoingtouseApassageofloremipsum,youneedtobesure.TitleGoeshereTherearemanyvariationsofthemetotheheavenTwo90%01團隊成員介紹Loremipsumdolorsitamet,consecteturadipiscingelit.Curabiturelementumposuerepretium.Quisquenibhdolor,dignissimacdignissimut,luctusacurna.Aliquamaliquetnonmassaquistincidunt.Maurisullamcorperjustotristiqueduiposueretincidunt.Inneclacuslaoreetorcivariusimperdietsitametinaugue.ImprovementsLoremipsumdolorsitamet,consecteturadipiscingelit.PasswordsLoremipsumdolorsitamet,consecteturadipiscingelit.UploadsLoremipsumdolorsitamet,consecteturadipiscingelit.SupportLoremipsumdolorsitamet,consecteturadipiscingelit.NetworksLoremipsumdolorsitamet,consecteturadipiscingelit.01團隊成員介紹

DetermineyourRealRewardIdentifyyourTriggerCreateaNewRoutineLoremipsumdolorsitamet,consecteturadipiscingelit.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s.Step1Loremipsumdolorsitamet,consecteturadipiscingelit.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s.Step2Loremipsumdolorsitamet,consecteturadipiscingelit.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s.Step301團隊成員介紹FinancialFamilySecureSafetyOURGOALSButallsunshinewithoutshade,allpleasurewithoutpain,isnotlifeatall.Takethelotofthehappiest-itisatangledyarn.Bereavementsandblessings,onefollowinganother,makeussadandblessedbyturns.Evendeathitselfmakeslifemoreloving.Butllsunshinewithoutshade,allpleasurewithoutpain,isnotlifeatall.itisatangledyarn.allsunshinewithoutshade,allpleasurewithoutpain,isnotlifeatall.Takethelotofthe.Bereavementsandblessings,one明年工作計劃方向★營業(yè)額提升★團隊擴大★管理提高★利益最大化01[第五部分]PART0101項目背景研究此處添加詳細文本描述，建議與標題相關(guān)并符合整體語言風(fēng)格2009此處添加詳細文本描述，建議與標題相關(guān)并符合整體語言風(fēng)格2010此處添加詳細文本描述，建議與標題相關(guān)并符合整體語言風(fēng)格2011此處添加詳細文本描述，建議與標題相關(guān)并符合整體語言風(fēng)格2012此處添加詳細文本描述，建議與標題相關(guān)并符合整體語言風(fēng)格2013此處添加詳細文本描述，建議與標題相關(guān)并符合整體語言風(fēng)格2014此處添加詳細文本描述，建議與標題相關(guān)并符合整體語言風(fēng)格201501項目背景研究您的內(nèi)容打在這里，或者通過您的內(nèi)容打在這里添加標題您的內(nèi)容打在這里，或者通過您的內(nèi)容打在這里添加標題您的內(nèi)容打在這里，或者通過您的內(nèi)容打在這里添加標題您的內(nèi)容打在這里，或者通過您的內(nèi)容打在這里