《淘宝店铺装修与促销设计宝典》一6.3 在店铺右侧添加帮助中心

6.3 在店铺右侧添加帮助中心

淘宝店铺装修与促销设计宝典
为了提升店铺的服务，很多店铺在右侧促销位置的自定义区添加了客服信息，下面将介绍右侧添加客服区的制作步骤。

step2 确定后创建一个尺寸为750像素×163像素的空白图片，在工具栏中单击“圆角矩形工具”按钮图片 953，在“选项”面板中设置“半径”为“5px”，颜色为灰色“#ebebeb”，如图6-72所示。

step7 单击“确定”按钮后，图片即添加了灰色描边，如图6-77所示。

step10 确定后矩形选框被羽化，多次按下Delete键删除图片边缘，使其过渡自然，如图6-80所示。

step11 按下Ctrl+D组合键取消矩形选框，打开素材图片“katong.gif”，将其复制粘贴至“kefu2.psd”图片中，在“图层”面板中打开“设置图层的混合模式”下拉菜单，选择“变暗”选项，如图6-81所示。

step12 在工具栏中单击“横排文字工具”图片 976，接着在“选项”面板中设置字体为“汉仪细中圆简”，文体大小为“25点”，设置消除锯齿的方法为“平滑”，设置文本颜色为红色“#d，如图6-83所示。

s14 在工具栏中单击“矩形选框工具”图片 981，在文字“帮助中心”左侧拖出一个矩形选框，然后使用从灰色渐变到透明的方式填充选框，完成后效果如图6-85所示。

s16 再次设置文字“选项”面板，设置字体为“宋体”，字体大小为“12点”，设置消除锯齿的方法为“无”，文本颜色为黑色“#，如图6-87所示。

s18 用同样的方法制作右侧文字“售后服务”，以及下面的客服人名，完成后如图6-89所示。

s20 按下Ctrl+S组合键保存图片，完成Photoshop中帮助中心的设计，完成效果如图6-91所示。下面将在Dreamweaver软件中进行制作。

s22 按照参考线的显示裁剪图片，要注意图片裁剪的精确，1像素的误差也会使 页出现没有对齐的情况。裁剪后的图片如图6-93所示。

step3 确定后在 页中创建3行3列，宽度为750像素的表格。拖动鼠标选中左侧3个单元格，在“属性”面板中单击“合并所选单元格”按钮图片 1006，将左侧合并为1个单元格，如图6-96所示。

step4 在合并后的单元格中单击插入光标，在“属性”面板中设置单元格宽度为“，接着，在“常用”面板中单击“图像”按钮图片 1008，打开“选择图像源文件”对话框中选择插入图像文件“kefu2_1.jpg”，完成后图像插入在单元格中，如图6-97所示。

step7 将光标插入中间单元格中，在“属性”面板的“背景颜色”文本框输入灰色色标值“#ebebeb”，单元格背景颜色被设置为灰色，如图6-100所示。

step8 在中间单元格中插入4行3列，表格宽度为350像素的嵌套表格。单击表格任意边框选中表格后，在“属性”面板的“对齐”下拉菜单中选择“居中对齐”选项，如图6-101所示。

step11 按照设计图的样式分别在单元格中输入相应的文字，完成后如图6-104所示。

step12 参考小节的制作方法，将每个客服的旺遍天下添加至相应的客服名称后面，如图6-105所示。

相关资源：一店通服装店POS收银系统软件3.0破解版-管理软件其他资源-CSDN文库