手把手教你制作店鋪首頁全屏圖

新年馬上就要到，開淘裝修頻道的小編在這里先祝各位新年快樂 ，馬上發財，馬上流量飆升，馬上訂單多多！！！

每次看到天貓網店的首頁全屏大圖，是各種羨慕嫉妒恨啊，沒辦法，也只能是得比得比的說幾句了。看著就高端大氣上檔次啊。心想自己來做一個，咱也來高端大氣上檔次一下，于是乎，摸索摸索再摸索，終于成功了，那真叫一個漂亮，但是這種好事也不能自己一個人來享受，于是乎，小編立馬快馬加鞭，趕緊把方法公諸于世！ 大家一起來高端大氣上檔次一下！方法絕對原創，我也看過別人的方法，但是在操作上不是很方便，需要對照標尺，還有要憑感覺，有一點差異圖片在網頁上就不能嚴絲合縫，有點麻煩！

步驟如下：

用到的工具只有一個，那就是我們的“神器”PHOTOSHOP,我用的是CS5，這個版本選擇依據個人習慣，沒什么特殊要求，

下面先給出最終效果圖：

好的，下面開始我們的高端大氣上檔次之旅：

1、打開PHOTOSHOP，打開需要進行制作的素材圖片；

2、更改圖像大小，圖像-圖像大小打開對話框，更改適合的數值，使其能在瀏覽器全屏顯示，具體的數值受電腦的屏幕尺寸影響（最小不能小于1024像素），我使用的是1346像素就能全屏顯示（數值的確定方法詳見本文底部）；

3、最關鍵的一步了，我們要用到的是切片工具；

這里的切片的數據不是手動切，而是直接輸入數字來確定，在圖片上鼠標右鍵選擇劃分切片，選擇垂直劃分；

確定后再鼠標右鍵選擇編輯切片選項；

重點來了，這里的寬度如何確定，淘寶首頁自定義模塊的寬度是950像素，因為剛才圖像大小是更改為1346，所以這里第一個切片的寬度為（1346-950）/2=198像素，直接輸入，第二塊切片的寬度為950像素，第三塊切片的寬度為198像素，操作方法跟第一塊切片相同，只是鼠標右鍵的時候要在相應的切片上；

4、切好后，直接選擇文件-存儲為Web和設備所用格式；

5、打開剛才保存的圖片，一共有三張，把第一張跟第三張直接托放進PHOTOSHOP，也可以選擇文件-置入，選擇相應文件確定即可，每一張置入都需要敲擊回車鍵確定；

6、把兩張圖片分別放在圖片原來的位置對齊，可放大圖片對，這樣比較準確，然后刪除最底下一張圖層，合并所有可見圖層；

得到我們需要的背景圖片；

下面我們來制作背景圖片，因為首頁存在頁頭內容，所以背景的高度需要設定，我這邊頁頭內容為150像素，加上分隔符10像素，加上圖片高度是752像素，所以新建的圖片寬度為1346，高度為912像素；

1、這里把圖像分為三部分，第一部分是頁頭，第二部分是分隔符，第三部分是背景圖片；

分隔符制作方法：新建一個寬度為1346，高度為10的圖像，用油漆桶工具更改整張圖片顏色，顏色可根據自己店鋪首頁的導航欄的顏色來定，然后選擇移動工具直接托放進剛才的圖片中，放在相應的位置；

頁頭區空白，把背景圖片跟分隔符圖片放在相應位置；

2、得到我們想要的圖片，注意存儲為Web和設備所用格式，圖像大小小于200K；
好了，我們現在打開我們的網店裝修后臺，在頁面管理選擇首頁，添加一個自定義模塊，放在最上端，把剛才切片切出來的第二張圖片放上去，就是寬度為950的那張圖片；

然后進入樣式編輯-背景設置，這里有兩項，頁頭設置和頁面設置，頁頭設置是設置店招跟導航欄的背景的，我們進入頁面設置，背景顏色可以不顯示，在頁面背景圖上傳我們做好的背景圖片，選擇不平鋪居中顯示，

然后保存發布，好了，去看看自己的店鋪首頁吧，是不是很漂亮 。

圖形大小的確定方法：調整圖像的大小，然后選擇存儲為Web和設備所有格式，里面有個瀏覽器預覽的選項，預覽一下就知道是不是全屏顯示，或者是圖片是否有被剪貼。

新年馬上要來了，年底了希望快遞依舊給力，過完年打算上天天特價活動，各位有什么好的建議碼？歡迎到易淘問答社區暢所欲言！

樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。

本文內容整合網站：百度百科、知乎、淘寶平臺規則

本文來源： 手把手教你制作店鋪首頁全屏圖