第1章网店美工基础知识《Photoshop CC网店美工视觉设计实战》同步教学（工信版）（课件）

网店美工基础知识 Photoshop CC网店美工视觉设计实战（全彩微课版） 第1章 目录 Contents 网店美工概述 网店美工必须掌握的设计要点 熟悉Photoshop图像处理软件 1.2 1.1 1.3 实战演练——制作促销标签 1.4 1.1.1 网店美工的工作范畴 3 应用范畴 美化图片 设计页面 设计推广图 装修网店 制作视频 网店美工的工作范畴比较广泛，主要包括以下5个方面。 1.1.2 网店美工视觉设计注意问题 4 ● 思路清晰：在进行视觉设计前，网店美工需要有一个明确的思路，即确定一个“大框架”，在该框架中标明网店主要卖什么、商品有什么特点，可以选择哪些元素进行装修等。 ● 风格与形式相统一：视觉设计不但要进行合理的色彩搭配，还要统一图片、首页和详情页的风格，因此要注意页面风格的定位和设计素材的选择。 ● 做好前期准备：网店的视觉设计往往需要提前1~2个月准备。 ● 突出主次：在页面的设计与制作过程中，网店美工切忌为了追求美观的视觉效果而过度美化网店，从而使商品图片不突出，或掩盖了网店的风格和商品的卖点。 1.1.3 网店美工的技能要求 5 一名优秀的网店美工，除掌握基本的技能要求外，还需要做到以下3点： ①不断提高自己的专业技能； ②突破当前专业领域，接触多元化的设计 ，保持设计思维的灵敏性； ③保持好奇心，时刻激发灵感，提高设计效果的创意性。 设计素养 一名合格的网店美工，除了要能够熟练使用Photoshop、Animate、Dreamweaver等设计与制作软件外，还需要具备较强的美术功底和审美能力，以及丰富的想象力、创造力，并且要熟悉简单的代码操作，具有良好的文字功底，能够写出突出商品亮点的广告文案。因此，优秀的网店美工不仅需要具有强大的专业技能，还要懂得如何将良好的营销思维运用到视觉设计中，以及具有良好的沟通理解能力和团队合作意识。 目录 Contents 网店美工概述 网店美工必须掌握的设计要点 熟悉Photoshop图像处理软件 1.2 1.1 1.3 实战演练——制作促销标签 1.4 1.2.1 认识点、线、面三大设计元素 7 点是可见的最小形式单元，可以使画面显得合理舒适、灵动且富有冲击力。点的表现形式丰富多样，既包含圆点、方点、三角点等规则的点，又包含锯齿点、雨点、泥点、墨点等不规则的点。 点的大小、形态、位置不同，所产生的视觉效果、心理作用也不同。上图所示的左图为点的表现形式之一，右图为一款拖把的促销海报，它将圆点排列成不同的污渍，很好地体现了拖把的功能。 1. 点 1.2.1 认识点、线、面三大设计元素 8 线在视觉形态中可以表现为长度、宽度、位置、方向，具有刚柔并济、优美和简洁的特点。线可分为水平线、垂直线、斜线和曲线，不同形态的线所表达的情感是不同的，直线单纯、大气、明确、庄严；曲线柔和流畅、优雅灵动；斜线具有很强的视觉冲击力，可以展现活力四射的效果。下图所示的左图为斜线素材，右图综合应用各种线条，使画面更具有视觉冲击力，从而突出显示图中的文字和商品。 2. 线 1.2.1 认识点、线、面三大设计元素 9 点放大后即为面，通过线的分割所产生的空间也可以称为面。面有长度、宽度，有方向位置等特性，能够起到组合信息、分割画面、平衡和丰富空间层次、烘托与深化主题的作用。下图所示为面的展现效果，使用不同的立体面可使海报显得更具有立体感。 3. 面 1.2.2 色彩的搭配 10 色彩的搭配是一门艺术，灵活运用色彩能使消费者对商品产生深刻的印象，因此掌握色彩搭配的技巧是做好网店视觉设计的基础。网店视觉设计的黄金比例为“70∶25∶5”，即主色占总版面的70%，辅助色占25%，点缀色占5%。网店视觉设计的配色流程为：先根据网店风格、类目选择主色，然后根据主色选择搭配的辅助色与点缀色，用于突出重点、平衡视觉效果。下图所示为主色、辅助色与点缀色的应用案例。 1.2.2 色彩的搭配 11 主色、辅助色与点缀色是3种具有不同功能的颜色。 02 主色：画面中占用面积最大的颜色，也是视觉设计中的主要颜色，它决定了整个画面的风格。主色不宜过多，一般控制在1~3种颜色，过多容易造成视觉疲劳。主色需要根据商品特征或消费者群体有目的地选择。 辅助色：画面中占用面积略小于主色，主要用于烘托主色的颜色。在视觉设计中，通常采用辅助色为主色的相似色。合理应用辅助色能丰富页面的色彩，使画面更加完整、美观。 点缀色：画面中占用面积小、色彩比较醒目的一种或多种颜色。在视觉设计中，通常点缀色为与主色相比对比度较高的颜色。合理应用点缀色可以起到画龙点睛的作用，并且还能使画面主次分明、富有变化。 01 03 1.2.3 文字的字体与布局 12 黑体 黑体笔画粗细一致，粗壮有力、突出醒目，具