淘寶學(xué)堂模版之DIY寶貝插圖模板教程，即便是新手也能制作出精美的寶貝描述插圖模版，整個(gè)教程很詳細(xì)分為三部分。淘寶學(xué)堂模版之DIY寶貝插圖模版所使用是photoshop和dreamweaver。和淘寶學(xué)堂一起學(xué)習(xí)完如何DIY寶貝插圖模板教程，你就可以制作自己風(fēng)格的插圖模版了——幾米插畫模板、浪漫插畫模版等等。那么按照慣例我們直接上教程。

第一部分，用photoshop制作出寶貝插圖模板JPGE圖片。

第一，打開photoshop，新建一個(gè)寶貝插圖模版頁(yè)面，寬度最好不要超過1000像素，這里設(shè)為800，長(zhǎng)度根據(jù)需要任意；

第二，打開需要的素材作為模版頂部圖案；

第三，用移動(dòng)工具把素材圖案拖動(dòng)到之前新建的模版里，并調(diào)整好位置；

第四，用吸管工具，在你想要的顏色上點(diǎn)擊；

第五，用矩形工具在素材圖案下拉出合適的矩形框；

第六，用之前吸管工具吸取的色彩填充矩形框；

第七，根據(jù)需要用文字工具在合適的位置添加文字；

第八，保存寶貝模版；

第二部分，寶貝插圖模板切片

為了打開網(wǎng)頁(yè)時(shí)加快寶貝插圖模板顯示出來的速度，我們需要把模版切成一片片，分別上傳到相冊(cè)上，這樣打開網(wǎng)頁(yè)，每個(gè)模版切片同時(shí)顯示，大大減少了頁(yè)面打開的時(shí)間，買家也不會(huì)等到不耐煩了，下面是把寶貝插圖模板切片操作：

第一，雖然photoshop也有切片工具，但往往要切割得很準(zhǔn)確圖片才不裂開，如使用ImageReady來切片就不會(huì)有這樣的困擾了。在模版圖片打開的狀態(tài)下，切換ImageReady進(jìn)行切片處理；

第二，切片是有講究的，凡是需要放入圖片文字的地方都必須單獨(dú)切為一片，這里我選擇水平劃分為9片；

第三，點(diǎn)擊切片工具，移動(dòng)到圖中黃色小點(diǎn)上鼠標(biāo)會(huì)變?yōu)榧^狀，拉動(dòng)切割線調(diào)整到適當(dāng)?shù)奈恢茫?/p>

第四，把01區(qū)的分為兩區(qū)，就選中該區(qū)，同樣選擇菜單的‘切片’垂直分為兩區(qū)；

第五，同樣用上一步的方法還可以把左邊的01區(qū)再上下分為兩區(qū)；

第六，劃分好后返回photoshop，選中左邊工具欄的切片工具就能看到分區(qū)，下來就是將切片存儲(chǔ)；

第七，如圖中操作然后存儲(chǔ)；

第八，如圖，然后保存，即可生成一個(gè)存放切片的文件夾和一個(gè)模版html網(wǎng)頁(yè)。

第三部分，用dreamweaver把寶貝插圖模板轉(zhuǎn)換為代碼

第一，打開Dreamweaver，如圖示打開寶貝插圖模板

第二，進(jìn)入設(shè)計(jì)操作頁(yè)面

第三，下面為逛逛小店和信用評(píng)價(jià)做鏈接

第四，點(diǎn)擊寶貝展示下的切片圖，因?yàn)檫@里要插寶貝細(xì)節(jié)圖，我們需要把它轉(zhuǎn)換成表格形式，這樣不管插入的圖片多大，表格都會(huì)像一張畫布一樣撐開。如圖操作：

第五，輸入表格寬度，注意：請(qǐng)忽略下圖中“選擇菜單欄…”的說明，因?yàn)樵谏蠄D已經(jīng)操作有插入表格了

第六，輸入高度，填充表格背景

完成后效果如下圖，同樣按照以上第四到第六的步驟將需要修改的切片進(jìn)行表格轉(zhuǎn)換

第七，切入代碼頁(yè)面，復(fù)制代碼到描述的代碼編輯器中

插入寶貝圖片后的效果：

輸入所有的有效鏈接地址，插入圖片和文字后，點(diǎn)擊預(yù)覽就能看到一個(gè)精美的寶貝描述模版了。

樂發(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ī)則

本文來源： 淘寶學(xué)堂模版之DIY寶貝插圖模板