Photoshop 网站UI设计PDF电子书下载

第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