ps設計淘寶店招圖片(3)

把想切的地方用那個標尺拉好。然后用切片工具切成如下圖：

其實你也可以整張圖片保存好在DW里面做熱點。但是我的店招要弄搜索欄。有時候有個地方要改，所以我還是比較喜歡切片。而且旗艦店的要做關注的鏈接。 切片后，導航也可以把一些按鈕換成GIF的，這樣的店招就可以一閃一閃的（詳情搜索淘寶店鋪 愛予寶 的那個店招）。

如果怕切不好，請下載FW來切片。 PS或者FW切片后，如果切片復雜，都是會有個【分隔符】的圖片。這個圖片是沒有像素的圖片，目的是穩(wěn)定表格，這個分隔符需要在代碼里面加進去的。如果你用div來做的布局，就不用這個分隔符。（注：div是一種代碼的層）

切好片之后按 ctrl+shift+alt+s 保存 要把圖片和html都保存下來 如下圖

然后繼續(xù)在PS里面把店招恢復回1920*150的大小。在店招中間部分加一層白色（如下圖），這個步驟是制作店招的背景的，目的是減少背景的KB數（大小）。然后把這個圖片整張保存下來就OK了。

下面簡單說說DW大家就會懂的了，DW很簡單的。 打開DW，把剛剛切片出來的那個html直接拉到DW里面。然后大家看下圖：

完成上面的步驟之后，其實就基本完成的了。但是很多人這樣做完后放到店招上面還是亂的。為啥呢？我來教大家一招，首先在DW的代碼模式下，用光標選定 <img 然后點擊編輯 點擊查找和替換 如下圖

最后就是把制作好的背景也傳上去就OK的啦。

制作教程不容易。希望大家多多關注我。有神馬不懂的盡管留言。謝謝。