今天我要給大家講的就是利用PS和DW制作一個(gè)仿拓展版的模板,我相信很多在淘寶開店的朋友都用的是標(biāo)準(zhǔn)版,而沒有用拓展版,主要是拓展版太貴啊,用不起啊,現(xiàn)在生意這么難做,賺的錢還不夠買旺鋪的。 大家也都知道標(biāo)準(zhǔn)版與拓展版最基本的區(qū)別就是標(biāo)準(zhǔn)版比拓展版多了一條“楚河漢界”,就是說,標(biāo)準(zhǔn)版左側(cè)欄和右邊欄中間有一條界線,兩邊是分開的,無法添加通欄,而拓展版就可以,添加通欄以后店鋪看起來就更加大方,有氣派。這也是很多標(biāo)準(zhǔn)版賣家揪心的事情啊,到底該怎么辦呢? 其實(shí)方法很簡單,不需要有多少技術(shù),更不需要對網(wǎng)頁進(jìn)行重新編寫。
接下來我就給大家介紹一下,如?沃譜麼萃卣拱婺0澹?涫嫡飧齜椒ǔ?都虻ヅ叮??易齪彌?蟾?究床懷隼從?“楚河漢界”哦。有興趣的朋友繼續(xù)往下看哦!
今天我們要用到的軟件有兩個(gè),一個(gè)就是強(qiáng)大的制圖軟件photoshop,和網(wǎng)頁制作軟件dreamweaver,其實(shí)我三篇帖子都是用的這兩個(gè)軟件。第一篇帖子中有他們的下載地址和免費(fèi)使用的方法哦,我這里就不再寫出來了。
三、PS制圖
好了,不羅嗦了,接下來就進(jìn)入實(shí)際操作過程了,首先我們打開PS軟件,然后新建一個(gè)寬度為950px,寬度為800px(寬度自定義)的空白圖層,顏色自定義,也可以是透明的。我這里建的是白色的。
新建好之后我們就要對其進(jìn)行分割,把它分成均勻的小塊,具體該分多大呢?大家想下,標(biāo)準(zhǔn)版的左側(cè)欄寬度是190px,那我們這里就剛好平均分成5列,至于高度可自己根據(jù)具體情況而定,我這里分成了3行。我們可以利用新建參考線進(jìn)行分割,視圖→新建參考線,
注意,在填寫新建參考線位置的時(shí)候單位是像素(px),不是厘米哦!我們分別建立水平和垂直的參考線,對新建的圖層進(jìn)行平均分割,下面是分割好后的圖片
好了,分割好后,我們就要放入寶貝圖片了,我們將事先準(zhǔn)備好的寶貝圖片拖動(dòng)到相應(yīng)的位置即可,對了,差點(diǎn)忘了,在標(biāo)準(zhǔn)版中首頁推廣頁面的寶貝圖片一般是160*160px,所以我們這里也把寶貝圖片調(diào)成同樣大小的像素,這樣看起來跟其他的比較匹配,當(dāng)然大家也可以根據(jù)自己的喜好進(jìn)行設(shè)置哦。我們把所有寶貝都拖到分割好的圖層中后,再每個(gè)寶貝下面可以利用文字工具輸入寶貝的名字和價(jià)格。
這里我只做個(gè)范例,不一一輸入寶貝名字和價(jià)格了,全部寫好名字和價(jià)格之后,我們就要對其進(jìn)行切片了,這里不能簡單的把寶貝圖片進(jìn)行切片哦,這個(gè)圖我們要分兩次切哦,因?yàn)闃?biāo)準(zhǔn)版的是不能放通欄的,所以我們要分開切片,首先我們要切左側(cè)欄的,因?yàn)樽髠?cè)欄寬度為190像素,我們剛好只切5列中的最左邊一列就可以了,對了,因?yàn)槲覀円褕D片分兩次切片,所以我們最好先把這個(gè)圖保存一下,以便第二次切片的時(shí)候不會(huì)丟失,保存好之后,我們就要先利用裁剪工具對圖片進(jìn)行裁剪,因?yàn)槲覀儸F(xiàn)在只需要最左邊一列,所以把最左邊一列裁剪下來就可以了
我們用裁剪工具在第一列進(jìn)行裁剪之后就會(huì)出現(xiàn)上圖的狀況,我們只要敲下回車鍵就可以把第一列給裁剪下來了
裁剪下來之后我們就可以進(jìn)行切片了,我們用切片工具把寶貝圖片進(jìn)行切片即可,因?yàn)槲覀兪孪仍O(shè)置的寶貝圖片是160*160ppx,所以我們在切片的時(shí)候只要調(diào)整成160*160px進(jìn)行切片就可以了,這樣切片更加方便,更加準(zhǔn)確,見下圖
切片好之后我們就可以將它保存起來,在這里我們要用文件→存儲(chǔ)為WEB或設(shè)備所用格式進(jìn)行保存,快捷鍵ctrl+ale+shift+s
在存儲(chǔ)的時(shí)候我們要注意存儲(chǔ)格式,我們要選擇HTML和圖像
保存好之后 我們就要對圖層有半部分進(jìn)行切片,我們先打開剛剛保存的為切片的完整圖片,用同樣的方法對圖片右半邊進(jìn)行切片。
四、DW轉(zhuǎn)換代碼
切片之后也用同樣的方法進(jìn)行保存,保存之后我們就可以把PS關(guān)閉了,下面我們要用的是DW軟件,這里很簡單,我們只要用DW打開剛剛切片后保存的HTML文件,我們剛剛切片的分成兩個(gè)文件保存的,我們可以同時(shí)打開
五、進(jìn)入淘寶編輯
打開之后,我們只要復(fù)制里面的代碼放入淘寶的自定義模塊中就可以了,我們在淘寶編輯頁面左右各新建一個(gè)自定義模塊
我們先編輯左側(cè)自定義內(nèi)容區(qū),在代碼編輯狀態(tài)把左側(cè)欄的代碼復(fù)制進(jìn)去
然后回到普通編輯狀態(tài)插入相應(yīng)的圖片,插入之后我們就可以保存然后編輯右邊自定義內(nèi)容,也是同樣的方法,等編輯好之后我們可以預(yù)覽一下,看看 ,是不是很不錯(cuò)呢,中間的“楚河漢界”也看不出來哦
哈哈,累死了, 就寫到這吧,大家多多頂帖哦,把帖子頂上去了,下次跟大家分享更簡單的方法哦, 只要用DW一個(gè)軟件就可以高仿拓展版,而且效果更佳哦!
寫完,收工,祝大家生意紅火,旺旺響不停
樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺(tái),是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站:百度百科、知乎、淘寶平臺(tái)規(guī)則
本文來源: PS與DW制作仿拓展版的模板