描述
开 本: 16开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787302469643
丰富的案例实战：50多个UI实战技能精讲，配合视频，时间达250分钟，重现书中所有操作，让读者高效学习。
完备的功能查询：15章专题技术使用精解＋180多款素材效果文件＋800多张图片全程图解，帮助读者快速掌握UI设计。
本书是一本讲解如何使用Photoshop软件进行移动UI设计的实例操作型自学教程，可以帮助UI设计爱好者，特别是手机APP设计人员，提高UI制作能力，拓展移动UI视觉设计的创作思路。
本书从两条线出发，帮助读者学习Photoshop移动UI设计。
一条是横向案例线，通过对各种类型的素材进行后期制作，如安卓界面、苹果界面、微软界面、影音游戏界面等案例，帮助读者快速精通各类型的移动UI设计方法。
另一条是纵向技能线，介绍了Photoshop移动UI设计的核心技法：文字排版 页面布局 素材处理 色彩校正 界面构成 滤镜使用等，对移动UI设计的核心技术与精髓内容进行了全面且详细的讲解，帮助读者快速掌握移动UI设计的精髓。
本书共分为15章，内容包括：移动UI的设计常识，移动UI设计的布局原则，移动UI视觉交互设计法则，移动UI的构成元素，Photoshop移动UI快速上手，UI的色彩与风格设计，移动UI文字的编排设计，移动UI图像的抠取与合成，移动UI图像特效质感设计，图标、图形、按钮设计，常见苹果系统UI设计，常见安卓系统UI设计，常见微软系统UI设计，社交与免费WiFi登录UI设计，影音与游戏UI设计。全书使用自带素材，通过对素材的不同处理，制作出精美的界面效果。制作界面过程已被录制为视频，刻录为光盘，在手机与网络中进行分享，读者学后可以融会贯通、举一反三，从而更好地完成自己的作品。
本书结构清晰，语言简洁，实例丰富，版式精美，适合Photoshop移动UI设计初、中级读者阅读，包括广大UI设计爱好者、UI设计工作者，同时也可以作为各类计算机培训中心、技工学校和大中专职业院校的辅导教材。
目
录CONTENTS
第1 章
新手导航：移动UI 的设计常识
……………………………………… 1
1.1 便捷生活：认识移动UI 设计 ………………………………………………… 2
1.1.1 连接工具和人的界面 ………………………………………………………2
1.1.2 连接用户和手机的界面 ……………………………………………………2
1.1.3 移动UI 的设计特点 ………………………………………………………3
1.1.4 移动UI 的设计基础 ………………………………………………………5
1.2 主流系统：深入了解UI 的操作平台 ………………………………………… 7
1.2.1 谷歌Android 系统 …………………………………………………………8
1.2.2 苹果iOS 系统 …………………………………………………………… 10
1.2.3 微软Windows Phone 系统 …………………………………………… 12
1.3 熟悉界面：了解手机与平板的界面 …………………………………………… 15
1.3.1 手机界面 ………………………………………………………………… 15
1.3.2 平板电脑界面 …………………………………………………………… 18
1.3.3 流程分析 ………………………………………………………………… 20
1.3.4 注意事项 ………………………………………………………………… 20
第2 章
掌控布局：移动UI 设计的布局原则
……………………………… 21
2.1 初级布局：解析移动UI 的纵横布局 ………………………………………… 22
2.1.1 竖向排列布局 …………………………………………………………… 22
2.1.2 横向排列布局 …………………………………………………………… 22
2.1.3 九宫格排列布局 ………………………………………………………… 23
2.2 高级布局：解析移动UI 的特殊布局 ………………………………………… 24
2.2.1 弹出框式布局 …………………………………………………………… 24
2.2.2 热门标签布局 …………………………………………………………… 24
2.2.3 侧边栏式布局 …………………………………………………………… 25
2.2.4 陈列馆式布局 …………………………………………………………… 26
2.2.5 分段菜单式布局 ………………………………………………………… 28
2.2.6 点聚式布局 ……………………………………………………………… 28
2.2.7 转盘式布局 ……………………………………………………………… 29
2.2.8 导航栏置底式布局 ………………………………………………………
29
2.2.9 磁贴状态式布局 ………………………………………………………… 30
2.2.10 超级菜单式布局 ………………………………………………………… 30
2.2.11 导航栏置顶式布局……………………………………………………… 31
2.2.12 幻灯片式布局…………………………………………………………… 32
2.3 优化布局：掌握移动UI 的布局策略 ………………………………………… 33
2.3.1 图表信息布局的设计方法 ……………………………………………… 33
2.3.2 界面细节的设计方法 ……………………………………………………
34
2.3.3 移动UI 的布局规则 ……………………………………………………
36
第3 章
透析本质：移动UI 视觉交互设计法则
…………………………… 41
3.1 博人眼球：把握UI 的视觉特色 ……………………………………………… 42
3.1.1 打造简洁与抽象美感 ……………………………………………………
42
3.1.2 营造趣味视觉画面 ………………………………………………………
43
3.1.3 塑造华丽视觉效果 ………………………………………………………
44
3.1.4 把握色彩的使用特点 ……………………………………………………
45
3.2 挖掘内涵：提升UI 的文字设计 ……………………………………………… 45
3.2.1 内容设计简化 …………………………………………………………… 46
3.2.2 字体设计合理 …………………………………………………………… 46
3.2.3 突出文字层次 …………………………………………………………… 48
3.2.4 信息表达清晰 …………………………………………………………… 50
3.2.5 掌握文字间距 …………………………………………………………… 52
3.2.6 文字颜色设计 …………………………………………………………… 52
3.2.7 画面美感设计 …………………………………………………………… 54
3.2.8 实用性能优化 …………………………………………………………… 55
3.3 精益求精：优化移动UI 的图案效果 ………………………………………… 56
3.3.1 分辨率影响美感 ………………………………………………………… 56
3.3.2 拉伸影响美感 …………………………………………………………… 57
3.3.3 特效美化界面 …………………………………………………………… 58
3.3.4 交互动作特性 …………………………………………………………… 59
3.3.5 增加真实感 ……………………………………………………………… 59
3.3.6 透析事物关系 …………………………………………………………… 60
3.3.7 展现复杂效果 …………………………………………………………… 61
3.3.8 展现简单动画 …………………………………………………………… 62
3.3.9 实现夸张想象 …………………………………………………………… 62
第4 章
深入解析：移动UI 的构成元素
…………………………………… 63
4.1 专注体验：掌握基本元素的设计技巧 ………………………………………… 64
4.1.1 用户体验 ………………………………………………………………… 64
4.1.2 模糊背景 ………………………………………………………………… 65
4.1.3 滚动功能 ………………………………………………………………… 66
4.1.4 色调搭配 ………………………………………………………………… 66
4.1.5 情景感知 ………………………………………………………………… 67
4.1.6 拟物设计 ………………………………………………………………… 69
4.1.7 简洁提示 ………………………………………………………………… 70
4.2 对点切入：灵活地带入情感元素 ……………………………………………… 71
4.2.1 情感切入点 ……………………………………………………………… 72
4.2.2 惊喜拉近距离 …………………………………………………………… 73
4.2.3 真实获得认可 …………………………………………………………… 74
4.3 组件解析：熟知移动UI 的按钮组件 ………………………………………… 75
4.3.1 常规按钮设计 …………………………………………………………… 75
4.3.2 编辑输入框设计 ………………………………………………………… 76
4.3.3 开关按钮设计 …………………………………………………………… 76
4.3.4 浏览模式设计 …………………………………………………………… 77
4.3.5 文本标签设计 …………………………………………………………… 78
4.3.6 警告框设计 ……………………………………………………………… 78
4.3.7 导航栏设计 ……………………………………………………………… 79
4.3.8 页面切换设计 …………………………………………………………… 79
4.3.9 进度条设计 ……………………………………………………………… 80
4.3.10 ico 图标设计 …………………………………………………………… 81
第5 章
软件进阶：Photoshop 移动UI 快速上手
……………………… 83
5.1 软件进阶：Photoshop 移动UI 快速上手 ………………………………… 84
5.1.1 Photoshop CC 的安装 …………………………………………………
84
5.1.2 Photoshop CC 的卸载 …………………………………………………
86
5.2 界面详解：熟悉Photoshop CC 的工作界面 ……………………………… 87
5.2.1 菜单栏 …………………………………………………………………… 88
5.2.2 状态栏 …………………………………………………………………… 89
5.2.3 工具属性栏 ……………………………………………………………… 90
5.2.4 工具箱 …………………………………………………………………… 91
5.2.5 图像编辑窗口 …………………………………………………………… 91
5.2.6 浮动控制面板 …………………………………………………………… 92
5.3 图像知识：识别移动UI 设计的基本图像 …………………………………… 93
5.3.1 位图与矢量图形 ………………………………………………………… 93
5.3.2 像素与分辨率 …………………………………………………………… 94
5.3.3 图像颜色模式 …………………………………………………………… 96
5.3.4 存储文件格式 …………………………………………………………… 98
5.4 图像操作：了解移动UI 图像的操作模式 …………………………………… 99
5.4.1 新建空白图像文件 ………………………………………………………
99
5.4.2 打开UI 图像文件 ………………………………………………………100
5.4.3 保存UI 图像文件 ………………………………………………………101
5.4.4 关闭UI 图像文件 ………………………………………………………102
5.4.5 完成图像撤销操作 ………………………………………………………103
5.4.6 应用快照还原图像 ………………………………………………………103
5.4.7 恢复图像初始状态 ………………………………………………………104
5.5 窗口调节：掌握移动UI 图像的窗口操作 …………………………………
104
5.5.1 调整还原窗口设置 ………………………………………………………105
5.5.2 展开/ 折叠面板设置 ……………………………………………………106
5.5.3 移动调整面板设置 ………………………………………………………107
5.5.4 图像编辑窗口排列设置 …………………………………………………109
5.5.5 图像编辑窗口切换设置 …………………………………………………111
5.5.6 图像编辑窗口大小调整 …………………………………………………112
5.5.7 移动图像编辑窗口 ………………………………………………………114
第6 章
视觉美感：UI 的色彩与风格设计
…………………………………115
6.1 色彩解析：了解移动UI 图像的颜色属性 …………………………………
116
6.1.1 色相区分 …………………………………………………………………116
6.1.2 明度标准 …………………………………………………………………117
6.1.3 色彩饱和度 ………………………………………………………………117
6.1.4 颜色的分布状态 …………………………………………………………118
6.1.5 颜色模式转换 ……………………………………………………………120
6.1.6 色域范围的识别 …………………………………………………………124
6.2 自动调色：自动校正移动UI 图像的色彩 ………………………………… 125
6.2.1 “自动色调”命令 ………………………………………………………125
6.2.2 “自动对比度”命令 ……………………………………………………126
6.2.3 “自动颜色”命令 ………………………………………………………127
6.3 色调调整：调整移动UI 图像的影调 ……………………………………… 129
6.3.1 “色阶”命令 ……………………………………………………………129
6.3.2 “亮度/ 对比度”命令 …………………………………………………131
6.3.3 “曲线”命令 ……………………………………………………………133
6.3.4 “曝光度”命令 …………………………………………………………135
第7 章
画龙点睛：移动UI 文字的编排设计
………………………………137
7.1 文字排列：掌握移动UI 中文字的排列 …………………………………… 138
7.1.1 常见文字类型 ……………………………………………………………138
7.1.2 文字属性设置 ……………………………………………………………138
7.1.3 横排文字输入 ……………………………………………………………141
7.1.4 直排文字输入 ……………………………………………………………142
7.1.5 段落文字输入 ……………………………………………………………144
7.1.6 选区文字输入 ……………………………………………………………146
7.2 完善效果：设置移动UI 中的文字效果 …………………………………… 149
7.2.1 文字属性的设置 …………………………………………………………149
7.2.2 段落属性的设置 …………………………………………………………150
7.2.3 选择和移动UI 图像文字 ………………………………………………152
7.2.4 设置文字的方向互换 ……………………………………………………153
7.2.5 段落文本与点文本的切换 ………………………………………………153
7.2.6 文字的拼写检查 …………………………………………………………155
7.2.7 文字的查找与替换 ………………………………………………………157
第8 章
界面合成：移动UI 图像的抠取与合成
………………………… 159
8.1 命令抠图：掌握移动UI 图像命令抠图技法 ………………………………
160
8.1.1 “反向”命令 ……………………………………………………………160
8.1.2 “色彩范围”命令 ………………………………………………………161
8.1.3 “扩大选取”命令…………………………………………………………163
8.1.4 “选取相似”命令 ………………………………………………………164
8.2 工具抠图：掌握移动UI 图像工具抠图技法 ………………………………
165
8.2.1 快速选择工具 ……………………………………………………………165
8.2.2 魔棒工具 …………………………………………………………………167
8.2.3 矩形选框工具 ……………………………………………………………170
8.2.4 椭圆选框工具 ……………………………………………………………173
8.2.5 套索工具 …………………………………………………………………174
8.2.6 多边形套索工具 …………………………………………………………175
8.2.7 磁性套索工具 ……………………………………………………………177
8.2.8 魔术橡皮擦工具 …………………………………………………………179
8.2.9 钢笔工具 …………………………………………………………………181
8.2.10 自由钢笔工具 ……………………………………………………………184
第9 章
界面特效：移动UI 图像特效质感设计
………………………… 187
9.1 特效解析：为移动UI 图像添加简单的特效 ………………………………
188
9.1.1 编辑智能滤镜 ……………………………………………………………188
9.1.2 添加波浪效果 ……………………………………………………………189
9.1.3 添加玻璃效果 ……………………………………………………………189
9.1.4 添加水波效果 ……………………………………………………………190
9.1.5 添加旋转扭曲效果 ………………………………………………………190
9.1.6 添加点状化效果 …………………………………………………………191
9.1.7 添加彩块化效果 …………………………………………………………191
9.2 特效实操：为移动UI 图像添加复杂的特效 ………………………………
192
9.2.1 添加彩色半调的方法 ……………………………………………………192
9.2.2 添加液化的方法 …………………………………………………………194
9.2.3 使用滤镜库编辑移动UI 图像的方法 …………………………………195
9.2.4 添加切变效果的方法 ……………………………………………………198
9.2.5 添加波纹的方法 …………………………………………………………199
9.2.6 添加海洋波纹的方法 ……………………………………………………200
9.2.7 添加扩散亮光的方法 ……………………………………………………201
9.2.8 创建智能滤镜 ……………………………………………………………203
第10 章
常用元素：图标、图形、按钮设计
…………………………… 205
10.1 图标元素：掌握移动UI 图标的设计 ……………………………………… 206
10.1.1 音乐APP 图标的背景效果设计 ………………………………………206
10.1.2 音乐APP 图标的主体效果设计 ………………………………………208
10.1.3 音乐APP 图标的细节效果设计 ………………………………………210
10.2 图形元素：掌握移动UI 图形的设计 ……………………………………… 214
10.2.1 切换条的背景效果设计 …………………………………………………214
10.2.2 切换条的主体效果设计 …………………………………………………215
10.2.3 切换条的细节效果设计 …………………………………………………218
10.3 基础元素：掌握移动UI 按钮的设计 ……………………………………… 222
10.3.1 搜索框的主体效果设计 …………………………………………………222
10.3.2 搜索框搜索图标的效果设计 ……………………………………………224
10.3.3 搜索框二维码的效果设计 ………………………………………………226
第11 章
苹果系统：常见苹果系统UI 设计
…………………………… 229
11.1 天气界面：掌握天气控件界面的设计 …………………………………… 230
11.1.1 设计天气控件界面的背景效果…………………………………………230
11.1.2 设计天气控件界面的主体效果…………………………………………232
11.2 日历界面：掌握手机日历界面的设计 …………………………………… 238
11.2.1 设计日历APP 界面的背景效果 ………………………………………239
11.2.2 设计日历APP 界面的主体效果 ………………………………………241
第12 章
安卓系统：常见安卓系统UI 设计
…………………………… 253
12.1 锁屏界面：掌握安卓系统个性锁屏界面的设计 …………………………
254
12.1.1 设计安卓系统锁屏界面的背景效果……………………………………254
12.1.2 设计安卓系统锁屏界面的主体效果……………………………………258
12.2 程序界面：掌握安卓系统程序界面的设计 ………………………………
261
12.2.1 安卓应用程序界面的主体效果设计……………………………………262
12.2.2 安卓应用程序界面的整体效果设计……………………………………267
第13 章
微软系统：常见微软系统UI 设计
…………………………… 275
13.1 拨号键盘：掌握微软手机拨号键盘的设计 ………………………………
276
13.1.1 微软手机拨号键盘界面的背景效果设计………………………………276
13.1.2 微软手机拨号键盘界面的主体效果设计………………………………281
13.2 用户界面：掌握微软手机用户界面的设计 ………………………………
284
13.2.1 微软手机用户界面的背景效果设计……………………………………285
13.2.2 微软系统用户界面的整体效果设计……………………………………290
第14 章
登录界面：社交与免费WiFi 登录UI 设计
………………… 299
14.1 云社交：掌握云社交登录界面的设计 …………………………………… 300
14.1.1 云社交APP 登录界面的背景效果设计 ………………………………300
14.1.2 云社交APP 登录界面的文字效果设计 ………………………………304
14.2 免费WiFi：掌握免费WiFi 登录界面的设计 ……………………………
307
14.2.1 免费WiFi 应用登录界面的背景效果设计 ……………………………308
14.2.2 免费WiFi 应用登录界面的表单按钮设计 ……………………………312
14.2.3 免费WiFi 应用登录界面的细节和文本设计 …………………………320
第15 章
影音游戏：影音与游戏UI 设计
……………………………… 325
15.1 视频播放：掌握视频播放APP 界面的设计 …………………………… 326
15.1.1 视频播放APP 界面的主体效果设计 …………………………………326
15.1.2 视频播放APP 界面的细节效果设计 …………………………………328
15.2 休闲游戏：掌握休闲游戏APP 界面的设计 …………………………… 331
15.2.1 休闲游戏界面的背景效果设计…………………………………………331
15.2.2 休闲游戏界面的主体效果设计…………………………………………334
15.2.3 休闲游戏界面的文本效果设计…………………………………………337
前
言
写作驱动
本书是初、中级读者全面自学Photoshop 移动UI 设计的经典畅销教程，作者从实用角度出发，全面、系统地讲解了Photoshop 移动UI 设计的方法，基本上涵盖了Photoshop 主要工具、面板和菜单命令。本书在介绍软件功能的同时，还精心安排了50 多个具有针对性的实例，帮助读者轻松掌握软件使用技巧和具体应用，以做到“学用结合”。此外，全部实例都配有视频教学，详细演示了实例制作过程。
本书特色
58 个专家指点放送：本书在编写时将平时工作中总结的软件各方面的实战技巧、设计经验等毫无保留地奉献给读者，不仅使本书更具有含金量，而且更方便读者提升软件实战技巧与经验，从而大大提高读者学习与工作的效率，使读者学有所成。
50 多个技能实例奉献：本书通过大量技能实例来辅讲软件，达50 多个，帮助读者在实战演练中逐步掌握软件的核心技能与操作技巧，与同类书相比，使读者可以省去学烦琐理论的时间，更能掌握超出同类书的大量实用技能，让学习更高效。
250 分钟音视频演示：本书中的软件操作技能实例，全部录制了带语音讲解的视频，时间长度达250 分钟（4 个多小时），重现书中所有实例操作过程，读者可以结合书本，也可以独立观看视频演示，像看电影一样进行学习，让学习变得更加轻松。
180 多款素材效果奉献：随书光盘包含了105 个素材文件，80 个效果文件。其中，素材涉及商业素材、UI 素材、电影素材、天气预报素材、风景素材、美食素材、系统界面素材、系统按钮素材等，应有尽有，供读者使用。
800 多张图片全程图解：本书采用了800 多张图片对软件技术、实例制作，进行了全程式的图解，通过这些清晰的图片，让实例的内容变得更通俗易懂，使读者可以一目了然，快速领会，举一反三，制作出更多优秀的移动UI 作品。
编著者售后
本书由蒋珍珍编著，参与编写的人员还有王碧清、刘胜璋、刘向东、刘松异、刘伟、卢博、周旭阳、袁淑敏、谭中阳、杨端阳、李四华、王力建、柏承能、刘桂花、柏松、谭贤、谭俊杰、徐茜、刘嫔、苏高、柏慧等人，在此表示感谢。由于编者知识水平有限，书中难免有错误和疏漏之处，恳请广大读者批评、指正。
编
者
第11 章 苹果系统：常见苹果系统UI
设计
学习提示
苹果公司的移动产品( 如iPhone 系列手机、iPad 平板电脑、iPod 音乐播放器等) 如今已风靡全球，其iOS 操作系统对硬件性能要求不高，应用程序丰富，操作非常流畅，其独特的魅力吸引了越来越多的用户。本章主要介绍苹果系统UI 的设计方法。
本章重点导航
设计天气控件界面的背景效果
设计天气控件界面的主体效果
设计日历APP 界面的背景效果
设计日历APP 界面的主体效果
11.1 天气界面：掌握天气控件界面的设计
在苹果智能移动设备上经常可以看到各式各样的天气软件，这些天气软件的功能都很全
面，除了可以随时随地查看本地甚至其他地方连续几天的天气和温度，还有其他资讯小服务，
是移动用户居家旅行的必需工具。本实例终效果如图11-1 所示。
图11-1 实例效果
素材文件
素材 第11 章 苹果系统天气控件背景.jpg、天气控件界面状态栏.psd、天气图标1.psd、天气图标2.psd
效果文件
效果 第11 章 苹果系统天气控件界面.psd、苹果系统天气控件界面.jpg
视频文件
视频 第11 章11.1.1 设计天气控件背景效果.mp4、11.1.2 设计天气控件主体效果.mp4
11.1.1 设计天气控件界面的背景效果
下面主要使用“亮度/ 对比度”命令、“曲线”命令、“USM 锐化”命令及图层混合模式等，设计苹果系统天气控件界面的背景效果。
步骤 01 选择“文件”|“打开”命令，打开“苹果系统天气控件背景”素材图像；选择“图像”|“调整”|“亮度/ 对比度”命令，弹出“亮度/ 对比度”对话框，设置“亮度”为18、“对比度”为31，单击“确定”按钮，即可调整背景图像的亮度与对比度，效果如图11-2 所示。
步骤 02 选择“图像”|“调整”|“曲线”命令，弹出“曲线”对话框，在曲线上添加一个控制点，设置“输出”和“输入”的参数值分别为187、175，然后在曲线上添加另一个控制点，设置“输出”和“输入”的参数值分别为70、77，如图11-3 所示，单击“确定”按钮，即可调整背景图像的色调。
图11-2 使用“亮度/ 对比度”命令调节图像
图11-3 设置“曲线”参数值步骤 03 选择“滤镜”|“锐化”|“USM 锐化”命令，弹出“USM 锐化”对话框，设置“数量”为30%、“半径”为3.6 像素、“阈值”为19 色阶，单击“确定”按钮，即可锐化背景图像，如图11-4 所示。
图11-4 锐化背景图像
步骤 04 展开“图层”面板，按Ctrl J 组合键复制“背景”图层，得到“图层1”图层，设置“图层1”图层的“混合模式”为“叠加”、“不透明度”为60%，即可改变图像效果，如图11-5 所示。
步骤 05 打开“天气控件界面状态栏.psd”素材图像，将其拖曳至“苹果系统天气控件背景”图像编辑窗口中的合适位置处，效果如图11-6 所示。
图11-5 调整图像效果
图11-6 添加状态栏素材图像
11.1.2 设计天气控件界面的主体效果
下面主要使用矩形工具、“投影”图层样式、渐变工具、魔棒工具、横排文字工具等，设计苹果系统天气控件界面的主体效果。
步骤 01 在“图层”面板中，新建“图层2”图层，设置前景色为浅蓝色(RGB 参数值为121、140、239)，如图11-7 所示。
图11-7 设置前景色
步骤 02 选择工具箱中的矩形工具，在工具属性栏中设置“选择工具模式”为“像素”，绘制一个矩形。双击“图层2”图层，弹出“图层样式”对话框，勾选“投影”复选框，保持默认设置即可，如图11-8 所示。
图11-8 勾选“投影”复选框
步骤 03 单击“确定”按钮，应用“投影”图层样式，效果如图11-9 所示。
步骤 04 在“图层”面板中，为“图层2”图层添加图层蒙版，如图11-10 所示。
图11-9 应用“投影”图层样式效果
图11-10 添加图层蒙版
步骤 05 使用渐变工具，从右至左填充黑色到白色的线性渐变，效果如图11-11 所示。
步骤 06 在“图层”面板中设置“图层2”图层的“不透明度”为60%，如图11-12 所示。
图11-11 填充线性渐变效果
图11-12 设置图层的不透明度
步骤 07 复制“图层2”图层，得到“图层2 拷贝”图层，将“图层2 拷贝”图层中的图像拖曳至相应位置处，效果如图11-13 所示。
步骤 08 按Ctrl T 组合键，调出变换控制框，适当调整图像的大小和位置，按Enter 键确认操作，如图11-14 所示。
图11-13 复制并移动图像
图11-14 调整图像的大小和位置
步骤 09 选择工具箱中的魔棒工具，单击调整后的图像，创建选区，如图11-15 所示。
步骤 10 设置前景色为蓝色(RGB 参数值为78、111、231)，按Alt Delete 组合键，为选区填充前景色，按Ctrl D 组合键，取消选区，效果如图11-16 所示。
图11-15 创建选区
图11-16 填充效果
步骤 11 在“图层”面板中，复制“图层2”图层，得到“图层2 拷贝2”图层，适当调整“图层2 拷贝2”图层中图像的大小和位置，效果如图11-17 所示。
步骤 12 选择工具箱中的魔棒工具，单击调整后的图像，创建选区，如图11-18 所示。
图11-17 调整图像大小和位置
图11-18 创建选区
步骤 13 设置前景色为白色，按Alt Delete组合键，为选区填充前景色，按Ctrl D组合键，取消选区，效果如图11-19 所示。
步骤 14 设置“图层2 拷贝2”图层的“不透明度”为80%，即可改变图像效果，如图11-20 所示。
图11-19 填充效果
图11-20 调整图层的不透明度
步骤 15 选择“图层2 拷贝2”图层，按住Ctrl Alt 键的同时向下拖曳，复制两个图层，如图11-21 所示。
步骤 16 适当调整各图像的位置，效果如图11-22 所示。
图11-21 复制图层
图11-22 调整图像的位置
步骤 17 打开“天气图标1.psd”素材图像，将其拖曳至“苹果系统天气控件背景”图像编辑窗口中的合适位置处，效果如图11-23 所示。
步骤 18 打开“天气图标2.psd”素材图像，将其拖曳至“苹果系统天气控件背景”图像编辑窗口中，并适当调整各图像的位置，效果如图11-24 所示。
图11-23 拖入素材图像
图11-24 拖入素材图像
步骤 19 选择工具箱中的横排文字工具，确认插入点，在“字符”面板中设置“字体系列”为“微软雅黑”、“字体大小”为60 点、“颜色”为白色(RGB 参数值均为255)，如图11-25 所示。
步骤 20 使用横排文字工具在图像中输入相应文本，如图11-26 所示。
图11-25 设置文字属性
图11-26 输入相应文本
步骤 21 使用横排文字工具确认插入点，在“字符”面板中设置“字体系列”为“微软雅黑”、“字体大小”为12 点、“颜色”为白色(RGB 参数值均为255)，如图11-27 所示。
步骤 22 在图像中输入相应文本，完成苹果系统天气控件界面的设计，终效果如图11-28所示。
图11-27 设置文字属性
图11-28 终效果
评论
还没有评论。