新年馬上就要到,天貓裝修頻道的小編在這里先祝各位新年快樂 ,馬上發(fā)財,馬上流量飆升,馬上訂單多多!!!
每次看到天貓網(wǎng)店的首頁全屏大圖,是各種羨慕嫉妒恨啊,沒辦法,也只能是得比得比的說幾句了。看著就高端大氣上檔次啊。心想自己來做一個,咱也來高端大氣上檔次一下,于是乎,摸索摸索再摸索,終于成功了,那真叫一個漂亮,但是這種好事也不能自己一個人來享受,于是乎,小編立馬快馬加鞭,趕緊把方法公諸于世! 大家一起來高端大氣上檔次一下!方法絕對原創(chuàng),我也看過別人的方法,但是在操作上不是很方便,需要對照標(biāo)尺,還有要憑感覺,有一點差異圖片在網(wǎng)頁上就不能嚴絲合縫,有點麻煩!
步驟如下:
用到的工具只有一個,那就是我們的“神器”PHOTOSHOP,我用的是CS5,這個版本選擇依據(jù)個人習(xí)慣,沒什么特殊要求,
下面先給出最終效果圖:
好的,下面開始我們的高端大氣上檔次之旅:
1、打開PHOTOSHOP,打開需要進行制作的素材圖片;
2、更改圖像大小,圖像-圖像大小打開對話框,更改適合的數(shù)值,使其能在瀏覽器全屏顯示,具體的數(shù)值受電腦的屏幕尺寸影響(最小不能小于1024像素),我使用的是1346像素就能全屏顯示(數(shù)值的確定方法詳見本文底部);
3、最關(guān)鍵的一步了,我們要用到的是切片工具;
這里的切片的數(shù)據(jù)不是手動切,而是直接輸入數(shù)字來確定,在圖片上鼠標(biāo)右鍵選擇劃分切片,選擇垂直劃分;
確定后再鼠標(biāo)右鍵選擇編輯切片選項;
重點來了,這里的寬度如何確定,淘寶首頁自定義模塊的寬度是950像素,因為剛才圖像大小是更改為1346,所以這里第一個切片的寬度為(1346-950)/2=198像素,直接輸入,第二塊切片的寬度為950像素,第三塊切片的寬度為198像素,操作方法跟第一塊切片相同,只是鼠標(biāo)右鍵的時候要在相應(yīng)的切片上;
4、切好后,直接選擇文件-存儲為Web和設(shè)備所用格式;
5、打開剛才保存的圖片,一共有三張,把第一張跟第三張直接托放進PHOTOSHOP,也可以選擇文件-置入,選擇相應(yīng)文件確定即可,每一張置入都需要敲擊回車鍵確定;
6、把兩張圖片分別放在圖片原來的位置對齊,可放大圖片對,這樣比較準(zhǔn)確,然后刪除最底下一張圖層,合并所有可見圖層;
得到我們需要的背景圖片;
下面我們來制作背景圖片,因為首頁存在頁頭內(nèi)容,所以背景的高度需要設(shè)定,我這邊頁頭內(nèi)容為150像素,加上分隔符10像素,加上圖片高度是752像素,所以新建的圖片寬度為1346,高度為912像素;
1、這里把圖像分為三部分,第一部分是頁頭,第二部分是分隔符,第三部分是背景圖片;
分隔符制作方法:新建一個寬度為1346,高度為10的圖像,用油漆桶工具更改整張圖片顏色,顏色可根據(jù)自己店鋪首頁的導(dǎo)航欄的顏色來定,然后選擇移動工具直接托放進剛才的圖片中,放在相應(yīng)的位置;
頁頭區(qū)空白,把背景圖片跟分隔符圖片放在相應(yīng)位置;
2、得到我們想要的圖片,注意存儲為Web和設(shè)備所用格式,圖像大小小于200K;
好了,我們現(xiàn)在打開我們的網(wǎng)店裝修后臺,在頁面管理選擇首頁,添加一個自定義模塊,放在最上端,把剛才切片切出來的第二張圖片放上去,就是寬度為950的那張圖片;
然后進入樣式編輯-背景設(shè)置,這里有兩項,頁頭設(shè)置和頁面設(shè)置,頁頭設(shè)置是設(shè)置店招跟導(dǎo)航欄的背景的,我們進入頁面設(shè)置,背景顏色可以不顯示,在頁面背景圖上傳我們做好的背景圖片,選擇不平鋪居中顯示,
然后保存發(fā)布,好了,去看看自己的店鋪首頁吧,是不是很漂亮 。
圖形大小的確定方法:調(diào)整圖像的大小,然后選擇存儲為Web和設(shè)備所有格式,里面有個瀏覽器預(yù)覽的選項,預(yù)覽一下就知道是不是全屏顯示,或者是圖片是否有被剪貼。
新年馬上要來了,年底了希望快遞依舊給力,過完年打算上天天特價活動,各位有什么好的建議碼?
樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進貨渠道。超市進貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站:百度百科、知乎、淘寶平臺規(guī)則
本文來源: 手把手教你制作淘寶店鋪首頁全屏圖