Photoshop CC中文版 UI 界面设计自学视频教程 曹茂鹏 著 专业科技 文轩网

第1章 关于UI设计你需要了解的一些知识 1 1.1 什么是APP UI .2 1.2 关于UI 设计师 2 1.2.1 用户研究/测试工程师 .2 1.2.2 图形设计师 2 1.2.3 交互设计师 3 高手小贴士：UI设计师的自我修养 3 1.3 UI 与UE .3 1.4 UI 的分类 .4 1.4.1 手机UI设计 4 1.4.2 网页UI设计 5 1.4.3 软件UI 设计 . 5 1.5 PC 客户端和移动客户端 .5 1.6 手机APP 界面组成 .6 1.6.1 状态栏 6 1.6.2 导航栏 6 1.6.3 标签栏 7 1.6.4 搜索栏 7 1.6.5 工具栏 7 1.6.6 表格视图 7 1.6.7 活动视图 7 1.6.8 动作 7 1.6.9 警告提醒 8 1.6.10 编辑菜单 8 1.6.11 浮动框 8 1.7 iOS 系统和安卓系统 .8 1.7.1 iOS系统 9 1.7.2 安卓系统 9 1.8 UI 设计师常用的工具 .10 1.9 APP UI 设计流程 . 11 第2章 UI色彩与布局. 13 2.1 UI 与色彩 .14 2.1.1 色相、明度、纯度 14 2.1.2 UI设计的色彩搭配 15 2.1.3 邻近色、对比色 17 2.2 UI 信息布局方式 .18 2.3 流行的UI 设计风格 .22 2.3.1 拟物化 22 2.3.2 扁平化 23 2.3.3 微质感 23 2.3.4 渐变色 24 2.3.5 叠加水波纹 24 2.3.6 幽灵按钮 24 2.3.7 抽屉式菜单 25 2.3.8 模糊背景图片 25 2.3.9 无边框界面 26 2.3.10 彩色图标 26 第3章 UI图形处理基础. 27 3.1 认识Photoshop .28 选项解读：Photoshop界面构成详解 .28 高手小贴士：如何让窗口变为默认状态 29 3.2 文件的基本操作.29 3.2.1 新建文件 29 选项解读：“新建文档”对话框设置选项 30 3.2.2 打开图像文件 30 高手小贴士：Photoshop常用的格式 .31 高手小贴士：找不到想要打开的文件怎么办？ 31 3.2.3 置入对象 32 3.2.4 储存文件 33 高手小贴士：存储格式的选择 34 3.2.5 使用“导出为”命令 34 选项解读：“导出为”对话框详解 34 3.2.6 关闭文件 35 3.3 便捷的图像查看工具.35 3.3.1 缩放工具 35 选项解读：“缩放工具”选项栏 36 3.3.2 抓手工具 36 高手小贴士：快速切换到“抓手工具” 37 3.4 错误操作的处理.37 3.4.1 撤销与还原 37 高手小贴士：增加可返回的步骤数目 37 3.4.2 使用“历史记录”面板还原操作 37 3.5 使用图层模式进行编辑.38 选项解读：“图层”面板选项详解 38 3.5.1 选择图层 39 3.5.2 新建图层 39 高手小贴士：在选中图层下方新建图层 39 3.5.3 删除图层 39 3.5.4 复制图层 40 3.5.5 调整图层的堆叠顺序 40 3.5.6 图层的合并 40 3.5.7 栅格化图层 41 3.6 图层的移动、对齐与分布.41 3.6.1 移动图层 41 高手小贴士：移动并复制的方法 42 高手小贴士：移动选区中像素的方法 42 3.6.2 对齐图层 42 高手小贴士：对齐图层的方法 43 3.6.3 分布图层 43 高手小贴士：分布图层的方法 44 案例实战—使用对齐与分布调整网页UI版式 44 3.7 图像处理的基础操作.45 3.7.1 调整图像尺寸 45 3.7.2 修改画布大小 46 选项解读：“画布大小”对话框详解 46 3.7.3 裁剪工具 46 选项解读：“裁剪工具”选项栏 47 3.7.4 旋转画布 47 3.7.5 变换图像 48 案例实战—使用自由变换制作界面展示效果 50 3.7.6 内容识别缩放 52 选项解读：“内容识别缩放”选项栏 52 3.8 辅助工具.52 3.8.1 标尺与辅助线 53 3.8.2 网格 . 54 3.9 打印设置.54 3.9.1 设置打印选项 54 3.9.2 使用“打印一份” 54 第4章 选区基础. 55 4.1 认识选区.56 4.2 轻松制作简单选区.57 选项解读：选框工具组的工具选项栏 57 4.2.1 矩形选框工具 58 高手小贴士：取消选区的选择 58 4.2.2 椭圆选框工具 59 4.2.3 单行/单列选框工具 .59 4.2.4 套索工具 59 4.2.5 多边形套索工具 60 高手小贴士：“多边形套索工具”的使用技巧 60 案例实战—利用多边形套索工具选择图片 60 4.3 选区的基本操作.62 4.3.1 移动选区位置 62 4.3.2 移动选区中的内容 63 4.3.3 删除选区中的内容 63 高手小贴士：删除背景图层选区中的像素会出现的 情况 64 4.3.4 复制/粘贴/剪切选区中的内容 64 高手小贴士：剪切背景图层选区中的像素会出现的 情况 64 4.3.5 快速得到反向选区 65 4.3.6 取消选区 65 4.3.7 重新选择 65 4.3.8 全选 65 4.3.9 隐藏选区、显示选区 66 4.3.10 载入当前图层的选区 66 案例实战—使用选区工具制作简单界面 66 4.4 编辑选区的形态.69 4.4.1 变换选区形态 69 高手小贴士：缩放选区的技巧 69 4.4.2 创建边界选区 69 4.4.3 平滑选区 70 4.4.4 扩展选区 70 4.4.5 收缩选区 71 4.4.6 羽化选区 71 高手小贴士：羽化半径数值过大弹出的对话框 71 第5章 UI图形设计 72 5.1 颜色的设置.73 5.1.1 设置前景色与背景色 73 5.1.2 使用“吸管工具”选取颜色 73 高手小贴士：“吸管工具”使用技巧 74 5.1.3 使用“颜色”面板 74 5.1.4 认识“色板”面板 74 5.2 填色与描边.75 5.2.1 快速填充前景色/背景色 .75 5.2.2 油漆桶工具 75 5.2.3 填充渐变 77 5.2.4 使用填充命令 79 选项解读：“填充”对话框详解 79 5.2.5 描边选区 79 选项解读：“描边”对话框详解 80 案例实战—制作活泼的圆形标志 80 案例实战—使用填充与描边功能制作优惠券 81 案例实战—图文结合的多彩标志设计 84 思维点拨 84 5.3 绘制常见矢量几何图形.85 5.3.1 了解绘图模式 86 5.3.2 设置填充 86 5.3.3 设置描边 87 5.3.4 使用形状工具绘制基本图形 89 选项解读：“矩形工具”选项栏 89 高手小贴士：在“创建圆角矩形”对话框中设置圆角矩形 的参数 90 选项解读：“多边形工具”选项栏参数详解 91 选项解读：“直线工具”参数详解 92 案例实战—使用椭圆工具制作简约计时器 92 5.3.5 创建自定形状 95 5.3.6 设置“路径操作”制作复杂路径 95 案例实战—使用形状工具制作水晶花朵 96 案例实战—使用自定形状工具制作心形按钮 98 5.4 高级绘图工具—钢笔.100 5.4.1 使用“钢笔工具”绘制路径 101 高手小贴士：使用“钢笔工具”的小技巧 101 5.4.2 使用“钢笔工具”绘制带有填色的图形 103 5.4.3 使用“钢笔工具”绘制彩色边框 104 案例实战—使用钢笔绘制复杂的人像选区 104 案例实战—使用钢笔工具制作质感按钮 . 107 案例实战—使用钢笔工具制作应用界面 110 高手小贴士：使用“钢笔工具”绘制形状的小技巧 111 5.4.4 使用“自由钢笔工具” 115 案例实战—使用磁性钢笔工具提取人像 115 5.4.5 使用“弯度钢笔工具” 116 5.4.6 编辑路径形状 117 高手小贴士：删除路径 117 高手小贴士：“路径选择工具”和“直接选择工具” 相互切换 118 高手小贴士：在“钢笔工具”的状态下添加或删除 锚点 118 高手小贴士：路径的自由变换 119 案例实战—购物APP商品信息页面 . 119 案例实战—使用矢量工具制作水晶质感梨 123 5.5 填充与描边路径.126 5.5.1 填充路径 126 5.5.2 使用不同工具对路径描边 127 高手小贴士：“模拟压力”选项的用处 128 5.6 综合实战—手机音乐播放器UI 设计 128 5.6.1 项目分析 128 5.6.2 布局规划 129 5.6.3 色彩搭配 129 5.6.4 实践操作 129 第6章 不透明度与混合模式. 133 6.1 调整图层的不透明度和填充.134 6.2 认识图层“混合模式”.134 高手小贴士：混合模式的应用范围 135 案例实战—使用混合模式制作梦幻色调 139 6.3 综合实战—冷色调音乐APP 播放页面 .140 6.3.1 项目分析 140 6.3.2 布局规划 141 6.3.3 色彩搭配 141 6.3.4 实践操作 141 第7章 画笔与绘图 149 7.1 绘画工具.150 7.1.1 画笔工具 150 选项解读：“画笔工具”选项栏 150 高手小贴士：使用“画笔工具”的小技巧 150 7.1.2 铅笔工具 150 7.1.3 颜色替换工具 151 选项解读：“颜色替换工具”选项栏 151 7.1.4 混合器画笔工具 152 选项解读：“混合器画笔工具”选项栏 152 7.2 “画笔设置”面板.152 7.2.1 笔尖形状设置 153 选项解读：“画笔笔尖形状”选项面板 153 7.2.2 形状动态 154 选项解读：“形状动态”选项面板 154 7.2.3 散布 155 选项解读：“散布”选项面板 155 7.2.4 纹理 155 选项解读：“纹理”选项面板 156 7.2.5 双重画笔 156 7.2.6 颜色动态 157 选项解读：“颜色动态”选项面板 157 7.2.7 传递 158 选项解读：“传递”选项面板 158 7.2.8 画笔笔势 158 选项解读：“画笔笔势”选项面板 159 7.2.9 其他选项 159 选项解读：“杂色”“湿边”“建立”“平滑”“保护 纹理”选项详解 . 159 7.3 擦除工具.160 7.3.1 橡皮擦工具 160 选项解读：“橡皮擦工具”选项栏 160 案例实战—制作斑驳的涂鸦效果 160 高手小贴士：使用“旧版画笔”的小技巧 161 7.3.2 背景橡皮擦工具 162 选项解读：“背景橡皮擦工具”选项栏 162 案例实战—使用背景橡皮擦快速擦除背景 163 7.3.3 魔术橡皮擦工具 164 高手小贴士：“连续”选项的作用 164 7.4 图案图章工具.164 7.5 综合实战—使用画笔工具制作绚丽计时器.165 7.5.1 项目分析 165 7.5.2 布局规划 165 7.5.3 色彩搭配 165 7.5.4 实践操作 166 高手小贴士：暗角涂抹位置 169 第8章 UI文字设计 171 8.1 创建不同类型的文字.172 8.1.1 文字工具选项详解 172 选项解读：文字工具选项栏 172 8.1.2 创建点文字 174 案例实战—使用横排文字工具制作启动页面 175 8.1.3 创建直排文字 177 8.1.4 创建段落文字 177 高手小贴士：文本溢出 177 8.1.5 创建路径文字 178 高手小贴士：调整路径文字的起点和终点位置 178 8.1.6 创建区域文字 178 案例实战—使用段落文字和点文字制作正文页面. 179 8.2 文字蒙版工具.181 8.3 设置文字参数.181 8.3.1 使用“字符”面板 181 选项解读：“字符”面板详解 182 8.3.2 使用“段落”面板 184 选项解读：“段落”面板详解 184 高手小贴士：“直排文字工具”的对齐方式 185 案例实战—制作逼真粉笔字 186 8.4 编辑文字.187 8.4.1 对文字进行变形 187 选项解读：“变形文字”对话框详解 187 高手小贴士：为什么“变形文字”不可用？ 188 8.4.2 将文字栅格化为普通图层 188 案例实战—栅格化文字制作切开的文字 188 8.4.3 将文字转换为“形状” 191 提示：创建文字路径 191 8.4.4 使用其他字体 191 8.5 综合实战—使用横排文字工具制作引导页.192 8.5.1 项目分析 192 8.5.2 布局规划 192 8.5.3 色彩搭配 192 8.5.4 实践操作 193 第9章 图层样式. 199 9.1 图层样式详解.200 9.1.1 添加图层样式 200 高手小贴士：显示所有效果 201 9.1.2 使用“斜面和浮雕”样式 202 选项解读：设置斜面和浮雕 202 选项解读：设置等高线 203 选项解读：设置纹理 204 9.1.3 使用“描边”样式 204 9.1.4 使用“内阴影”样式 205 选项解读：“内阴影”样式参数 205 案例实战—使用图层样式制作立体感按钮 206 9.1.5 使用“内发光”样式 208 高手小贴士：“外发光”样式：“源”和“阻塞”选项 208 9.1.6 使用“光泽”样式 208 9.1.7 使用“颜色叠加”样式 209 9.1.8 使用“渐变叠加”样式 209 案例实战—利用“渐变叠加”样式制作按钮 210 9.1.9 使用“图案叠加”样式 212 9.1.10 使用“外发光”样式 212 选项解读：“外发光”样式参数 213 9.1.11 使用“投影”样式 213 高手小贴士：了解投影效果 214 选项解读：“投影”样式参数 214 案例实战—使用图层样式制作质感启动界面 215 案例实战—剪贴画风格招贴文字 217 案例实战—立体效果卡通字 219 高手小贴士：如何拷贝、粘贴图层样式？ 221 案例实战—添加图层样式制作钻石效果 221 案例实战—迷你播放器小组件 223 案例实战—趣味卡通风格焦点图设计 229 9.2 管理图层样式.232 9.2.1 显示与隐藏图层样式 232 9.2.2 拷贝与粘贴图层样式 232 9.2.3 缩放图层样式 232 9.2.4 清除图层样式 233 高手小贴士：栅格化图层样式 233 案例实战—使用多个图层样式制作标志 233 高手小贴士：矢量工具选项栏 238 案例实战—使用图层样式制作视频播放器 238 9.3 使用“样式”面板.248 9.3.1 使用“样式”面板快速为图层赋予样式 248 9.3.2 将图层样式储存在“样式”面板中 248 9.3.3 存储为样式库文件 249 9.3.4 载入样式库文件 249 案例实战—质感水晶文字 249 案例实战—用斜面与浮雕样式制作可爱按钮 251 案例实战—卡通播放器 253 9.4 综合实战—自然清爽的登录界面.257 9.4.1 项目分析 257 9.4.2 布局规划 258 9.4.3 色彩搭配 258 9.4.4 实践操作 258 第10章 图像修饰. 262 10.1 去除画面中的瑕疵.263 10.1.1 污点修复画笔工具 263 选项解读：“污点修复画笔工具”选项栏 263 10.1.2 修复画笔工具 263 选项解读：“修复画笔工具”选项栏 264 10.1.3 修补工具 264 10.1.4 内容感知移动工具 265 10.1.5 红眼工具 265 10.1.6 仿制图章工具 266 10.1.7 内容识别填充 266 高手小贴士：针对背景图层进行填充 266 10.2 修饰图像的局部.267 10.2.1 模糊工具 267 10.2.2 锐化工具 267 10.2.3 涂抹工具 268 10.2.4 减淡工具 268 10.2.5 加深工具 269 案例实战—使用加深减淡工具增强标志立体感 269 10.2.6 海绵工具 270 高手小贴士：在“灰度”色彩模式下使用“海绵 工具” 270 10.2.7 颜色替换工具 270 选项解读：“颜色替换工具”选项栏 271 案例实战—使用颜色替换画笔改变环境颜色 271 第11章 调色 273 11.1 调色命令的使用方法 .274 高手小贴士：调整图层的图层蒙版 275 11.2 亮度/ 对比度 275 11.3 色阶 .276 11.4 曲线 .277 案例实战—使用曲线快速打造反转片效果 279 案例实战—曲线与混合模式打造浪漫红树林 280 11.5 曝光度 .281 11.6 自然饱和度 .282 选项解读：“自然饱和度”对话框详解 283 11.7 色相/ 饱和度 284 案例实战—用色相/饱和度打造秋季变夏季 .285 11.8 色彩平衡 .286 选项解读：“色彩平衡”对话框详解 287 11.9 黑白 .288 高手小贴士：“预设”选项 289 案例实战—使用调色命令制作暗调音乐播放器 289 11.10 照片滤镜 .294 11.11 通道混合器 .295 选项解读：“通道混合器”对话框详解 296 11.12 颜色查找 .296 11.13 反相 .297 11.14 色调分离 .297 11.15 阈值 .298 11.16 渐变映射 .298 11.17 可选颜色 .299 高手小贴士：“方法”选项 300 案例实战—沉郁的青灰色调 300 案例实战—打造电影感复古色调 302 案例实战—天空的乐律 304 11.18 阴影/ 高光 306 高手小贴士：“调整”选项组 307 11.19 HDR 色调 .307 高手小贴士：在多个图层的情况下执行“HDR色调” 命令 309 11.20 去色 .309 11.21 匹配颜色 .309 选项解读：“匹配颜色”对话框详解 310 11.22 替换颜色 . 311 11.23 色调均化 .312 11.24 综合实战—平板电脑生活类APP 首页设计 .313 11.24.1 项目分析 313 11.24.2 布局规划 313 11.24.3 色彩搭配 314 11.24.4 实践操作 314 第12章 使用滤镜制作特殊效果 321 12.1 初识滤镜.322 12.2 特殊滤镜.323 12.2.1 滤镜库 323 12.2.2 自适应广角 324 选项解读：“自适应广角”工具选项 324 12.2.3 Camera Raw的基本操作 . 324 选项解读：Camera Raw的操作界面 . 325 选项解读：Camera Raw的工具栏 . 325 12.2.4 镜头校正 325 选项解读：“镜头矫正”工具选项 326 选项解读：“镜头矫正”自定选项 326 12.2.5 液化 327 选项解读：“液化”滤镜窗口中的工具 328 选项解读：“液化”窗口右侧的工具选项 330 12.2.6 消失点 331 选项解读：“消失点”滤镜工具 331 12.3 风格化滤镜组.332 12.3.1 查找边缘 332 12.3.2 等高线 332 选项解读：“等高线”对话框详解 333 12.3.3 风 333 选项解读：“风”对话框详解 333 12.3.4 浮雕效果 333 选项解读：“浮雕效果”对话框详解 334 12.3.5 扩散 334 选项解读：“扩散”对话框详解 334 12.3.6 拼贴 334 选项解读：“拼贴”对话框详解 334 12.3.7 曝光过度 335 12.3.8 凸出 335 选项解读：“凸出”对话框详解 335 12.3.9 油画 336 选项解读：“油画”对话框详解 336 12.4 模糊滤镜组.336 12.4.1 表面模糊 336 选项解读：“表面模糊”对话框详解 337 12.4.2 动感模糊 337 选项解读：“动感模糊”对话框详解 337 12.4.3 方框模糊 337 12.4.4 高斯模糊 338 案例实战—更换手机屏幕内容 338 12.4.5 进一步模糊 340 12.4.6 径向模糊 341 选项解读：“径向模糊”对话框详解 341 12.4.7 镜头模糊 341 选项解读：“镜头模糊”对话框详解 342 12.4.8 模糊 342 12.4.9 平均 343 12.4.10 特殊模糊 343 选项解读：“特殊模糊”对话框详解 343 12.4.11 形状模糊 344 选项解读：“形状模糊”对话框详解 344 12.5 模糊画廊滤镜组.344 12.5.1 场景模糊 344 选项解读：“场景模糊”选项详解 345 12.5.2 光圈模糊 345 12.5.3 移轴模糊 346 选项解读：“移轴模糊”选项详解 347 12.5.4 路径模糊 347 12.5.5 旋转模糊 348 12.6 扭曲滤镜组.349 12.6.1 波浪 349 选项解读：“波浪”对话框详解 349 12.6.2 波纹 349 12.6.3 极坐标 350 12.6.4 挤压 350 12.6.5 切变 351 选项解读：“切变”对话框详解 351 12.6.6 球面化 352 选项解读：“球面化”对话框详解 352 12.6.7 水波 352 选项解读：“水波”对话框详解 353 12.6.8 旋转扭曲 353 选项解读：“旋转扭曲”对话框详解 353 12.6.9 置换 354 选项解读：“置换”对话框详解 354 12.7 锐化滤镜组.354 12.7.1 USM锐化 354 选项解读：“USM锐化”对话框详解 355 12.7.2 防抖 355 选项解读：“防抖”对话框详解 355 12.7.3 进一步锐化 355 12.7.4 锐化 356 12.7.5 锐化边缘 356 12.7.6 智能锐化 356 选项解读：“智能锐化”对话框详解 356 12.8 像素化滤镜组.357 12.8.1 彩块化 357 12.8.2 彩色半调 358 选项解读：“彩色半调”对话框详解 358 12.8.3 点状化 358 12.8.4 晶格化 358 12.8.5 马赛克 359 12.8.6 碎片 359 12.8.7 铜版雕刻 359 选项解读：“铜版雕刻”对话框详解 359 12.9 渲染滤镜组.360 12.9.1 火焰 360 选项解读：“火焰”对话框基本选项 360 选项解读：“火焰”对话框高级选项 360 12.9.2 图片框 361 12.9.3 树 361 12.9.4 分层云彩 361 12.9.5 光照效果 362 选项解读：“预设”选项 362 选项解读：聚光灯、点光和无限光 363 选项解读：“属性”面板 363 12.9.6 镜头光晕 364 选项解读：“镜头光晕”对话框详解 365 12.9.7 纤维 366 选项解读：“纤维”对话框详解 366 12.9.8 云彩 366 12.10 杂色滤镜组.366 12.10.1 减少杂色 366 选项解读：“减少杂色”基本选项 367 选项解读：“减少杂色”高级选项 367 12.10.2 蒙尘与划痕 367 选项解读：“蒙尘与划痕”对话框详解 367 12.10.3 去斑 368 12.10.4 添加杂色 368 选项解读：“添加杂色”对话框详解 368 案例实战—打造胶片相机效果 368 12.10.5 中间值 371 12.11 其它滤镜组 .371 12.11.1 HSB/HSL 371 12.11.2 高反差保留 371 12.11.3 位移 372 选项解读：“位移”对话框详解 372 12.11.4 自定 372 12.11.5 优选值 372 选项解读：“优选值”对话框详解 373 12.11.6 最小值 373 12.12 综合实战—旅行产品详情展示页面.373 12.12.1 项目分析 373 12.12.2 布局规划 374 12.12.3 色彩搭配 374 12.12.4 实践操作 374 ......