店鋪首頁全屏圖制作教程

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

　　步驟如下：

　　用到的工具只有一個，那就是我們的“神器”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的圖像，用油漆桶工具更改整張圖片顏色，顏色可根據自己店鋪首頁的導航欄的顏色來定，然后選擇移動工具直接托放進剛才的圖片中，放在相應的位置；

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

　　

　　2、得到我們想要的圖片，注意存儲為Web和設備所用格式，圖像大小小于200K；

　　好了，我們現在打開我們的網店裝修后臺，在頁面管理選擇首頁，添加一個自定義模塊，放在最上端，把剛才切片切出來的第二張圖片放上去，就是寬度為950的那張圖片；

　　

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

　　

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

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