导语

  

内容提要

  

    这是一本讲解电商设计基础知识与实战方法的专业教程。本书从学以致用的角度出发，讲解了电商设计行业的现状与前景，以及电商设计师应该具备的基本技能。同时，本书以软件操作、配色与版式设计、店铺装修、图片的处理、字体的设计与排版等基本技法为支撑，依次对淘宝店招、导航栏、电商海报、宝贝陈列区、宝贝详情页、页尾图、店铺收藏栏、店铺首页背景、直通车图、钻展图，以及手机淘宝店铺装修等知识进行了全方位的分析与讲解。作者精选了大量工作中的实战案例，目的是让读者能够快速地提升实战技能，从电商设计小白晋升为专业的电商设计师。
    随书附赠所有案例的源文件、素材文件和在线教学视频，读者可扫描资源与支持页中二维码获取，跟随书中的内容进行学习与操作。
    本书适合淘宝美工初学者、想要从事网店美术设计的电商设计师、淘宝店店主及设计爱好者学习使用，也可作为电商设计培训讲师和大、中专院校相关专业老师的教学参考书。

第1章  电商设计的基础知识
  1.1  电商设计概述
    1.1.1  什么是电商设计
    1.1.2  电商设计的基本内容
    1.1.3  电商设计师的就业前景
  1.2  电商设计师需要具备的基本能力
    1.2.1  熟练使用设计软件
    1.2.2  合理运用设计理念
    1.2.3  学会视觉营销
    1.2.4  掌握与团队沟通协作的能力
  1.3  电商设计的四大法则
    1.3.1  合理的店铺定位
    1.3.2  耐看的版式
    1.3.3  和谐的颜色搭配
    1.3.4  舒服的字体搭配
  1.4  关于店铺装修的一些基础知识
    1.4.1  电商网页的结构与布局
    1.4.2  电商网页的尺寸
    1.4.3  淘宝旺铺
    1.4.4  图片空间的使用
    1.4.5  店铺装修的基础流程
    1.4.6  图片的切割、优化与存储
第2章  如何处理淘宝图片
  2.1  图片的基本处理方法
    2.1.1  调整图像的大小
    2.1.2  裁剪图片
    2.1.3  更改图片格式
  2.2  抠图
    2.2.1  使用“魔棒工具”抠图
    2.2.2  使用“钢笔工具”抠图
    2.2.3  使用“调整边缘”抠图
    2.2.4  使用“通道”抠图
  2.3  调色
    2.3.1  使用“色相/饱和度”调色
    2.3.2  使用“色彩平衡”调色
    2.3.3  使用“可选颜色”调色
  2.4  其他常见问题的解决方法
    2.4.1  对比度不够怎么办
    2.4.2  如何虚化背景，突出主体
    2.4.3  如何使用“仿制图章工具”修除瑕疵
    2.4.4  如何使用“修补工具”去除人物眼袋
    2.4.5  巧用“滤镜”，让人物皮肤变得光滑
    2.4.6  巧用“蒙版”与“曲线”，让人物皮肤变白
    2.4.7  巧用“液化”，对人物进行瘦身
    2.4.8  如何进行图片的合成处理
    2.4.9  如何添加和去除水印
  2.5  电商产品图精修综合实战
  实战：不锈钢水壶图片精修案例详解
  实战：洗面奶图片精修案例详解
  实战：人像精修案例详解
第3章  常用电商字体的制作方法
  3.1  字体的下载与安装
  3.2  字体设计的三大炫酷技法
    3.2.1  矩形造字
    3.2.2  钢笔造字
    3.2.3  字库改字
  3.3  常用电商字体的制作与解析
    3.3.1  折纸字体
    3.3.2  粉笔字体
    3.3.3  毛笔字体
  3.4  3D立体字的制作方法
    3.4.1  3D选项栏
    3.4.2  3D工具
    3.4.3  3D面板
    3.4.4  属性面板
  实战：“双十一大促”3D立体字制作案例解析
第4章  电商LOGO的制作方法
  4.1  常见类型的电商LOGO分析　
    4.1.1  字母型
    4.1.2  文字型
    4.1.3  吉祥物型
    4.1.4  组合型
  4.2  电商LOGO的制作要点说明　
    4.2.1  具备代表性
    4.2.2  具备企业特征
    4.2.3  具备易传播性
    4.2.4  具备整体性
  4.3  电商LOGO的制作　
  实战：制作亿摆品牌的LOGO
  实战：制作厚德品牌的LOGO
第5章  电商GIF动图的制作方法
  5.1  电商GIF动图的使用类型
    5.1.1  导航栏动态图
    5.1.2  页面动态图
  5.2  电商GIF动图的制作
  实战：制作360°宝贝展示动图
  实战：制作下雪动态图
  实战：制作圆球动态图
第6章  电商醒目标识的制作方法
  6.1  电商醒目标识的类型
  6.2  电商醒目标识的制作
  实战：制作对话框标识
  实战：制作边角标识
  实战：制作箭头标识
  实战：制作爆炸多边形标识
第7章  投影效果的制作方法
  7.1  投影效果制作的要点
  7.2  常见的投影效果的制作与解析
    7.2.1  按效果分类
  实战：制作模糊投影
  实战：制作渐变投影
  实战：制作扁平化长投影　
    7.2.2  按形态分类
  实战：制作正方体投影
  实战：制作圆柱体投影
  实战：制作长方体投影
第8章  时间轴的认识与应用
  8.1  时间轴的概念
  8.2  时间轴的设置与应用
    8.2.1  主图视频
    8.2.2  详情页动态图
  实战：时间轴的设置与应用案例解析
  实战：时间轴在动态店招制作中的运用
第9章  Cinema 4D在电商设计中的应用
技巧
  9.1  Cinema 4D软件在电商设计中的应用范畴
    9.1.1  制作金属文字
    9.1.2  制作可爱气球字
    9.1.3  制作霓虹灯文字
    9.1.4  拟人化建模
    9.1.5  制作低多边形场景
    9.1.6  制作城市建筑场景
    9.1.7  商业产品建模　
  9.2  Cinema 4D在电商设计中的应用实操详解
  实战：约惠春天——简单场景的搭建
  实战：年终狂欢盛典——霓虹灯文字海报设计
第10章  店招的设计与安放
  10.1  店招设计的规范与注意事项
  10.2  店招的风格类型有哪些
    10.2.1  品牌型
    10.2.2  活动促销型
    10.2.3  产品推广型
  实战：全屏店招的制作与安放
  拓展练习：制作一个服装店铺的店招
第11章  导航栏设计
  11.1  导航栏常见类型　
    11.1.1  按显示方式划分
    11.1.2  按位置划分
  11.2  导航栏的宝贝分类与管理设置　
  实战：制作护肤品店铺的页头导航栏
  实战：制作装饰灯店铺的页尾导航栏
  实战：通过CSS代码修改导航栏
  拓展练习：制作一个服装店铺页头导航栏
第12章  海报设计
  12.1  电商海报的意义　
    12.1.1  传达产品信息
    12.1.2  增强画面艺术表现力
    12.1.3  增加画面趣味
  12.2  电商海报的常用版式　
    12.2.1  左文右图/左图右文
    12.2.2  左右产品，中间文案
    12.2.3  居中构图
    12.2.4  三角构图
    12.2.5  S/Z形构图
  12.3  电商海报的设计要点　
    12.3.1  主题突出
    12.3.2  风格明确
    12.3.3  构图合理
    12.3.4  细节完善
  实战：简约海报的制作与安放　
  拓展练习：制作一张服装店铺的海报
第13章  宝贝陈列区设计
  13.1  宝贝陈列区设计的要点　
    13.1.1  直截了当
    13.1.2  重点突出
    13.1.3  整体统一
  13.2  “宝贝推荐”模块的设置方法
  实战：制作茶叶自定义陈列区页面
  拓展练习：制作一个零食自定义陈列区页面
第14章  详情页设计
  14.1  详情页的设计要点与规范
    14.1.1  设计要点
    14.1.2  布局的基本规范
    14.1.3  尺寸规范
  14.2  设计详情页时常见的问题　
    14.2.1  无休止的文字
    14.2.2  过多的优惠信息
    14.2.3  牛皮癣图的滥用
  14.3  详情页的制作流程分析　
    14.3.1  设定页面风格
    14.3.2  收集素材
    14.3.3  确立布局框架
    14.3.4  确定配色方案
    14.3.5  选择字体
    14.3.6  对文字和图片进行排版
    14.3.7  确认定稿
    14.3.8  切片存储
    14.3.9  完成上传
  实战：制作女装的详情页
  拓展练习：制作一个男装详情页
第15章  页尾设计
  15.1  页尾的分类
    15.1.1  返回顶部型
    15.1.2  文字说明型
    15.1.3  分类导航型
  15.2  页尾设计的注意事项
    15.2.1  设计要简约
    15.2.2  使用图案元素
    15.2.3  设计风格要统一
    15.2.4  字号要小
    15.2.5  包含的信息要全
  15.3  页尾的设计与制作　
  实战：制作返回顶部型页尾
  实战：制作旺旺客服页尾　
  实战：制作分类导航型促销页尾
  拓展练习：制作一个文字说明型页尾
第16章  店铺收藏栏设计
  16.1  店铺收藏栏的设计要点
    16.1.1  好看的图标
    16.1.2  必要的提示文字
  16.2  店铺收藏栏的设计与制作
  实战：制作服装店铺收藏栏
  实战：制作促销型收藏栏　
  实战：制作动态型收藏栏　
  拓展练习：制作一个化妆品店铺收藏栏
第17章  首页背景设计
  17.1  首页背景的分类
    17.1.1  固定型
    17.1.2  固定悬浮型
    17.1.3  交替型
    17.1.4  滚动型
  17.2  首页背景的制作方法　
  实战：制作固定型首页背景
  实战：制作固定悬浮型首页背景
  实战：制作交替型首页背景
  实战：制作滚动型首页背景
  拓展练习：制作一个固定悬浮型首页背景
第18章  直通车图的设计
  18.1  直通车的分类　
    18.1.1  店铺直通车
    18.1.2  产品直通车
  18.2  直通车图设计的基本流程　
    18.2.1  根据产品标题和卖点提炼文案
    18.2.2  选产品图和确定主色调
    18.2.3  使文案与产品图相互配合
  18.3  常见的直通车图的构图方式　
    18.3.1  左右构图
    18.3.2  上下构图
    18.3.3  对角线构图
  实战：制作剃须刀直通车图
  实战：制作净水机直通车图
  实战：制作空气炸锅直通车图
  拓展练习：制作一个剃须刀直通车图
第19章  钻展图设计
  19.1  钻展图的分类
    19.1.1  单品推广
    19.1.2  活动店铺推广
    19.1.3  品牌推广
  19.2  钻展图的制作
  实战：制作家用榨汁机钻展图
  实战：制作食品店铺的钻展图
  拓展练习：制作一个食品店铺钻展图
第20章  电商设计综合实战案例详解
  20.1  案例概述
    20.1.1  确定店铺风格
    20.1.2  确定模块数量，搭建框架
    20.1.3  确定尺寸
  20.2  店招/导航栏设计
    20.2.1  设计前的构思
    20.2.2  操作步骤
  20.3  全屏海报设计
    20.3.1  设计前的构思
    20.3.2  操作步骤
  20.4  宝贝列表设计
    20.4.1  设计前的构思
    20.4.2  操作步骤
  20.5  详情页设计
    20.5.1  首焦海报设计
    20.5.2  产品基本信息栏设计
    20.5.3  产品细节展示栏设计
    20.5.4  售后说明栏设计
  20.6  页尾设计
    20.6.1  设计前的构思
    20.6.2  操作步骤
  20.7  优惠券设计
    20.7.1  设计前的构思
    20.7.2  操作步骤
  20.8  客服中心栏设计
    20.8.1  设计前的构思
    20.8.2  操作步骤
  20.9  直通车图设计
    20.9.1  设计前的构思
    20.9.2  操作步骤
  20.10  钻展图设计
    20.10.1  设计前的构思
    20.10.2  操作步骤
  拓展练习：坚果零食店铺的首页设计
第21章  移动端店铺的装修技巧与方法
  21.1  移动端店铺装修的常用模块详解
    21.1.1  店招模块
    21.1.2  智能宝贝模块
    21.1.3  美颜切图模块
    21.1.4  图片模块
    21.1.5  焦点图模块
    21.1.6  自定义模块
  21.2  移动端店铺的装修流程
    21.2.1  登录淘宝网
    21.2.2  进入装修页面
    21.2.3  装修首焦海报页面　
    21.2.4  装修优惠券页面
    21.2.5  装修宝贝展示页面
  实战：移动端化妆品店铺装修案例详解
  拓展练习：装修移动端坚果零食店铺的首页
第22章  代码的知识与制作方法
  22.1  认识Dreamweaver
    22.1.1  菜单栏
    22.1.2  插入栏
    22.1.3  文档工具栏
    22.1.4  文档窗口
    22.1.5  属性栏
  22.2  Dreamweaver常用功能解析
    22.2.1  HTML标签的使用
    22.2.2  Div的布局
  实战：制作弹出层代码
  实战：制作手风琴代码
  实战：制作倒计时代码
  实战：制作旋转木马代码
  拓展练习：制作一个倒计时效果的海报