网页设计与开发殿堂之路PHOTOSHOP CC网站UI设计全程揭秘(第2版)

第1 章 网站UI 概述
1.1　了解网站UI 1
1.1.1　什么是网页界面 1
1.1.2　网页界面的分类 1
1.2　网站建设流程 1
1.2.1　域名注册 2
1.2.2　购买虚拟主机 2
1.2.3　确定网页设计 3
1.2.4　网站建设 3
1.2.5　网站测试 3
1.2.6　网站维护 4
1.3　网页设计的原则 4
1.3.1　视觉美观 4
1.3.2　主题明确 5
1.3.3　内容与形式相统一 5
1.3.4　快速加载 5
1.3.5　为用户考虑 6
1.4　网页的构成元素 6
1.4.1　文字 7
1.4.2　图像 7
1.4.3　色彩 7
1.4.4　多媒体 8
1.5　网页设计的命名规范 8
1.6　移动端UI 设计 9
1.6.1　移动端UI 设计概述 9
1.6.2　移动端和PC 端UI设计的区别 9 第2 章 Photoshop 基本操作
2.1　Photoshop 简介 12
2.2　Photoshop 的安装 12
实例1——安装Photoshop 12
2.3　Photoshop 的文件操作 13
2.3.1　新建文件 13
2.3.2　打开文件 14
2.3.3　保存文件 17
实例2——制作简单的网页图标 17
2.3.4　修改图像大小 19
2.3.5　修改画布大小 20
实例3——制作艺术小网页 20
2.4　裁剪图像 21
2.4.1　裁剪固定尺寸 21
2.4.2　透视裁剪 22
2.4.3　裁剪获得好的构图 22
2.5　图像的复制和粘贴 23
2.5.1　复制文档 23
实例4——制作网页背景 23
2.5.2　拷贝和粘贴 24
实例5——制作网页广告插图 24
2.5.3　选择性粘贴 25
实例6——制作茶叶广告 25
2.6　变换图像 26
2.6.1　移动图像 27
2.6.2　缩放图像 27
2.6.3　旋转图像 27
2.6.4　自由变换 28
实例7——制作网页广告 28
2.7　还原与恢复操作 29
第3 章 选区、形状和网站图标
3.1　网站图标的设计准则 30
3.2　网站图标的设计流程 30
3.3　规则选区创建标志 31
3.3.1　矩形选框工具 31
3.3.2　椭圆选框工具 31
实例8——制作简单的Logo 32
3.3.3　单行选框工具和单列选框工具 33
实例9——制作简单的音乐图标 33
3.4　填充与描边改变图标风格 34
3.4.1　油漆桶工具 35
实例10——制作绚丽彩块图标 35
3.4.2　填充 37
实例11——制作简单的立体图标 38
3.4.3　描边 40
实例12——制作美妙的音乐图标 40
3.5　使用渐变工具增加图标质感 42
3.5.1　渐变的类型 42
3.5.2　编辑类型 42
实例13——制作可爱的小鸟图标 43
3.6　使用形状工具创建图标 46
3.6.1　关于形状工具 47
3.6.2　多边形工具 47
实例14——制作质感图标 47
3.6.3　形状的加减 50
实例15——制作时尚按钮图标 51
3.6.4　自定义形状 54
3.7　使用Color 设置图标颜色 54
实例16——制作简单钟表图标 55
第4 章 图层与网页中的按钮
4.1　按钮的设计要点 58
4.2　按钮的应用格式 58
4.3　使用图案增加按钮的质感 59
实例17——制作水晶开关按钮 59
4.4　图层的基本操作 63
4.4.1　新建图层 63
4.4.2　复制图层 63
4.4.3　调整图层顺序 64
实例18——制作Twitter 按钮 65
4.4.4　使用不透明度和填充 68
实例19——制作简洁购买按钮 69
4.5　使用图层样式 72
4.5.1　调整图层样式 72
4.5.2　使用“投影”制作阴影效果 72
4.5.3　使用“描边”为按钮添加轮廓 73
实例20——制作简单可爱的按钮 73
4.5.4　使用“斜面和浮雕”制作立体效果 75
实例21——制作数据统计按钮 76
4.5.5　使用“内阴影”增加层次 79
实例22——制作圆形立体按钮 80
4.5.6　使用“内发光”和“外发光”制作发光效果 84
实例23——制作逼真的皮革按钮 84
4.6　使用画笔工具细化按钮 88
4.6.1　使用画笔工具 88
实例24——制作苹果应用商店按钮 88
4.6.2　设置画笔预设 92
4.7　图像的变换操作 93
4.7.1　图像的翻转 93
实例25——制作音量开关按钮 93
4.7.2　透视和扭曲 97
4.7.3　变形 97
第5 章 钢笔、文字和网站导航
5.1　导航和菜单的作用 98
5.2　导航的设计标准 98
5.3　网页设计的辅助操作 98
5.3.1　使用标尺 99
5.3.2　创建精确的参考线 99
实例26——制作简洁导航菜单 100
5.4　修改选区 104
5.4.1　羽化选区 104
5.4.2　扩展/ 收缩选区 104
5.5　加深和减淡修饰 105
5.5.1　加深工具 105
5.5.2　减淡工具 105
实例27——制作创意音乐网站菜单 106
5.6　使用钢笔工具绘制精确的形状 110
5.6.1　使用钢笔工具 110
实例28——制作复古导航条 111
5.6.2　路径与选区的转换 114
5.6.3　使用画笔描边路径 115
实例29——制作帅气游戏网站导航 116
5.7　使用文字工具 119
5.7.1　输入文字 120
5.7.2　设置文字 120
实例30——制作时尚导航菜单 121
5.8　快速对齐对象 126
5.8.1　对齐对象 127
5.8.2　分布对象 127
实例31——制作漂亮的图片式导航 128
第6 章 调整命令与优化图像
6.1　网站中的图像简介 132
6.2　网站使用的图片格式 132
6.3　网站中的图像模式 132
6.4　使用图章工具为图标添加效果 132
6.4.1　使用仿制图章工具去除图像中的水印 133
实例32——去除图像中的瑕疵 133
6.4.2　使用图案图章工具制作网站背景 134
6.5　修复网页中的图像 135
6.5.1　使用污点修复画笔工具 135
实例33——去除脸部的装饰 135
6.5.2　使用修复画笔工具 137
6.5.3　使用内容感知移动工具 138
6.6　自动调整图像颜色 138
6.6.1　自动色调增强图像清晰度 139
6.6.2　自动对比度增强图像对比度 139
6.6.3　自动颜色校正图像颜色 139
6.7　自定义调整图像色彩 140
6.7.1　使用“曲线”调整命令 140
实例34——使网页更加鲜艳 140
6.7.2　使用色阶提高图像清晰度 143
6.7.3　使用“亮度/ 对比度”调整图像 143
实例35——使图像更清晰 144
6.7.4　使用“色相/ 饱和度”调整图像 146
6.7.5　使用“自然饱和度”调整图像 147
实例36——制作酷炫图片 147
6.7.6　使用“阴影/ 高光”命令修正图像的逆光 149
实例37——修正逆光的图片 150
6.8　使用填充和调整图层 152
6.8.1　纯色填充图层 152
6.8.2　渐变填充图层 153
6.8.3　图案填充图层 153
实例38——制作炫彩网页 153
6.8.4　调整面板 155
实例39——制作黑白色图像 156
6.9　锐化提高图像清晰度 158
6.10　处理扫描图像 158
6.11　批处理图像 158
6.11.1　使用动作面板 159
6.11.2　自定义动作 159
实例40——批处理图像 159
第7 章 设计网站中的广告条
7.1　网站广告条的类型 162
7.2　广告条的常见尺寸 162
7.3　如何设计好的广告条 162
7.4　完美抠图合成广告条 163
7.4.1　磁性套索工具抠图 163
实例41——制作果盘广告条 163
7.4.2　快速选择工具 164
实例42——制作美食广告条 165
7.4.3　使用魔棒工具 166
7.4.4　使用钢笔工具 167
实例43——制作薯条广告 167
7.4.5　快速蒙版选择图像 170
实例44——制作服装广告条 170
7.4.6　“选择并遮罩”选项精确选区 172
实例45——制作精美女装广告 172
7.4.7　焦点区域 174
7.5　使用修边 174
7.5.1　移除白边和黑边 174
7.5.2　去边实现更好的合成效果 175
实例46——制作时尚服装广告条 175
7.6　使用画笔工具绘图 178
实例47——制作礼物宣传广告条 178
7.7　使用蒙版合成图像 180
7.7.1　图层蒙版替换图层局部 181
7.7.2　图层蒙版融合图像 181
实例48——制作快餐店广告条 181
7.7.3　使用剪贴蒙版 182
实例49——制作画廊展览小广告 183
第8 章 网站页面的配色
8.1　色彩基础知识 187
8.1.1　光和色的三原色 187
8.1.2　色彩的类型 188
8.1.3　色彩的构成要素 189
8.1.4　色彩的混合 189
8.1.5　色彩的分类 190
8.1.6　不同的色系 191
8.2　色彩的视觉心理感受 193
8.2.1　色彩的轻重 193
8.2.2　色彩的冷暖 193
8.2.3　色彩的软硬 194
8.2.4　色彩的大小 194
8.2.5　色彩的活泼和庄重感 194
8.2.6　色彩的兴奋和沉重感 195
8.2.7　色彩的华丽和朴实感 195
8.3　网页配色标准 196
8.3.1　Web 安全颜色 196
8.3.2　使用Web 安全色调色板 196
8.4　网页配色技巧 197
8.4.1　色彩搭配的原则 197
8.4.2　确定网页主题色 198
8.4.3　正确选择文字的颜色 198
8.5　网页风格与配色 199
8.5.1　暖色调配色 199
8.5.2　冷色调配色 200
8.5.3　稳定、安静风格的配色 200
8.5.4　发挥白色效果的配色 200
8.5.5　高彩度的配色 201
8.6　影响网站配色的因素 201
8.6.1　根据行业特征选择网页配色 201
8.6.2　根据生命周期选择网页配色 202
8.6.3　根据色彩联想选择网页配色 203
8.6.4　根据受众色彩偏好选择网页配色 204
第9 章 网页的版式和布局
9.1　常见的网页布局方式 207
9.1.1　“国”字型 207
9.1.2　拐角型 207
9.1.3　标题正文型 208
9.1.4　左右框架型 208
9.1.5　上下框架型 209
9.1.6　封面型 209
9.1.7　动画型 209
9.1.8　变化型 209
9.2　文字在网页中的作用 210
9.2.1　明确性 210
9.2.2　易读性 210
9.2.3　美观性 210
9.3　网页文字的设计原则 211
9.3.1　可读性 211
9.3.2　艺术化 211
9.4　网页文字的排版设计 213
9.4.1　文字排版规则 213
9.4.2　文字排版的常用手法 214
9.5　根据内容决定布局方式 216
9.5.1　左侧的页面布局 216
9.5.2　水平居中的页面布局 216
9.5.3　水平和垂直居中的页面布局 217
9.5.4　满屏的页面布局 217
9.6　页面分割方式 217
9.6.1　横向分割 217
9.6.2　纵向分割 218
9.6.3　纵向横向复合分割 218
9.6.4　运用固定区域 219
9.7　页面布局的连贯性和多样性 219
9.7.1　连贯性 219
9.7.2　多样性 220
第10 章 移动端网站UI 设计
10.1　移动端UI 设计基本概念 221
10.1.1　关于手机 221
10.1.2　移动端界面设计原则 222
10.1.3　移动端UI 设计流程 223
10.2　常见的手机系统 224
10.2.1　苹果系统(iOS) 224
10.2.2　安卓系统(Android) 226
10.3　iOS 系统界面设计 227
10.3.1　iOS App 设计概述 227
10.3.2　iOS 系统界面设计规范 228
实例50——绘制iOS App 界面的顶部和底部 228
10.3.3　iOS 图标设计 231
实例51——绘制iOS App 界面的主体 232
10.4　Android 系统界面设计 235
10.4.1　Android App UI 概述 235
实例52——绘制Android 个性主界面 235
10.4.2　Android App 界面设计原则 239
10.4.3　Android App 界面设计风格 239
10.4.4　控件设计 240
实例53——绘制Android 选项卡的顶部 241
10.4.5　Android 图标设计 241
实例54——绘制Android 选项卡的主体 242
10.5　移动端与PC 端网页UI 的区别 242
10.5.1　界面不同 242
10.5.2　位置不同 243
10.5.3　操作习惯不同 243
10.5.4　按钮状态不同 243
10.5.5　信息布局不同 243
第11 章 商业网站综合案例
11.1　制作儿童类网站 244
11.1.1　行业分类 244
11.1.2　色彩分析 244
11.1.3　版式分析 244
实例55——儿童类网站的背景和导航 245
实例56——儿童类网站的主体和Logo 245
实例57——儿童类网站的切图 245
11.2　制作手机购物网站 245
11.2.1　行业分类 245
11.2.2　色彩分析 246
实例58——手机购物网站的商品展示页 246
实例59——手机购物网站的切图 246