前 言
当前网络已经成为人们生活中不可或缺的一部分。同时网页设计也开始被众多企业和单位所重视，这就为网页设计人员提供了很大的发展空间。而作为从事相关工作的人员，必须掌握必要的操作技能，以满足工作的需要。
Photoshop作为目前非常流行的一款设计软件，凭借其强大的功能和易学易用的特性，深受广大设计师的喜爱。
内容安排
本书共分为10章，采用基础知识与应用案例相结合的方法，循序渐进地向用户介绍了移动端和网页端网站UI设计方法。各章中所包含的主要内容如下。
第1章 网站UI概述。主要介绍了什么是网站UI、网站UI设计原则、网页构成元素、扁平化在网页UI中的应用、移动端与计算机端网页UI的区别和网页设计命名规范等知识。
第2章 Photoshop基本操作。主要介绍了Photoshop基本操作、图像的复制与粘贴、图像裁剪、图像变换，以及还原与恢复操作等知识。
第3章 网站页面UI配色。主要介绍了色彩的基础知识、色彩在网页视觉设计中的作用、色彩的联想、配色标准、色彩中的功能角色、配色技巧和配色风格等知识。
第4章 网站页面布局与版式设计。主要讲解了移动端和计算机端网页布局方式、网页分割方式，以及网页布局设计的连贯性和多样性等知识。
第5章 网站页面图像的优化与调整。主要介绍了网站中的图像处理、修复网页中的素材图像、调整图像色彩、调整图层的应用和批处理命令等知识。
第6章 网站基本元素设计。主要介绍了图标、按钮和Logo的制作，以及形状工具和图层样式的应用等知识。
第7章 网站导航设计。主要介绍了什么是网站导航、网站导航形式、导航位置和网站设计的辅助操作等知识。
第8章 网站广告设计。主要介绍了什么是网站广告条、抠图工具的使用、修边操作、画笔工具和蒙版工具的使用等知识。
第9章 移动端网站UI设计。主要讲解了两款移动端页面界面的详细制作步骤，包括移动端网店销售界面和移动端企业网站界面设计。
第10章 PC端网站UI设计。主要讲解了两款PC端页面界面的详细制作步骤，包括PC端设计类网站界面和PC端帅气游戏网站界面设计。
本书特点
本书内容全面、结构清晰、实例新颖，采用理论知识与操作案例相结合的教学方式，全面地向用户介绍了不同类型元素的处理和表现的相关知识及所需的操作技巧。
通俗易懂的语言
本书采用通俗易懂的语言，全面地向用户介绍了移动端和PC端网站UI界面设计所需的基础知识和操作技巧，综合实用性较强，确保用户能够理解并掌握相应的功能与操作。
基础知识与操作案例相结合
本书摒弃了传统教科书式的纯理论式教学，采用了基础知识和操作实例相结合的讲解模式。
技巧和知识点的归纳总结
本书在基础知识和操作案例的讲解过程中列举了大量的提示和技巧。这些信息都是结合作者长期的UI设计经验与教学经验归纳出来的，可以帮助用户更准确地理解和掌握相关的知识点和操作技巧。
多媒体光盘辅助学习
为了增加用户的学习渠道，增强用户的学习兴趣，本书配有多媒体教学光盘。在教学光盘中提供了本书中所有实例的相关素材和源文件，以及书中所有实例的视频教学，使用户可以跟着本书制作出相应的效果，并能够快速应用于实际工作中。
用户对象
本书适合网页UI设计爱好者、想要进入UI设计领域的用户，以及设计专业的大中专学生阅读，同时对专业设计人士也有很高的参考价值。希望用户通过对本书的学习，能够早日成为优秀的网页UI设计师。
本书由张晨起执笔，另外张晓景、刘强、王明、王大远、刘钊、张艳飞、孟权国、杨阳、张国勇、于海波、范明、郑竣天、唐彬彬、李晓斌、王延南、张航、肖阂、魏华、贾勇、高鹏也参与了部分编写工作。本书在写作过程中力求严谨，由于时间有限，疏漏之处在所难免，恳请广大用户批评指正。
编 者
机工授权书
前言
第1章 网站UI概述 1
1.1 初识网站UI 2
1.1.1 什么是网页界面 2
1.1.2 网页界面的分类 2
1.1.3 网页界面的设计特点 4
1.2 网站UI设计原则 7
1.2.1 视觉美观 7
1.2.2 主题突出 8
1.2.3 整体性 8
1.2.4 为用户考虑 9
1.2.5 快速加载 10
1.3 网页的构成元素 10
1.3.1 文字 11
1.3.2 图像 11
1.3.3 超链接 12
1.3.4 多媒体 12
1.4 网页UI中的扁平化 13
1.4.1 图标 14
1.4.2 折角 14
1.4.3 圆角 15
1.4.4 徽章 15
1.4.5 条纹 16
1.4.6 标签 16
1.4.7 装饰元素 17
1.4.8 装饰背景 17
1.5 移动端与PC端网页UI的区别 17
1.5.1 精确度不同 17
1.5.2 位置不同 18
1.5.3 操作习惯不同 18
1.5.4 按钮状态不同 18
1.6 网页设计命名规范 18
1.7 专家支招 20
1.7.1 网站建设流程 20
1.7.2 什么是虚拟主机 20
1.8 总结扩展 21
1.8.1 本章小结 21
1.8.2 举一反三—排列网页小图标 21
第2章 Photoshop基本操作 23
2.1 什么是Photoshop 24
2.2 Photoshop的安装和启动界面 24
实例：Photoshop的安装和启动 24
2.3 Photoshop中的基本操作 26
2.3.1 新建文档 26
2.3.2 打开文件 27
2.3.3 保存文件 29
实例：制作精美的网页图标 30
2.3.4 文件的置入和导入 33
2.3.5 修改图像大小 34
2.3.6 修改画布大小 35
实例：调整网页尺寸 35
2.4 图像的复制与粘贴 37
2.4.1 图像的复制 37
实例：制作精美网页 38
2.4.2 图像的拷贝与粘贴 40
实例：制作网页插图 40
2.4.3 选择性粘贴 41
实例：制作网页展板 42
2.5 图像的裁剪 43
2.5.1 固定尺寸裁剪 43
2.5.2 利用辅助线裁剪 44
2.5.3 透视裁剪 44
2.6 图像的变换 45
2.6.1 移动图像 45
2.6.2 缩放图像 46
2.6.3 旋转图像 46
2.6.4 变形和透视 46
2.6.5 自由变换 47
实例：为网页制作广告插图 47
2.7 还原与恢复操作 49
2.7.1 还原与重做 49
2.7.2 前进一步与后退一步 49
2.7.3 恢复文件 49
2.8 专家支招 50
2.8.1 什么是矢量图像和位图图像 50
2.8.2 分辨率 50
2.9 总结扩展 51
2.9.1 本章小结 51
2.9.2 举一反三—制作简单的网页按钮 51
第3章 网站页面UI配色 52
3.1 色彩的基础知识 53
3.1.1 三原色 53
3.1.2 色彩视觉 54
3.1.3 色彩三要素 55
3.1.4 色彩的种类 57
3.1.5 色系 58
3.2 色彩在网页视觉设计中的作用 59
3.2.1 突出网页主题 59
3.2.2 划分视觉区域 60
3.2.3 吸引浏览者目光 60
3.2.4 增强网页艺术性 61
3.3 色彩的联想作用与心理效果 61
3.3.1 色彩的冷暖 62
3.3.2 色彩的软硬 63
3.3.3 色彩的大小 63
3.3.4 色彩的轻重 63
3.3.5 色彩的活泼和端庄 64
3.3.6 色彩的兴奋和沉稳感 64
3.3.7 色彩的华丽和朴素感 65
3.4 网页配色标准 65
3.4.1 Web安全色 65
3.4.2 使用Web安全色调色板 66
3.5 色彩中的功能角色 67
3.5.1 主色 67
3.5.2 背景色 67
3.5.3 辅助色 67
3.5.4 点缀色 68
3.6 网页配色技巧 68
3.6.1 配色原则 69
实例：制作简约网站主页 71
3.6.2 确定网页主题色 75
3.6.3 确定网页文本配色 75
实例：制作公司宣传主页 76
3.7 网页风格影响配色 83
3.7.1 冷暖配色 83
3.7.2 白色的应用 84
3.7.3 饱和度影响配色 84
3.8 影响配色的元素 85
3.8.1 根据行业特征选择网页配色 85
3.8.2 根据色彩联想选择网页配色 86
3.8.3 根据受众的色彩偏好选择网页配色 87
3.8.4 根据生命周期选择网页配色 89
3.9 专家支招 91
3.9.1 怎样提高对色彩的敏感度 91
3.9.2 什么是色立体 91
3.10 总结扩展 92
3.10.1 本章小结 92
3.10.2 举一反三—制作水族馆网站主页 92
第4章 网站页面布局与版式设计 94
4.1 了解网页布局 95
4.1.1 网页布局的目的 95
4.1.2 网页布局的操作顺序 95
4.2 PC端常见的网页布局方式 96
4.2.1 “国”字型 96
4.2.2 T字型 97
4.2.3 标题正文型 97
4.2.4 左右分割型 98
4.2.5 上下分割型 98
4.2.6 POP型 98
4.2.7 封面型 99
实例：制作画展网站首页 99
4.2.8 Flash型 106
4.3 移动端网页布局方式 107
4.3.1 布局的类型 107
4.3.2 布局的实现方式 108
4.3.3 响应式布局 109
4.3.4 响应式布局的优缺点 112
4.4 网页布局方法 112
4.4.1 网页布局设计 112
4.4.2 网页布局特征 113
4.4.3 网页布局原则 114
实例：制作蛋糕店主页——顶部 115
实例：制作蛋糕店主页——主体 121
4.5 根据整体内容决定网页布局 127
4.5.1 左侧的页面布局 127
4.5.2 水平居中的页面布局 128
4.5.3 水平和垂直居中的页面布局 128
4.5.4 满屏的页面布局 129
4.6 页面分割方式 129
4.6.1 横向分割 129
4.6.2 纵向分割 130
4.6.3 复合分割 130
4.7 运用固定区域的设置 131
4.8 网页布局设计的连贯性和多样性 132
4.9 专家支招 132
4.9.1 网页界面设计的设计误区 132
4.9.2 网页界面设计的设计理念 133
4.10 总结扩展 133
4.10.1 本章小结 133
4.10.2 举一反三—制作简洁网页登录界面 133
第5章 网站页面图像的优化与调整 135
5.1 网站中的图像 136
5.1.1 网站中使用的图片格式 136
5.1.2 网站中的颜色模式 138
5.2 图章工具的使用 138
5.2.1 仿制图章工具的应用 138
实例：去除网页中的水印效果 139
5.2.2 图案图章工具的应用 141
5.3 修复网页中的图像 141
5.3.1 污点修复画笔工具 141
实例：修复图像瑕疵 142
5.3.2 修复画笔工具 144
5.3.3 修补工具 144
5.3.4 内容感知移动工具 145
5.3.5 红眼工具 145
5.4 自动调整图像色彩 146
5.4.1 自动色调 146
5.4.2 自动对比度 146
5.4.3 自动颜色 147
5.5 手动调整图像色彩 147
5.5.1 亮度/对比度 147
实例：调整网页中图像亮度 148
5.5.2 色阶 150
5.5.3 曲线 151
实例：执行“曲线”命令调整图像 152
5.5.4 自然饱和度 155
实例：制作炫彩展示图 155
5.5.5 色相/饱和度 159
5.5.6 阴影/高光 159
实例：调整网页中逆光图片 160
5.6 填充和调整图层 163
5.6.1 纯色填充图层 164
5.6.2 渐变填充图层 164
5.6.3 图案填充图层 164
5.7 批处理 165
5.7.1 动作 166
5.7.2 自定义动作 166
5.8 专家支招 166
5.8.1 如何提高图像清晰度 166
5.8.2 如何处理扫描图像 167
5.9 总结扩展 167
5.9.1 本章小结 167
5.9.2 举一反三—批处理图像 167
第6章 网站基本元素设计 169
6.1 图标概述 170
6.1.1 什么是图标 170
6.1.2 图标在网页中的作用 171
6.1.3 网页图标的应用 171
6.2 使用形状工具绘制图标 172
6.2.1 矩形工具 172
实例：绘制时钟图标 173
6.2.2 多边形工具 176
6.2.3 形状的路径操作 177
实例：制作常用网页小图标 177
6.2.4 自定义形状工具 179
实例：绘制天气图标 179
6.3 按钮概述 181
6.3.1 网页中按钮的常见类型 182
6.3.2 网页中按钮的特点 183
6.3.3 按钮的设计要点 185
实例：绘制质感网页图标 186
6.4 图层样式的应用 189
6.4.1 添加图层样式的方法 189
6.4.2 斜面和浮雕 190
实例：绘制网页下载图标 191
6.4.3 描边 194
6.4.4 内阴影和投影 194
6.4.5 内发光和外发光 195
6.4.6 光泽 196
6.4.7 颜色叠加、渐变叠加和图案叠加 196
实例：制作手游开始按钮 197
6.5 Logo概述 200
6.5.1 Logo的作用 200
6.5.2 Logo的特性 201
6.5.3 网站Logo的表现形式 201
实例：绘制影视网站Logo 202
6.6 专家支招 205
6.6.1 图标的文件格式是什么 205
6.6.2 Logo的设计流程是什么 205
6.7 总结扩展 205
6.7.1 本章小结 206
6.7.2 举一反三—制作简约网页按钮 206
第7章 网站导航设计 207
7.1 网站导航概述 208
7.2 网站导航的作用 208
7.3 网站导航的设计标准 208
7.4 网站导航形式 209
7.4.1 标签形式 209
7.4.2 按钮形式 209
7.4.3 弹出菜单形式 210
7.4.4 无边框形式 210
7.4.5 Flash形式 210
7.4.6 多导航系统形式 211
实例：绘制女装网站导航条 211
7.5 网站导航位置 214
7.5.1 顶部导航 214
7.5.2 底部导航 214
7.5.3 左侧导航 215
实例：绘制网站左侧导航 215
7.5.4 右侧导航 218
7.5.5 中心导航 218
7.6 网站设计的辅助操作 218
7.6.1 标尺的使用 219
7.6.2 创建精确参考线 219
实例：绘制精致导航条 220
7.7 专家支招 223
7.7.1 导航条的设计原则是什么 223
7.7.2 交互式导航的优势和劣势分别是什么 224
7.8 总结扩展 224
7.8.1 本章小结 224
7.8.2 举一反三—制作游戏网站导航栏 224
第8章 网站广告设计 226
8.1 网页广告条概述 227
8.1.1 计算机端网页广告的种类 227
8.1.2 移动端网页广告种类 229
8.1.3 广告条的常见尺寸 231
8.1.4 网站广告的特点 232
实例：制作招聘网站广告条 233
8.2 使用抠图工具合成广告条 236
8.2.1 磁性套索工具 236
实例：制作圣诞节广告条 237
8.2.2 快速选择工具 240
8.2.3 魔棒工具 240
8.2.4 钢笔工具 240
8.2.5 快速蒙版工具 241
8.2.6 调整边缘和精确选区 241
8.3 修边 241
8.3.1 移除白边和黑边 241
8.3.2 “去边”命令 242
8.4 画笔工具 242
8.5 图层蒙版 242
8.5.1 使用图层蒙版替换局部图像 242
8.5.2 使用图层蒙版融合图像 243
8.5.3 使用剪贴蒙版 243
8.6 专家支招 244
8.6.1 如何设计好广告条 244
8.6.2 网站广告的表现形式有哪些 244
8.7 总结扩展 244
8.7.1 本章小结 245
8.7.2 举一反三—制作服装网站广告条 245
第9章 移动端网站UI设计 246
9.1 移动端网店销售界面 247
9.1.1 界面分析 247
9.1.2 色彩分析 247
实例：移动端网店销售界面——广告条 247
实例：移动端网店销售界面——主体 250
实例：移动端网店销售界面——产品推广 253
9.2 移动端企业网站界面 256
9.2.1 界面分析 256
9.2.2 色彩分析 256
实例：移动端企业网站界面——广告条 256
实例：移动端企业网站界面——主体 260
9.3 专家支招 263
9.3.1 响应式设计是否适合于专题设计 263
9.3.2 先做PC端页面还是手机端页面 263
9.4 总结扩展 263
9.4.1 本章小结 264
9.4.2 举一反三—制作移动端网页宣传窗 264
第10章 PC端网站UI设计 265
10.1 PC端设计类网站界面 266
10.1.1 界面分析 266
10.1.2 色彩分析 266
实例：PC端设计类网站界面——顶部 266
实例：PC端设计类网站界面——主体 269
实例：PC端设计类网站界面——底部 272
10.2 PC端帅气游戏网站界面 274
10.2.1 界面分析 275
10.2.2 色彩分析 275
实例：PC端帅气游戏网站界面——顶部 275
实例：PC端帅气游戏网站界面——底部 280
10.3 专家支招 283
10.3.1 设计网页之前需要做什么 283
10.3.2 网页设计的发展趋势是什么 283
10.4 总结扩展 283
10.4.1 本章小结 283
10.4.2 举一反三—制作PC端网页宣传栏 284
新书资讯