本节书摘来异步社区《淘宝店铺装修与促销设计宝典》一书中的第6章，第6.3节，作者： 卢坚 责编： 俞彬, 更多章节内容可以访问云栖社区“异步社区”公众号查看。
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所示。
6.3.2 在Dreamweaver软件中制作帮助中心
下面使用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，在“售前咨询”文字前后输入如下代码：
<font size="2"><strong>售前咨询</strong></font>
完成后效果如图6-103所示。
step11 按照设计图的样式分别在单元格中输入相应的文字，完成后如图6-104所示。
step12 参考小节的制作方法，将每个客服的旺遍天下添加至相应的客服名称后面，如图6-105所示。
step13 参考小节的操作步骤，上传图片到网站空间并替换网页中的图片代码，然后将代码发布在店铺右侧的自定义内容区，最终效果如图6-106所示。
