第6章网店装修《Photoshop CC网店美工视觉设计实战》同步教学（工信版）（课件）

网店装修 Photoshop CC网店美工视觉设计实战（全彩微课版） 第6章 目录 Contents 素材中心 装修网店首页 6.2 6.1 发布商品详情页 6.3 实战演练——装修洗衣机店铺首页 6.4 6.1.1 切片并上传图片 3 使用Photoshop的切片工具可以将一张图片分割成若干张不同的小图，并能将这些小图单独存储下来，方便上传与添加到素材中心。 2 添加参考线 完成切片 1 “友猫”宠物用品店决定装修网店首页，在装修前需要先对首页进行切片操作，并上传到素材中心，以便后期进行装修，具体操作如下。 6.1.1 切片并上传图片 4 设置保存参数 储存切片 查看保存效果 3 4 5 6.1.1 切片并上传图片 5 单击“图片空间”超链接 单击“上传”超链接 6 7 6.1.1 切片并上传图片 6 选择图片 查看上传效果 8 9 6.1.2 管理素材中心的商品图片 7 为了更好地浏览和查找图片，网店美工准备管理上传的“友猫”宠物用品店首页图片，如进行重命名图片、调整商品图片的顺序、替换商品图片、删除商品图片等操作，具体操作如下。 编辑图片 重命名图片 删除多余的商品图片 1 2 3 6.1.2 管理素材中心的商品图片 8 新建文件夹 选择图片 完成移动图片操作 4 5 6 目录 Contents 素材中心 装修网店首页 6.2 6.1 发布商品详情页 6.3 实战演练——装修洗衣机店铺首页 6.4 6.2.1 认识装修模块 10 模块是网店页面的基础组成部分，商品、页面的装修等都依托模块而存在，因此，每位网店美工都应该对模块有充分的认识。常用的模块包括店铺招牌、宝贝推荐、宝贝排行、默认分类、个性分类、自定义区、图片轮播等。 大家可以在千牛页面左侧选择“店铺”选项卡，在右侧面板的“店铺装修”栏中单击“PC店铺装修”超链接，打开旺铺管理页面，单击“首页”栏右侧的“装修页面”超链接。进入首页装修界面，界面左侧将显示常用模块，如右图所示。 6.2.2 网店装修首页 11 淘宝网店中的各种装修模块都有固定的尺寸，而很多网店为了增加设计感和美观度做了个性化设计，导致页面尺寸与模块尺寸不统一，这时可以使用“自定义区”模块进行装修。“友猫”宠物用品店的首页是全屏的，网店美工可以使用“自定义区”模块布局各板块，并通过“码工助手”转换源代码，具体操作如下。 选择装修页面 1 单击“编辑”按钮 2 6.2.2 网店装修首页 12 单击“电商通用热点工具”超链接 3 复制链接 4 6.2.2 网店装修首页 13 添加热区 5 添加其他热区 6 6.2.2 网店装修首页 14 粘贴代码 7 完成店招与导航的装修 8 6.2.2 网店装修首页 15 单击“轮播工具”超链接 9 粘贴链接 10 生成代码 11 6.2.2 网店装修首页 16 自定义内容区 12 创建热点 14 添加热点 13 6.2.2 网店装修首页 17 查看完成后的效果 15 目录 Contents 素材中心 装修网店首页 6.2 6.1 发布商品详情页 6.3 实战演练——装修洗衣机店铺首页 6.4 发布商品详情页 19 选择商品类目 设置基础信息 1 2 发布商品详情页是指将商品信息上传至网店中。网店美工在上传商品详情页时需要先输入商品的信息，如商品标题文案，以及商品的净重量、价格、库存量等内容，并上传商品详情页图片，具体操作如下。 发布商品详情页 20 设置销售信息 设置销售服务信息 3 5 设置物流信息 4 发布商品详情页 21 添加上传图片 8 7 上传图片 6 选择详情页图片 目录 Contents 素材中心 装修网店首页 6.2 6.1 发布商品详情页 6.3 实战演练——装修洗衣机店铺首页 6.4 实战演练——装修洗衣机店铺首页 23 随着冬季的到来，消费者对洗衣机的需求越来越大，现在需要重新装修S.M洗衣机旗舰店的首页，在装修店招与导航时，要求为列表创建链接，方便跳转页面；在装修海报时，要求有跳转链接，方便进入该商品的商品详情页，洗衣机旗舰店装修后的效果如图所示。 实战演练——装修洗衣机店铺首页 24 装修洗衣机旗舰店首页设计思路如下。 （1）分析装修方式。根据提供的素材，可发现旗舰店的店招与导航、海报属于完整的图片，若使用装修页面的模块直接装修将会操作困难，这时需要先转换为代码，然后再进行装修。 （2）上传图片。装修网店需要将用到的图片上传到素材中心。 （3）装修店铺。装修网店时需要先使用码工助手将图片转换为代码，且使每个选项对应的链接在代码中显示，然后在店铺装修页面使用自定义模块进行装修。 1.设计思路 实战演练——装修洗衣机店铺首页 25 2.知识要点 完成本例洗衣机旗舰店首页的装修，需要掌握以下知识。 （1）素材中心的使用