PHOTOHOP网站UI设计 第2版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中的扁平化 14

1.4.1图标 14

1.4.2折角 15

1.4.3圆角 15

1.4.4徽章 16

1.4.5条纹 16

1.4.6标签 16

1.4.7装饰元素 17

1.4.8装饰背景 17

1.5移动端与计算机端网页UI区别 18

1.5.1界面不同 18

1.5.2位置不同 18

1.5.3操作习惯不同 18

1.5.4按钮状态不同 18

1.5.5信息布局不同 19

1.6网页设计命名规范 19

1.7专家支招 20

1.7.1网站建设流程 20

1.7.2什么是虚拟主机 20

1.8总结扩展 21

1.8.1本章小结 21

1.8.2举一反三——查看手机UI界面 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打开文件 28

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图像的拷贝与粘贴 39

实例 制作网页插图 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缩放图像 45

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色彩的冷暖 61

3.3.2色彩的软硬 62

3.3.3色彩的大小 63

3.3.4色彩的轻重 63

3.3.5色彩的活泼和端庄 63

3.3.6色彩的兴奋和沉稳感 64

3.3.7色彩的华丽和朴素感 64

3.4网页配色标准 65

3.4.1 Web安全色 65

3.4.2使用Web安全色调色板 65

3.5色彩中的功能角色 66

3.5.1主色 66

3.5.2背景色 66

3.5.3辅助色 67

3.5.4点缀色 67

3.6网页配色技巧 67

3.6.1配色原则 68

实例 制作简约网站主页 70

3.6.2确定网页主题色 73

3.6.3确定网页文本配色 74

实例 制作公司宣传主页 75

3.7网页风格影响配色 81

3.7.1冷暖配色 81

3.7.2白色的应用 82

3.7.3饱和度影响配色 82

3.8影响配色的元素 83

3.8.1根据行业特征选择网页配色 83

3.8.2根据色彩联想选择网页配色 84

3.8.3根据受众色彩偏好选择网页配色 85

3.8.4根据生命周期选择网页配色 87

3.9专家支招 89

3.9.1怎样提高对色彩的敏感度 89

3.9.2什么是色立体 89

3.10总结扩展 90

3.10.1本章小结 90

3.10.2举一反三——制作水族馆网站主页 90

第4章 网站页面布局与版式设计 91

4.1了解网页布局 92

4.1.1网页布局的目的 92

4.1.2网页布局的操作顺序 92

4.2计算机端常见的网页布局方式 93

4.2.1“国”字形 93

4.2.2 “ T””字形 94

4.2.3标题正文型 94

4.2.4左右分割型 95

4.2.5上下分割型 95

4.2.6 POP型 95

4.2.7封面型 96

实例 制作完整竖屏网页 96

4.2.8 Flash型 102

4.3移动端网页布局方式 103

4.3.1布局的类型 103

4.3.2布局的实现方式 104

4.3.3响应式布局 105

4.3.4响应式布局优缺点 108

4.4网页布局方法 108

4.4.1网页布局设计 108

4.4.2网页布局特征 109

4.4.3网页布局原则 109

实例 制作蛋糕店主页——顶部 111

实例 制作蛋糕店主页——主体 116

4.5根据整体内容决定网页布局 122

4.5.1左侧的网页布局 122

4.5.2水平居中的页面布局 123

4.5.3水平和居中的页面布局 123

4.5.4满屏的网页布局 124

4.6页面分割方式 124

4.6.1横向分割 124

4.6.2纵向分割 125

4.6.3复合分割 125

4.7运用固定区域的设置 126

4.8网页布局设计的连贯性和多样性 127

4.9专家支招 127

4.9.1网页界面设计的设计误区 128

4.9.2网页界面设计的设计理念 128

4.10总结扩展 128

4.10.1本章小结 128

4.10.2举一反三——制作简洁网页登陆界面 128

第5章 网站页面图像的优化与调整 130

5.1网站中的图像 131

5.1.1网站中使用的图片格式 131

5.1.2网站中的颜色模式 132

5.2图章工具的使用 133

5.2.1仿制图章的应用 133

实例 去除网页中的水印效果 133

5.2.2图案图章工具的应用 135

5.3修复网页中的图像 136

5.3.1污点修复画笔工具 136

实例 修复图像瑕疵 136

5.3.2修复画笔工具 138

5.3.3修补工具 139

5.3.4内容感知移动工具 139

5.3.5红眼工具 140

5.4自动调整图像色彩 140

5.4.1自动色调 140

5.4.2自动对比度 140

5.4.3自动颜色 141

5.5手动调整图像色彩 141

5.5.1亮度/对比度 142

实例 调整网页中的图像亮度 142

5.5.2色阶 145

5.5.3曲线 146

实例 执行“曲线”命令调整图像 147

5.5.4自然饱和度 149

实例 制作炫彩展示图 150

5.5.5色相/饱和度 153

5.5.6阴影/高光 153

实例 调整网页中的逆光图片 154

5.6填充和调整图层 158

5.6.1纯色填充图层 158

5.6.2渐变填充图层 158

5.6.3图案填充图层 159

5.7批处理 160

5.7.1动作 160

5.7.2自定义动作 161

5.8专家支招 161

5.8.1如何提高图像清晰度 161

5.8.2如何处理扫描图像 162

5.9总结扩展 162

5.9.1本章小结 162

5.9.2举一反三——批处理图像 162

第6章 网站页基本元素设计 164

6.1图标概述 165

6.1.1什么是图标 165

6.1.2图标在网页中的作用 166

6.1.3网页图标应用 166

6.2使用形状工具绘制图标 167

6.2.1矩形工具 167

实例 绘制时钟图标 168

6.2.2多边形工具 171

6.2.3形状的路径操作 171

实例 制作常用网页小图标 172

6.2.4自定义形状工具 174

实例 绘制天气图标 174

6.3按钮概述 176

6.3.1网页中按钮的常见类型 177

6.3.2网页中按钮的特点 178

6.3.3按钮的设计要点 180

实例 绘制质感网页图标 180

6.4图层样式的应用 184

6.4.1添加图层样式的方法 184

6.4.2斜面和浮雕 185

实例 绘制网页下载图标 186

6.4.3描边 189

6.4.4内阴影和投影 189

6.4.5内发光和外发光 190

6.4.6光泽 191

6.4.7颜色叠加、渐变叠加和图案叠加 191

实例 制作手游开始按钮 191

6.5 LOGO概述 195

6.5.1 LOGO作用 195

6.5.2 LOGO特性 196

6.5.3网站LOGO表现形式 196

实例 绘制影视网站LOGO 197

6.6专家支招 200

6.6.1图标的文件格式是什么 200

6.6.2 LOGO的设计流程是什么 200

6.7总结扩展 200

6.7.1本章小结 201

6.7.2举一反三——简约网页按钮 201

第7章 网站导航设计 202

7.1网站导航概述 203

7.2网站导航的作用 203

7.3网站导航的设计标准 203

7.4网站导航形式 204

7.4.1标签形式 204

7.4.2按钮形式 204

7.4.3弹出菜单形式 205

7.4.4无边框形式 205

7.4.5 Flash形式 205

7.4.6多导航系统形式 206

实例 绘制汉堡包网站导航条 206

7.5网站导航位置 209

7.5.1顶部导航 209

7.5.2底部导航 209

7.5.3左侧导航 210

实例 绘制网站左侧导航 210

7.5.4右侧导航 213

7.5.5中心导航 213

7.6网站设计的辅助操作 214

7.6.1标尺的使用 214

7.6.2创建精确参考线 214

实例 绘制精致导航条 215

7.7专家支招 218

7.7.1导航条的设计原则是什么 218

7.7.2交互式导航的优势和劣势 219

7.8总结扩展 219

7.8.1本章小结 219

7.8.2举一反三——制作游戏网站导航栏 219

第8章 网站广告设计 221

8.1网页广告条概述 222

8.1.1计算机端网页广告种类 222

8.1.2移动端网页广告种类 224

8.1.3广告条常见尺寸 226

8.1.4网站广告特点 227

实例 招聘网站广告条制作 228

8.2使用抠图工具合成广告条 231

8.2.1磁性套索工具 231

实例 制作万圣节广告 232

8.2.2快速选择工具 235

8.2.3魔棒工具 235

8.2.4钢笔工具 236

8.2.5快速蒙版工具 236

8.2.6调整边缘和精确选区 236

8.3修边 236

8.3.1移除白边和黑边 236

8.3.2“去边”命令 236

8.4画笔工具 237

8.5图层蒙版 237

8.5.1使用图层蒙版替换局部图像 238

8.5.2使用图层蒙版融合图像 238

8.5.3使用剪贴蒙版 238

8.6专家支招 239

8.6.1如何设计好广告条 239

8.6.2网站广告的表现形式有哪些 239

8.7总结扩展 240

8.7.1本章小结 240

8.7.2举一反三——制作面膜网站广告条 240

第9章 移动端网站UI设计 241

9.1移动端城市App界面 242

9.1.1界面分析 242

9.1.2色彩分析 242

实例 移动端城市App——广告条 242

实例 移动端城市App——主体 245

实例 移动端城市App——底部 248

9.2移动端企业网站界面 250

9.2.1界面分析 251

9.2.2色彩分析 251

实例 移动端企业网站界面——广告条 251

实例 移动端企业网站界面——主体 254

9.3专家支招 257

9.3.1响应式设计是否适合于专题设计 257

9.3.2先做计算机端页面还是手机端页面 257

9.4总结扩展 258

9.4.1本章小结 258

9.4.2举一反三——移动端网页宣传窗 258

第10章 计算机端网站UI设计 259

10.1计算机端视频类网站界面 260

10.1.1界面分析 260

10.1.2色彩分析 260

实例 计算机端设计类网站界面——顶部 260

实例 计算机端设计类网站界面——主体 263

实例 计算机端设计类网站界面——底部 267

10.2计算机端帅气游戏网站 268

10.2.1界面分析 268

10.2.2色彩分析 269

实例 计算机端帅气游戏网站——顶部 269

实例 计算机端帅气游戏网站——底部 274

10.3专家支招 277

10.3.1设计网页之前需要做什么 277

10.3.2网页设计的发展趋势是什么 277

10.4总结扩展 277

10.4.1本章小结 277

10.4.2举一反三——制作电脑端网页宣传栏 277