今天給各位分享商品展示圖片模板圖小白的知識(shí)，其中也會(huì)對(duì)商品模版圖片進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！

本文目錄一覽：

• 1、如何制作淘寶商品圖片模板
• 2、怎么做淘寶店的寶貝描述模板
• 3、淘寶商品的主圖怎么樣做比較好看？

如何制作淘寶商品圖片模板

1。軟件工具：要自己制作寶貝模板，首先要選擇網(wǎng)頁(yè)編輯工具，目前業(yè)界最流行得就是 dreamweaver 了，用老微的frontpage也可以。想自己做的朋友最好選擇前者，frontpage我以前也用過，后來(lái)很少用，主要還是覺得dreamweaver使用更加方便，功能更加強(qiáng)大，畢竟是專門以這個(gè)起家的嘛。 需要dreamweaver 軟件的朋友可以 從網(wǎng)絡(luò)上下載，下載方法：在 google 搜索欄中輸入“ dreamweaver 軟件下載 ” 就可以找到很多下載網(wǎng)站了！！！，其它工具軟件你都可以這樣搜索到，下載就可以了。不過，記得下載完了一定要先殺毒哦，對(duì)我們這些店家來(lái)講，安全是非常重要得。

2。網(wǎng)頁(yè)制作之前，首先要考慮自己模板的基本布局。先不要著急用dreamweaver開始編輯，正式編輯之前我建議朋友們多看一些別人的作品，總結(jié)出寶貝描述模板的大體布局方法，需要的各個(gè)選項(xiàng)！最好的辦法就是先紙上談兵，在紙上用筆先勾畫出描述模板的布局，注明需要做的一些工作等。不過，寶貝模板的主要模塊我總結(jié)就是以下就是幾塊

A. 商品的大圖 B。商品的描述 C買家事宜 D配送方法 E店鋪分類 F 店鋪連接

可以在紙上粗粗描繪一下大體的布局，然后再開始下面的工作。

3。 準(zhǔn)備素材。做網(wǎng)頁(yè)不能沒有素材，素材就是指一些養(yǎng)眼的圖片，文字，背景等資源。還有最重要的，也最可能用到的就是你店鋪的logo，寶貝的圖片，文字介紹跟店鋪商品有關(guān)的一切了。把這些素材都統(tǒng)統(tǒng)歸到一個(gè)目錄下面（真正正規(guī)的編輯方法是按照文件夾來(lái)組織自己的素材），方便以后尋找。另外，為了做出更好的效果，可能還要?jiǎng)佑靡幌聀hotoshop這個(gè)工具，特別對(duì)圖片處理都離不開它。下載的方法象上面所說(shuō)的就可以了。

4?，F(xiàn)在基本的東西已經(jīng)準(zhǔn)備好了。那么就開始做吧。

淘巧網(wǎng)

A。首先打開Dreamweaver ，新建一個(gè)html網(wǎng)頁(yè)。這個(gè)時(shí)候工作臺(tái)上你看到一個(gè)白色的區(qū)域，就是編輯區(qū)域了。

B。添加表格進(jìn)行布局。這一點(diǎn)很重要，因?yàn)楸砀衲軌虮容^方便的讓我們進(jìn)行布局的分配，以及以后各種素材的定位。有了表格，我們心里面就對(duì)布局基本有數(shù)了。在表格里面可以添加我們的素材，文字，更改背景等。這些文字一般是通用的文字，固定不變的，不會(huì)隨著寶貝的不同而變化，比如【買家事宜】，【配送方法】等標(biāo)題性和說(shuō)明性的文字。這個(gè)時(shí)候我們還要留出放置寶貝圖片，和寶貝描述的位置，這些都是會(huì)變化的，因?yàn)槊總€(gè)寶貝的圖片，和描述都是不同的。因此一定要留出這個(gè)位置。 龔樹華的淘巧網(wǎng)

提示：這一步之前首先要把需要用到的圖片上傳網(wǎng)絡(luò)上去，我推薦給大家這個(gè)網(wǎng)站。首先上傳有一個(gè)好處，以后在使用圖片的時(shí)候，直接可以找到圖片，然后復(fù)制下該圖片的連接添加到圖像占位符的來(lái)源上面就可以了，不用再一邊上傳圖像，一邊編輯網(wǎng)頁(yè)。

C。在需要添加圖片的位置上，添加一個(gè)圖像占位符，記住，寶貝描述模板中所有的圖像都一定是一個(gè)圖像占位符，不能直接圖像。添加完后我們看到一個(gè)斷裂的方塊，證明該對(duì)象是個(gè)圖像占位符。 淘巧

【重點(diǎn)理解】為什么不直接插入圖像呢？直接插入圖像在淘寶里面是無(wú)法顯示的。在要放置圖像的地方，包括背景圖等都要使用圖像占位符。有了圖像占位符，等于是先占好了這個(gè)位置，然后在這個(gè)位置上添加相應(yīng)的圖片連接地址，這樣當(dāng)在瀏覽器中查看網(wǎng)頁(yè)的時(shí)候，瀏覽器自己按照?qǐng)D片的連接地址下載圖像，就可以顯示出自己想要的圖片了。這點(diǎn)很重要哦。

D。在其它位置上也添加一些圖像占位符，比如店鋪logo，店鋪分類等等，這些位置可以為你以后操作帶來(lái)方便。

E。把圖像占位符的地方填好圖片的網(wǎng)絡(luò)連接地址，具體到每個(gè)商品圖片時(shí)候，我們?cè)谔詫毨飳氊惥庉嬈髦性偬钸M(jìn)來(lái)。在淘寶的寶貝描述編輯器里，我們找到該商品的圖片連接地址，填到圖像占位符的圖片來(lái)源上就可以了。這樣的話，只需要改動(dòng)商品圖片圖像占位符的圖像來(lái)源地址，就可以顯示我們想要的圖片了。

6。以上如果不出所料，按照自己的設(shè)計(jì)，基本上可以算完工了。具體美不美觀要自己慢慢調(diào)整?，F(xiàn)在最重要的就是在Dreamweaver中切換到代碼編輯窗口，CTRL+a 選中所有代碼，選擇復(fù)制，然后選擇一個(gè)寶貝，在淘寶里面編輯該寶貝，在寶貝編輯器里面，選擇編輯源文件，這個(gè)時(shí)候就切換到代碼編輯窗口了。將先前復(fù)制的代碼粘貼到該窗口，然后選擇編輯模式，切換到圖形編輯模式。這個(gè)時(shí)候你就發(fā)現(xiàn)，以前你設(shè)置的圖像占位符現(xiàn)在都顯示成圖片了。如果不能顯示，就證明該處沒有圖像連接地址。敢緊選擇該圖像占位符，然后點(diǎn)擊插入/編輯圖像按鈕，輸入相應(yīng)的圖片連接地址就可以了。 特別要提示的是：修改寶貝描述主要是能夠直接顯示寶貝的大圖。這個(gè)時(shí)候一定要更改寶貝圖片占位符，把該占位符的圖像來(lái)源改成是當(dāng)前寶貝的圖片連接地址就可以了。 內(nèi)容來(lái)自淘巧網(wǎng)

點(diǎn)擊一下預(yù)覽，可以看看編輯的效果，有什么不滿意的，只能以后慢慢修改了。

切換寶貝編輯器到代碼模式，選擇所有代碼復(fù)制并拷貝到一個(gè)TXT文本文件中保留，以后每個(gè)寶貝都可以用到。新建一個(gè)寶貝的時(shí)候?qū)⑦@些代碼在代碼編輯模式下面直接拷貝過來(lái)，然后切換回圖像編輯模式改變對(duì)應(yīng)的寶貝圖片就可以了。

怎么樣，一切都很簡(jiǎn)單吧。

下面的圖是dreamweaver中圖形編輯模式下的寶貝模板的布局，紅色字體說(shuō)明部分是常用到的哦，一定要多加留意。

具體的效果大家可以到我的店鋪里面隨便點(diǎn)擊一個(gè)寶貝看下就可以。還有很多地方要完善的，請(qǐng)大家多多指教。有什么問題可以一起探討噢。只能算是拋磚引玉。希望高手們把你們的設(shè)計(jì)經(jīng)驗(yàn)跟大家交流一下。

補(bǔ)充說(shuō)明一下,在寶貝編輯器中可以使用熱點(diǎn)連接這個(gè)功能來(lái)創(chuàng)建圖像上的直接連接功能.比如我的模板上面店鋪介紹,逛逛本店,信用評(píng)價(jià)這些文字上面都使用了連接功能.這個(gè)連接功能怎么實(shí)現(xiàn)的呢?方法如下 :

選中你需要做連接的圖片，圖像占位符也是支持的。然后這個(gè)時(shí)候你發(fā)現(xiàn)dreamweaver左下腳有一些綠色的小圖標(biāo)。這些是用來(lái)在圖片上畫出一些方形，圓形或其它形狀區(qū)域，在瀏覽器中，鼠標(biāo)經(jīng)過這些區(qū)域的時(shí)候就會(huì)變成小手的形狀，這些區(qū)域就是熱區(qū)。鼠標(biāo)點(diǎn)擊這一熱區(qū)的時(shí)候就會(huì)連接到相應(yīng)的網(wǎng)頁(yè)。

趕快在圖上畫一個(gè)區(qū)域，然后在dreamweaver左下角連接地址中輸入你想要連接的網(wǎng)頁(yè)地址。

將代碼考到寶貝編輯器，然后預(yù)覽一下，當(dāng)鼠標(biāo)放到這些區(qū)域上的時(shí)候，就會(huì)變成小手的形狀。點(diǎn)擊一下，就會(huì)連接到相應(yīng)的網(wǎng)頁(yè)了。

怎么做淘寶店的寶貝描述模板

淘寶店的寶貝描述模板制作如下：

1.用photoshop制作出模版JPGE圖片

寶貝模板的主要模塊總結(jié)就是以下就是幾塊：A商品的大圖、B.商品的描述、C.買家須知、D.配送方法、E.店鋪分類、F.店鋪連接；

2.切片（核心）

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

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

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

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

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

5.操作然后存儲(chǔ)；要選擇JPG格式的這個(gè)要注意；

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

3.用dreamweaver把模版轉(zhuǎn)換為代碼（關(guān)鍵）

第一，打開Dreamweaver，打開模版；

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

選擇熱點(diǎn)選擇要做鏈接的部分。

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

5.輸入表格寬度

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

6.輸入高度，填充表格背景

完成后，同樣按照以上4到6的步驟將需要修改的切片進(jìn)行表格轉(zhuǎn)換，按照這個(gè)步驟把其他的要加圖片或者文字的地方都都把切片轉(zhuǎn)換成表格。

7.切入代碼頁(yè)面，復(fù)制代碼到淘寶描述的代碼編輯器中

把所有的代碼都復(fù)制下來(lái)，如果復(fù)制到寶貝描述里面，然后再把里面本地的鏈接地址換成剛才把切片上傳的圖片空間里面的地址，這個(gè)很重要如果不換的話是不會(huì)成功的是沒效果的。

然后輸入所有的有效鏈接地址，就可以在剛才們換成表格的地方插入圖片和文字了，點(diǎn)擊預(yù)覽就能看到一個(gè)精美的寶貝描述模版。

淘寶商品的主圖怎么樣做比較好看？

1/10

打開美圖秀秀，點(diǎn)擊【拼圖】進(jìn)入制作。

2/10

本節(jié)主要是使用模板制作主圖點(diǎn)擊模板拼圖……

3/10

添加多張寶貝圖片，你可以選擇美觀，且突出商品特色的圖片。按住CTRL+點(diǎn)擊選擇多張圖片，打開即可。

4/10

圖片即添加到左邊框，及顯示在主圖展示框（中間框）處；現(xiàn)在你可以在右邊，在線選擇你的模板，下載下來(lái)，以便以后使用。并選擇一個(gè)你喜歡的模板即可。

5/10

先對(duì)模板主圖的整體像素調(diào)整為700*700以上像素；如果你先做下面的步驟后，再調(diào)整大小，那么下面所調(diào)整的圖片將要重新調(diào)整。因?yàn)槟０宓哪J(rèn)像素是寬500以內(nèi)的。步驟的先后順序不能錯(cuò)，特別是這一步。

6/10

制作主圖，調(diào)整各圖片：從左邊拖動(dòng)圖片到中間框?qū)?yīng)的位置，可更換圖片；點(diǎn)擊中間框內(nèi)的圖片，會(huì)出現(xiàn)一個(gè)在右邊的調(diào)整框，在框內(nèi)有一個(gè)白色的方形框，你可移動(dòng)它，以及按住圓點(diǎn)拉動(dòng)可縮小或放大；在框內(nèi)調(diào)整時(shí)，你會(huì)在中間的框內(nèi)，看到圖片也跟著變化。這樣，你就能對(duì)每一張圖片進(jìn)行調(diào)整出最好的顯示部位了。你看看，加入的圖片，全部不用你事先用PS調(diào)整統(tǒng)一規(guī)格，就能完成了。.注意：淘寶主圖一般是700*700以上的，所以你在調(diào)整圖片前，最好先設(shè)置好這個(gè)主圖的像素。如上一步所說(shuō)的。

7/10

多種底紋，任你選。

8/10

多種邊框任你選，選你喜歡的吧

9/10

也可以換一個(gè)模板然后重新像上面的調(diào)整方法，調(diào)整圖片即可。.完成，保存。

10/10

以下就是剛做好的幾張主圖。供你看看，發(fā)揮你的想像力，做出具有你特色的主圖吧。

商品展示圖片模板圖小白的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于商品模版圖片、商品展示圖片模板圖小白的信息別忘了在本站進(jìn)行查找喔。