偶然看到一個(gè)淘寶商城的寶貝分類(lèi)做的很漂亮~而且是放在店鋪中間的自定義位置~背景是很漂亮圖片~分類(lèi)一目了然,而且圖片背景和店鋪的整體裝修風(fēng)格融為一體,特別漂亮~所以就自己動(dòng)手做了個(gè)寶貝分類(lèi)的圖片!
在這里和大家一起分享下整個(gè)的制作過(guò)程~
這個(gè)教程一共要用到兩個(gè)編輯軟件:Photoshop cs2 9.0和Dreamweaver 8 編寫(xiě)的整個(gè)制作過(guò)程,相信沒(méi)有用過(guò)這兩個(gè)軟件的朋友也會(huì)很容易學(xué)會(huì)的~希望的這次付出可以幫到更多的朋友~另外的領(lǐng)一篇帖子“新手必看-如何制作漂亮的店鋪和詳情頁(yè)左側(cè)欄推廣寶貝”確實(shí)幫到了一些朋友~這些朋友的鼓勵(lì)也是寫(xiě)這篇帖子的動(dòng)力~再次感謝他們!
好了下面開(kāi)始我們的制作之旅吧~
一:首先打開(kāi)我們的Photoshop,新建一個(gè)圖像 尺寸為:900xp 278xp(的這個(gè)分類(lèi)是放在通欄自定義頁(yè)的,如果大家想放在店鋪首頁(yè)的話,尺寸要做成寬度:750的) 分辨率為72 顏色模式RGB 8位 背景內(nèi)容 白色 如下圖:
二:背景圖片的制作:首先在百度圖片里面找一張你想做分類(lèi)背景的圖片,然后下載保存,這里已經(jīng)準(zhǔn)備好了一張,然后就直接把這張圖片放到photoshop里面編輯了~
1:在photoshop里打開(kāi)我們準(zhǔn)備好的圖片~
這是準(zhǔn)備的圖片:我們把這張圖片拖到我們新建那個(gè)對(duì)象中~方法是鼠標(biāo)左鍵點(diǎn)住直接拖到新建的背景中就可以了~然后把圖像調(diào)整成合適的大小就可以了~調(diào)整方法:ctrl+t 然后自己拖拉就可以了~
這是PHOTOSHOP里打開(kāi)的狀態(tài)
2:下面我們要做的就是在這張圖片上把我們的寶貝分類(lèi)文字打上去:
點(diǎn)擊工具欄長(zhǎng)條上面的一個(gè)“T”工具,然后在圖片上要添加文字的地方點(diǎn)擊一下,然后鍵盤(pán)輸入文字就可以了~
展示下我做的
3:文字打好之后~我們把編輯好的圖片合并圖層,方法是在photoshop的頂部工具欄里有個(gè)圖層,
合并好圖層,下面我們要做的就是保存圖片,儲(chǔ)存為JPG圖像,記住你儲(chǔ)存的位置哦~
三:背景圖片上傳的圖片空間:打開(kāi)你的淘寶圖片空間,把做好的圖片上傳到你的圖片空間~
上傳后是這個(gè)樣子的:
圖片上傳好了之后,我們要把這個(gè)圖片的鏈接復(fù)制下來(lái),點(diǎn)擊圖片的鏈接就復(fù)制好了~
四:我們打開(kāi):Dreamweaver 8 新建一個(gè)HTML
然后我們先在建好的HTML里布局個(gè)表格~點(diǎn)擊上面的布局,然后點(diǎn)布局表格~記住表格的尺寸就是你準(zhǔn)備好的圖片的尺寸900 278 的
在布局好的表格里面,我們來(lái)布置個(gè)單元格 尺寸也是900 278的
五:在布局好的 單元格里插入圖像~這個(gè)圖像就是我們做好的圖片
點(diǎn)擊上面的“插入”“圖像”然后就出現(xiàn)了上面的那張圖~在這里我們剛才復(fù)制的圖片空間的圖片地址就要用到了~
在我用紅框框起來(lái)的地方粘帖你復(fù)制的圖片地址,然后一直確定就OK了~
五:給圖片添加熱區(qū),熱區(qū)的意思就是這個(gè)地方可以插入鏈接,你一點(diǎn)這個(gè)地方就會(huì)打開(kāi)你添加鏈接的地址~
添加熱區(qū)的方法是:點(diǎn)擊上圖中地圖下面的長(zhǎng)方形,然后在你的分類(lèi)文字上點(diǎn)住左鍵拉一下就會(huì)出現(xiàn)如上圖的連衣裙上得框子,然后在下面鏈接的地方:填上你的寶貝分類(lèi)中連衣裙的網(wǎng)絡(luò)地址就OK了~
下面我們依次按照上面的方法把其他的熱區(qū)都做好~鏈接都添加好~
這樣我們的自定義分類(lèi)就做好了~
六:安裝代碼:
1:在Dreamweaver 8中把你做好的HTML 代碼復(fù)制下來(lái)
2:打開(kāi)我們的淘寶店鋪:點(diǎn)擊店鋪裝修 然后在做下面 添加自定義模板
3:編輯自定義模板,把我們復(fù)制的代碼粘帖到里面,保存就可以了~
4:發(fā)布我們的裝修就OK了~
樂(lè)發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站:百度百科、知乎、淘寶平臺(tái)規(guī)則
本文來(lái)源: 教你如何做淘寶裝修自定義的寶貝分類(lèi)