3.6页尾模块设计(课件）-《电商视觉营销》同步教学（西南财经大学出版社）

网店首页设计 项目三 1 YCF 01 网店Logo设计 03 店招设计 02 店标设计 目录 CATALOG 04 导航设计 05 焦点图设计 06 页尾模块设计 2 思政课堂 一家经营“国货”的品牌店主营业务产品是汉服。在“双11”大促即将到来之际，请你为该网店的首页进行设计，使其突出“国 货”这个重点，以弘扬中华文化，体现出汉服的美，达到吸引广大 客户的目的。请将你的想法写在下面，并将设计图交给教师。 3 网店的首页设计是电子商务行业的热门话题，关于网店装修的意义和目标，设计者一直存在不同的观点。然而不论是实体店还是网店，其作为一个营销的平台，装修的核心是促进销售。网店首页整体布局如图所示。 项目导读 01 掌握Logo的设计方法。 02 掌握店招的设计方法。 学习目标 03 掌握焦点图的设计方法。 04 能够为网店设计静态店标与动态店标。 05 能够为网店设计导航条。 06 页尾模块设计 一、页尾的设计要点 二、页尾的设计步骤 6 一、页尾的设计要点 （1）页头和页尾相呼应。网店页尾模块必须符合网店的整体风格，色彩需要一致。 （2）合理地运用页尾模块。做到信息简单明了，避免混乱，分类组织，便于买家浏览。 （3）留白。页尾设计的留白能分割出不同的区块，达到绘制不同区域的效果。 1. 页尾视觉设计要点 7 一、页尾的设计要点 （1）发货须知。发货须知在一般情况下是必需的，其目的是增加买家对网店的信任，让买家对商品的发货时间有一个预期。 （2）客服信息。在页尾模块中添加客服信息，买家如果想要咨询，可以直接点击客服中心，既方便又简洁。 （3）导航信息。在页尾模块中添加底部导航信息，如“返回首页”“收藏网店”等，这样可以提高买家的体验度，从而提高购买率。 2. 页尾内容设计要点 8 二、页尾的设计步骤 下面同样以“Honey 童装小铺”为例介绍页尾的设计步骤。 9 二、页尾的设计步骤 步骤 1：执行“文件”→“新建”命令，新建大小为 950 像素×300 像素、分辨率为72 像素/英寸、名称为“Honey 页尾设计”的文件，如图 所示。 10 二、页尾的设计步骤 步骤 2：为了首尾呼应，设置页尾背景色与店招一致；执行“文件”→“打开”命令，打开“素材 / 项目三 / 店招背景 .jpg”图片，选择“移动工具” ，把图片移动至“Honey 页尾设计”文件中，按 Ctrl+T 组合键对图片进行拉伸，使其填充整个背景，效果如图 所示。 11 二、页尾的设计步骤 步骤 3：在工具箱中右击“矩形工具” ，选择“直线工具” ；在工具选项栏中设置类型为“形状图层”，粗细为“1”像素，颜色值为“187/2/103”；然后在图像上按住Shift 键的同时拖动鼠标绘制一条直线，如图 所示。 12 二、页尾的设计步骤 步骤 4：在“图层”面板中单击下方的“添加图层蒙版”按钮 ，为直线所在的“形状 1”图层添加蒙版，如图所示。 13 二、页尾的设计步骤 步骤 5：选择“渐变工具” ，单击属性栏上的 按钮，弹出“渐变编辑器”对话框，在该对话框中设置颜色属性，渐变条下方从左至右三个色标的颜色 RGB 依次为#000000、#FFFFFF、#000000，位置依次为 100%、50%、0%，完成后单击“确定”按钮，如图所示。 14 二、页尾的设计步骤 步骤 6：在图像上按住 Shift 键的同时由直线左侧向右侧拖动鼠标，为直线添加渐变效果，如图所示。 15 二、页尾的设计步骤 步骤 7：选择“直线工具” ，利用步骤 3 至步骤 6 中的操作方法绘制三条垂直渐变直线，为文字做竖向隔断，如图 所示。 16 二、页尾的设计步骤 步骤 8：选择“横排文字工具” ，设置文字颜色 RGB 为“86/46/46”，字体大小分别为 30 点、18 点、16 点；多次输入文字，文字图层如图所示。 17 二、页尾的设计步骤 步骤 9：执行“文件”→“打开”命令，打开“素材/项目三”文件夹，打开“客服1.png”“客服 2.png”“客服 .png”图片，选择“移动工具” ，移动图片至“Honey 页尾设计”中；按 Ctrl+T 组合键调整图片大小和位置，如图所示。 18 二、页尾的设计步骤 步骤 10：选择“横排文字工具” ，设置文字颜色 RGB 为“86/46/46”，字体大小为 24 点，输入客服的名称“小妮”“小贝”，效果如图 所示。 19 二、页尾的设计步骤 步骤 11：设置前景色 RGB 为“0/110/100”；选择“圆角矩形工具” ，设置半径为 20 像素，绘制三个圆角矩形，移动位置，如图 所示。 20 二、页尾的设计步骤 步骤 12：选择“横排文字工具” ，设置字体颜色为白色，大小为 24 点，输入“返回首页”“返回顶部”“收藏本店”；选择“移动工具” 调整