本章素材 5 第5章 网店装修元素的设计与制作 学习目标 知识目标● 了解店铺Logo 的定义与类型。 ● 了解店标的设计要点。 技能目标● 掌握静态店标的制作方法和设计要点。 ● 掌握动态店标的制作方法。 ● 掌握店铺背景的制作方法。 店铺装修元素设计水平直接影响买家对店铺的第一印象。例如，Logo作为最具标志性的元 素，可以反复加强买家对品牌的印象，形成品牌烙印；精美的店标可以在第一时间吸引买家进入店 铺；店铺背景可以烘托整个店铺的氛围。本章将从店铺Logo的设计、店标的设计、店铺背景的制 作三方面介绍店铺最基础的装修元素的设计与制作方法。 Dbmzw4-6.indd 114 2021.1.20 1:55:38 PM 第5章 网店装修元素的设计与制作 5.1 店铺Logo 的设 计 店铺Logo 是店铺最重要的标志之一，常常出现在店铺页面和商品图片中，通过店铺 Logo 可以展示和宣传店铺，将店铺的形象、特点与其他店铺区分开来，提高店铺的辨识度， 从而使客户形成对店铺品牌的烙印。 5.1.1 什么是店铺Logo Logo 也称标志，主要通过造型简单和意义明确的视觉符号，将经营理念、企业文化、 经营内容和产品要素等的一个方面或几个方面传递给买家。店铺Logo 是店铺视觉形象的 核心，也是构成店铺形象的基本特征，能够体现店铺的内在素质，它不仅是调动店铺视觉 的主导因素，也是整合视觉要素的中心。 店铺Logo 既可以应用在店招中，也可以应用在宝贝主图、店标设计中，图5- 1 是一 些较为成功的店铺Logo 在店招中的应用。 图5-1 店铺Logo案例 5.1.2 店铺Logo 的类型 店铺Logo 是店铺的形象，优秀的店铺Logo 可以起到宣传店铺的作用，吸引买家。 Logo 的外形丰富多变，设计者的想象空间很大。店铺 Logo 从视觉上可以分为文字Logo 、图形Logo 和图文 结合型Logo3 种。 . 文字Logo 。以文字、名称为表现主体，一般是 由品牌名称、缩写或者从其中抽取的个别有趣 的文字，通过重新排列、文字扭曲、颜色调整 等方式设计而成的。例如，“卫龙”标志即采用 了品牌名称，以红色为底色，以白色为文字颜色， 颜色对比鲜明，文字醒目，且采用可爱又简单 的形式，容易记忆，如图5- 2 所示。图5-2 文字Logo 115 Dbmzw4-6.indd 115 2021.1.20 1:55:38 PM 淘宝天猫 店实用教程：配色、布局、修图、装修 . 图形Logo 。以具体的图形来表现品牌的名称或商品的属性，相对于文字Logo 更为 直观和富有感染力。例如，大嘴猴童装店铺使用大嘴猴的卡通形象作为店铺Logo， 如图5- 3 所示。 . 图文结合型Logo 。由图形与文字结合构成，表现为文中有图、图中有文的特征， 如图5- 4 所示。 图5-3 图5-4 图5-3 图形Logo图5-4 图文结合型Logo 5.1.3 店铺Logo 的制作 店铺Logo 是一个店铺最具标志性的元素，是店铺装修中必不可少的一部分。下面以 大魔树女装店铺Logo 制作为例，讲解店铺Logo 的制作方法。首先分析Logo 的表现形式， 本案例采取图文结合型Logo，绘制一个大树的图形，配合“大魔树”大写拼音作为Logo 主体。 然后选取Logo 的色调，由于店铺经营的是高端女装，故选用高贵、大气的紫色和代表女 性的粉色。Logo 的制作效果如图5- 5 所示。 图5-5 店铺Logo 具体操作方法如下。 打开IllustratorCS6 软件，按Ctrl+ N 组合键新建一个宽度为400 像素、高度 为400 像素的画布，并命名为“大魔树女装Logo”，如图5- 6 所示。 Step1. 116 Dbmzw4-6.indd 116 2021.1.20 1:55:39 PM 第5章 网店装修元素的设计与制作 图5-6 新建画布 Step2. 选择椭圆工具，在选项栏中设置“填充”为无，“描边”为 1 像素。在画 布上单击，绘制一个大小为293 像素的圆形，如图5- 7 所示。 Step3. 选择矩形工具，在选项栏中设置“填充”为黑色，“描边”为“无”。绘 制一个大小为45 像素×130 像素的矩形，放置位置如图5- 8 所示。 图5-7 绘制圆形图5-8 绘制矩形 Step4. 选择添加锚点工具，在矩形顶边添加一个锚点，并单击工具栏中的将所 选锚点转化为平滑锚点按钮，将其转化为平滑锚点，如图5- 9 所示。 图5-9 转换为平滑锚点 Step5. 选择直接选择工具，选中新添加的锚点，向上拖曳锚点，并适当调整控 制柄，得到图5-10 所示的效果。 117 Dbmzw4-6.indd 117 2021.1.20 1:55:39 PM 淘宝天猫 Step6. 店实用教程：配色、布局、修图、装修 按照Step4 和Step5 的方法，对矩形其余 3 边也进行调整，将矩形调整至 图5-11 所示的树干形状。 图5-10 移动和调整矩形顶边锚点图5-11 调整矩形形状 Step7. 选择钢笔工具，在工具属性栏中设置“填充”为“无”，描边的“粗细” 为4pt，“端点”为圆角端点，参数如图5-12 所示。设置完成后在圆内绘制出图5-13 所示 的一条路径。 图5-12 设置描边参数图5-13 绘制路径 Step8. 按照Step7 的方法继续绘制路径，效果如图5-14 所示。按住Alt 键，依次按O、 X 键，将路径扩展为形状，扩展前后的对比如图5-15 和图5-16 所示。 图5-14 绘制全部路径图5-15 将路径扩展为形状前图5-16 将路径扩展为形状后 118 Dbmzw4-6.indd 118 2021.1.20 1:55:39 PM 第5章 网店装修元素的设计与制作 Step9. 按Shift+Ctrl+F9 组合键，调出“路径查找器”面板。选中树干及树枝，单击 联集按钮，将树干和树枝合并，如图5-17 所示。 图5-17 合并树干和树枝 Step10. 选择钢笔工具 绘制树叶，如图5-18 所示。将其复制并排列为如图5-19 所示的效果。选中所有树叶，按Ctrl+ G 组合键进行编组。 Step11. 图5-18 绘制树叶图5-19 复制并排列树叶 选择钢笔工具，在工具属性栏中设置“描边”为“无”，绘制树根，如 图5-20 所示。按照Step9 的方法将其合并，效果如图5-21 所示。 图5-20 绘制树根图5-21 合并树根 Step12. 选择椭圆工具，在工具属性栏中设置“描边”为“无”，绘制一个大小为 80 像素的圆形，放置在如图5-22 所示的位置。 选中树干形状及刚绘制的圆形，在“路径查找器”中，单击减去顶层按钮 Step13. ，减去圆形所占区域，效果如图5-23 所示。 119 Dbmzw4-6.indd 119 2021.1.20 1:55:39 PM 淘宝天猫 店实用教程：配色、布局、修图、装修 图5-22 绘制圆形图5-23 减去顶层圆形 Step14. 用钢笔工具绘制土地，如图5-24 所示，将其放置在合适位置。删除最外面 的圆形描边，效果如图5-25 所示。 图5-24 绘制土地 Step15. 选择文字工具，在工具属性栏设置字符为2006 、regular ，大小为76 像素， 在画布中输入文本DAMOSHU ，并将其放置在如图5-26 所示的位置。 图5-25 删除圆形描边图5-26 输入文本 Step16. 选中文本并右击，在弹出的快捷菜单中选择“创建轮廓”命令，效果如图5-27 所示。 Step17. 按Ctrl+ A 组合键，选中所有形状，如图5-28 所示。 图5-27 创建轮廓图5-28 选中所有形状 120 Dbmzw4-6.indd 120 2021.1.20 1:55:39 PM 第5章 网店装修元素的设计与制作 Step18. 双击渐变工具，设置渐变参数，具体设置如图5-29 所示。添加颜色后的 Logo 如图5-30 所示。 图5-29 渐变参数设置图5-30 添加颜色后的Logo Step19. 选中DAMOSHU ，在工具栏中选择渐变工具，在DAMOSHU 上拖曳出 一条渐变条，如图5-31 所示。 图5-31 渐变条 Step20. 按Ctrl+ A 组合键选中所有形状，再按Ctrl+ G 组合键对其进行编组。最后选 择“文件”→“导出”命令，将图片导出为PNG 格式，Logo 制作完成，效果如图5- 5 所示。 5.2 店标的设 计 5.2.1 什么是店标 店标是指店铺的标志，通常显示在无线端店铺首页左下角，或者在买家搜索店铺时和 店铺名称、主营项目等一起展示在搜索结果中，如图5-32 所示。好的店标可以表达店铺 的独特风格，且可辨识度较高，能让人一眼记住。好的店标还可以吸引买家进入店铺。因 121 Dbmzw4-6.indd 121 2021.1.20 1:55:40 PM 淘宝天猫 店实用教程：配色、布局、修图、装修 此，制作一个有个性的店标是网店必须完成的一项工作。 图5-32-1 图5-32-2 图5-32 店标显示位置 122 Dbmzw4-6.indd 122 2021.1.20 1:55:40 PM 第5章 网店装修元素的设计与制作 店标分为静态店标与动态店标。静态店标主要为GIF 、JPG 、JPEG 、PNG 格式的静态 图片，而动态店标则为GIF 格式的动态图片。卖家可根据需求选择使用静态店标或动态 店标。 5.2.2 店标的设计要点 店标的设计会因店铺的产品定位、店铺风格的不同而有所不同，所以店标的设计千变 万化，有的比较时尚新颖，有的比较大气稳重，有的比较标新立异，有的比较简洁明快。 设计店标时，通常需要注意以下几个方面。 . 店标的尺寸要求。店标的设计应符合店铺后台的尺寸要求，否则很容易导致图片 变形，这样不仅影响视觉效果，也会影响店铺形象。淘宝店标的文件格式为GIF 、 JPG 、JPEG 、PNG ，尺寸建议为80 像素×80 像素，文件大小为80KB 以内。 . 店标的外观。由于店标有尺寸限制，所以设计店标时不宜太复杂，要便于查看，因 此店标要尽量简洁，可以是简单的图形或图形组合，甚至直接将店名制作成店标。 动态店标的动画不宜过于复杂，动画跳转速度不宜过快，否则容易造成买家视觉 疲劳。 . 视觉吸引力。一个好的店标要从颜色、图案、字体和动画等方面入手。制作的店标 要在符合店铺类型的基础上，使用醒目的颜色、独特的图案、漂亮的字体或直观的 动画效果，以给人留下深刻印象。 . 统一性。店标的外观、颜色要与店铺风格统一，不能只考虑店标本身，而与店铺主 题不符。若制作动态店标，还要考虑效果的变化是否符合需求。 5.2.3 店标的制作 上面提到店标分为静态店标和动态店标，本节仍以大魔树女装店铺的店标制作为例进 行介绍。为符合店铺形象，使店铺整体装修风格统一，本节将基于店铺Logo 对店标进行 设计。下面分别介绍静态店标与动态店标的制作方法。 1. 制作静态店标 静态店标多由文字和图片组成，买家单击店标的任意部分，均可快速跳转到店铺首页。 本案例为大魔树女装店铺制作静态店标，制作时以店铺Logo 为基础，其具体操作如下。 打开PhotoshopCS6 软件，新建一个宽度为80 像素、高度为80 像素、分辨 率为72 像素 / 英寸、白色背景的文件，并命名为“大魔树店标”，如图5-33 所示。 将素材文件“大魔树-树.png ”置入“大魔树店标”文档中，如图5-34 所示。 按Enter 键确定。 选择“窗口”→“字符”命令，调出“字符”面板，在其中设置参数，如 图5-35 所示。选择横排文字工具，输入文本“大魔树”，如图5-36 所示。 Step1. Step2. Step3. 123 Dbmzw4-6.indd 123 2021.1.20 1:55:40 PM