前幾天一篇回答,獲得了很多人的認(rèn)可,其實(shí)我已經(jīng)很長(zhǎng)時(shí)間沒(méi)做淘寶了,但是能通過(guò)文字把自己的一些經(jīng)驗(yàn)分享給大家,能幫到大家,我很開(kāi)心。
很多人問(wèn)我裝修的事情。
其實(shí),裝修對(duì)于新店來(lái)說(shuō),不是最重要的,但也是不能少的。
今天就給大家?guī)?lái)一份裝修教程,個(gè)人覺(jué)得很詳細(xì)了,就算你是新手,不會(huì)PS,不會(huì)敲代碼,也能裝修出高大上的店鋪。
一、PC端
01、店鋪招牌
這個(gè)是最重要的,因?yàn)橛脩舨还茉谀膫€(gè)頁(yè)面預(yù)覽你的店鋪,招牌他們都是能直接看到的。比如寶貝詳情頁(yè)面:
我紅框的位置就是小米的店鋪招牌,我們?cè)陬A(yù)覽這款產(chǎn)品的時(shí)候,招牌也會(huì)第一時(shí)間出現(xiàn)在我們面前,所以店鋪招牌是決不能忽略的一個(gè)裝修部分。
接下來(lái)我們就一起來(lái)裝修一個(gè)店鋪招牌把~
對(duì)于新手來(lái)說(shuō),有兩種方式,第一種肯定就是網(wǎng)上找一些現(xiàn)成的代碼放上去,第二種就是自己來(lái)設(shè)計(jì)。
我教你的也是第二種:
1、設(shè)計(jì)
這里我用到的工具是PS,不會(huì)PS的也沒(méi)關(guān)系,我在設(shè)計(jì)的過(guò)程中都會(huì)跟你說(shuō)到我用到的哪些工具。
在設(shè)計(jì)之前,首先我們要知道,招牌的大小,和淘寶的一些規(guī)則。
在淘寶,一個(gè)鉆以下的店鋪可以免費(fèi)使用專(zhuān)業(yè)版,簡(jiǎn)單的說(shuō)就是你可以把招牌設(shè)置成1920寬度的,如果你到了一個(gè)鉆或者以上則需要每個(gè)月付費(fèi)50元才能使用。
但是這些我們也是可以通過(guò)設(shè)計(jì)來(lái)做到的,所以無(wú)需花這50元。
其次就是招牌的高度,高度一般是150,除去菜單欄的就是120,但是我們自己設(shè)計(jì)一般都是把菜單欄也設(shè)計(jì)上。比如上面小米的。
因?yàn)槲覜](méi)有現(xiàn)成的一鉆以下的店鋪,我這里就以一鉆以上的店鋪來(lái)給大家演示。
第一步:
這一步如果你不想花那50塊錢(qián),背景最好設(shè)置純白色的。其次就是,如果你花了那50塊錢(qián),或者你的店鋪是一個(gè)鉆以下的,你就按我下面的方法來(lái)操作。
打開(kāi)PS,新建一個(gè)1920X150的畫(huà)布。(如果你是不打算花那50的話,就創(chuàng)建950*150即可,會(huì)方便很多)
我這里就模仿小米這個(gè)招牌來(lái)為大家演示好了,先簡(jiǎn)單說(shuō)下,小米的菜單欄是用的代碼,如果你也想做小米那樣的你就把上面創(chuàng)建的畫(huà)布改成 1920X120或者950X120,如果你店鋪產(chǎn)品不多,你就跟著我做固定的就可以了,沒(méi)必要做他們那么復(fù)雜。
因?yàn)槲覀兊漠?huà)布是1920寬的新淘寶店鋪裝修教程,所以我們先要給它標(biāo)注以下950的位置,方便我們后期好導(dǎo)出。
我這里教大家一個(gè)最簡(jiǎn)單的辦法:
重新創(chuàng)建一個(gè)950*150的畫(huà)布把背景設(shè)置成黑色,然后疊加到1920X150這個(gè)畫(huà)布上居中對(duì)齊。
中間的黑色部分就是我們要添加內(nèi)容的部分。(在次說(shuō)明一下,如果你是不打算花那50塊錢(qián),或者你店鋪是一個(gè)鉆以下的你就可以直接創(chuàng)建950X150的畫(huà)布,不需要我這一步操作了。在或者你做的是純白背景的也直接950X150即可,至于為什么等會(huì)我說(shuō))
我們先添加好內(nèi)容在黑色區(qū)域,然后把黑色的那個(gè)圖層給刪掉即可。
為了方便,我這里就直接截圖操作了~
添加好內(nèi)容后大概就是這樣:
這里要跟大家說(shuō)明一下,注意看上圖后面的一個(gè)空調(diào)沒(méi)有在黑色區(qū)域。也就是說(shuō)它不是在招牌位置而是在背景位置。我們直接把它去掉就可以了。
然后我們把黑色圖層先隱藏:
大概就是這個(gè)樣子了。
具體的操作步驟我這里就省略了,因?yàn)槟阒恍瓒靡稽c(diǎn)PS基礎(chǔ)你就會(huì),用到的工具也就那么兩個(gè)而已。
設(shè)計(jì)完成后就導(dǎo)出。
我們先直接保存一份1920X150的。(注意,在次說(shuō)明,如果你是做其他背景顏色的必須要先保存一份1920X150的作為背景,如果是跟小米一樣的白背景可以忽略)
保存好后開(kāi)始裁剪。裁剪的時(shí)候把那個(gè)黑色圖層打開(kāi),然后用裁剪工具兩邊一拉即可。
裁剪完成后我們看下圖片大小,剛好是950*150
然后我們把黑色圖層黑刪掉。
這樣我們的背景和內(nèi)容區(qū)域就設(shè)計(jì)好了。接著做下一步~
第二步:
這一步我們需要進(jìn)行切片,也就是說(shuō),我們需要把要點(diǎn)擊的部分切出來(lái),比如收藏店鋪,這里我們需要做一個(gè)按鈕,或者菜單欄我們需要單獨(dú)做按鈕,就要把他們區(qū)分開(kāi)來(lái)。
工具使用:鼠標(biāo)右鍵單擊裁剪工具然后選擇切片工具
這個(gè)時(shí)候你的鼠標(biāo)會(huì)變成一把刀,然后我們把要點(diǎn)擊的部分用這把刀切就好了。
切完之后可以看到,我們把它切成了18張小圖片:
然后我們就直接導(dǎo)出,但是現(xiàn)在的導(dǎo)出方式是不一樣的。
我們直接用快捷鍵:SHIFT+CTRL+ALT+S
導(dǎo)出的格式選擇:HTML和圖像
然后我們就得到了一個(gè)images的文件夾,和一個(gè)HTML的代碼文件
我們先打開(kāi)這個(gè)文件夾把這些小圖片上傳到淘寶的圖片空間。
上傳好之后,我們?cè)诖蜷_(kāi)那個(gè)HTML文件,右鍵打開(kāi)方式選擇記事本打開(kāi)。
然后我們就看到了一堆看不懂的代碼,
但是沒(méi)關(guān)系,這個(gè)代碼我簡(jiǎn)單說(shuō)一下你就懂了。
上面的部分,我們不用管,我們直接從這個(gè)開(kāi)頭的位置開(kāi)始修改代碼。
比如第一個(gè):
我紅框位置的代碼就是第一張圖片,我綠框位置就是這張圖片的地址,它現(xiàn)在的地址是你文件夾的地址,我們直接把這個(gè)位置修改成我們剛剛上傳到淘寶圖片空間的地址即可。
去圖片空間,找到01的這張圖片,然后選擇復(fù)制鏈接。
然后把它換到我剛剛綠框的位置:
這里要注意,一定要細(xì)心,不然新手很容易出錯(cuò)的哦。
/imgextra/i3/912831831/O1CN01Z0HqbY1POdhgbDHNc_!!912831831.png"
簡(jiǎn)單的說(shuō)就是
然后依次更改他們的地址,地址上都有編號(hào),01/02/03,注意不要改錯(cuò)了。
改完之后我們就可以去上傳了。
第三步:
點(diǎn)擊裝修店鋪,然后頁(yè)頭點(diǎn)擊編輯。招牌類(lèi)型選擇自定義招牌。
直接選擇源碼模式,把剛剛的代碼粘貼進(jìn)來(lái)即可。
注意,我們剛剛設(shè)計(jì)的店招是150高度的,也就是包含了菜單欄的,所以在編輯的時(shí)候原本120高度的我們也要改成150的。
然后點(diǎn)擊保存:
因?yàn)槲沂茄菔?,所以我只弄了一張圖片。
這個(gè)時(shí)候你點(diǎn)擊收藏其實(shí)是沒(méi)有用的,我們還需要對(duì)它進(jìn)行最后一次編輯。
在次點(diǎn)擊編輯的時(shí)候可以看到,這里出現(xiàn)了很多方塊,其實(shí)就是其他圖片我沒(méi)傳上來(lái)而已。
然后我們選擇第一張圖片,點(diǎn)擊編輯。
因?yàn)檫@里鏈接的地址是收藏店鋪新淘寶店鋪裝修教程,所以我們?nèi)?fù)制收藏店鋪的地址。
在店鋪位置右鍵單擊收藏店鋪按鈕,就能復(fù)制了。
復(fù)制好后,把它粘貼到這里:
在新窗口打開(kāi)那個(gè)√你可以勾上也可以取消,看你喜歡。
然后點(diǎn)擊保存,我們?cè)俅吸c(diǎn)擊這個(gè)位置的時(shí)候就會(huì)跳轉(zhuǎn)到收藏店鋪了。
其他的都是一樣的操作,由于圖片太多,我就不一一演示了。(不懂的可以評(píng)論區(qū)問(wèn)我)
還要注意一點(diǎn)的就是背景顏色。我們還需要設(shè)置以下。
默認(rèn)的是這樣的:
我們點(diǎn)擊左邊的頁(yè)頭,然后把頁(yè)頭背景色去掉即可。
最后就大功告成:
02、店鋪banner
banner是需要有一定的設(shè)計(jì)功底的,但是沒(méi)關(guān)系,因?yàn)樯洗挝医o大家推薦了“稿定設(shè)計(jì)”,就算你是零基礎(chǔ)也能做出高大上的圖片。
打開(kāi)稿定設(shè)計(jì)官網(wǎng),點(diǎn)擊電商素材,我們可以直接找一個(gè)店鋪首頁(yè)的一整套模板來(lái)修改。
這樣的好處就是統(tǒng)一,包括店招也可以直接用套裝的。
我簡(jiǎn)單說(shuō)下步驟,首先選擇你喜歡的模板,然后編輯,編輯完成后導(dǎo)出。
比如這個(gè),我編輯好了之后,導(dǎo)出也是這個(gè)樣子的。
然后我們需要用到PS來(lái)切片,方法和上面店招是一樣的。但是這個(gè)就比較復(fù)雜那么一點(diǎn)點(diǎn)。
因?yàn)槲覀冃枰惹谐鰜?lái)店招部分/banner部分/產(chǎn)品部分等設(shè)計(jì)。然后再去單獨(dú)切店招的熱點(diǎn)(即點(diǎn)擊區(qū)域)部分。
我們一般做首頁(yè)設(shè)計(jì)就是這樣做的。先把整體設(shè)計(jì)好,然后來(lái)切圖。
假裝我現(xiàn)在設(shè)計(jì)好了一張海報(bào),然后我們需要去把這張海報(bào)轉(zhuǎn)換成代碼。
直接在稿定設(shè)計(jì)就可以哦。
點(diǎn)擊裝修工具,選擇全屏輪播
然后在底下找一個(gè)你自己喜歡的。
還是老樣子,先去把你的海報(bào)上傳到圖片空間,然后把地址復(fù)制過(guò)來(lái)。
然后設(shè)置以下參數(shù):
你可以先點(diǎn)擊預(yù)覽一下,沒(méi)毛病就點(diǎn)擊底部的生成代碼并復(fù)制代碼。
回到淘寶裝修,把原來(lái)的模塊全部刪除:
然后添加一個(gè)950的自定義模塊
點(diǎn)擊編輯,顯示標(biāo)題選擇不顯示,然后選擇源碼模式,把代碼粘貼過(guò)來(lái):
點(diǎn)擊保存,然后預(yù)覽:
全屏海報(bào)就有了。
03、分類(lèi)/產(chǎn)品區(qū)域
產(chǎn)品區(qū)域我就不演示了,都是一樣的方法,還是一樣的通過(guò)稿定設(shè)計(jì)就可以來(lái)實(shí)現(xiàn)。
比如:
包括客服/優(yōu)惠券/公告等都可以直接在這里生成代碼通過(guò)上面的方法去裝修。
因?yàn)槲覒械脑?,所以演示沒(méi)有做全,我知道可能還是會(huì)有些新手不懂,但是方法和步驟都是一樣的,今天先寫(xiě)PC端的,想看手機(jī)端的底下點(diǎn)贊喲。
之前那篇關(guān)于運(yùn)營(yíng)的回答在這:一個(gè)人做淘寶店需要多少技能?
最后,不知道我的教程寫(xiě)的怎么樣,總之能幫到大家就可以了。
覺(jué)得不錯(cuò),點(diǎn)個(gè)贊同;
寫(xiě)到心里,點(diǎn)波關(guān)注;
以上內(nèi)容由用戶投稿,彬迪地板進(jìn)行整理發(fā)布,希望對(duì)大家有所幫助,如有侵權(quán),請(qǐng)聯(lián)系我們進(jìn)行刪除。