3.5焦点图设计(课件）-《电商视觉营销》同步教学（西南财经大学出版社）

网店首页设计 项目三 1 YCF 01 网店Logo设计 03 店招设计 02 店标设计 目录 CATALOG 04 导航设计 05 焦点图设计 06 页尾模块设计 2 思政课堂 一家经营“国货”的品牌店主营业务产品是汉服。在“双11”大促即将到来之际，请你为该网店的首页进行设计，使其突出“国 货”这个重点，以弘扬中华文化，体现出汉服的美，达到吸引广大 客户的目的。请将你的想法写在下面，并将设计图交给教师。 3 网店的首页设计是电子商务行业的热门话题，关于网店装修的意义和目标，设计者一直存在不同的观点。然而不论是实体店还是网店，其作为一个营销的平台，装修的核心是促进销售。网店首页整体布局如图所示。 项目导读 01 掌握Logo的设计方法。 02 掌握店招的设计方法。 学习目标 03 掌握焦点图的设计方法。 04 能够为网店设计静态店标与动态店标。 05 能够为网店设计导航条。 05 焦点图设计 一、焦点图的设计要点 二、焦点图的构图 三、焦点图的设计步骤 6 一、焦点图的设计要点 焦点图的背景建议使用能凸显整体气氛但不过于华丽的元素；背景要尽可能简单，色彩要和谐统一；特别要强调的是，在一般情况下，焦点图不会大面积使用黑色背景。 1. 背景突出主题 7 一、焦点图的设计要点 焦点图片一定要清晰，并且要把卖点放大，能够让消费者看出销售什么商品。消费者逛店是带着一定的需求去搜索的，因此，网店需要通过焦点图突出主体。 2. 图片素材清晰 如网店销售女士箱包，因此箱包的图片应简单明了，突出重点，让消费者的视觉一下子被箱包吸引，避免被吸引到其他配饰上。 举例 8 一、焦点图的设计要点 一张焦点图上最好只放一种商品（套装除外），尽可能把商品最有特色的地方用特写的方式展示出来。 3. 焦点图要有聚焦性 若一定要放多种款型，则需要把每种商品的特点都显露出来。 举例 9 一、焦点图的设计要点 某些网店在设计创意图时会设计自己的 Logo；为了打造本网店形象和推广本网店的品牌，同时防止盗图，一定要在焦点图的适当位置放置网店 Logo。 4. 放置 Logo 的必要性 10 一、焦点图的设计要点 在通常情况下，需要根据焦点图的背景色选择文字的颜色。 建议文字不要超过三行，文字字体不超过三种，文字应容易识别。 在排版上，文字最好放在焦点图的一侧或中间，不要放在焦点图左、右两侧。 在图片的文字中，突出主题的字体要大。 5. 文字排版的设计要点 11 1. 图片文案两边分构图 2. 3-7 构图 3. 左 - 右 - 左构图 二、焦点图的构图 12 二、焦点图的构图 1. 图片文案两边分构图 图片文案两边分构图模式是最便捷、最不容易出错的一种构图方式；把文字和图片各放在一边，在文案的排版上突出重点，如图所示。 13 二、焦点图的构图 2. 3-7 构图 文字和图片按照左右或者右左 3-7 比例进行布置，这是非常舒适的视觉比例，整体画面会具有非常强烈的层次感和节奏感，如图所示。 14 二、焦点图的构图 3. 左 - 右 - 左构图 在左-右-左构图方式下，图片以不同的大小和位置摆放，形成空间感和左-右-左的层次感，如图所示。 15 三、焦点图的设计步骤 不同的网上商城对焦点图的大小要求不同，如淘宝网店焦点图的宽为 1 500 像素，高度不限，一般为 600~650 像素。 下面以幼儿图书《昆虫记绘本》为例讲解焦点图的设计步骤。 16 三、焦点图的设计步骤 步骤 1：打开 Photoshop 软件，执行“文件”→“新建”命令，新建大小为 1 500 像素 ×600 像素、分辨率为 72 像素/英寸、名称为“昆虫记焦点图”的文件，具体参数设置如图所示。 17 三、焦点图的设计步骤 步骤 2：设置中间水平参考线。执行“视图”→“新建参考线”命令，打开“新建参考线”对话框，在该对话框中设置参数，新建水平参考线，如图所示。 18 三、焦点图的设计步骤 步骤 3：设置前景色 RGB 为“164/214/187”，背景色 RGB“185/235/236”。选择“矩形选框工具” ，根据水平参考线选择图片的下半部分，按Shift+F5 组合键打开“填充”对话框，在该对话框中设置填充前景色，然后单击“确定”按钮，按 Ctrl+D 组合键取消选区，如图所示；同样，选择图片的上半部分，填充背景色。 19 三、焦点图的设计步骤 步骤 4：执行“文件”→“打开”命令，打开“素材 / 项目三 / 绘本 .png”图片，选择“移动工具” ，把“绘本”图片移动到“昆虫记焦点图”的左侧，放置在适当位置，效果如图所示。 20 三、焦点图的设计步骤 步骤 5：为了增强绘本实物的实体效果，可以对图片增加倒影，从而增强图片的立体感。按住 Ctrl+J 组合键复制“绘本”图层，将新图层命名为“倒影”