网店美工与视觉设计 教案 第1-4章 认识网店美工-店铺Logo与主图的视觉设计

《网店美工与视觉设计》电子教案PAGEPAGE11第1章认识网店美工教学内容一、了解网店美工二、网店美工工作准备三、网店美工工作流程教学要求【知识目标】1.了解网店美工的工作范畴；2.了解网店美工必备技能要求。【技能目标】1.掌握网店美工所需要软件的安装方法；2.掌握网店美工需要做的准备工作。教学重点掌握网店美工的工作流程教学难点能够熟练地搜集素材、寻找设计参考。教学方法讲授法、练习法课时数4课时教学内容1.1了解网店美工1.1.1网店美工的工作范畴网店美工是随着电子商务的发展而产生的一种新职业，是淘宝、天猫、京东等一系列网店页面设计美化人员的统称，也是网店运营过程中一个非常重要的岗位。网店美工主要工作内容是对网店页面进行设计和美化，制作商品主图和详情页、设计各类活动海报、装修与美化店铺首页等。1.1.2网店美工的技能要求首先需要具备一定的平面构成知识，同时能够熟练使用Photoshop、Dreamweaver、Illustrator等设计应用软件。其次，网店美工需要掌握一定的营销知识，了解消费者心理，能够通过图片、文字等视觉语言，表现出产品的独特卖点，让消费者感知到产品的优势。从运营的角度分析和思考问题，以提升设计作品的点击率和店铺转化率。1.1.3资源下载平台1.花瓣网2.站酷网3.千图网1.2网店美工工作准备1.2.1常用工作软件1.AdobePhotoshop2.AdobeDreamweaver3.AdobeIllustrator1.2.2常用字体安装在选择字体的时候一定要注意字体的版权问题，避免不必要的纠纷，本文推荐两类免费商用字体，分别是思源字体和阿里巴巴普惠体。除了上文中推荐的两类免费商用字体，如果需要下载更多的免费商用字体，可以通过进行下载。字体的一般安装方法：打开电脑的C盘，选择windows文件夹，选择Fonts文件夹，把下载好的字体直接粘贴进来即可。1.2.3素材库建设素材库一般分为两个部分：灵感文件和素材文件。灵感文件，即对优秀设计案例、作品的收集，网店美工在开始自己的设计前，往往需要参考、研究这些案例，提高设计效率。素材文件，就是在设计过程中需要引用的已经处理好的图片、源文件、字体、特效等等。1.3网店美工工作流程1.3.1做好前期工作网店美工接到设计任务时，应该先和店铺的相关人员进行沟通，了解店铺定位，熟悉店铺与商品，为设计工作做好准备。美工的前期沟通工作主要是和客户或者运营进行沟通。1.3.2规划素材设计中用到的素材可以通过素材网站来查找和收集，如前面提到的千图网、昵图网、花瓣网等。1.3.3设计并制作美工作品规划好素材后，可以使用相关处理软件来进行图片的美化处理，完成网店中各个页面的视觉设计。图片的制作和美化处理主要通过Photoshop软件来完成，视频素材则需要利用视频剪辑软件Premiere进行编辑。对图片添加热点可以使用网页编辑软件Dreamweaver，也可以使用在线热点编辑工具。图片制作完成后需要上传到图片空间，网店图片空间是在店铺中上传和发布照片的必要“中转站”。归纳与提高本章主要介绍了网店美工入门的基础知识、工作准备、工作流程等，通过本章内容的学习，读者应该对网店美工的工作职能及工作技能有基本认识，掌握开展设计工作之前需要做的准备工作，明确美工的工作流程。第2章商品图片的处理与美化教学内容一、商品图片尺寸的调整二、修复图片颜色三、商品图片的美化与修饰四、抠图技巧五、拍摄原图后期综合处理教学要求【知识目标】1．了解商品图片的要求；2．了解图片修饰的必要性；3．掌握提高图片亮度与鲜艳度的方法；4．掌握网店中常用的商品图片尺寸，以及调整、裁剪、校正图片的方法；5．掌握处理图片污点、修复瑕疵以及虚化背景的方法；6．掌握扣取不同类型的图片以及合成素材的方法。【技能目标】1．能够处理图片污点、修复瑕疵；2．能够对商品图像进行抠图处理；3．能够对偏暗、偏亮和偏色的图片进行调色；4．能够调整商品图片尺寸。教学重点1．掌握调整色差的方法；2．掌握不同类型图片的抠图方法；3．掌握图片的修饰与美化的方法。教学难点调整色差的方法教学方法讲授法、练习法课时数6课时教学内容2.1Photoshop软件的基本操作2.1.1认识Photoshop的工作界面Photoshop的基础工作界面，包括了菜单栏、选项栏、工具箱、图像编辑区域、控制面板等模块。2.1.2调整PS的界面视图1.切换商品图像显示模式在处理图像的过程中，为了方便操作，可以通过切换图像的显示模式来查看图像。选择“视图>屏幕模式”命令，在弹出的菜单中包括标准全屏模式、带有菜单栏的全屏模式、全屏模式三种显示模式。2.调整商品图像显示比例ctrl加“+”图像放大显示，ctrl加“-”，图像缩小显示。按住ctrl键同时，配合键盘上的数字0键，还原图像原大小。要调整图像的显示状态，也可在状态栏中直接输入显示比例，如输入200%，则图像以200%的比例显示。3.移动商品图像显示画面在使用工具处理图像的过程中，若图像显示比例过大，没有显示全部的图像画面时，可以使用抓手工具对图像画面进行移动，查看图像的不同区域。抓手工具的快捷键是空格键，按住空格键时，可临时切换为抓手工具，此时配合鼠标移动至需要停留的图像部分。2.1.3应用PS的辅助工具1.显示商品图像标尺使用标尺可以在处理图像时精确定位鼠标指针的位置，选择“视图>标尺”命令或按ctrl+R组合键，可以显示或隐藏标尺。Photoshop软件提供多种标尺单位，可在“编辑>首选项>单位与标尺”命令中进行更改。2.编辑商品图像参考线选择“视图>锁定参考线、清除参考线、添加参考线”命令，可以对参考线进行相应操作。3.设置网格线设置网格线可以帮助美工在绘制形状等操作时准确定位，选择“视图>显示>网格”命令，可以显示或隐藏网格，选择“编辑>首选项>参考线、网格和切片”命令，打开“首选项”对话框，在此对话框中可对参考线和网格的相关参数进行设置。2.1.4图像文件的基本操作1.新建空白图像文件启动软件后，选择“文件>新建”命令，或者使用快捷键ctrl+N，可以创建一个图像文件，在“新建文档”对话框可以设置图像名称、图像尺寸、分辨率、颜色等，设置完后单击“创建”即可创建图像。2.打开商品图像文件在编辑图像前，需要先打开图像文件，选择“文件>打开”命令，或使用快捷键ctrl+O，在“打开”对话框选择需要打开的文件，单击打开按钮即可打开指定的图像文件。3.保存商品图像文件编辑完图像后，需要对其进行保存，以便于下次打开继续操作，选择“文件>存储”命令，或使用快捷键ctrl+s，可以存储文件。4.关闭图像文件将图像文件储存后，可以将其关闭。点击图像窗口标题栏上的“关闭”按钮，或选择“文件>关闭”命令，都可以关闭当前的图像文件。2.2修复图片颜色实际拍摄中，拍摄效果会很大程度上受到光线的影响，比如阴天和晴天拍摄出的效果不同，顺光和逆光拍摄出的效果也不同。一般来讲，如果拍摄中光线设置不合理，会出现曝光过度、曝光不足和色差现象，这就需要对图片的颜色进行后期的校正处理，使得图片中的商品效果能接近真实效果。2.2.1调整存在曝光问题的图片对于存在曝光问题的图片，除了使用Photoshop软件的“曝光度”命令进行调节之外，还可以通过调节“色阶”、“曲线”、“亮度/对比度”等命令来处理。1.使用“色阶”调整图像2.使用“曲线”调整图像3.使用“亮度/对比度”调整图像2.2.调整有色差的图片网络商品图片虽然要给予顾客美的视觉享受，但更重要的是真实反映商品详情，避免因为色差产生的退货和纠纷，下面介绍调整色差的方法。1.使用“自动颜色”调整色差2.使用“可选颜色”调整色差2.3商品图片的抠取2.3.1规则图形抠图对于一些形状比较规则的图片，因其往往具有简单的线条轮廓，如矩形、三角形等，非常适合使用多边形套索工具。2.3.2扣取背景简单的商品图片纯色背景图像的抠图操作最简单，因此很多商家在拍摄完商品场景图后，都会特意拍一些纯色背景图，以方便后期抠图。对纯色背景图像抠图时，一般使用“魔棒工具”，调整合适的容差值后，只需用“魔棒工具”单击背景，即可一键选中背景，删除背景或者反选，均可实现抠图效果。2.3.3抠取图形复杂的商品图片对于商品主体形状比较复杂、背景比较凌乱的图像，如果主体边缘清晰，则可使用磁性套索工具实现快速抠图。若边缘不清晰，则需要使用钢笔工具来抠取。本例将打开“保温杯.jpg”素材，综合应用磁性套索工具和钢笔工具实现快速抠图。2.4商品图片的美化与修饰商品图片拍摄前需要布光和布景，还需要对商品本身进行精细处理，以此保证拍摄作品的美观性。尽管如此，图片中依然会出现一些细小的瑕疵，比如污点、褶皱、污渍等情况，偶尔还会出现模糊的情况，这些情况可以通过Photoshop的修复类工具进行修复和美化。2.4.1修复图像中的污点修复图像中的污点最适合使用Photoshop中的污点修复画笔工具，操作简单方便，只需要用污点修复画笔工具点击污点处即可，软件会自动用笔头周围的颜色填充污点处的颜色。2.4.2使用仿制图章工具修复图片仿制图章工具可以从图像中复制信息，将其应用到其他区域或者其他图像中，是图像修复中最常用的工具之一。2.4.3使用修补工具修复图片修补工具是使用图片中某些特定的区域来替换需要修补的区域，它会将源区域和目标区域的纹理、明暗等相匹配，修补工具是使用最频繁的修复工具之一。2.4.4调整模糊的图片商品拍摄时，如果出现手抖，拍摄出来的图片会模糊。图片被反复缩小或者放大以后，其画质会受到影响，若图片细节变得模糊，可通过锐化工具进行调整，将图像变清晰。2.5商品图片尺寸的调整2.5.1商品拍摄原图的裁剪商品图片拍摄完成后，原图尺寸并不符合店铺装修需求，此时需要对图片尺寸进行调整。一般而言，拍摄的原图四周有较多的留白，为了突出商品主体，常使用裁剪的方法修改图像。2.5.2调整商品图片的尺寸修改图片尺寸时，要注意修改“画布大小”和“图像大小”的区别。画布大小是指整张画布的长和宽，是尺子能够量到的物理尺寸，而图像大小是指在这张画布里有多少像素。简单来说，画布大小就是画纸大小，图像大小就是画纸上图的大小。改变画布大小就是改变画纸的大小，而改变图像大小是改变画纸上图像的比例。归纳与提高本章介绍了网店美工修复和美化图片的常用操作方法和技巧，主要包括图片尺寸的调整、颜色的修复、图片美化与修饰、不同类型商品图片的抠图方法。第3章电商视觉设计的基本要素教学内容一、视觉设计中色彩的应用二、视觉设计中文字的应用三、视觉设计中的排版构图四、常用的视觉设计技巧五、视觉设计元素综合应用教学要求【知识目标】1.了解必备视觉设计知识；2.掌握色彩的基本原理及应用技巧；3.了解设计作品中的文字应用；4.了解视觉构图的常用方法。【技能目标】1.能够根据网店定位和产品风格，对网店页面进行合理的色彩搭配；2.能够根据设计风格熟练的选择合适字体；3.能够对页面进行布局，增强页面的可读性和美感。教学重点1.理解必备视觉设计知识；2.掌握不同色相的情感属性及配色方法；3.掌握设计作品中字体的选择与文字的排版；4.掌握常用的视觉构图方法。教学难点主色的选择。对比的应用。教学方法讲授法、案例法、练习法课时数6课时教学内容3.1设计中的色彩3.1.1色彩的基本原理1．色相色相，即色彩的相貌称谓，能够比较准确地表示某种色彩的名称，如红、橙、黄、绿等。2．明度明度又称为色彩的亮度，指色彩的明暗程度。不同色彩的明度有所不同，其中，黄色明度最高，紫色明度最低。3．饱和度饱和度也称为纯度，指色彩的鲜艳程度，光波成分约单纯，饱和度越高。3.1.2认识色调色调是指一幅作品色彩外观的基本倾向。在明度、纯度、色相这三个要素中，某种因素起主导作用，就称之为某种色调。色彩分为无彩色和有彩色，色调也由无彩色和有彩色构成。所谓无彩色，顾名思义就是没有色相的色彩，包括黑白以及介于二者之间的灰。有彩色就是指有色相的色彩，除黑白灰以外的色彩都是有彩色。3.1.3色彩感觉设计应用不同的色彩有着不同的寓意与作用，当人们看到色彩时，除了会感受到其物理方面的影响，也会给人带来不一样的心理感受与联想，每种色相都有其独特的情感。红色橙色黄色绿色蓝色紫色3.1.4色彩的搭配方法1.同类色配色2.邻近色配色3.对比色配色4.互补色配色3.1.5色彩比例控制美工作品的色彩应用应遵循“总体协调，局部对比”的原则，日本设计师提出了配色的黄金比例：70%主色，25%辅助色，5%点缀色。3.2设计中的文字3.2.1字体的性格特征1.黑体2.宋体3.圆体4.书法体3.2.2字体的高级使用技巧1.男性化的字体2.女性化字体3.促销字体4.中国风字体5.可爱字体6.文艺字体7.奢华风字体3.2.3文字编排的基本原则1.左对齐2.右对齐3.居中对齐3.2.4文字排版设计技巧善用对比巧用形状3.3视觉设计中的排版构图排版构图是设计师从混乱的视觉元素中找到条理性，帮助顾客在各个视觉元素之间建立联系，从而帮助顾客在阅读中获取重要信息。1.有助于重要信息的传递2.加强视觉效果的张力3.3.1视觉构图的作用视觉构图首先有助于重要信息的传递，好的构图和色彩一样，使表达的内容更加突出，让顾客快速抓住中心点。其次，合理的构图能加强视觉效果的张力。通过改变视觉元素的位置、大小、颜色，加强视觉的张力，增加设计的趣味性。3.3.2常见构图形式1.左右构图2.中心构图3.并置型构图4.对角线构图5.黄金分割构图归纳与提高本章节从色彩的应用、字体的选择、排版的技巧、空间感营造和点线面应用等方面介绍了网店美工必需掌握的视觉设计元素。在色彩的应用方面，介绍了色彩的三要素，即明度、饱和度、色相。此外，还包括色彩心理和各种常用的配色方案，以及配色的比例；在文字的应用方面，介绍了常用字体的性格特征和字体编排的原则；在版式设计方面，介绍了页面构图的作用和常用的构图形式。第4章店铺Logo与主图的视觉设计教学内容Logo的视觉设计主图的视觉设计专题页面的视觉设计教学要求【知识目标】1.了解Logo的定义、类型；2.理解Logo的设计规范；3.掌握Logo的设计思路与推销方法；4.理解主图的重要性；5.掌握主图的设计规范、设计思路与方法。【技能目标】1.能够设计并制作出高识别度的Logo；2.能够设计并制作各种类型产品主图。教学重点1.掌握Logo的设计思路与推销方法；2.掌握主图的设计规范、设计思路与方法；教学难点掌握Logo的设计思路与推销方法；教学方法讲授法、案例法、练习法课时数6课时教学内容4.1Logo的视觉设计4.1.1Logo的定义Logo是一种标志，通过意义明确的视觉符号，将经营理念、企业文化、经营内容、企业规模和产品特性等要素传速给消费者。4.1.2Logo的类型1.中文型Logo2.英文型Logo3.中英文结核型Logo4.图形型Logo5.图文结合型Logo4.1.3Logo的设计规范1.优秀的Logo首先需要具备创新性。2.优秀的Logo应具备思想性。3.优秀的Logo应具备易传播的特性。4.优秀的Logo应具备美感。5.优秀的Logo应具备易用性4.1.4Logo的设计思路1.明确网店策略2.明确品类策略定位3.明确风格定位4.明确元素5.明确字体6.明确色调设计师可以用以下几个问题给自己的作品打打分：（1）Logo能唤起用户什么样的情感？（2）隐藏在Logo背后的东西是什么？（3）Logo经得起时间的考验吗？（4）它独一无二，一眼就能看出来吗？（5）在黑白色上看起来是如何？（6）在小尺寸下也能独特清晰吗？4.1.5推销Logo的技巧与方法设计完成的Logo，不能只是简单的导一张图出来，而是需要一个提案，即：推导+延展+呈现，示例如下：1.呈现，即Logo作品2.Logo的推导过程3.Logo的延展4.1.6Logo的制作Logo是店铺装修中必不可少的一部分，本例将为一科技类网店制作图形类Logo。4.2主图的视觉设计4.2.1主图的类型与尺寸很多企业在多个电