ps設(shè)計(jì)淘寶店招圖片
把想切的地方用那個(gè)標(biāo)尺拉好。然后用切片工具切成如下圖:
其實(shí)你也可以整張圖片保存好在DW里面做熱點(diǎn)。但是我的店招要弄搜索欄。有時(shí)候有個(gè)地方要改,所以我還是比較喜歡切片。而且旗艦店的要做關(guān)注的鏈接。 切片后,導(dǎo)航也可以把一些按鈕換成GIF的,這樣的店招就可以一閃一閃的(詳情搜索淘寶店鋪 愛(ài)予寶 的那個(gè)店招)。
如果怕切不好,請(qǐng)下載FW來(lái)切片。 PS或者FW切片后,如果切片復(fù)雜,都是會(huì)有個(gè)【分隔符】的圖片。這個(gè)圖片是沒(méi)有像素的圖片,目的是穩(wěn)定表格,這個(gè)分隔符需要在代碼里面加進(jìn)去的。如果你用div來(lái)做的布局,就不用這個(gè)分隔符。(注:div是一種代碼的層)
切好片之后按 ctrl+shift+alt+s 保存 要把圖片和html都保存下來(lái) 如下圖
然后繼續(xù)在PS里面把店招恢復(fù)回1920*150的大小。在店招中間部分加一層白色(如下圖),這個(gè)步驟是制作店招的背景的,目的是減少背景的KB數(shù)(大?。?。然后把這個(gè)圖片整張保存下來(lái)就OK了。
下面簡(jiǎn)單說(shuō)說(shuō)DW大家就會(huì)懂的了,DW很簡(jiǎn)單的。 打開(kāi)DW,把剛剛切片出來(lái)的那個(gè)html直接拉到DW里面。然后大家看下圖:
完成上面的步驟之后,其實(shí)就基本完成的了。但是很多人這樣做完后放到店招上面還是亂的。為啥呢?我來(lái)教大家一招,首先在DW的代碼模式下,用光標(biāo)選定 <img 然后點(diǎn)擊編輯 點(diǎn)擊查找和替換 如下圖
最后就是把制作好的背景也傳上去就OK的啦。
制作教程不容易。希望大家多多關(guān)注我。有神馬不懂的盡管留言。謝謝。
標(biāo)簽(TAG) 淘寶美工 平面設(shè)計(jì) 設(shè)計(jì)教程 店招 上宮小劍 原創(chuàng)