淘寶旺鋪?zhàn)远x客服中心和動(dòng)態(tài)收藏店鋪的制作

在論壇也逛了好長時(shí)間了，一直沒有怎么發(fā)帖，一是由于自己工作生活比較忙，更重要的是自己的文筆有限，馬上就要到中秋節(jié)了，在這里我提前祝大家中秋節(jié)快樂，財(cái)源廣進(jìn)廢話不多說，直接上干貨。

我在這里跟大家談?wù)勛远x客服中心的制作，希望給大家?guī)韼椭?

一

、準(zhǔn)備工具我們做自定義客服中心，主要就用到兩個(gè)強(qiáng)大的工具，一個(gè)是Photoshop

。另外一個(gè)是Dreamweaver

。PS我用的版本是CS5，DW用的版本是8.0.現(xiàn)在我們開始制作

。

二、用Photoshop制作客服中心1、打開PS，設(shè)置好背景色和前景色，這個(gè)是根據(jù)自己店鋪的風(fēng)格設(shè)置的，在這里我店鋪客服中心的背景色選擇了6b1834，前景色選擇了f87ca2，效果圖2、選擇視圖—新建參考線，對第一步的圖像進(jìn)行分割，這個(gè)可以根據(jù)自己的設(shè)計(jì)自由新建參考線的，我現(xiàn)在是設(shè)置了一個(gè)售前客服，一個(gè)售后客服，最下面還有一個(gè)收藏店鋪，水平參考線的值分別是：0，50，60，90，95，113，123 ，153，158，176，186，23

6。豎直參考線的值是0和190.如圖：我在截圖上面標(biāo)注了數(shù)字，這些數(shù)字分表代表了6個(gè)區(qū)域的內(nèi)容1表示我們要輸入的文字區(qū)域2表示售前客服字樣3表示售前旺旺圖片4表示售后客服字樣5表示售后旺旺圖片6表示收藏店鋪3、現(xiàn)在分別對上面的六個(gè)步驟進(jìn)行詳解1 點(diǎn)擊工具欄上面的T，然后在1區(qū)域輸入“客服中心”四個(gè)字，字體顏色選自己喜歡的，字體大小選72，然后點(diǎn)擊圖層—圖層樣式—混合選項(xiàng)，選擇投影和外發(fā)

光。如圖2 和第一步一樣，選好顏色和字體，調(diào)整好大小如圖#p#副標(biāo)題#e#旺旺的圖片是要讓系統(tǒng)自動(dòng)生成

的。首先我們要開通E客服，這個(gè)論壇的帖子都有介紹，我在這里不多講，然后自己添加售前和售后客

服。然后回到店面裝修頁面，在左側(cè)欄添加一個(gè)模塊中心里面的客服中心，這樣做主要是要是生成旺旺代碼和旺旺圖

片。如圖4 區(qū)域4和區(qū)域2的步驟一樣，不再詳述5 區(qū)域5和區(qū)域3的步驟一樣，不再詳述6 點(diǎn)擊T ，字體顏色自己選，字體大小我選了72，輸入“收藏店鋪”，然后復(fù)制圖層ctrl+J，然后點(diǎn)擊圖層—圖層樣式—混合選項(xiàng)，選擇投影和外發(fā)光，發(fā)光的顏色自己

選。選擇窗口—?jiǎng)赢?，下面出現(xiàn)了一個(gè)動(dòng)畫幀，在圖層面板把剛才復(fù)制圖層的眼睛取消然后兩個(gè)動(dòng)畫幀的時(shí)間都選0.2（這個(gè)隨自己喜好自己選），這樣動(dòng)態(tài)收藏店鋪就做好

了。（動(dòng)態(tài)收藏店鋪其實(shí)很簡單，我寫得有點(diǎn)少，大家可以看看論壇上面專門介紹動(dòng)態(tài)圖片制作的）4、我們需要在區(qū)域3 5 6設(shè)置 連

接。選擇PS的切片工具，樣式選擇正常，然后在上述三個(gè)區(qū)域做切片，調(diào)整合適的切片，如圖格式一定要選HTML和圖像，點(diǎn)擊保

存。桌面上生成了一個(gè)HTML文件和一個(gè)image文件夾，把文件夾里面的圖片存儲(chǔ)到我們自己的圖片空

間。這樣PS的工作我們就做完了，存儲(chǔ)一份PSD格式的圖像，方便以后修改，然后關(guān)閉P

S

。三、用Dreamweaver添加連接和生成模版的代碼打開DW，選擇HTML，文件—打開，打開剛才生成的HTML

文件。呈現(xiàn)在我們面前的是一大堆代碼，不用管，選擇設(shè)計(jì)按鈕，出現(xiàn)下面的界面旺旺的源文件是上面TXT文檔的第二個(gè)網(wǎng)址，鏈接是TXT文檔的第一個(gè)

網(wǎng)址。2、然后點(diǎn)擊代碼，復(fù)制代碼頁的所有

代碼。3、在裝修頁面的左側(cè)欄新建一個(gè)自定義模塊，在自定義模塊里面黏貼我們復(fù)制的代碼，然后生成設(shè)計(jì)頁面，保存，

發(fā)布。最后的生成的效果圖就介紹到這里了，沒想到一下子寫了這么多，希望能給大家?guī)?

幫

這個(gè)問題還有疑問的話，可以加幕.思.城火星老師免費(fèi)咨詢，微V.信X號(hào)是為: msc496。