淘寶學堂模版之DIY寶貝插圖模板教程,即便是新手也能制作出精美的寶貝描述插圖模版,整個教程很詳細分為三部分。淘寶學堂模版之DIY寶貝插圖模版所使用是photoshop和dreamweaver。和淘寶學堂一起學習完如何DIY寶貝插圖模板教程,你就可以制作自己風格的插圖模版了——幾米插畫模板、浪漫插畫模版等等。那么按照慣例我們直接上教程。
第一部分,用photoshop制作出寶貝插圖模板JPGE圖片。
第一,打開photoshop,新建一個寶貝插圖模版頁面,寬度最好不要超過1000像素,這里設為800,長度根據需要任意;
第二,打開需要的素材作為模版頂部圖案;
第三,用移動工具把素材圖案拖動到之前新建的模版里,并調整好位置;
第四,用吸管工具,在你想要的顏色上點擊;
第五,用矩形工具在素材圖案下拉出合適的矩形框;
第六,用之前吸管工具吸取的色彩填充矩形框;
第七,根據需要用文字工具在合適的位置添加文字;
第八,保存寶貝模版;
第二部分,寶貝插圖模板切片
為了打開網頁時加快寶貝插圖模板顯示出來的速度,我們需要把模版切成一片片,分別上傳到相冊上,這樣打開網頁,每個模版切片同時顯示,大大減少了頁面打開的時間,買家也不會等到不耐煩了,下面是把寶貝插圖模板切片操作:
第一,雖然photoshop也有切片工具,但往往要切割得很準確圖片才不裂開,如使用ImageReady來切片就不會有這樣的困擾了。在模版圖片打開的狀態下,切換ImageReady進行切片處理;
第二,切片是有講究的,凡是需要放入圖片文字的地方都必須單獨切為一片,這里我選擇水平劃分為9片;
第三,點擊切片工具,移動到圖中黃色小點上鼠標會變為箭頭狀,拉動切割線調整到適當的位置;
第四,把01區的分為兩區,就選中該區,同樣選擇菜單的‘切片’垂直分為兩區;
第五,同樣用上一步的方法還可以把左邊的01區再上下分為兩區;
第六,劃分好后返回photoshop,選中左邊工具欄的切片工具就能看到分區,下來就是將切片存儲;
第七,如圖中操作然后存儲;
第八,如圖,然后保存,即可生成一個存放切片的文件夾和一個模版html網頁。
第三部分,用dreamweaver把寶貝插圖模板轉換為代碼
第一,打開Dreamweaver,如圖示打開寶貝插圖模板
第二,進入設計操作頁面
第三,下面為逛逛小店和信用評價做鏈接
第四,點擊寶貝展示下的切片圖,因為這里要插寶貝細節圖,我們需要把它轉換成表格形式,這樣不管插入的圖片多大,表格都會像一張畫布一樣撐開。如圖操作:
第五,輸入表格寬度,注意:請忽略下圖中“選擇菜單欄…”的說明,因為在上圖已經操作有插入表格了
第六,輸入高度,填充表格背景
完成后效果如下圖,同樣按照以上第四到第六的步驟將需要修改的切片進行表格轉換
第七,切入代碼頁面,復制代碼到描述的代碼編輯器中
插入寶貝圖片后的效果:
輸入所有的有效鏈接地址,插入圖片和文字后,點擊預覽就能看到一個精美的寶貝描述模版了。
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源: 淘寶學堂模版之DIY寶貝插圖模板