巧用PS切片輕鬆打造店鋪自定義區?

施老師:

經常有學員問我,老師:PS切片怎麼用啊,店鋪的自定義區要自己裝修,怎麼裝修啊。

那麼,就由寧雙學好網施老師我先介紹下什麼是切片,Photoshop裡的切片是用切片工具將一張大圖片切分為若干個小圖片,每個小圖片就稱之為切片,切片的邊界是虛擬的,也就是說,雖然將大圖片切分為若干個小圖片,但是我們打開大圖片的瀏覽時,仍然看到是一張大圖片,絲毫不會看到切分的痕跡。切分後,我們打開大圖片的HTML文件,不僅速度可以提快,而且還可以在每個小切片(小圖片)上做鏈接。這樣鼠標放在做了鏈接的位置上時,點擊就可以跳轉到另外一個頁面。

我們利用Photoshop的切片功能,可在店鋪的自定義區自由的佈置我們的海報,並且可以在海報任何想做鏈接的地方添加上鍊接。這就是切片的好處。

工具/原料

Photoshop CS5軟件

方法/步驟

一、做好自定義區的海報。比如:

巧用PS切片輕鬆打造店鋪自定義區

二、使用Photoshop 工具欄裡的“切片”工具將圖片分割成若干區域

巧用PS切片輕鬆打造店鋪自定義區

三、然後點擊“文件”菜單-“存儲為WEB格式”,選擇第二聯。

巧用PS切片輕鬆打造店鋪自定義區

四、選存儲為“HTML和圖像格式”,存儲完畢.

巧用PS切片輕鬆打造店鋪自定義區

五、打開存儲目錄中的HTML和圖像,將Imags中的圖片全部上傳至淘寶空間。

巧用PS切片輕鬆打造店鋪自定義區

六、然後雙擊這個存儲為HTML和圖像的文件夾。

巧用PS切片輕鬆打造店鋪自定義區

七、再雙擊WEB文件,打開WEB文件後,在瀏覽器的菜單裡選擇“查看”菜單,再選擇“查看網頁源代碼”。

巧用PS切片輕鬆打造店鋪自定義區

八、將代碼全部選中,複製。

巧用PS切片輕鬆打造店鋪自定義區

九、然後打開店鋪的自定義頁面,將代碼全部粘貼過來即可。

巧用PS切片輕鬆打造店鋪自定義區

十、恢復到普通視圖,將鼠標移到右下角,出現“編輯”字樣,然後將單元格里的圖片地址替換成空間地址,並給它添加相應的超鏈接(當然是淘寶內部鏈接啦)。

巧用PS切片輕鬆打造店鋪自定義區

十一、接下來講下自定區的公告內容怎麼做。我們將代碼複製粘貼到自定義區後,在相應的單元格圖片區域做好鏈接後,接下來就是在公告區做公告文字了。大家都知道,每個店鋪都最好放個公告區。以滾動的字幕出現。可別小瞧公告區,做好公告區,還有助於我們優化店鋪呢。在滾動的字幕裡儘可能多的放入店鋪產品關鍵詞,以大大增加被淘寶搜索的機率。

好,言歸正傳,我們就看下怎麼做公告區的滾動字幕。

十二、選中公告區的切片,將切片刪除,留白。

巧用PS切片輕鬆打造店鋪自定義區

十三、先將公告內容打進去。然後回到代碼視圖。在公告文字的首和尾分別加入以下代碼

巧用PS切片輕鬆打造店鋪自定義區

十五、這樣就大功告成了。

相關問題答案