网店美工视觉设计实战教程课件 (7).pptx

装修店铺人民邮电出版社网店美工视觉设计实战教程（全彩微课版第3版）第6章

目录Contents使用素材中心店铺装修模块6.26.1实战演练6.3

6.1.1图片切片与保存31.图片切片与保存的注意事项一般情况下，色彩丰富、尺寸较大的图片切片，可选用JPEG格式（也叫JPG格式）存储；尺寸较小、色彩单一和背景透明的图片切片，可选用GIF或PNG-8格式存储；半透明、不规则以及圆角的图片切片，则选用PNG-24格式存储。切片存储的格式通过Photoshop的标尺和参考线功能，可为图片创建切片的参考线。在切片时，基于参考线的切片区域比直接手绘的切片区域更精确。切片的参考线在切片时，尽量不将一个模块的完整图片切开，以免因操作或网速问题使图片不能完整地被呈现出来。切片的位置

6.1.1图片切片与保存41.图片切片与保存的方法网店美工在对图片切片时，可以使用参考线规划切片的范围，再使用切片工具或切片选择工具进行切片。如对某店铺的促销商品版块进行切片，需要先新建参考线划分出各商品，再切片并存储图片，其具体操作步骤如下。2添加参考线选择切片工具1切片效果3

6.1.1图片切片与保存55组合切片调整切片框4合并其他切片6

6.1.1图片切片与保存68优化切片7存储切片9保存效果

6.1.2上传图片到素材中心7素材中心是淘宝商家的线上存储空间，具有安全稳定、管理方便和浏览快速等优点，可以存储普通图片、视频、音乐和动图。网店美工在装修店铺前，可以先将相关资料上传到素材中心，以便后期自由取用，其具体操作步骤如下。3新建文件夹1进入素材中心上传图片2

6.1.2上传图片到素材中心86574“上传图片”对话框“上传结果”对话框选择上传的图片上传完成的图片

6.1.3编辑素材中心图片9为了更好地浏览和查找图片，网店美工往往需要在上传完图片后对其重命名，或将图片放入指定的文件夹。由于素材中心的容量有限，因此需要不定期清理不使用的图片，为之后需要上传的其他图片素材腾出空间，其具体操作步骤如下。编辑图片重命名图片12

6.1.3编辑素材中心图片105选择图片的移动路径34选择图片删除图片

目录Contents使用素材中心店铺装修模块6.26.1实战演练6.3

6.2.1认识装修模块12进入店铺装修页面并查看装修模块模块是店铺页面的基础组成部分，商品和页面装修都依托模块存在，除了前文介绍的店招、导航条、详情页模块外，常用的模块还有宝贝推荐、宝贝排行、默认分类、个性分类、自定义区、图片轮播等。

6.2.2模块装修13编辑导航条编辑“店铺招牌”模块在装修PC端网店时，平台提供有店招和图片轮播模块等常规模块，这些模块不需要网店美工自行添加，且装修方法类似，一般只需要替换模块中的图片即可，但在装修没有导航条的店招时，则需要手动添加导航条内容，保障店招内容的完整性，其具体操作步骤如下。12选择店招图片31.常规模块装修

6.2.2模块装修14装修导航后的效果添加导航内容45预览店招装修效果调整导航显示顺序76

6.2.2模块装修15添加“自定义区”模块使用常规模块装修时，模块的位置和尺寸通常是固定的，如果网店美工设计的页面与模块的要求不一致，可以使用自定义模块装修。这里在“轮播海报”下方添加优惠券，其具体操作步骤如下。12单击“插入图片空间的图片”按钮2.自定义模块装修

6.2.2模块装修16选择图片34隐藏标题

6.2.2模块装修17预览装修效果5

6.2.3热点+源代码装修18热区是指为图片中的某个区域创建链接，单击该区域可跳转到链接的页面，而热区的使用需要结合图片的源代码才能完成。使用热区+源代码装修店铺时，需要先获取需装修的图片在素材中心中生成的链接，然后通过在线工具添加热区并设置图片链接，其具体操作步骤如下。1复制图片链接单击超链接2

6.2.3热点+源代码装修19设置跳转链接43粘贴图片链接添加热区调整矩形框大小56

6.2.3热点+源代码装修20为其余文本添加热区和链接自定义招牌并粘贴代码97复制代码8店招装修效果10

目录Contents使用素材中心店铺装修模块6.26.1实战演练6.3

6.3实战演练—装修4件套详情页22（1）4件套的信息展示图整体高度较高，尺寸较大，需要将其切片并保存。（2）将详情页所需图片上传到素材中心。（3）选择并进入需要装修的页面，设置模块的内容。1.设计思路

6.3实战演练—装修4件套详情页232.知识要点（2）在千牛卖家工作台页面上传图片到素材中心的新建文件夹中，并为其重命名。（4）在图片空间中，调整选择图片的顺序。（3）在详情页装修页面添加“自定义区”模块。（1）使用“切片工具”切片卖点说明图并保存为JPG格式。2.知识要点

6.3实战演练—装修4件套详情页243.