第01章 Photoshop CC设计网页的4项基本常识 16
1.1 网页设计师必知的Photoshop CC软件4项新功能 16
1.1.1 图像的无损缩放与清晰化处理 16
1.1.2 清除拍摄抖动对照片的影响 17
1.1.3 圆角矩形及CSS复制 18
1.1.4 多重形状和路径选择 20
1.2 网页设计中常用的尺寸 21
1.3 网页图像的4项基础知识 22
1.3.1 网页图像的大小 22
1.3.2 网页图片格式 22
1.3.3 Web图像优化的3个关键点 23
1.3.4 网站效果图的切图 23
1.4 图像颜色模式 25
1.4.1 网页设计应知的4种色彩模式 25
1.4.2 色彩模式的选择 26
第02章 网站策划必知的6项要点 28
2.1 网站的主题一定要明确 28
2.1.1 按照用户类型确定表现形式 28
2.1.2 明确的主题清晰的内容 29
2.2 分析背景材料3种途径 29
2.2.1 网站所属行业的资料分析 29
2.2.2 同类网站及竞争对手网站的分析 30
2.2.3 背景资料的自我积攒 31
2.3 网页设计的本质 31
2.4 用户体验设计4个要点 32
2.4.1 简单 32
2.4.2 易用 33
2.4.3 信任 34
2.4.4 可访问性 34
2.5 达到“设计”目的的5个要点 35
2.5.1 网站策划书 35
2.5.2 网页界面设计的4个切入点 36
2.5.3 导航的设计 36
2.5.4 “宣传口号”的作用 37
2.5.5 网页内容安排技巧 37
2.6 网站文案写作的4项技巧 38
2.6.1 良好的标题 38
2.6.2 清晰的结构 38
2.6.3 包含一定的情感 39
2.6.4 用户可以得到的好处 40
第03章 网页中的6种主要元素 42
3.1 网站标志 42
3.2 标题 42
3.3 副标题 43
3.4 视觉焦点 43
3.5 营销文案 44
3.6 联系方式 44
3.7 重要知识点提炼 45
3.7.1 快速制作网页背景的光影效果：图层的原理 45
3.7.2 快速提升网页设计的效率：移动与链接图层（样式） 46
3.7.3 提升设计的细节：图层样式的3点不足与解决方案 47
3.7.4 提升设计的细节与效率：盖印图层 49
3.7.5 网页设计中的“高富帅”：不透明度与填充 50
3.7.6 展示不同的网页设计方案：图层命名与图层复合 50
3.7.7 遮盖网页图像中的瑕疵：图层蒙版 52
3.7.8 调整网页图像局部的技巧：剪贴蒙版的图层结构 53
3.7.9 网页界面中的清晰线条：矢量线 54
3.7.10 网页中华丽线条的绘制技巧：再谈“描边路径” 56
第04章 网页界面合理布局的12个要点 59
4.1 网页界面结构布局的技巧 59
4.2 网页布局的5条基本原则 59
4.2.1 协调 59
4.2.2 一致 59
4.2.3 醒目 60
4.2.4 可读性 60
4.2.5 强调 60
4.3 网页界面设计常用的4种方法 61
4.3.1 直观的方法：栏目分割 61
4.3.2 严谨的设计方法：网格布局 61
4.3.3 炫耀的设计方法：色彩布局法 62
4.3.4 直接的设计方法：标志拓展法 62
4.4 网页布局方法及思路 62
4.4.1 网页布局方法及思路 62
4.4.2 分析目标对象 63
4.4.3 设置页面板块 64
4.4.4 修改与细化页面板块 64
4.5 网站首页规划的4个要点 64
4.5.1 配色方案的制定 64
4.5.2 网页内容的设计一定要有效 65
4.5.3 首页布局分布的4点经验 65
4.5.4 素材的准备 66
4.6 网站界面设计的4个基本步骤 67
4.6.1 网页的头部设计 67
4.6.2 网页的导航设计 67
4.6.3 网页的banner设计 68
4.6.4 网页的主体区域设计 68
4.6.5 网页的尾部设计 69
4.7 重要知识点提炼：5种常用工具的另类讲解 69
4.7.1 网页设计中描边的秘密：从“先选择，后操作”说起 69
4.7.2 制作网页设计中的高光：选区操作中的布尔运算 71
4.7.3 网页设计中漂亮的边线：“蚂蚁线”的2个小秘密 71
4.7.4 虚实之间的奥秘：路径与选区之间的转换 73
4.7.5 选择网页图像中的高光和阴影 73
4.8 页面布局中的常见4种指示性元素 74
4.8.1 图标 74
4.8.2 标签 75
4.8.3 指示线 75
4.8.4 色彩和闪动 75
4.8.5 折角 76
4.9 重要知识点提炼 76
4.9.1 通道到底是个什么东西 76
4.9.2 从黑和白说起 78
4.9.3 抠图与去背 79
4.10 页面布局中视觉焦点创建的5种方法 83
4.10.1 色彩 83
4.10.2 图像 83
4.10.3 光影 84
4.10.4 轮廓边框 84
4.10.5 标签与文字 85
4.11 重要知识点提炼 85
4.11.1 网页图形设计的关键点：矢量路径与锚点 85
4.11.2 万“线”归一：直线、曲线和折线的相互转换 87
4.11.3 为网页中的“线”段美容：路径的描边和填充 88
4.11.4 网页设计中的形状与自定义形状 89
4.11.5 变换与对齐 90
4.11.6 对象的变形与保护 93
4.11.7 关于复制的妙用 94
4.11.8 智能切图 95
4.11.9 从PSD文件生成应用于移动设备的图像资源 96
第05章 网页设计中的色彩知识（基础篇） 99
5.1 色彩的3个基本属性 99
5.1.1 色相 99
5.1.2 明度 99
5.1.3 饱和度 100
5.2 彩色的心理感觉 100
5.3 色彩在网页中的3个重要作用 103
5.3.1 营造网站的氛围 103
5.3.2 视觉区域和信息展示区域的划分 104
5.3.3 引导主次关系 104
5.4 网页中的4种色彩 106
5.4.1 背景色 106
5.4.2 文案的色彩 106
5.4.3 多媒体元素的色彩 107
5.4.4 串联色 107
5.5 重要知识点提炼：色彩的4种应用表现 108
5.5.1 色彩明度的两种应用技巧 108
5.5.2 设置色彩的饱和度的两种方法 109
5.5.3 精确选择颜色的两种方法 111
5.5.4 如何快速获得网页界面设计的配色方案 111
5.6 色彩应用案例解析 112
第06章 网页设计中的色彩知识（提高篇） 120
6.1 色彩的色调 120
6.1.1 色彩的主次 120
6.1.2 色彩的冷暖 120
6.1.3 按页面中色彩的色相分 121
6.2 色彩对比的6种形式 121
6.2.1 色相对比 121
6.2.2 纯度对比 121
6.2.3 明暗对比 122
6.2.4 补色对比 122
6.2.5 冷暖对比 122
6.2.6 面积对比 123
6.3 色彩调和的4种常用方法 123
6.3.1 同种色调和 123
6.3.2 邻近色调和 124
6.3.3 对比色调和 124
6.3.4 渐变色调和 124
6.4 网页色彩搭配的4个基本原则 125
6.4.1 色彩的独特性 125
6.4.2 色彩的鲜明性 125
6.4.3 色彩的适用性 125
6.4.4 色彩的联想性 126
6.5 重要知识点提炼 126
6.5.1 利用色彩突出主体 126
6.5.2 利用色彩烘托氛围 127
6.5.3 边线配色的两个技巧 127
6.5.4 Kuler工具的应用 128
6.5.5 渐变填充 130
6.6 色彩应用案例解析 133
第07章 网站的logo设计 140
7.1 常见logo的3种类型 140
7.1.1 汉字（字母）与数字型 140
7.1.2 图形 140
7.1.3 卡通动漫型 141
7.2 logo设计的15种常用方法 142
7.2.1 反白 142
7.2.2 局部调节 142
7.2.3 连笔 142
7.2.4 情趣 143
7.2.5 拉近距离 143
7.2.6 壮男淑女 144
7.2.7 用i点睛 144
7.2.8 笔画截肢 144
7.2.9 飘逸 145
7.2.10 巧用字母（数字） 145
7.2.11 巧用涟漪 146
7.2.12 七上八下 146
7.2.13 巧用镜像 146
7.2.14 “O”的巧用 147
7.2.15 框的巧用 147
7.3 logo设计的5个步骤 148
7.3.1 调查与研究 148
7.3.2 创意构思 148
7.3.3 草稿的绘制 148
7.3.4 深化与改进 148
7.3.5 色彩的应用 149
7.3.6 正稿的设计 149
7.4 常见6类网站的logo设计案例 149
7.4.1 购物商城类网站的logo设计 150
7.4.2 餐饮类网站logo设计 150
7.4.3 教育培训网站的logo设计 152
7.4.4 医疗健康网站的logo设计 153
7.4.5 数码家电类网站的Logo设计 154
7.4.6 旅游网站的Logo设计 155
7.5 关于网站标志设计的7个重要知识点提炼 156
7.5.1 描边 156
7.5.2 羽化 158
7.5.3 不透明度 160
7.5.4 填充 161
7.5.5 容差 162
7.5.6 自定义图案 163
7.5.7 自定义笔刷 164
第08章 网页中情感文字的设计 166
8.1 文字设计的4个基本原则 166
8.1.1 文字的可读性 166
8.1.2 鲜明的风格特征 166
8.1.3 在设计上要富于创造性 167
8.2 5种情感文字的设计案例 167
8.2.1 光影的运用：质感的标题艺术字 167
8.2.2 等高线的奥秘：金属质感文字 172
8.2.3 色彩亮度的运用：干净通透的网页特效字 175
8.2.4 此阴影与彼阴影的区别：小伙伴文字 177
8.2.5 为文字的边缘添加图层样式：游戏网站的锈迹文字 182
8.3 重要知识点提炼：网页文字设计的3个重要技巧 185
8.3.1 为标题艺术字添加阴影 185
8.3.2 为标题艺术字添加发光 187
8.3.3 为标题艺术字添加透视 188
8.4 网页排版需要注意的4个问题 189
8.4.1 什么是Web字体 189
8.4.2 文字排版的层次性 190
8.4.3 文字排版的条理性 191
8.4.4 重点词汇的突出性 192
8.5 6个重要知识点提炼 192
8.5.1 字体的选择 192
8.5.2 字号的大小 193
8.5.3 文字的修饰 194
8.5.4 段落编排的技巧 194
8.5.5 特殊字符的平衡 196
8.5.6 网页排版字体解决方案：微软雅黑＋宋体 196
第09章 网页Banner的设计 198
9.1 网页Banner设计需要注意的7个要点 198
9.1.1 主题明确 198
9.1.2 目标要明确 198
9.1.3 符合视觉阅读习惯 199
9.1.4 版式布局要合理 199
9.1.5 色彩的搭配与选择 200
9.1.6 具有点击的欲望 200
9.1.7 留白的使用 200
9.2 网页Banner设计7则实例 200
9.2.1 教育培训Banner设计：图形与文字构建版式的平衡 201
9.2.2 地产网站Banner设计：用网站界面凸显宽敞的空间 203
9.2.3 电商网站Banner设计：借用背景色与产品色 206
9.2.4 咨询服务行业的Banner：体现干净简练的行业特征 210
9.2.5 家装网站Banner设计：展现替客户着想的理念 213
9.2.6 电商网站Banner设计：搭建场景的技巧 215
9.2.7 婚纱摄影网站Banner设计：讲述浪漫的故事 219
9.3 网页图像调整的9个重要知识点提炼 222
9.3.1 网页界面设计中为什么要“置入”图像 222
9.3.2 网页图像不可或缺的锐化 223
9.3.3 网页图像中明暗调的对比 223
9.3.4 网页图像精美的关键点：瑕疵修复 224
9.3.5 网页图像色彩3属性的调节 226
9.3.6 网页图像色彩多变的秘密 228
9.3.7 调节网页图像色调和通透度的技巧 230
9.3.8 选用恰当网页图像的3个关键点 232
9.3.9 智能对象与智能滤镜 233
9.4 导航的设计 234
9.4.1 网页导航的3个主要功能 234
9.4.2 页面导航设计的4个基本技巧 235
9.5 导航设计需要考虑的4个小问题 237
9.5.1 注意导航条的颜色 237
9.5.2 注意导航的位置 237
9.5.3 导航的文字选择 237
9.5.4 注意鼠标滑过的效果 238
9.6 网页导航设计4则实例 238
9.6.1 眼镜销售网站的二级导航设计：柔和的背景 238
9.6.2 垂直导航条的设计：巧妙地运用色彩的对比 241
9.6.3 突破极限的酒店导航设计：逆向思维 244
9.6.4 服饰网站导航 248
9.7 提升设计质量的7个重要知识点 251
9.7.1 创造材质 252
9.7.2 创造倒影效果的3种常用方法 254
9.7.3 外发光和内发光 256
9.7.4 斜面浮雕与浮雕效果 257
9.7.5 渐变叠加与颜色叠加 258
9.7.6 精准定位“镜头光晕”的位置 258
9.7.7 透明玻璃 259
第10章 网页设计中的5个拓展工具软件 261
10.1 设计师的网页配色利器：Color Scheme Designer 261
10.2 Xara 3D：轻松制作三维立体字 262
10.3 Flame_Painter：快速制作网页中的光影 263
10.4 Photoshop精密抠图插件：Vertus Fluid Mask 265
10.5 支持矢量图浏览的软件：ST Thumbnails Explorer 266
第11章 页面布局与用户体验的5个“必须” 268
11.1 必须了解用户的浏览习惯 268
11.1.1 浏览习惯 268
11.1.2 浏览习惯对网站改版的影响 268
11.2 必须了解用户的浏览线路 269
11.3 必须明确网站视觉信息的3个传递技巧 269
11.3.1 严格限制需要记忆的材料数量 269
11.3.2 选用最直接的表现形式 270
11.3.3 用好关键的“文字”符号 270
11.4 数据对页面设计的两点影响 271
11.4.1 设计师应知晓用户密集浏览的区域 271
11.4.2 合理地确定网站界面的布局形式 271
11.5 必须学会网格系统的应用技巧 271
11.5.1 网格系统的4个优点 271
11.5.2 与网格系统有关的两个关键知识点 273
第12章 两则品牌营销类网站界面设计 277
12.1 创造浏览者的第一印象 277
12.1.1 专业 277
12.1.2 真实 278
12.1.3 简洁 278
12.1.4 必要的交互 278
12.2 网站的策划 279
12.2.1 配色方案的制定 279
12.2.2 页面设计的4个特点 280
12.2.3 网站布局的3个模块 281
12.3 数码相机网站：光与影的巧妙结合 282
12.3.1 创建网页的基本结构 282
12.3.2 网页的导航设计 282
12.3.3 设计网站的Banner 284
12.3.4 设计网站的产品导航 289
12.3.5 设计网站的产品列表 290
12.3.6 设计网站的页脚 291
12.4 家纺网站：如何凸显品牌的特征 291
12.4.1 基本的布局设计 292
12.4.2 页面的顶部设计 292
12.4.3 设计导航 294
12.4.4 主体banner的设计 296
12.4.5 品牌优势简介区域设计 297
第13章 门户网站：突出网站布局的严谨性 303
13.1 行业分析 303
13.2 内容分析 304
13.2.1 总体规划 304
13.2.2 文字的排列方式 304
13.2.3 编排的视觉流程 304
13.2.4 非常重要的960网格系统 305
13.3 网站界面设计 306
13.3.1 确定网站界面的基本结构 306
13.3.2 制作页眉区域 306
13.3.3 制作内容区域 307
13.3.4 制作页脚区域 310
13.3.5 制作内容页面 310
第14章 交友网站——素材不同表现迥异 312
14.1 创造浏览者的第一印象 312
14.1.1 亲和力 312
14.1.2 易用 312
14.1.3 激动人心的色彩 313
14.2 网站的策划 313
14.2.1 配色方案的制定 313
14.2.2 网站的布局分布 313
14.3 详细制作过程分享 314
14.3.1 创建网站的基本结构 314
14.3.2 网站Banner图像的色调调整 314
14.3.3 设计导航与Banner 315
14.3.4 制作在线会员板块 318
14.3.5 设计疑难解答模块 318
14.3.6 设计细节的调整 318
第15章 优秀设计师的5种绝密武器 322
15.1 弄清楚您的浏览对象 322
15.2 细节的设计是对浏览者的一种尊重 322
15.3 敢于突破传统的思维 324
15.4 创意其实更需要基础知识的积累 324
15.4.1 基础的基础：借用七巧板 325
15.4.2 借用不同行业的表现技巧 326
15.5 从文学修辞入手 327
15.5.1 象征 327
15.5.2 双关 327
15.5.3 比喻 327
15.5.4 比拟 328
15.5.5 对比 328