Photoshop 淘宝店面设计从入门到精通电子书

前言

第01章 PhotoShop CC设计淘宝店面的4项基本常识

1.1 设计师必知的Photoshop CC软件7项新功能

1.1.1 无损缩放让大图、小图都清晰

1.1.2 消除抖动，让宝贝更靓丽

1.1.3 圆角矩形及CSS复制

1.1.4 形状和路径的应用更简单

1.1.5 智能移除，让页面宝贝更突出

1.1.6 径向滤波器，让宝贝尽显魅力

1.1.7 更智能化的切图功能

1.2 确定店面尺寸的3个重要事项

1.2.1 淘宝界面设计的两个重要概念要知晓

1.2.2 灵活改变画布的大小

1.2.3 淘宝店面设计中常用的图像尺寸

1.3 淘宝店面图像设计应知的3项常识

1.3.1 新建文件，你真的了解吗

1.3.2 了解图像的保存格式很重要

1.3.3 Web图像优化的3个关键点

1.4 裁剪图像的3种方法

1.4.1 图像裁切的3个技巧

1.4.2 基本裁切

1.4.3 透视裁剪

1.4.4 标尺与参考线的应用

第02章 淘宝店面设计必知的6件事情

2.1 淘宝店面设计中的4种视觉设计元素

2.1.1 点元素

2.1.2 线元素

2.1.3 面元素

2.1.4 花纹和图案

2.2 淘宝店面设计应该遵循的4种创意原则

2.2.1 给浏览者一个好的印象：界面布局要美观

2.2.2 主题明确 主体突出

2.2.3 统一性

2.2.4 直观 简洁

2.3 用户体验设计两个要点

2.3.1 产品图片设计需要注意的6个问题

2.3.2 产品详情页面设计的3项要点

2.4 人气店面设计的5条秘籍

2.4.1 店招，不得不说的秘密

2.4.2 横幅海报，不可替代的视觉表现区

2.4.3 导航与分类设计的要点：清晰、简单

2.4.4 提升单击量的隐形推手：正确的选用素材

2.4.5 细节展示的技巧要知道：排顺序

2.5 设计师必须知道的8种设计构图

2.5.1 中心构图

2.5.2 三角形构图

2.5.3 黄金分割构图

2.5.4 九宫格构图

2.5.5 框架式构图

2.5.6 放射式构图

2.5.7 并置式构图

2.5.8 对称式构图

2.6 淘宝店面设计中常用的3种基本构图技巧

2.6.1 对比

2.6.2 对称

2.6.3 反复

第03章 淘宝店面中的7种主要元素

3.1 淘宝店面中的7种主要元素

3.1.1 店铺标志

3.1.2 店招

3.1.3 导航

3.1.4 公告

3.1.5 促销栏

3.1.6 宝贝展示

3.1.7 宝贝描述

3.2 淘宝店面元素设计的11个重要知识点提炼

3.2.1 修复图像

3.2.2 修补图像

3.2.3 内容感知

3.2.4 图层的原理在店面设计中的3个应用技巧

3.2.5 图层的不透明度

3.2.6 图层蒙版

3.2.7 合并图层与盖印图层

3.2.8 文字字符的栅格化

3.2.9 形状工具在网店界面设计中的4点应用技巧

3.2.10 形状图层的高级应用技巧

3.2.11 选框工具的使用

第04章 淘宝店面设计的7大设计误区

4.1 淘宝店面设计的7大设计误区

4.1.1 杂乱

4.1.2 过多的说明文字

4.1.3 关联推荐商品太多

4.1.4 主体海报设计缺乏创意和吸引力

4.1.5 主要推荐商品没有“跳”出来

4.1.6 商品陈列的无序

4.1.7 信息传递的不明确性

4.2 设计优秀界面的入门必修课：抠图常用的4种方法

4.2.1 磁性套索抠图

4.2.2 钢笔工具抠图

4.2.3 使用通道和蒙版抠图

4.2.4 使用其他插件抠图

4.3 重要知识点索引：创建精准选区的5个重要知识点

4.3.1 创建选区一定要精准

4.3.2 基于色调差异创建选区：魔棒与快速选择工具

4.3.3 选区操作中的加减运算

4.3.4 “调整边缘”不得不提的重点技巧

4.3.5 通道与蒙版：不得不说的黑白灰

4.4 创建商品倒影的4种常用技巧

4.4.1 平面水平类商品的倒影

4.4.2 酒饮类商品的倒影

4.4.3 45°放置的商品的倒影

4.4.4 重叠放置的商品的倒影

第05章 淘宝店面中常见的5种装饰性元素

5.1 淘宝店面中常见的5种装饰性元素

5.1.1 书法与文化元素

5.1.2 线框

5.1.3 按钮

5.1.4 标签

5.1.5 指引标示

5.2 5则装饰性元素的设计案例

5.2.1 书法与文化

5.2.2 线框

5.2.3 按钮

5.2.4 标签

5.2.5 指引标示

5.3 重要知识点提炼：常用形状工具的另类讲解

5.3.1 巧用形状让页面信息更有逻辑

5.3.2 巧用图形让页面信息更有说服力

5.3.3 图形与色彩“结亲”

5.3.4 图形之间的“1+1”

第06章 淘宝店面中“吸引眼球”的7种形式

6.1 淘宝店面中“吸引眼球”的7种形式

6.1.1 视觉层次

6.1.2 色彩的妙用

6.1.3 文字

6.1.4 标示

6.1.5 光影效果

6.1.6 边框

6.1.7 留白

6.2 增强店面视觉营销效果的4种策略

6.2.1 减少画面中需要浏览者记忆的材料数量

6.2.2 遵循基本的视觉浏览习惯

6.2.3 增加视觉刺激的维度

6.2.4 选择最直观、最直接的表现形式

6.3 5则商品促销广告的设计

6.3.1 用色彩吸引注意力：男士手表促销广告

6.3.2 用文字吸引注意力：“双11”商城促销广告

6.3.3 用边框来聚焦注意力：户外鞋促销广告

6.3.4 用小巧的标签吸引注意力：手机打折广告

6.3.5 用色彩渐变吸引注意力：羽绒服促销广告

6.4 常用工具另类讲解：10个重要知识点

6.4.1 模糊与锐化

6.4.2 加深与减淡

6.4.3 源与目标对象

6.4.4 图像的智能修复

6.4.5 纹理与图案

6.4.6 复制与粘贴

6.4.7 选区变换与对象变化的区别

6.4.8 遮盖与擦除有差异吗

6.4.9 版面规划的两个重要工具

6.4.10 页面元素的管理：图层分组

第07章 淘宝店面设计中的色彩知识

7.1 色彩在店面设计中的3个作用

7.1.1 渲染店面的特定氛围

7.1.2 字体与色彩相互配合

7.1.3 引导主次关系

7.2 常见的5类行业配色方案

7.2.1 休闲款女装店

7.2.2 美容化妆品店

7.2.3 家居电器店

7.2.4 男性商品店

7.2.5 童装店

7.3 店面设计的3种配色秘籍

7.3.1“偷学”皇冠店铺的配色技巧

7.3.2“偷学”产品的标志用色

7.3.3 储备2个常用的配色网站

7.4 色彩调和的4种常用方法

7.4.1 同种色调和

7.4.2 邻近色调和

7.4.3 对比色调和

7.4.4 渐变色调和

7.5 重要知识点提炼：Photoshop CC色彩的7种应用技巧

7.5.1 巧妙设置色彩的明度

7.5.2 巧妙设置色彩的饱和度的两种方法

7.5.3 高效调整色彩的方法

7.5.4 掌握渐变填充的技巧

7.5.5 快速确定配色方案的利器：Kuler工具

7.6 店招设计的5则案例

7.6.1 店招设计的5个注意事项

7.6.2 借用“点”的魅力设计男鞋店铺的店招

7.6.3 凸显店铺主题的女鞋店招设计

7.6.4 色彩与活动主题呼应的卫浴店铺的店招设计

7.6.5 突出促销功能的包包店铺的店招设计

7.6.6 高品质品牌男装店铺的店招设计

第08章 淘宝店面的LOGO设计

8.1 认识网店LOGO：视觉营销的核心点

8.1.1 网店LOGO承担的两个主要作用

8.1.2 网店LOGO的3种常见类型

8.1.3 网店LOGO设计常见的3种误区

8.2 LOGO设计常用的6种方法

8.2.1 将笔画转换为曲线

8.2.2 字与形共存

8.2.3 直接使用店铺的名称

8.2.4 借用七巧板

8.2.5 修减

8.2.6 巧用字母和数字

8.3 LOGO设计的5个步骤

8.3.1 店铺的经营思路不同，设计效果有区别

8.3.2 提炼网店LOGO的创意很重要

8.3.3 草稿的绘制与改进

8.3.4 色彩的应用

8.3.5 正稿的设计

8.4 网店LOGO设计案例5则

8.4.1 简单图形的妙用：餐饮（休闲食品）店铺LOGO设计

8.4.2 首写字母的魅力：男士领带店铺LOGO设计

8.4.3 文字的局部变形：母婴用品店LOGO设计

8.4.4 删减与统一：皮具用品店LOGO设计

8.4.5 蒙版的奥妙：女式服饰店动态LOGO的设计

8.5 网店LOGO设计的5个重要知识点提炼

8.5.1 翻转

8.5.2 旋转

8.5.3 复制与缩放

8.5.4 斜切与扭曲

8.5.5 透视

第09章 淘宝店面中情感文字的设计

9.1 淘宝店面中文字设计的4条基本原则

9.1.1 页面文字的易读是必须的

9.1.2 文字编排的美感很关键

9.1.3 文字设计的鲜明风格很重要

9.1.4 文字设计要有一定的创造性

9.2 淘宝店面中的3种文字类型

9.2.1 分类导航文字

9.2.2 标题文字

9.2.3 促销文字

9.3 文案设计的4种重要技巧

9.3.1 深度关注商品的特征

9.3.2 整合优点

9.3.3 利益，吸引客户的法宝

9.3.4 信任，成单的通行证

9.3.5 营销文案，我们应该这样写

9.4 5种情感文字的设计案例

9.4.1 提升视觉冲击力：背景图案的衬托

9.4.2 光影的运用：质感的标题艺术字

9.4.3 氛围清晰的促销字

9.4.4 运用构图原理制作促销文案

9.4.5 运用图层原理快速设计促销立体字

9.5 文字、文案设计的6个重要知识点提炼

9.5.1 你真的会用“字符”吗

9.5.2 你真的会用“段落”吗

9.5.3 风格化滤镜组

9.5.4 渲染滤镜组

9.5.5 图层蒙版

9.5.6 剪贴蒙版

第10章 店铺促销海报设计与导航设计

10.1 首先需要明白促销海报设计的内容是什么

10.2 促销海报经常使用的5个版式

10.3 设计促销海报必须知道的7个细节

10.3.1 设计的主体必须要突出

10.3.2 信息的编排层次要清晰

10.3.3 目标消费对象的视觉审美特点要知晓

10.3.4 标签和按钮不可少

10.3.5 掌握色彩搭配的“631”很重要

10.3.6 更有吸引力产品需要怎样调整色彩和色调

10.3.7 如何设计恰当的背景更有影响力

10.4 促销海报设计6则实例

10.4.1 光影营造氛围：一则家用电器的海报设计

10.4.2 整合素材的技巧：一则沐浴露产品的海报设计

10.4.3 凸显产品的质感：一款男士皮鞋海报设计

10.4.4 借用背景色与产品色:化妆品海报设计

10.4.5 为产品注入个性：皮草促销海报设计

10.4.6 借用光影提升产品质感：男士皮带海报设计

10.5 重要知识点提炼：关于海报设计的9个重要知识点索引

10.5.1 外部图像的置入

10.5.2 网店图像色彩的明度解析

10.5.3 曲线的奥妙：图像色彩3属性的调节

10.5.4 还原宝贝的真实色彩：色彩平衡

10.5.5 调节网页图像色调和通透度的技巧

10.5.6 锐化：宝贝图像输出不可或缺的细节

10.5.7 快速提取图像的白场和黑场

10.5.8 透视变形：图像的透视校正

10.5.9 镜头模糊滤镜：让商品的主体更突出

10.6 掌握宝贝色调调整的5种技巧

10.6.1 让“宝贝”的色调更通透：电饭锅调色

10.6.2 让美味更有味：食品调色

10.6.3 还原商品的原貌：皮包（箱）色彩调整

10.6.4 色彩的多变：校正服饰的颜色

10.6.5 饰品调色：色彩叠加的技巧

10.7 导航的设计

10.7.1 导航设计要注意4个基本要求

10.7.2 必须知道淘宝店面的4种导航要素

10.7.3 从浏览者角度设计导航，我们必须注意两点

10.7.4 导航设计需要掌握的4点技巧

第11章 淘宝店面设计常用的5个拓展工具

11.1 设计师的网页配色利器：Color Scheme Designer

11.2 Xara 3D：轻松制作三维立体字

11.3 Flame_Painter：快速制作网页中的光影

11.4 Photoshop精密抠图插件：Vertus Fluid Mask

11.5 支持矢量图浏览的软件：ST Thumbnails Explorer

第12章 女鞋店铺首页设计的完全案例

12.1 创造浏览者的第1眼印象

12.1.1 设计“情调”，提升购物的欲望

12.1.2 导航设计，给出消费的原因

12.1.3 作为设计师，应该知晓3种常见的店铺布局

12.1.4 首屏设计的5种类型很重要

12.2 恰当地分割页面的5个区域

12.2.1 顶部形象区

12.2.2 首屏吸引区

12.2.3 营造氛围的促销区

12.2.4 建立情感的交互区

12.2.5 不可忽略的页脚区

12.3 素材图像管理的3个技巧

12.3.1 制定素材图像设计的标准

12.3.2 素材的管理

12.3.3 边框的添加

12.4 女鞋店面设计案例

12.4.1 店铺的店招设计

12.4.2 店铺的导航设计

12.4.3 主体促销海报设计

12.4.4 热卖专区设计

12.4.5 特色产品区的设计

12.4.6 短鞋区的设计

12.4.7 别致蕾丝&长鞋区的设计

12.4.8 店铺的页脚设计

第13章 商品描述页的设计

13.1 详情页设计的5个W

13.1.1 产品是什么

13.1.2 好在哪里

13.1.3 为什么要买

13.1.4 “我”为什么要在这里买

13.1.5 为什么现在就要买

13.2 详情页设计的3个关键点

13.2.1 浏览者关注的部位一定要注意

13.2.2 用对比展现产品的品质

13.2.3 产品细节与主要原料相关联

13.3 商品描述页需要关注的4个编排要点

13.3.1 版面的层次设计

13.3.2 文案排版的条理性

13.3.3 重点词汇的突出性

13.3.4 色彩选择的连贯性

13.4 设计过程

13.4.1 商品的基本信息区域设计

13.4.2 卖点解析

13.4.3 产品主要卖点展示

13.4.4 设计手稿

13.4.5 产品展示部分的设计

13.4.6 模特穿试

13.4.7 产品参数及细节展示

13.4.8 尺码设计

13.4.9 关联商品区域的设计