《网店视觉设计》课件 项目一 网店视觉设计概论

项目一 网店视觉设计概论任务1 认识网店视觉设计任务2 认识网店视觉设计常用工具12项目引入普通网店千千万万，优秀网店却万里挑一。由于浏览者对于网店最直观的感受来自网店的色彩、图形、文字等内容，所以网店视觉设计成为网店运营中需要解决的首要问题。项目背景来自职业院校的张伟、王平两位同学进入某电商公司实习，公司安排两位同学承担网店视觉设计岗位工作。学习目标1.掌握网店视觉设计的基础知识。2.了解网店视觉设计的基本内容。任务引入在接到岗位任务后，张伟、王平两位同学需要先了解网店视觉设计工作的具体内容。任务分析了解网店视觉设计工作，首先要知道什么是网店视觉设计，其次要知道网店视觉设计具体包含哪些内容。3相关知识一、网店视觉设计概述网店上的商品琳琅满目，如何让浏览者在浏览商品时第一眼就留下深刻的印象，继而引起进一步了解的兴趣，是网店视觉设计所要解决的主要问题。41.视觉设计视觉设计是使商品视觉效果更佳的艺术设计，大体可分为视觉识别设计和视觉传达设计两种。视觉识别设计来源于企业形象识别系统，最初目的是设计一套能够将自己与其他企业区别开来的标志系统，后来逐渐演变为企业文化的外在表现部分。视觉传达设计是以视觉媒介为载体，以文字、图形和色彩作为创作要素，利用视觉形象传达特定的信息给受众，从而对被传达对象产生影响的过程。52.网店视觉定位任何一个网店都要有自己的视觉定位。和人的风格定位一样，不同类型的网店其视觉定位亦是千差万别。营销型网店的视觉定位是营造促销氛围，通过强烈的色彩突出显示促销信息，如打折、包邮、半价等优惠字眼，在价格数字上也会刻意醒目，抓住浏览者的视觉焦点。品牌型网店的视觉定位是突出品牌优势，整体突出商品、品牌的风格或商品的形象代言，以及品牌所具有的设计、工艺、质量和售后等信息，而弱化促销、价格等信息。6二、网店视觉设计岗位概述网店视觉设计岗位是负责网店页面美化及用户体验设计的工作岗位，该岗位人员需要从平台规则、用户喜爱等多个角度出发，对Web端页面、移动端页面进行美化，同时注重交互设计与用户体验，设计出更具商业价值的页面。网店视觉设计岗位主要涉及的工作如下。1.商品拍摄在网站中，商品图片是最基本的素材，因此拍摄商品图片是网店视觉设计的主要工作之一。72.商品图片处理对拍摄好的商品图片进行处理，可以有效地提高商品的成交转化率，所以商品图片的效果处理也是网店视觉设计工作之一。3.店铺首页设计首页是一个店铺的门面，对于品牌形象的展现至关重要。如何使首页设计贴合品牌形象，是网店视觉设计需要解决的任务之一。4.日常的店铺后台维护网店视觉设计还包括对店铺后台进行日常维护，如页面装修、图片空间上传及替换、商品上架及商品描述修改等。85.商品描述页设计商品的描述是让浏览者产生购买行为最重要的因素之一，商品描述页的设计重点是精准提炼商品卖点并完美地展现出来。6.配合店铺运营制作相关活动图和营销图片网店除了日常维护工作外还要参加平台的活动，所以结合店铺活动，制作吸引眼球的活动图和营销图片也是网店视觉设计的任务之一。7.制作钻展图或直通车图片制作钻展图或直通车图片主要目的是为店铺引流，通过图片的视觉设计吸引注意力，提高点击量，从而达到为店铺活动造势和增加品牌曝光率的目的。910学习目标1.熟悉网店视觉设计的常用软件。2.掌握网店视觉设计的图像基础知识。任务引入在了解网店视觉设计的具体内容后，张伟、王平两位同学需要进一步了解使用什么工具才能进行网店视觉设计。任务分析了解网店视觉设计的工具，重点是了解网店视觉设计的常用软件及其他辅助软件。一、Photoshop软件Photoshop软件是由AdobeSystems公司开发的专业图形图像处理软件，具有强大的编辑与绘图功能，是平面设计人员的必备工具。随着网络技术和电子商务的发展，能够熟练灵活地运用Photoshop软件，已经成为电商行业视觉设计从业者的必备技能。下面以PhotoshopCC版本为例，了解该软件的工作界面，掌握基本操作和相关图像处理基础知识。111.工作界面介绍Photoshop工作界面主要由菜单栏、工具箱、选项栏、面板组、工作区和状态栏组成，如图所示。12Photoshop工作界面从图中可以看到各组成部分的具体形态及位置，其中除菜单栏外，其他部分的位置都是可以适当调整的。●菜单栏位于界面顶端，通过各个命令菜单提供对Photoshop的绝大多数操作及窗口的定制，包括“文件”“编辑”“图像”“图层”“文字”“选择”“滤镜”“3D”“视图”“窗口”和“帮助”等菜单命令。●工具箱提供了强大的工具，包括选择工具、绘图工具、填充工具、编辑工具、颜色选择工具、屏幕视图工具、快速蒙版工具等。13●选项栏也叫工具选项栏或属性栏，默认位于菜单栏的下方，可以通过拖动手柄区来移动。●面板组位于工作界面的右侧，是处理图像时不可或缺的部分，可以完成各种图像处理操作和工具参数的设置。●工作区为界面的主要区域，也称编辑区或文档窗口区。●状态栏位于Photoshop文档窗口的底部，用来缩放和显示当前图像的各种参数信息以及当前所用的工具信息。142.基本操作Photoshop的基本操作包括新建文件、打开文件、置入文件、导入与导出文件、保存文件、关闭文件、复制文件等。下面主要介绍文件的新建、打开和保存操作。（1）新建文件执行“文件＞新建”命令或者按【Ctrl+N】组合键，打开如图所示的“新建”对话框，在对话框中可以设置文件的名称、尺寸、分辨率、颜色模式等。15“新建”对话框16●宽度和高度：设置文件的宽度和高度，单位有像素、英寸、毫米、点、派卡和列。●分辨率：设置文件的分辨率大小，单位有“像素/英寸”和“像素/厘米”两种。分辨率越高，印刷出来的质量就越好。●颜色模式：设置文件的颜色模式及相应的颜色深度，包括位图、灰度、RGB颜色、CMYK颜色和Lab颜色。●背景内容：也称背景，即画布颜色，可设置为白色、透明色或背景色。17（2）打开文件在Photoshop中打开文件的方式有很多种，如图所示。18打开文件的方式●用“打开”命令打开文件：执行“文件＞打开”命令，然后在弹出的“打开”对话框中选择需要打开的文件，接着单击“打开”按钮即可打开该文件。●用“打开为”命令打开文件：执行“文件＞打开为”命令，弹出“打开为”对话框，在此对话框中选择需要打开的文件，并且可以设置所需要的文件格式。●用“最近打开文件”命令打开文件：执行“文件＞最近打开文件”命令，在其下拉菜单中可以选择最近使用的10个文件。●用快捷方式打开文件：如果已经运行了Photoshop，这时候只需要将要打开的文件拖拽到Photoshop的窗口中，即可打开文件。19（3）保存文件文件编辑完成后需要进行保存操作，Photoshop保存文件的方式主要有两种，如图所示。20保存文件的方式●用“存储”命令保存文件：执行“文件＞存储”命令或按【Ctrl+S】组合键，可以对文件进行保存。●用“存储为”命令保存文件：如果需要将文件保存到另一个位置或使用另一个文件名进行保存，就可以通过执行“文件＞存储为”命令或按【Shift+Ctrl+S】组合键来完成。●执行“存储”和“存储为”命令均会弹出“存储为”对话框，在此对话框中可选择保存路径、设置保存文件名以及保存文件类型等。213.图像基础为了更好地学习Photoshop，下面对一些图像基本概念进行简单介绍。（1）位图图像位图图像也称为点阵图像，是由许多点组成的，其中每一个点称为像素，而每个像素都有一个明确的颜色。（2）矢量图形矢量图形也称为向量图形，是由被称为矢量的数学对象定义的线条和曲线组成的。22（3）像素像素是构成位图的基本单位。一张位图是由在水平及垂直方向上的若干像素组成的。（4）分辨率图像分辨率即图像中每个单位面积内像素的多少，通常用“像素/英寸”（ppi）或“像素/厘米”表示。相同打印尺寸的图像，高分辨率比低分辨率包含更多的像素，因而像素点也较小。（5）常用的图像颜色模式颜色模式决定了如何描述和重现图像的色彩。在Photoshop中，常用的颜色模式有RGB颜色模式、CMYK颜色模式、灰度颜色模式等。23（6）常用的图像文件格式图像文件格式是指在计算机中存储图像文件的方式。每种文件格式都有自身的特点和用途，下面简要介绍几种常用的图像文件格式。●PSD格式：该格式是Photoshop软件中使用的一种标准图像文件格式，可以保留图像的图层信息、通道蒙版信息等，便于后续修改和特效制作。●JPEG格式：JPEG是目前所有格式中压缩率最高的格式。●BMP格式：BMP是DOS和Windows兼容计算机系统的标准图像文件格式。24●TIFF格式：TIFF是一种包容的图像文件格式，被所有绘画、图像编辑和页面排版应用程序支持。●PDF格式：PDF用于AdobeAcrobat软件。●PNG格式：PNG格式可以以任何颜色深度存储单个光栅图像，是一个与平台无关的格式。●GIF格式：该格式可在各种图像处理软件中使用，是经过压缩的文件格式，因此一般占用空间较小，适合于网络传输，常用于存储动画效果图片。2526二、Illustrator软件Illustrator软件简称AI，通常用于制作矢量图，在网店视觉设计中主要作为辅助软件。1.Illustrator的工作界面Illustrator的工作界面主要由菜单栏、工具选项栏、选项卡、图像编辑窗口、状态栏、控制区、工具箱和控制面板等部分组成，如图所示。27Illustrator的工作界面282.Illustrator的菜单栏菜单栏位于界面顶部，为所有的窗口提供菜单控制作用。菜单栏包括文件、编辑、对象、文字、选择、效果、视图、窗口、帮助9项菜单选项，单击其中任意一个菜单选项都会弹出相应的对话框，在下拉菜单中也会有各项命令，可以根据图片处理的需求来选择相应的功能选项，如图所示。Illustrator菜单栏下面按顺序分别介绍菜单栏的主要功能。●文件菜单：主要功能是对文件进行编辑，如新建文件、打开文件、储存文件、导入文件、导出文件等。●编辑菜单：主要功能是编辑图像，如还原、剪切、拷贝、粘贴、填充、描边，还有图片制作的定义画笔、定义图案预设等。●对象菜单：主要功能是调整图片，如变换、排列、编组、取消编组、切片、混合、实时临摹等。●文字菜单：主要功能是对文字图层进行编辑，如字体、大小、字形、路径文字、复合文字等。29●选择菜单：主要功能是对图层选区进行调整，如扩大、缩小、羽化、平滑、变换选区等。●效果菜单：主要功能是提供丰富的图片处理效果，如3D效果、扭曲和变换效果、风格化效果等。●视图菜单：主要功能是对图像的预览进行控制，如放大、缩小、实际比例、显示、标尺、对齐等。●窗口菜单：主要功能是显示或者隐藏Illustrator的各项工作界面，如工作区、图层、外观、文字、画笔等。●帮助菜单：主要功能是对Illustrator的帮助和支持中心等进行设置。30313.Illustrator的选项卡选项卡主要是显示打开的图像文件的名称，选项上最右侧为最小化、最大化及关闭按钮。如果同时打开多个图像，图像的名称会依次并列显示在选项卡左侧，如图所示。如想分开编辑选项卡中并列显示的图像，只需将鼠标移至要编辑的图像名称处右击，将图像直接拖拽出即可。Illustrator的选项卡4.Illustrator的工具箱工具箱中不同的工具可以用来编辑图片、选择图层、移动图像等，运用工具箱内不同工具可以制作出各种不同的图像效果。同时，为了方便操作，每个工具都设有组合键，在相对应的组合键指令输入状态下，可以快速选择工具箱中的工具，如图所示。32Illustrator工具常用组合键5.Illustrator的控制面板控制面板是Illustrator中进行颜色选择、编辑图层、通道、路径、撤销编辑等操作的主要功能面板，它是工作界面的主要组成部分，如图所示。33Illustrator的控制面板34（1）图层面板图层面板负责Illustrator中所有图层的管理和编辑操作，如新建图层、新建图层组、图层分组、删除图层、复制图层、图层调整编辑等，如图所示。Illustrator图层面板35（2）字符面板在图像中创建文字后，可以通过字符面板对创建的文字进行编辑和修改，还可以显示并设置相关的文字属性，如字体样式、字体大小、字体间距等，如图所示。Illustrator图层面板36三、其他工具除Photoshop、Illustrator这两个常用软件外，在网店视觉设计中还会使用一些其他的辅助软件。1.Dreamweaver软件Dreamweaver软件主要用于网站的编