設(shè)計店鋪首頁GRAPHICDESIGN01基本要求

02結(jié)構(gòu)分析03案例示范04總結(jié)歸納CONTENTES目錄結(jié)構(gòu)分析Scenariointroductio01結(jié)構(gòu)分析01.首頁的尺寸寬度是1920，有效區(qū)域居中990px（天貓），950（淘寶）：（這里的有效區(qū)域是指顯示器大小不同的買家都能看到和點擊的區(qū)域，設(shè)計師作圖時必須把重要的部分放置在此區(qū)域內(nèi)。店鋪首頁介紹za結(jié)構(gòu)分析1）店招，店招是店鋪的總導(dǎo)航，一切商品、一切分類都可以在這里快速便捷的找到，包括基本的logo,廣告語、關(guān)注、導(dǎo)航；可選的優(yōu)惠券、主圖款、售后保障、收藏本店。2）全屏海報，全屏海報統(tǒng)一的寬度尺寸是1920px，非全屏的是950px,高度可以根據(jù)設(shè)計效果自己設(shè)定，海報的分類一般分為活動海報和單品海報，活動海報是直接鏈接到另外一個活動頁面的地址；單品海報是直接鏈接到我們店鋪內(nèi)的單個寶貝詳情。a3）寶貝分類區(qū)域，可以把寶貝分為新品、爆款、寶貝分類，首先新品很重要，它可以提高二次回頭率的重要來源之一.爆款的話，可以去搜集當(dāng)季的熱銷的產(chǎn)品，或者根據(jù)顧客群體清楚當(dāng)下流行的元素，從而來調(diào)整爆款商品，也可以采用模特實物結(jié)合或者半身模特的排版方式來展現(xiàn)的，可以凸顯爆款的氣質(zhì).最后的寶貝分類主要就是為了區(qū)分不同風(fēng)格的寶貝，為了讓客戶簡單快捷的銷售.4）頁尾，頁面尾部的布局一般是促成成交的一下保障，比如可以做些支付方式、配送物流的流程、售后保障做上去.讓買家有一個保障。za店鋪首頁的2種板式“T”字形版式全屏版式基本要求Scenariointroductio02

基本要求01.1.統(tǒng)一店鋪風(fēng)格電商行業(yè)發(fā)張迅速，競爭混亂激烈，在設(shè)計首頁時，要了解產(chǎn)品市場上的消費人群，自身要有個清晰的市場定位。根據(jù)人群消費特點和產(chǎn)品內(nèi)容確立店鋪的色調(diào)，從而建立店鋪的品牌風(fēng)格。

2.首屏海報首屏海報是一個店鋪視覺核心，體現(xiàn)著店鋪整體的色調(diào)?，F(xiàn)如今店鋪都是推出大屏海報，能夠鋪滿全屏，視覺效果沖擊也更強(qiáng)烈。真正讓人有眼前一亮的感覺也是通過其首屏海報體現(xiàn)的，可以在海報上放上最重要的信息，展開店鋪活動，盡充分吸引消費者的視線。第二屏，三屏的海報也要和首屏色調(diào)統(tǒng)一，體現(xiàn)店鋪品牌風(fēng)格。z3.分類導(dǎo)航4.主推產(chǎn)品導(dǎo)航的裝飾不能太雜亂，要簡潔清爽，明確分類好模塊，做到有效分流。在字體類型和顏色方面也要和店鋪風(fēng)格統(tǒng)一。最首頁黃金區(qū)域充分展現(xiàn)產(chǎn)品，結(jié)合產(chǎn)品特點深層打造賣點，激發(fā)消費者對產(chǎn)品的興趣和購買欲，打造出店鋪爆款。案例示范analysistask03示范任務(wù)04.1首屏部分①

新建畫布1920*8000，分辨率72，顏色模式為RGB。②

進(jìn)行區(qū)域劃分，店招部分是950*150，建立一個矩形為950*150，ctrl+a,全選居中，ctrl+b取消，再拉取參考線，將矩形改為950*120，留出30px,導(dǎo)航的部分。再拉一條參考線。再把矩形刪除。③

新建一個1920*150的矩形，給店招鋪一個背景，選取淺灰色，“alt+delete”填充，給logo加一個矩形底色，再把logo放上面。④

文字工具，打出導(dǎo)航文字“店鋪首頁/純銀項鏈/手鏈?zhǔn)骤C/波西耳飾”空格再一個豎線，調(diào)整合適的文字大小和距離。⑤

自定義形狀工具畫出一個心，吸一下logo的顏色，“alt+delete”填充。文字工具打上“收藏我們”。字體顏色調(diào)淺一點，放在右上角。⑥

海報尺寸1920*600，放進(jìn)來。這里我們放的是一個單品海報，是店鋪的主推款。2

寶貝分類部分①畫一個矩形1920*260，顏色比店招的底色深一點點的灰色打上“您在尋找什么？、PRODUCTS，這里的文字與上方的保持一致。ctrl+a,全選居中。下方畫又1條直線，用直線工具，按住shift,調(diào)整下不透明度，淡一點就可以了。1）制作一組寶貝分類圖標(biāo)①我們先來畫一個戒指，用圓形工具，按住shift,畫一個正圓，再選擇小黑工具，按住alt鍵就復(fù)制出來了一個，這時是在同一個圖層，用路徑工具減去頂層，按住alt+shift,調(diào)整圓圈的大小，畫出指環(huán)的形狀，同樣的方法，我們建立一個矩形框，ctrl+t,自由變換，旋轉(zhuǎn)壓扁一點，減去頂層，缺口就做好了，現(xiàn)在要在上方畫一個寶石，另起一個圖層，用多邊形工具畫一個五邊形，自由變換旋轉(zhuǎn)方向。壓扁一點，尖角朝下，更接近鉆戒的形狀。同樣的用小黑工具，復(fù)制減去頂層，再畫一個矩形加選。小黑工具選中下面的圖形，用小白工具調(diào)節(jié)杠桿，適當(dāng)修一下形狀。圖層很多，合并形狀組件，ctrl+e合并形狀。重新命名戒指。②手鏈，畫一個圓，用小黑工具，在同一圖層alt+t復(fù)制，再按住shift向下移動，“ctrl+j”復(fù)制一層，自由變換，按住shift,旋轉(zhuǎn)45度，ctrl+alt+t,多按幾次，重復(fù)上一步的步驟。同理可得，畫一組小圓，再ctrl+e合并所有圖層。重新命名手鏈。③精美吊墜，自定義形狀工具畫一個愛心，然后畫一個小圓，用小黑工具，ctrl+alt+t,多按幾次，重復(fù)上一步的步驟。作出左邊的鏈子，再ctrl+j復(fù)制一層，自由變換，水平翻轉(zhuǎn)，做出右邊部分。再再ctrl+e合并所有圖層。重新命名吊墜。⑤耳墜，自定義形狀畫一個五角星，上方畫一個圓角矩形，頭部加個小圓，ctrl+j復(fù)制一個，縮小一點，再復(fù)制一個，用小黑工具，對其進(jìn)行分割，同樣的小面兩個小點，再ctrl+e合并所有圖層。重新命名耳墜。⑥排版，打上“戒指”、“Ring”，調(diào)整戒指的字體大小，和字間距，英文用淺一點的顏色。將圖片文字的圖層選中，ctrl+g,合并到同一組。復(fù)制五個大致分布開。再按照戒指圖標(biāo)的大小作為規(guī)范，調(diào)整其他幾組圖標(biāo)的大小。將其中一個圖標(biāo)改成預(yù)選中狀態(tài)，我們選耳墜，給圖標(biāo)加一個方塊的底色，圖標(biāo)和字體的顏色改成白色，下方還有一塊綠色的矩形，我們將這部分一起打個組。2）下面的區(qū)域是一組文字細(xì)節(jié)化的分類文字我們可以復(fù)制上方的文字，一共六大類，畫一個矩形框，我們間隔分布，每個部分再左對齊。復(fù)制五個，編輯成一個組。3）還有圖片的分類。方法是先畫一個矩形框，ctrl+j復(fù)制兩個，再選中三個，crtl+t自由變換大小。在核心區(qū)域。用剪切蒙版的方法往里面開始放圖片，圖片放在相應(yīng)的矩形框的上方，按住alt鍵，鼠標(biāo)放在兩個區(qū)域中間，建立剪切蒙版。自由變換調(diào)整圖片的大小和移動圖片展示合適的位置。畫三個綠色的矩形標(biāo)簽，“熱賣top榜”、“特價新品”比上面的文字稍微大一點。3

店鋪爆款部分可以復(fù)制上方您在尋找什么的文字樣式，兩個部分居中。旁邊加兩個減號，下面有一個小三角形。顏色用上方的綠色。再往下是店鋪寶貝展示，同圖片分類的制作方法一樣，先畫幾個矩形框，再用剪切蒙版的方法將圖片放進(jìn)去，再將圖像進(jìn)行圖像調(diào)整，降低一點飽和度，統(tǒng)一整體風(fēng)格。然后把飾品放進(jìn)去，一種方法可以先把產(chǎn)品的圖片摳出來，另一個使用圖層樣式，然后用蒙版擦除邊緣。制作品牌logo裝飾，畫三個圓形，中間一個深，后面兩個淺色。再把logo放到圓上，下方加一個矩形框