本節書摘來異步社群《淘寶店鋪裝修與促銷設計寶典》一書中的第6章，第6.3節，作者： 盧堅 責編： 俞彬, 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
淘寶店鋪裝修與促銷設計寶典
為了提升店鋪的服務，很多店鋪在右側促銷位置的自定義區添加了客服資訊，下面将介紹右側添加客服區的制作步驟。
效果預覽
素材圖檔 制作完成的幫助中心
6.3.1 在photoshop軟體中設計幫助中心
首先要在photoshop cs2軟體中制作出幫助中心的效果圖，操作步驟如下。
step1 啟動軟體photoshop cs2，選擇“檔案”>“建立”指令，在“建立”對話框中設定寬度為“750像素”，高度為“163像素”，分辨率為“72像素/英寸”，顔色模式為“rgb顔色”，如圖6-71所示。
step2 确定後建立一個尺寸為750像素×163像素的空白圖檔，在工具欄中單擊“圓角矩形工具”按鈕圖檔 953，在“選項”面闆中設定“半徑”為“5px”，顔色為灰色“#ebebeb”，如圖6-72所示。
step3 在圖檔中延着邊框拖出圓角矩形框，顔色為灰色，在“圖層”面闆中建立形狀圖層，如圖6-73所示。接着，儲存圖檔為“kefu2.psd”。
step4 選擇“檔案”>“打開”指令，打開素材圖檔“fuwusheng.gif”，按下ctrl+a組合鍵全選圖檔，選擇“編輯”>“拷貝”指令，然後單擊kefu2.psd圖檔選擇“編輯”>“粘貼”指令，将素材圖檔粘貼至kefu2.psd圖檔中，如圖6-74所示。
step5 選擇“編輯”>“變換”>“水準翻轉”指令，将素材圖檔水準翻轉，然後選擇“編輯”>“自由變換”指令，縮小圖檔至合适的尺寸并移動至圖檔左側，如圖6-75所示。
step6 按住ctrl鍵後單擊“圖層”面闆中的“形狀，選中圓角矩形框，然後建立新圖層“圖層，并選擇“編輯”>“描邊”指令，設定寬度為“1px”，顔色為灰色“#cbcbcb”，位置為“内部”，如圖6-76所示。
step7 單擊“确定”按鈕後，圖檔即添加了灰色描邊，如圖6-77所示。
step8 在“圖層”面闆中單擊“圖層，然後在工具欄中單擊“矩形選框工具”圖檔 966，在添加的素材圖檔右側拖出一個矩形選框，如圖6-78拖出矩形選框
step9 選擇“選擇”>“羽化”指令，在對話框中設定羽化半徑為“像素，如圖6-79所示。
step10 确定後矩形選框被羽化，多次按下delete鍵删除圖檔邊緣，使其過渡自然，如圖6-80所示。
step11 按下ctrl+d組合鍵取消矩形選框，打開素材圖檔“katong.gif”，将其複制粘貼至“kefu2.psd”圖檔中，在“圖層”面闆中打開“設定圖層的混合模式”下拉菜單，選擇“變暗”選項，如圖6-81所示。
随後，素材圖檔會與灰色背景相融合，看不到明顯的邊界了，效果如圖6-82所示。
step12 在工具欄中單擊“橫排文字工具”圖檔 976，接着在“選項”面闆中設定字型為“漢儀細中圓簡”，文體大小為“25點”，設定消除鋸齒的方法為“平滑”，設定文本顔色為紅色“#d，如圖6-83所示。
step13 在圖檔kefu2.psd中輸入文字“幫助中心”，并将其移動到圖檔右上角的位置，如圖6-84所示。
s14 在工具欄中單擊“矩形選框工具”圖檔 981，在文字“幫助中心”左側拖出一個矩形選框，然後使用從灰色漸變到透明的方式填充選框，完成後效果如圖6-85所示。
s15 在灰色漸變矩形框中輸入英文标題“help center”，“選項”面闆的設定如圖6-86所示。
s16 再次設定文字“選項”面闆，設定字型為“宋體”，字型大小為“12點”，設定消除鋸齒的方法為“無”，文本顔色為黑色“#，如圖6-87所示。
s17 輸入文字“售前咨詢”，按下alt鍵和方向右鍵複制出圖層“售前咨詢 副本”，使文字顯示粗體效果，如圖6-88所示。
s18 用同樣的方法制作右側文字“售後服務”，以及下面的客服人名，完成後如圖6-89所示。
s19 在工具欄中設定前景顔色為紅色“#d，然後單擊“鉛筆工具”圖檔 992，建立新圖層後，按下shift鍵在圖檔中繪制一條豎線，如圖6-90所示。
s20 按下ctrl+s組合鍵儲存圖檔，完成photoshop中幫助中心的設計，完成效果如圖6-91所示。下面将在dreamweaver軟體中進行制作。
s21 從标尺中拖出圖檔裁剪參考線，如圖6-92所示。
s22 按照參考線的顯示裁剪圖檔，要注意圖檔裁剪的精确，1像素的誤差也會使網頁出現沒有對齊的情況。裁剪後的圖檔如圖6-93所示。
下面使用dreamweaver軟體将設計好的幫助中心制作成網頁，詳細操作步驟如下。
step1 啟動軟體dreamweaver cs3，建立html網頁并儲存在圖檔檔案夾的上一級目錄，網頁命名為“kefu2.html”，如圖6-94所示。
step2 在“常用”面闆中單擊“表格”按鈕圖檔 1002，設定行數和列數為“，表格寬度為“750像素”，邊框粗細、單元格邊距、單元格間距均為“，如圖6-95所示。
step3 确定後在網頁中建立3行3列，寬度為750像素的表格。拖動滑鼠選中左側3個單元格，在“屬性”面闆中單擊“合并所選單元格”按鈕圖檔 1006，将左側合并為1個單元格，如圖6-96所示。
step4 在合并後的單元格中單擊插入光标，在“屬性”面闆中設定單元格寬度為“，接着，在“常用”面闆中單擊“圖像”按鈕圖檔 1008，打開“選擇圖像源檔案”對話框中選擇插入圖像檔案“kefu2_1.jpg”，完成後圖像插入在單元格中，如圖6-97所示。
step5 合并右側3個單元格，将光标插入其中，在“屬性”面闆中設定單元格寬度為“，然後在單元格中插入圖像檔案“kefu2_2.gif”，如圖6-98所示。
step6 設定中間3個單元格的高度分别為“47、107、，然後分别在第1行和第3行插入圖像檔案“kefu2_title.gif”和“kefu2_3.gif”，完成後如圖6-99所示。
step7 将光标插入中間單元格中，在“屬性”面闆的“背景顔色”文本框輸入灰色色标值“#ebebeb”，單元格背景顔色被設定為灰色，如圖6-100所示。
step8 在中間單元格中插入4行3列，表格寬度為350像素的嵌套表格。單擊表格任意邊框選中表格後，在“屬性”面闆的“對齊”下拉菜單中選擇“居中對齊”選項，如圖6-101所示。
step9 合并中間列的4個單元格，在“屬性”面闆中設定單元格寬度為“，背景顔色為紅色“#d，如圖6-102所示。
step10 在左側第1行單元格中輸入文字“售前咨詢”，然後單擊“顯示代碼視圖和設計視圖”按鈕圖檔 1021，在“售前咨詢”文字前後輸入如下代碼：
完成後效果如圖6-103所示。
step11 按照設計圖的樣式分别在單元格中輸入相應的文字，完成後如圖6-104所示。
step12 參考小節的制作方法，将每個客服的旺遍天下添加至相應的客服名稱後面，如圖6-105所示。
step13 參考小節的操作步驟，上傳圖檔到網站空間并替換網頁中的圖檔代碼，然後将代碼釋出在店鋪右側的自定義内容區，最終效果如圖6-106所示。