拍拍網(wǎng)寶貝描述模板在各個賣家聽來都非常熟悉了吧，店鋪裝修不可缺少的部分哦，不但每個寶貝頁面統(tǒng)一，就連你上架排板的功夫也省掉了，的確是一個很好的工具。前些日子想換個模板用用，搜索了下網(wǎng)上賣模板的店鋪好多，各式各樣的都有，不過如果想要自己滿意的，合自己商品風格搭配得好的就非常難找了，若是要定制一個，還得花費金錢。想著想，不如自己DIY一個吧，在淘寶上可是獨一無二的哦。
自己是個業(yè)余愛好者，所以做起來效果肯定沒有專業(yè)賣家那么好，經(jīng)過一天的試驗，就弄出現(xiàn)在自己使用的模板。嘿嘿雖然不是大師級不過在這里我想把我的經(jīng)驗和制作步驟介紹給一些也想DIY模板的賣家們，畢竟自己做的是網(wǎng)絡(luò)生意，這方面的知識懂的話對自己也有幫助的哦！
第一次寫教學帖寫得不好，還請各淘友指正給出多多建議哦~~
準備工作：photoshop Dreamweaver 很好找的兩個軟件，功能強！
1、打開PS軟件，按CTRL+N新建一圖像，以新版旺鋪的寶貝描述模板尺寸定義就是：寬度710像素，高度沒特別要求，不過后面需要編輯一些文字，所以就定義為800像素，分辨率就定義為300像素/英寸。點擊確定按鈕后新建圖像完成。
（圖1）
2、新建一個新圖層，控制菜單選擇：圖層--新建--圖層。圖層名稱改為“背景”，這時在右下角的圖層窗口能看到新建的圖層。（圖2） 
（圖2） 
（圖3） 
（圖4）
選擇左邊工具菜單的選區(qū)-矩形選區(qū)（圖3），在新建的圖層上勾畫一個區(qū)域作背景色，在控制菜單點擊中（圖4），彈出窗口選擇自己喜歡的顏色（圖5），這里以橙色為例，點擊確認。
#p#分頁標題#e#
（圖5）
選擇工具菜單的“油漆桶工具”在選區(qū)填充顏色（圖6）。填充完成按CTRL+D取消選擇。
（圖6） （圖7）
現(xiàn)在對背景進行小小的美化，在控制菜單選擇：濾鏡--紋理--紋理化。紋理：畫布?？s放、凸現(xiàn)和光照方向按照個人喜好調(diào)整，調(diào)整過程中帶有預覽的效果（圖7）。下一步選擇控制菜單：圖層--圖層樣式--外發(fā)光，調(diào)整下幾個參數(shù)到滿意，圖里參數(shù)供僅供參考（圖8），背景制作完成。
（圖8）
3、重復2里步驟新建一白色圖層為寶貝描述的背景色。選區(qū)要比背景圖層稍微小一點，防止遮擋住背景圖層?？梢越o寶貝描述的背景稍作美化，體現(xiàn)3D效果增加一個投影，具體方法是選擇控制菜單：圖層--圖層樣式--投影，彈出窗口根據(jù)實際情況調(diào)整參數(shù) （圖9），寶貝描述背景制作完成。（效果圖1）
（圖9）
4、現(xiàn)在我們開始為寶貝描述模板制作分類欄，我這里只設(shè)置了4個分類，各位賣家可以根據(jù)自己店鋪的不同，增加或減少分類，不影響后期顯示效果。#p#分頁標題#e#
我們?yōu)楦鱾€分類各建一個新圖層，建圖層方法前面已介紹過，不再重復。在一新圖層我們進行文字編輯，在工具菜單選擇“文字工具”（圖10），放在要編輯的地方，開始輸入分類信息，如：商品展示。在控制菜單下有屬性欄，大家對編輯文字已不陌生了吧，那里有文字樣式、大小顏色等等可以根據(jù)自己需要作調(diào)整（圖11）。
然后我們在文字底下新建一新圖層，用鼠標點畫筆工具不放會彈出選項（圖12），選擇鉛筆工具（很多工具欄都有多重工具屬性，記得用該方法切換不同的工具哦），按住SHIFT鍵畫一條橫線作分隔線，若覺得畫后位置有偏可以使用移動工具做調(diào)整（圖13）。分類欄制作完成。再重復以上步驟完成其他的分類欄的制作。
（圖10） 
（圖12） 
（圖13）
（圖11）
完成后效果圖（下半部缺?。?img class="ZoominCursor" alt="" width="622" src="/upimg/allimg/071227/07585113.jpg" />
前4步驟完成整體效果圖：
#p#分頁標題#e#
5、現(xiàn)在我們再對頁面增添一點效果，選擇“寶貝描述背景”圖層，新建一圖層，命名為楓葉。選擇畫筆工具（方法前面已有介紹），在屬性欄畫筆樣色選擇“楓葉”（圖14），畫筆大小、不透明度稍微調(diào)?。▓D15），在邊框和分類爛處輕輕勾畫出楓葉飄散的效果，怎么勾畫才好看那得看你的熟練度啦，如果畫得不好可以在點歷史記錄，重新勾畫。反復試幾遍，效果就出來了（圖16）。
（圖14） （圖16）
（圖15）
6、模板的頁面制作完成了，現(xiàn)在我們開始來制作寶貝描述的模板。首先我們先計算自己的商品圖片的尺寸?，F(xiàn)在旺鋪的寬是710像素、普通的是890像素。以710像素為例，那么我們的商品圖片就得符合要求：寬度小于710像素，計算寶貝描述的邊框，在650像素以下為宜。由于我設(shè)置的圖片都是寬550像素的，算算710-550=160、160/2=80，那么我需要的邊框的寬度可以設(shè)置為80像素。
首先，把剛才設(shè)計好的圖像保存并另存為一張JPG格式的圖片，名字可以自己設(shè)置。然后關(guān)閉編輯的圖像，打開剛才保存的JPG格式的圖片。選擇工具菜單的“裁剪工具”（圖17），把最頂端的一部分包括其中一個分類欄裁剪出來（雙擊裁剪）（圖18），完成后使用另存為保存，命名為“頂”，利用右邊歷史窗口初始化圖像文件（圖19）。
（圖17） 
（圖19）
（圖18）
重復上面操作把各個分類欄和底部裁剪后保存為新圖像文件。（分類欄裁剪后的寬度都為710像素，高度不限）。
現(xiàn)在開始制作模板的兩側(cè)的圖像，跟上面一樣，把圖象中間空白處裁剪出來。 （圖20）
（圖20）
不過我們要用到的只是兩邊而且，接下來調(diào)整下圖像。選擇控制菜單中圖像--畫布大小。彈出窗口，修改畫布寬度，高度不影響，可以不考慮，定位方面點擊九宮格的左邊那格，寬度設(shè)為80像素，確認會提示需要裁剪，點“是”完成裁剪（圖21）。剪完后和前面一樣是另存新圖像。重復把右邊按照相同方法裁剪下來，九宮格位置選右邊那格就可以，其他相同。 #p#分頁標題#e#
（圖21）
這樣我們就完成了制作模板背景圖片的前期工作了。接下來進入Dreamweaver軟件，新建一空白HTML文件。
1、選擇控制菜單的：插入--表格。彈出窗口中，表格寬度設(shè)置為710像素，列數(shù)為3，行數(shù)因之前制做分類欄的不同，做調(diào)整。我設(shè)置的分類欄有4個，行數(shù)需設(shè)置為9；如果分類欄有5個，行數(shù)就應(yīng)該為11，依此類推（圖22）。
（圖22）
2、表格出現(xiàn)在空白處，首先設(shè)置表格各列的寬度，用鼠標點擊“下三角”在彈出對話框“選擇列”（圖23），在表格的屬性欄找到單元格，其中“寬”的屬性是空白，我們給它定義為80。再為其他兩列設(shè)置列寬，分別為550、80。
（圖23）
這時候選擇整個表格框可以看到各列定義的數(shù)值（注：括號內(nèi)的數(shù)值暫不打理）（圖24）。
（圖24）
3、合并奇數(shù)行的單元格，類似EXCEL的合并單元格，具體方法是：選擇需要合并的各小單元格，點鼠標右鍵彈出窗口中選“表格”--“合并單元格”（圖25）。
（圖25）#p#分頁標題#e#
4、把背景圖片插入對應(yīng)的單元格內(nèi)，圖片就是前面制作完成的各分類欄圖片和底部圖片。選擇需要插入圖像的單元格，在控制菜單找到：插入--圖像。把各圖像對應(yīng)插入到各單元格。（圖26）
（圖26）
5、左右兩個邊框圖片和上面插入的方法不同哦！必須使用背景來顯示。選擇需要插入的小單元格，在屬性欄的背景右邊有一個文件夾的小標（圖27），點擊把對應(yīng)圖片（如果你選擇左邊框單元格，那就必須插進左邊框圖像）。重復地把左右兩邊所有的小單元格的插滿。
（圖27）
6、中間部分沒有圖像的單元格就是我們要放寶貝圖片和描述說明的地方了?？臻g太小怎么辦？我們把鼠標定位在表格邊框處，就可以拉動大小了。（圖28）
（圖28）
7、現(xiàn)在還要調(diào)整下，選擇需要插入寶貝圖片和描述說明的單元格，把屬性欄的垂直選擇“頂端”（圖29），這樣焦點就在左上角了，方便我們?nèi)蘸蟮木庉嬇?，所以這里不能忽略。
（圖29） 
（圖30）
#p#分頁標題#e#
8、在次選擇整個表格，在屬性欄里的“填充、間距和邊框”數(shù)值全部改為0（圖30） 。點F12保存文件試下預覽效果。出現(xiàn)下圖說明我們就快完成了。。嘿嘿~（下半部圖片截屏不下，圖片稍微大了）
9、確認顯示出來圖片沒有斷截的話那說明圖片都裁剪得很好，現(xiàn)在圖片的連接是在本地的，如果想要外網(wǎng)的人也能看到圖片，就必須得上傳到網(wǎng)絡(luò)相冊里。網(wǎng)絡(luò)相冊有好多個，我就不多作介紹，最好是找個穩(wěn)定點的網(wǎng)站，這樣才不怕日后出現(xiàn)問題。
10、最后一步了，更換圖片地址。由于之前用的圖片都是本地的，現(xiàn)在我們把上傳后的圖片地址代替原來的地址。使用拆分的界面能很方便找到我們要修改的地方?，F(xiàn)在我們來修改頂端的圖片，點擊圖片在上面的代碼窗口立即找到了圖片的位置（img scr=" "空格處為圖片地址)，黑色的部分就是圖片的地址，不包括前后的雙引號。我們復制好相冊里頂端圖片的地址后，把黑色選區(qū)的地址更換為網(wǎng)絡(luò)地址。（相信每個賣家都能很熟悉怎樣運用網(wǎng)絡(luò)上圖片的地址吧，嘿嘿）
兩側(cè)的背景圖片也一樣需要替換，不過有些不同哦。語句為：background=" "。而且得分清楚左邊框和右邊框的地址。修改過程中可以按F12查看修改后效果的。
修改后的圖片在本地讀取不到，所以在原來設(shè)計窗口中就變成下圖LOGO，這點請別擔心，網(wǎng)絡(luò)上是能看得到圖片的。#p#分頁標題#e#
全部修改完后，就大功告成了，只要把代碼復制下來，貼在源文件編輯“寶貝描述”里面，就可以看到這些圖片啦。由于背景圖是可以拉伸的，所以對最大高度沒有限制哦，你可以放好多好多的圖片進去也不影響。
大家如果想看看制作出來的效果，可以到我店里來看看。自己是個業(yè)余的制作者哦，比起專業(yè)的大師級人物那可是差好多好多。不過自己DIY出來的東西聽到每個朋友的夸贊，偶是很開心的。網(wǎng)絡(luò)是萬千世界，個性化的店鋪設(shè)計更能展現(xiàn)你店鋪的特色。
