很多新手美工及店主掌柜，學(xué)會(huì)了點(diǎn)PS，問后面就不知從何入手，要學(xué)PS還要學(xué)代碼DW軟件。直接下載的素材改好了但又不會(huì)上傳到店鋪去。現(xiàn)在素材確實(shí)是滿天飛，可能幾T的硬盤都不夠裝。特別是這種不規(guī)則的，一不小心又會(huì)出現(xiàn)讓人頭痛的分隔符，今天我們就一起來學(xué)習(xí)盡量不用DW軟件及代碼知識(shí)完成一個(gè)模塊的裝修。

　　提示：在學(xué)習(xí)美工之前除了學(xué)習(xí)PS軟件，還會(huì)下載一些大神現(xiàn)成的PSD源文件來參考學(xué)習(xí)，那么這兩個(gè)步驟一定要最開始就設(shè)置好。第一把自動(dòng)選擇打鉤選擇，然后右邊選擇圖層。這樣以后我們用鼠標(biāo)點(diǎn)擊哪里就會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的圖層上面。

　　一、首先把你要的效果圖做出來，我這里就直接截取了天貓茵蔓的一個(gè)“經(jīng)典”模塊為例。

　　二、用選擇工具沿著圖片規(guī)則間隙拉參考線。為了好的習(xí)慣最后還要放大圖像查看參考線是否在間隙的中間位置。

三、選擇切片工具，然后點(diǎn)擊基于參考線的切片，PS就自動(dòng)幫您沿參考線切片完成。

四、如下圖，但是這時(shí)不是你所想要的效果怎么辦？如上面的頁頭，是一整張圖片，我想讓他變成一張。

五、選擇切片選擇工具，然后按住鍵盤SHIFT上檔鍵，把上面要組合的四個(gè)相鄰切片選中，然后右擊選擇組合切片，即可合并成一個(gè)。

六、如下圖，最上面的4個(gè)切片變?yōu)橐粋€(gè)切片了，其它的也如此方法完成。

七、組合完成后的效果，當(dāng)然這種不規(guī)則還是有規(guī)律可循的。太沒有章法的就只求大概或者參考另一篇使用DW熱區(qū)添加鏈接的方法。

八、然后按CTRL ALT SHIFT S存儲(chǔ)為WEB所有格式，然后按CTRL -縮小整個(gè)畫面用鼠標(biāo)全部框選。

九、品質(zhì)選擇高或者直接輸入60或68最好的是雙數(shù)，還可以CTRL 放大觀看清晰度，反正體積越小越清晰越好。（如果想讓背景透明你得先把效果圖的背景眼睛先關(guān)掉，再存儲(chǔ)，然后選擇PNG24才可以完全透明。）點(diǎn)擊存儲(chǔ)按鈕。

十、注意：選擇你保存的位置，如桌面，格式里的選擇是HTML和圖像，這里是必須的，然后保存。

十一、然后在桌面自動(dòng)生成一個(gè)IMAGES文件，一個(gè)是HTML文件，這里如果懂DW的就可以用DW打開修改，但是如果不懂那就直接把后面的HTML改成TXT，然后雙擊打開。也可以直接在文件上右擊選擇用記事本打開。

提示：如果你電腦不顯示擴(kuò)展名，WIN7系統(tǒng)如下兩個(gè)步驟搞定。

十二、用記事本打開代碼右擊全選擇，然后右擊復(fù)制。

十三、這時(shí)進(jìn)入你的店鋪首頁裝修后臺(tái)，新建一個(gè)自定義然后點(diǎn)擊-編輯。

十四、點(diǎn)擊源碼按鈕，使其它圖標(biāo)變成灰色狀態(tài)。然后右擊把代碼粘貼到自定義區(qū)域內(nèi)，如下面兩幅圖片。

十五、然后拖動(dòng)下拉滾動(dòng)條，看到左側(cè)有些不顯示的圖標(biāo)，雙擊。這個(gè)就是我們要替換的圖片。自己拉動(dòng)對(duì)著你的效果圖，哪個(gè)對(duì)應(yīng)哪個(gè)圖片。自己要心理有數(shù)。或者直接看文件名，如15步驟。

十六、雙擊不顯示的圖標(biāo)彈出下面的對(duì)話框。上面就是要替換的圖片地址，下面的就是圖片的鏈接地址。

十七、然后回到淘寶相冊(cè)空間，把images文件夾里的圖片全部上傳到淘寶空間。然后復(fù)制鏈接地址。

十八、復(fù)制圖片地址粘貼進(jìn)去，下面添加上鏈接地址，如果沒有就留空也行，記得一定要是淘寶站內(nèi)網(wǎng)址。

十九、然后再依次下拉滾動(dòng)條找到其它要替換的圖片雙擊替換。換好以后確定預(yù)覽看效果，OK就可以發(fā)布了。

提示：此方法也可以用于京東商城店鋪?zhàn)远x裝修，京東的直接雙擊圖標(biāo)可以上傳本地圖片，無需先上傳圖片空間。