《網(wǎng)店美工實(shí)戰(zhàn)》情境二 手機(jī)套店鋪的網(wǎng)店美工

手機(jī)套店鋪的網(wǎng)店美工情景二學(xué)習(xí)目標(biāo)1.學(xué)會(huì)分析客戶(hù)的身份特征和心理需求情況，對(duì)中高檔手機(jī)套制定視覺(jué)設(shè)計(jì)方案，確定字體、色調(diào)等內(nèi)容

；2.能夠?qū)κ謾C(jī)套店鋪首頁(yè)和詳情頁(yè)整體設(shè)計(jì)，包括整體布局的規(guī)劃，整體色調(diào)的選擇；3.能夠?qū)Φ赇伿醉?yè)和詳情頁(yè)進(jìn)行整體性制作；4.在圖片處理方面，學(xué)會(huì)對(duì)自己拍攝的圖片進(jìn)行去除雜質(zhì)、摳圖、修復(fù)、調(diào)色等處理方法；5.學(xué)會(huì)使用簡(jiǎn)單代碼上傳首頁(yè)到淘寶網(wǎng)站。情境導(dǎo)航手機(jī)套不再是單純的實(shí)用商品。隨著手機(jī)在年輕群落中的普及，幾乎每一個(gè)追求時(shí)尚的年輕人都希望擁有一部獨(dú)一無(wú)二的手機(jī)。給手機(jī)美容逐漸成了他們展示個(gè)性的一種方式。為了迎合這種趨勢(shì)，手機(jī)保護(hù)套生產(chǎn)商又推出了許多做工更為精良，色彩圖案更加別致的產(chǎn)品。這使得手機(jī)保護(hù)套的類(lèi)型更加多元化。在職場(chǎng)打拼的商務(wù)人士更喜歡使用大方體面的皮套，和崇尚休閑的年輕人不同，拿著款外表顏色單一的手機(jī)對(duì)他們而言是有失大雅的。1.制定視覺(jué)設(shè)計(jì)方案；2.設(shè)計(jì)首頁(yè)；3.設(shè)計(jì)詳情頁(yè)；4.上傳商品和詳情頁(yè)；5.上傳首頁(yè)。情境任務(wù)設(shè)計(jì)首頁(yè)設(shè)計(jì)詳情頁(yè)上傳商品詳情頁(yè)CONTENT目錄制訂視覺(jué)設(shè)計(jì)方案02030401上傳首頁(yè)0501任務(wù)1制訂視覺(jué)設(shè)計(jì)方案美爾搭手機(jī)套商品的視覺(jué)方案一、客戶(hù)群體定位與風(fēng)格美爾搭手機(jī)套定位為中高檔品牌，主要客戶(hù)群體為喜歡大方體面的商務(wù)人士，崇尚休閑的、時(shí)尚的、有個(gè)性的年輕人等，這些客戶(hù)具有以下特征：25-45歲1.用于休閑娛樂(lè)的消費(fèi)支出占其生活花費(fèi)的比例相對(duì)較高2.白領(lǐng)、企業(yè)主、公務(wù)員、自由職業(yè)者等3.對(duì)產(chǎn)品的質(zhì)量要求高，如綠色環(huán)保，健康性等；4.對(duì)實(shí)用性要求高；5.對(duì)產(chǎn)品的時(shí)尚性和個(gè)性要求很高；二、客戶(hù)群心理分析客戶(hù)心理具有以下特征：1．有品味、高素質(zhì)、思想獨(dú)立；2．他們多交際、品味獨(dú)特、不盲從不跟隨；3．追求生活質(zhì)量和小資情調(diào)4．思想前衛(wèi)，追求時(shí)尚，易于接受新生事物，生活比較有品位；設(shè)計(jì)服裝類(lèi)商品的視覺(jué)方案三、配色基調(diào)根據(jù)色彩的特性，不同的色彩能給人不同的感受。時(shí)尚的、休閑的、個(gè)性的、文化的美爾搭手機(jī)套店將主色調(diào)定為駝色，輔助色調(diào)定為灰色和白色。設(shè)計(jì)服裝類(lèi)商品的視覺(jué)方案四、字體選擇字體盡量時(shí)尚大方，能突顯本手機(jī)套產(chǎn)品個(gè)性的字體，如SteelFish常規(guī)、微軟雅黑以及方正蘭亭黑簡(jiǎn)體（方正系列字體可能存在版權(quán)問(wèn)題，可以換成近似字體）。五、道具的選用為了更好展現(xiàn)手機(jī)套的個(gè)性和品味，在拍攝手機(jī)套產(chǎn)品圖片時(shí)需要選擇一些能襯托出產(chǎn)品特質(zhì)的道具，比如筆記本、鋼筆、毛刷、黑色反光板等物品。02任務(wù)2設(shè)計(jì)首頁(yè)活動(dòng)（1）準(zhǔn)備圖片

一、圖片選擇商品的圖片要選擇盡量能清晰展示商品特征的全圖。二、圖片處理活動(dòng)（1）準(zhǔn)備圖片圖片處理主要針對(duì)已經(jīng)拍攝的手機(jī)套商品圖片進(jìn)行美化處理，常規(guī)的步驟有：去除雜質(zhì)、摳圖、修復(fù)、調(diào)色等。1.去手機(jī)套上的灰塵和一些小刮痕。放大圖片，看到需要修復(fù)的位置，使用污點(diǎn)修復(fù)畫(huà)筆工具、修復(fù)畫(huà)筆工具、修補(bǔ)工具，要使用到ATL鍵+修復(fù)畫(huà)筆工具吸取要改變的樣板，再在需要修復(fù)的位置涂抹，修補(bǔ)工具選取要修改的區(qū)域，拖動(dòng)到想改成的樣板地方，松開(kāi)鼠標(biāo)即可。使用這些工具時(shí)要注意“選項(xiàng)欄”的參數(shù)設(shè)置，才會(huì)達(dá)到最佳效果。活動(dòng)（1）準(zhǔn)備圖片使用Photoshop打開(kāi)上面其中一張照片，可以看到照片手機(jī)套上有很多灰塵和一些小刮痕，色彩也不夠理想，需要處理，具體操作如下：2.讓手機(jī)套更與實(shí)物相近，調(diào)整色相/飽和度，曲線，分別按Ctrl+U和Ctrl+M，調(diào)出面板，設(shè)置圖參數(shù)圖4-11、圖4-12?；顒?dòng)（1）準(zhǔn)備圖片圖4-11圖4-12其它手機(jī)套照片處理方法大致相同，最后是把需要摳圖的照片把手機(jī)套摳出來(lái)，以備后用?；顒?dòng)（1）準(zhǔn)備圖片最終效果如圖：一、首頁(yè)規(guī)劃為了保證頁(yè)面的整體統(tǒng)一，制作首頁(yè)之前要先做好整體規(guī)劃。首頁(yè)結(jié)構(gòu)為店招，款式系列分類(lèi)展示，每個(gè)款式系列分類(lèi)展示板塊包含一張海報(bào)和若干商品推薦。首頁(yè)制作過(guò)程中將會(huì)產(chǎn)生較多的圖層，做好每一個(gè)區(qū)域都應(yīng)該將圖層選中，建立分組?；顒?dòng)（2）設(shè)計(jì)PC端首頁(yè)二、LOGO設(shè)計(jì)LOGO使用MERDA英文全拼為設(shè)計(jì)基礎(chǔ)，LOGO字體顏色設(shè)置為#E7AE02，字體和字號(hào)及各參數(shù)設(shè)置如圖圖4-15所示，最終效果如圖4-16。活動(dòng)（2）設(shè)計(jì)PC端首頁(yè)圖4-15圖4-16三、店招設(shè)計(jì)店招本身只有120像素的高度，但是為了整體性，這次設(shè)計(jì)直接將店招和導(dǎo)航欄的30像素放在一起設(shè)計(jì)，也就是設(shè)計(jì)150像素的店招，操作步驟如下：步驟一：打開(kāi)Photoshop，新建寬度為1920像素，高度7000像素的圖片（高度也可以自己定，過(guò)高的部分可以在首頁(yè)完成后去掉，高度不夠也可以自行添加），圖片名稱(chēng)為首頁(yè)，填充背景色#F1EdE8。步驟二：添加150像素的水平參考線，新建圖層，將圖片頂端150像素高度的區(qū)域全部填充為淡刈(yì)安色，顏色代碼為：#F1EdE8。步驟三：劃分導(dǎo)航欄區(qū)域。店招和導(dǎo)航欄一起設(shè)計(jì)完成，但在制作過(guò)程中還是要加以區(qū)分，新建120像素的水平參考線，兩條參考線中間形成30像素的導(dǎo)航欄。在120像素和150像素的參考線上，選定這塊30像素的區(qū)域，新建一個(gè)圖層，把這塊區(qū)域填充顏色為#A68A65。1.做好店招，寬度1920像素，高度120像素。活動(dòng)（2）設(shè)計(jì)PC端首頁(yè)2.制作導(dǎo)航欄，寬度1920像素，高度30（制作這個(gè)要了解店鋪內(nèi)有什么產(chǎn)品）。活動(dòng)（2）設(shè)計(jì)PC端首頁(yè)四、海報(bào)制作第一個(gè)海報(bào)通常是最能吸引客戶(hù)眼球的，通常用于店鋪活動(dòng)宣傳或者店鋪爆款商品推廣。目前主流的PC設(shè)備的分辨率為1920×1080像素，即一屏的高度為1080像素，所以店招與海報(bào)總的高度最好不要超過(guò)1080像素。制作海報(bào)前，最好先建立海報(bào)組，海報(bào)所有圖層放置在這個(gè)組內(nèi)。第一幅海報(bào)操作步驟如下：步驟一：選定照片、美化商品照片。選定新品的手機(jī)套照片，并用PS去除照片的雜質(zhì)。步驟二：加上裝飾。打上數(shù)字7，然后再?gòu)?fù)制一層數(shù)字7，把第二層數(shù)字7填充為白色，再調(diào)整位置就可以做到字體有陰影或者有立體感；打上“折起”文字。另外在圖片的左下角加上美爾搭LOGO。活動(dòng)（2）設(shè)計(jì)PC端首頁(yè)第二幅海報(bào)操作步驟類(lèi)似第一幅制作，制作的效果如圖?；顒?dòng)（2）設(shè)計(jì)PC端首頁(yè)五、熱賣(mài)推薦熱賣(mài)推薦板塊設(shè)計(jì)放了四款顏色和款式比較流行的手機(jī)套，制作相對(duì)簡(jiǎn)單，但是商品要有一定的吸引力。把拍攝出來(lái)處理好的商品照片逐個(gè)添加在不同的層，調(diào)整好大小和位置，并打上想描述的文字?；顒?dòng)（2）設(shè)計(jì)PC端首頁(yè)六、售后模塊首頁(yè)剩下的內(nèi)容就是售后模塊，完善一些售后服務(wù)和商品保障信息。這個(gè)模塊制作比較簡(jiǎn)單，根據(jù)自己手機(jī)套商品的特點(diǎn)，并參考一些好賣(mài)家店鋪在這模塊的設(shè)計(jì)，制作出自己的售后模塊，僅供參考?；顒?dòng)（2）設(shè)計(jì)PC端首頁(yè)移動(dòng)端首頁(yè)的寬度在不同情況下要求不同，如店招區(qū)域，店招通常要求做750×254像素，使用動(dòng)圖模塊時(shí)要求圖片的寬度是640像素，而自定義模塊寬度只有608像素。在制作移動(dòng)端首頁(yè)的時(shí)候，確定寬度主要參考一個(gè)因素，是否使用付費(fèi)模板，如果需要使用寬度640像素，如果不用寬度為608像素。不建議做成750像素的寬度，750像素的寬度確實(shí)可以根據(jù)實(shí)際需求做出調(diào)整，但是在制作過(guò)程中視覺(jué)效果與640像素或者608像素或多或少是有差別的，這些差別在使用移動(dòng)設(shè)備查看的時(shí)候可能會(huì)被放大。按照等比例變化的原則，750×254像素大小的店招在640像素和608像素寬度的圖片中對(duì)應(yīng)高度分別為217像素、206像素。一、首頁(yè)規(guī)劃移動(dòng)端首頁(yè)采用類(lèi)似PC端首頁(yè)的設(shè)計(jì)風(fēng)格，即按照商品系列“海報(bào)+熱賣(mài)推薦”的布局方式，但也會(huì)有一些變化，比如店招無(wú)法再做較為復(fù)雜的設(shè)計(jì)，促銷(xiāo)信息代替了第一個(gè)熱賣(mài)推薦，所有的熱賣(mài)推薦都變成了兩列式的排版?；顒?dòng)（3）制作移動(dòng)端首頁(yè)二、圖片處理圖片處理主要針對(duì)新的商品圖片，常規(guī)的圖片處理步驟包括：摳圖、修復(fù)、去雜質(zhì)等。美爾搭旗艦店使用紅色和白色為店鋪視覺(jué)設(shè)計(jì)的主色調(diào)，但已經(jīng)拍攝完畢的商品圖片基本都是有灰塵的，桌子也顯得比較亂，但并非所有商品都需要摳圖，所以本次圖片處理的步驟為：處理背景—修復(fù)。活動(dòng)（3）制作移動(dòng)端首頁(yè)第一張圖上處理步驟：背景處理使用Photoshop打開(kāi)N17A9518圖片，可以看到圖片左右兩邊的背景都有一些痕跡，白色灰塵，桌子不夠光滑，需要處理，具體操作如下：1.用多邊形套索工具選出有灰塵的地方，這樣是為了方便不影響其它地方。2.使用默認(rèn)前景色（D），用畫(huà)筆（B）進(jìn)行涂抹。3.可以看到手機(jī)底部有許多劃痕，影響美觀，這時(shí)候使用鋼筆工具勾選出來(lái)，因?yàn)槭謾C(jī)是銀色的，可以用漸變工具（G），金屬-銀色進(jìn)行漸變，還有一些白色的劃痕，可以使用仿制圖章工具進(jìn)行涂抹。活動(dòng)（3）制作移動(dòng)端首頁(yè)第二張圖上處理步驟：背景處理使用Photoshop打開(kāi)N17A9533圖片，可以看到手機(jī)殼里面有一些白色灰塵，顯得不干凈，桌子也是，需要處理，具體操作如下：1.用多邊形套索工具選出桌子有灰塵的地方。2.使用默認(rèn)前景色黑色（D），用畫(huà)筆（B）進(jìn)行涂抹3.可以看到手機(jī)殼里面有白色灰塵。，這時(shí)候可以用仿制圖章工具（S）在周?chē)x取一塊干凈的地方按alt鍵吸取，再到有灰塵的地方涂抹。還可以用吸管工具吸取顏色，用畫(huà)筆工具進(jìn)行涂抹，但這方法只能用來(lái)涂抹手機(jī)殼內(nèi)的硬殼，涂抹外面的皮套會(huì)使它失去質(zhì)感，少了紋路?；顒?dòng)（3）制作移動(dòng)端首頁(yè)三、首頁(yè)制作店招搭配紅色和白色，顯得十分簡(jiǎn)約。背景填充為駝色，把“創(chuàng)意、品味、高端”的品牌定位語(yǔ)做上去即可?；顒?dòng)（3）制作移動(dòng)端首頁(yè)導(dǎo)航區(qū)僅付費(fèi)用戶(hù)可更改底色，所以這里無(wú)法做任何處理，制作時(shí)可以直接留白。三、首頁(yè)制作接著把制作好的海報(bào)圖片放上去即可。移動(dòng)端首頁(yè)完成之后效果圖如圖?；顒?dòng)（3）制作移動(dòng)端首頁(yè)

03任務(wù)3設(shè)計(jì)詳情頁(yè)一、詳情頁(yè)規(guī)劃詳情頁(yè)設(shè)計(jì)遵循板式統(tǒng)一視覺(jué)設(shè)計(jì)方案，使用主色調(diào)定為駝色，輔助色調(diào)定為灰色和白色，呈現(xiàn)為“創(chuàng)意、品味、高端”。第一部分：寶貝多個(gè)款式展示。第二部分：寶貝外觀細(xì)節(jié)展示。第三部分：列舉選擇本店寶貝的理由。第四部分：列舉產(chǎn)品優(yōu)勢(shì)，增強(qiáng)消費(fèi)者購(gòu)買(mǎi)信心。1、簡(jiǎn)易安裝。2、孔位精準(zhǔn)。3、超薄工藝。4、精致制造。5、完美呵護(hù)。6、信號(hào)無(wú)阻。7、后蓋防摔耐磨。8、色彩艷麗，不褪色。9、堅(jiān)強(qiáng)護(hù)盾。本次在商品詳情頁(yè)中沒(méi)有加入關(guān)聯(lián)營(yíng)銷(xiāo)，主要是為了增強(qiáng)消費(fèi)者購(gòu)物體驗(yàn)，也體現(xiàn)出對(duì)商品的自信?；顒?dòng)（1）規(guī)劃詳情頁(yè)二、詳情頁(yè)制作步驟一：寶貝形象寶貝形象是詳情頁(yè)的第一張圖片，這一張圖傳遞的信息是整個(gè)詳情頁(yè)的基調(diào)，所以這里需要注意三個(gè)問(wèn)題：第一，選對(duì)圖片；第二，傳遞商品價(jià)值；第三，美觀大方，與店鋪整體風(fēng)格一致。主要操作：1）新建畫(huà)布，寬度750像素，高度可以設(shè)定在15000像素左右（也可以根據(jù)個(gè)人習(xí)慣自己設(shè)定，如果作圖過(guò)程中圖片刻度不夠，可以通過(guò)畫(huà)布大小增加高度，制作完成如果圖片沒(méi)有占用相應(yīng)的像素，可以將多余的高度裁剪掉），填充背景色#d9d1c3。添加水平參考線，位置1080像素，控制寶貝形象圖片高度，不能超過(guò)一屏的高度?；顒?dòng)（2）制作詳情頁(yè)2）導(dǎo)入手機(jī)殼圖?？紤]到整體美感和詳情頁(yè)篇幅，通過(guò)剪貼蒙版控制顯示區(qū)域。3）添加文案。添加文字一方面可以對(duì)圖片進(jìn)行補(bǔ)充說(shuō)明，另一方面也可以增強(qiáng)圖片的美觀度。這里主要使用了一種字體（微軟雅黑），漢字“至尊獨(dú)創(chuàng)拒絕平壤”，英文為“Thesupremeoriginalrefusedtomediocrity”，“For華為mate9”，文字顏色為#636363，也可以選更暗點(diǎn)的顏色。頂部英文主要用作裝飾，強(qiáng)化商品個(gè)性化，完成寶貝形象圖的制作?；顒?dòng)（2）制作詳情頁(yè)步驟二：產(chǎn)品外觀通常詳情頁(yè)第二部分內(nèi)容是產(chǎn)品外觀展示，從不同角度展示產(chǎn)品外觀。1）欄目標(biāo)題。欄目標(biāo)題的作用是為了方便消費(fèi)者瀏覽，不需要過(guò)多的設(shè)計(jì)，直接在背景上輸入中英文標(biāo)題，加上一個(gè)色塊即可。2）導(dǎo)入手機(jī)殼圖。布局使用內(nèi)外結(jié)構(gòu)，外邊為細(xì)節(jié)解釋圖，里邊為商品正視圖，根據(jù)視覺(jué)習(xí)慣，展示出完美的手機(jī)套造型。活動(dòng)（2）制作詳情頁(yè)3）展示選擇理由，讓客戶(hù)更有要買(mǎi)商品的欲望，展現(xiàn)與同行的優(yōu)勢(shì)所在。活動(dòng)（2）制作詳情頁(yè)步驟三：產(chǎn)品優(yōu)勢(shì)（設(shè)計(jì)亮點(diǎn)）1）欄目標(biāo)題。2）導(dǎo)入處理好的圖片，3）添加文案。設(shè)計(jì)亮點(diǎn)，完整描述文字，符合視覺(jué)設(shè)計(jì)風(fēng)格。步驟四：整體檢查，完成詳情頁(yè)詳情頁(yè)的各個(gè)部分已經(jīng)完成，最后還需要整體瀏覽，確定詳情頁(yè)整體協(xié)調(diào)，沒(méi)有瑕疵?；顒?dòng)（2）制作詳情頁(yè)三、移動(dòng)端詳情頁(yè)跟首頁(yè)相似，移動(dòng)端詳情頁(yè)也可以用PC端修改完成，這里不再講述移動(dòng)端詳情頁(yè)制作，自己嘗試制作移動(dòng)端詳情頁(yè)的時(shí)候必須記住以下三點(diǎn)：1）字符必須在12點(diǎn)以上，否則會(huì)影響閱讀；2）并排的圖片最多三張，兩張最好；3）圖片或者文字比較密集的區(qū)域，如穿著場(chǎng)景、品牌故事和產(chǎn)品信息文字區(qū)都需要重新設(shè)計(jì)，圖片最好均已模特展示圖的方式排列，文字排列方式也應(yīng)該做出相應(yīng)該表。移動(dòng)端詳情頁(yè)最終效果圖如圖?；顒?dòng)（2）制作詳情頁(yè)04任務(wù)4上傳商品詳情頁(yè)商品上傳之后才會(huì)有商品的鏈接，這一鏈接是完成詳情頁(yè)關(guān)聯(lián)營(yíng)銷(xiāo)和首頁(yè)商品超鏈接的基礎(chǔ)。商品上傳在這不講述，參考情景五部分。一、詳情頁(yè)上傳1、進(jìn)入裝修后臺(tái)，選擇【店鋪裝修】-【頁(yè)面】中的【寶貝詳情頁(yè)】。2、點(diǎn)擊【模塊】---【750】---加入【自定義】。將詳情頁(yè)切圖上傳即可?；顒?dòng)（1）上傳商品和詳情頁(yè)到電商平臺(tái)05任務(wù)5上傳首頁(yè)本節(jié)講述的是用傳統(tǒng)方法上傳首頁(yè)。PC端首頁(yè)可以大致分為三個(gè)部分：店招、輪播區(qū)、自定義內(nèi)容、其他部分。在上傳圖片到店鋪之前，最好將首頁(yè)切片分成這三個(gè)部分。旺鋪現(xiàn)在分三個(gè)版本，分別是基礎(chǔ)版、專(zhuān)業(yè)版、智能版：基礎(chǔ)版模塊的最大尺寸是750xp，是絕對(duì)沒(méi)辦法做1920海報(bào)的。專(zhuān)業(yè)版模塊的最大尺寸是950xp，但是專(zhuān)業(yè)版有代碼裝修功能，需要您自己做代碼進(jìn)行裝修。智能版目前已經(jīng)開(kāi)通1920【全屏寬圖】和【全屏輪播】模塊，您可以通過(guò)使用這兩個(gè)模塊來(lái)實(shí)現(xiàn)寬屏效果。活動(dòng)（1）上傳PC端一、訂購(gòu)?fù)佒悄馨媸紫雀魑恍枰嗁?gòu)?fù)佒悄馨娌拍軌蚴褂猛佒悄馨?920模板進(jìn)行店鋪裝修（現(xiàn)在一個(gè)鉆以下商家智能版免費(fèi)使用）。PC裝修的1920模塊是智能版專(zhuān)享功能，購(gòu)買(mǎi)智能版后可使用該功能，使PC店鋪顯得更高端大氣，提升消費(fèi)者體驗(yàn)?；顒?dòng)（1）上傳PC端二、淘寶旺鋪智能版1920模板裝修操作流程如下：

1、進(jìn)入智能版后臺(tái)，選擇【電腦頁(yè)面裝修】-【模塊】中的【1920】?；顒?dòng)（1）上傳PC端2、在店招區(qū)點(diǎn)擊【編輯】后，選擇“自定義招牌”，點(diǎn)擊“插入圖片空間圖片”按鈕選“店招”圖片?；顒?dòng)（1）上傳PC端3、點(diǎn)擊“源碼”按鈕，為了把“店招”圖片變成1920，做法與專(zhuān)業(yè)版加入代碼，修改方法一樣?；顒?dòng)（1）上傳PC端4、點(diǎn)擊頁(yè)面左則“頁(yè)頭”模塊，背景選擇“店招”圖片，設(shè)置如圖?；顒?dòng)（1）上傳PC端5、點(diǎn)擊頁(yè)面左則“模塊”模塊中的【1920】，選擇“全屏寬”拖入右則頂上區(qū)域，點(diǎn)擊【編輯】后，選擇插入的海報(bào)圖片(寬1920，高不大于540)，同時(shí)可以設(shè)置鏈接地址（也可以先省略）。但是這種設(shè)置方法有局限性，圖片高于540就無(wú)法正常顯示了，如圖?；顒?dòng)（1）上傳PC端解決方法可以用專(zhuān)業(yè)版的方法處理，在這加入自定義區(qū)，點(diǎn)擊【編輯】后選擇寬度為1920px，高度超過(guò)540的圖片，然后點(diǎn)擊左下角【編輯代碼】，如圖?；顒?dòng)（1）上傳PC端刪除框內(nèi)所有代碼，編輯代碼如圖?；顒?dòng)（1）上傳PC端注意設(shè)置：海報(bào)高度——使用海報(bào)圖片的高度值。海報(bào)間的縫隙——可以先設(shè)置“０”或者是“縫隙高度*除頂部海報(bào)外第幾張圖”。產(chǎn)品圖片連接——可以在店鋪【素材中心】找到對(duì)應(yīng)圖片復(fù)制鏈接地址。產(chǎn)品連接地址——海報(bào)想連接跳轉(zhuǎn)的產(chǎn)品頁(yè)。編輯完代碼后要點(diǎn)擊【確定】按鈕。６、接下來(lái)的步驟就按照自己首頁(yè)設(shè)計(jì)切割的模塊進(jìn)行對(duì)應(yīng)裝修即可。7、裝修完成后，點(diǎn)擊頁(yè)面右上角的【發(fā)布站點(diǎn)】按鈕，就可以查看店鋪首頁(yè)了，如圖?；顒?dòng)（1）上傳PC端專(zhuān)業(yè)版:專(zhuān)業(yè)版要把原來(lái)寬度1920px的首頁(yè)縮小設(shè)計(jì)成寬度950px。一、950px首頁(yè)設(shè)計(jì)制作的方法：1、店招要設(shè)計(jì)成950px*150px，高度包括導(dǎo)航欄的30px，可以把1920px首頁(yè)上面的元素逐個(gè)復(fù)制過(guò)去，調(diào)整好位置，但是不能一起直接復(fù)制過(guò)去按比例收縮，這樣做不到想要的效果。2、除了店招部分以外，別的部分可以復(fù)制后按固定比例收縮成寬度為950px的元素，調(diào)整好位置，形成新的首頁(yè)。3、用“切片工具”按照設(shè)計(jì)布局分割好首頁(yè)，保存好圖片，把圖上傳到“圖片空間”的“素