第9章 Photoshop CC手机UI界面设计
《Photoshop CC移动UI设计实例教程(微课版)》 教案
《Photoshop CC移动UI设计实例教程（微课版）》教案一、教学目标1. 掌握Photoshop CC的基本操作和功能。
2. 学习移动UI设计的基本原则和技巧。
3. 能够运用Photoshop CC设计出符合用户需求的移动UI界面。
二、教学内容1. Photoshop CC的基本功能介绍图像处理基础选择工具和修饰工具图层和蒙版色彩和色调调整2. 移动UI设计原则设计规范和标准界面布局和结构色彩搭配和视觉效果字体和图标设计三、教学方法1. 讲授法：讲解Photoshop CC的基本操作和功能，以及移动UI设计的原则和方法。
2. 演示法：通过实际操作演示设计过程，让学生更好地理解和掌握操作技巧。
3. 实践法：让学生通过实际操作练习，提高设计能力。
四、教学准备1. 计算机和投影仪2. Photoshop CC软件3. 移动UI设计素材和案例五、教学过程1. 导入：介绍教案主题，激发学生的学习兴趣。
2. 讲解：讲解Photoshop CC的基本操作和功能，以及移动UI设计的原则和方法。
3. 演示：通过实际操作演示设计过程，让学生更好地理解和掌握操作技巧。
4. 练习：让学生通过实际操作练习，提高设计能力。
6. 作业布置：布置相关的练习题目，巩固所学知识。
六、教学评估1. 课堂参与度：观察学生在课堂上的积极参与程度，提问和回答问题的积极性。
2. 练习作品：评估学生在实践环节的设计作品，包括创意、技巧和符合设计原则的程度。
3. 作业完成情况：检查学生完成作业的情况，包括及时性和质量。
七、教学反思1. 教学方法：反思所采用的教学方法是否适合学生的学习需求，是否能够有效地促进学生的理解和掌握。
2. 教学内容：反思教学内容是否全面，是否能够满足学生的学习目标。
3. 教学效果：评估学生的学习成果，反思教学目标和教学方法的实现程度。
八、教学拓展1. 移动UI设计趋势：介绍当前移动UI设计的趋势，如扁平化设计、materialdesign等。
Photoshop CC 移动UI设计案例教程(全彩慕课版)
目录分析
1.1认识移动UI 设计
1.2认识App
1.1.1 UI设计的相关概念 1.1.2移动UI设计的概念 1.1.3移动UI设计的特点 1.1.4移动UI设计的原则 1.1.5移动UI设计的常用软件 1.1.6移动UI设计的学习方法
1.2.1 App的基本概念 1.2.2 App的操作平台 1.2.3 App的设计流程 1.2.4 App的基本分类
2.1 iOS系统 设计规范
2.2 Android 系统设计规范
2.1.1 iOS设计尺寸 2.1.2 iOS界面结构 2.1.3 iOS基本布局 2.1.4 iOS图标规范 2.1.5 iOS字体规范
2.2.1 Android设计尺寸 2.2.2 Android界面结构 2.2.3 Android基本布局 2.2.4 roid字体规范 2.2.5 Android图标规范
5.1闪屏页 5.2引导页
5.3首页 5.4个人中心页
1
5.5详情页
2
5.6注册登录 页
3 5.7课堂案
例——制作美 食到家App
4 5.8课堂练
习——制作 Delicacy App
5 5.9课后习
题——制作美 食来了App
5.1.1品牌推广型闪屏页 5.1.2活动广告型 5.1.3节日关怀型
1
3.1栏
2
3.2视图
3
3.3控件
4 3.4课堂练
习——制作旅 游类App酒店 详情页
5 3.5课后习
题——制作旅 游类App预约 美食页
3.1.1课堂案例——制作旅游类App首页 3.1.2状态栏 3.1.3导航栏 3.1.4搜索栏 3.1.5范围栏 3.1.6标签栏 3.1.7工具栏
图形图像处理PhotoshopCC(电子商务专业)高职PPT完整全套教学课件
第一章 Photoshop CC软件概述
3.保存图像
（2）保存为其他格式文件
步骤1：选择菜单“文件”/“存储为”命令，弹出“存储为”对话框； 步骤2：在“格式”下拉列表中选择要转换的图像格式，如JPEG格式； 步骤3：在“存储选项”中按需要进行设置； 步骤4：单击“保存”按钮，弹出JPEG选项对话框； 步骤5：在“调板”和“选项” 中进行相应设置； 步骤6：单击“确定”按钮，转换完成。
第一章 Photoshop CC软件概述
2
Photoshop CC的操作界面
第一章 Photoshop CC软件概述
启动Photoshop CC后，将打开其默认的工作界面，主要由菜单栏、工具选 项栏、工具面板、图像窗口、文件选项卡、浮动调板和状态栏7部分组成。
第一章 Photoshop CC软件概述
6.画布调整
选定需要改变画布大小的图像 文件，选择菜单“图像”/“画 布大小”命令
单击“确定”按钮
在“新建大小”选项组中设 置适合的度量单位，并在 “宽度”和“高度”文本框 中输入数值，然后在“定位” 框中单击相应的按钮，以调 整图像在画布中的位置
第一章 Photoshop CC软件概述
7.标尺
使用标尺可以准确地显示出当前光 标所在位置和图像尺寸，让用户更 加准确地对齐图像和确定选取范围， 选择菜单“视图”/“标尺”命令 即可打开标尺。
步骤1：打开要修改的 图片，执行【图像】— 【图像大小】命令，即 可查看图片的大小，如 图所示。
第二章 Photoshop CC基础操作
步骤2：在【宽度】和【高度】文 本框中可以设置新的数值，并可以 在数值后面选择不同的单位，如图 所示。
第二章 Photoshop CC基础操作
触摸屏界面设计 Photoshop中的APP界面设计技巧
触摸屏界面设计：Photoshop中的APP界面设计技巧随着智能手机和平板电脑的普及，APP应用已成为人们生活不可或缺的一部分。
作为APP的核心设计软件之一，Photoshop不仅提供了丰富的工具和效果，还具备强大的界面设计能力。
本文将分享一些在Photoshop中设计APP界面的技巧，帮助你创建出精美、易用的触摸屏界面。
1. 设计前的准备在开始设计APP界面之前，先要明确设计的目标和主题。
了解用户需求和使用场景，明确设计的风格，例如是扁平化、材质化还是简洁现代。
同时，要充分考虑屏幕尺寸和分辨率，以确保最终设计在不同设备上都能良好呈现。
2. 创建基本界面结构首先，使用矩形工具创建一个画布，大小和目标设备的屏幕尺寸一致。
然后，根据APP的功能和用户操作流程，设计出基本的界面结构，如顶部导航栏、底部功能栏、以及各个模块的布局。
3. 图标与按钮设计图标和按钮是APP界面设计中重要的元素，能够提升用户体验和操作的便利性。
在Photoshop中，可以使用矢量工具，如形状工具或自定义形状工具，创建各种形状的按钮和图标。
利用图层样式选项，可以为按钮添加阴影、渐变或者描边等效果，提升其立体感和可点击性。
4. 色彩与配色方案色彩在APP界面设计中扮演着重要的角色。
选择适合目标用户和设计主题的配色方案非常关键。
Photoshop中可以使用取色器工具来选取色彩，也可以利用调色板来创建自定义的配色方案。
同时，要保持色彩的一致性和层次感，以避免过于花哨或压抑的效果。
5. 字体与排版设计选择合适的字体和进行良好的排版是APP界面设计中必不可少的步骤。
Photoshop提供了各种字体样式和字体库，可以根据设计风格选择适合的字体。
合理的行间距、字号和对齐方式能够提升文字的可读性和界面的整体感觉。
6. 图片与图层处理在APP界面中，图片可以起到引人注目的作用, 用于展示商品或者美化界面。
在Photoshop中，利用图层功能和蒙版工具，可以轻松调整和处理图片。
使用Photoshop设计网页界面和用户界面
使用Photoshop设计网页界面和用户界面第一章：Photoshop设计网页界面和用户界面的概述Photoshop是一种专业的图像编辑软件，广泛应用于网页设计和用户界面设计。
本章将介绍Photoshop设计网页界面和用户界面的基本概念，包括设计原则、布局、颜色选择、字体使用等。
第二章：设计原则在设计网页界面和用户界面时，遵循一些基本的设计原则是非常重要的。
本章将介绍对比度、层次、一致性、简约性等设计原则的应用，以及如何平衡美观性和功能性。
第三章：界面布局界面布局是设计网页界面和用户界面的关键步骤。
本章将介绍常见的布局类型，如固定布局、流布局和响应式布局，并讲解如何选择合适的布局方式以实现用户友好的界面设计。
第四章：颜色选择颜色在网页界面和用户界面设计中起到重要的作用。
本章将介绍如何选择合适的颜色搭配，如何运用颜色心理学原理来传递信息和情感，以及如何使用Photoshop的颜色调整工具来优化颜色效果。
第五章：字体使用字体是界面中的重要元素之一，能够直接影响用户体验。
本章将介绍如何选择适合的字体类型和字号，并讲解如何使用Photoshop的文字工具进行字体样式的调整和设置。
第六章：按钮和导航设计按钮和导航是网页界面和用户界面中最常见的元素之一。
本章将介绍如何设计吸引人的按钮样式和导航结构，以及如何使用Photoshop的形状工具和图层样式来创建独特的按钮和导航效果。
第七章：图像和图标处理图像和图标是网页界面和用户界面设计中常用的元素。
本章将介绍如何使用Photoshop的图像处理功能来优化图像质量和文件大小，以及如何使用矢量图标库来创建可缩放的图标。
第八章：界面交互设计界面交互设计是确保用户界面功能和易用性的重要步骤。
本章将介绍如何使用Photoshop的切片工具和导出功能来生成交互式原型，并讲解如何使用Photoshop进行用户界面的动画设计。
第九章：网页界面和用户界面的优化在设计完成后，对网页界面和用户界面进行优化是必不可少的。
ui手机界面设计课程及内容
在很多地方都会使用ui设计，而使用最多的领域，可能要算界面了。
智能的广泛使用让很多人都喜欢使用，量APP软件正式ui界面展宏图之地。
就让为家介绍ui界面设计课程及内容。
ui界面设计课程及内容课程分为四个阶段，从GUI(平面设计)、WUI（网页设计）、MUI（交互设计）、实训，具体安排如下。
阶段：GUI(平面设计)课程内容：字体设计、VIS(LOGO设计、名片设计、海报设计、DM单设计、易拉宝设计等)、平面设计软件技术（PS、AI、ID）。
30秒性格测试：你否适合当一名设计师掌握技能：（1）根据内容需要，进行平面媒体的版面编排。
（2）完成平面宣传品的创意设计。
（3）执行形象VI视觉设计。
（4）完成会展、活动的整体布局，灯光舞美、气氛模拟设计。
（5）完成对照片、图片的后期处理。
ui界面设计第二阶段：WUI（网页设计）课程内容：banner设计、专题页设计、网页设计、策划、HTML、CSS、JS。
掌握技能：（1）负责网页、整体栏目的设计，美术策划及网页。
（2）负责制定用户界面设计规范。
（3）负责网页及软件产品用户界面的设计与。
（4）参与设计体验、流程的制定和规范。
第三阶段：MUI（交互设计）课程内容：ICON设计（系统图标、扁平图标、写实图标）、原型设计、交互设计、APP界面设计规范及原则、切图标注技巧。
交互设计软件技术（PS、AI、Aure、Cutterman、Markman）。
掌握技能：（1）掌握最系统的UI界面图标设计技能，重了解各种风格的设计思路与技法。
（2）了解UI与UE的基本定义，产品流程及其各职能的定位。
（3）运用交互软件便捷的理解交互原理，根据需求能独立分析交互逻辑关系，熟练掌握主流设计规范及切图标注技巧；第四阶段：实训课程内容：产品定位、需求分析，用户画像、竞品分析、规范信息架构、界面设计、AE交互动画、实战、交互设计软件技术（mind、AE、sketch）。
ui界面设计掌握技能：（1）独立完成产品的交互设计，包括界面设计、流程设计等。
PS项目1-1认识PS CC的工作界面
教学设计方案
软件。
它被广泛运用于数码照片后期处理、平面设计、网页设计以及UI设计等领域，是一款能想到就能做到的软件。
2013年7月，Adobe公司推出新版本Photoshop CC(Creative Cloud)。
在Photoshop CS6功能的基础上，Photoshop CC新增很多功能。
1、启动Photoshop CC程序，可以看到Photoshop CC的界面主要只有菜单栏、工具选项栏、面板、图像编辑窗口等组成，如图所示。
下面对工作界面逐一进行介绍。
菜单栏：菜单栏中包含可以执行的各种命令。
单击菜单名称即可打开相应的菜单。
标题栏：显示了文档名称、文件格式、窗口缩放比例和颜色模式等信息。
如果文档中包含多个图层，则标题栏中还会显示当前工作图层的名称。
工具箱：包含用于执行各种操作的工具，如创建选区、移动图像、绘画和绘图等。
工具选项栏：用来设置工具的各种选项，它会随着所选工具的不同而改变选项内容。
面板：有的用来设置编辑选项，有的用来设置颜色属性。
状态栏：可以显示文档大小、文档尺寸、当前工具和窗口缩放比例等信息。
UI设计-教学教案
《Photoshop CC 移动UI设计案例教程（全彩慕课版）》配套教学教案第1讲3.2.14 文字视图3.2.15 网络视图3.3 控件3.3.1 课堂案例——制作旅游类APP酒店列表页3.3.2 按钮3.3.3 编辑菜单3.3.4 标签3.3.5 页面控件3.3.6 选择器3.3.7 进度指示器3.3.8 刷新3.3.9 分段控件3.3.10 课堂案例——制作旅游类APP美食筛选页3.3.11 滑块3.3.12 步进器3.3.13 开关3.3.14 文本框3.4 课堂练习——制作旅游类APP酒店详情页3.5 课后习题——制作旅游类APP预约美食页小结1、了解并熟练掌握栏、视图和控件的概念。
2、了解并熟练掌握栏、视图和控件的分类。
3、了解并熟练掌握栏、视图和控件的设计规范。
4、熟练掌握iOS系统界面设计的方法和规范。
作业3.4 课堂练习——制作旅游类APP酒店详情页使用移动工具移动素材，使用横排文字工具输入文字，矩形工具、圆角矩形工具、直线工具绘制基本形状。
3.5 课后习题——制作旅游类APP预约美食页使用移动工具移动素材，使用横排文字工具输入文字，矩形工具、直线工具绘制基本形状。
第4讲4.2.18 菜单4.2.19 抽屉式导航4.2.20 状态指引4.2.21 课堂案例——制作医疗类APP医生筛选页4.2.22 选择控件4.2.23 底部面板4.2.24 侧面板4.2.25 滑块4.2.26 底部提示栏4.2.27 课堂案例——制作医疗类APP预约页4.2.28 选项卡4.2.29 文字框4.2.30 提示4.3 课堂练习——制作医疗类APP输入信息页4.4 课后习题——制作医疗类APP帮助支持页小结1、了解并熟练掌握栏和组件的概念。
2、了解并熟练掌握栏和组件的分类。
3、了解并熟练掌握栏和组件的设计规范。
4、熟练掌握Android系统界面设计的方法和规范。
作业4.3 课堂练习——制作医疗类APP输入信息页使用移动工具移动素材，使用置入命令置入图片，使用矩形工具、圆角矩形工具和钢笔工具绘制基本形状，使用横排文字工具输入文字。
使用Photoshop设计精美的UI界面
使用Photoshop设计精美的UI界面第一章：UI设计基础UI（User Interface）即用户界面，是指用户与计算机或其他电子设备交互时所看到和操作的界面。
一个好的UI设计能够提升用户体验，增加产品的吸引力。
在进行UI设计之前，有几个基础要点需要掌握。
1.1 色彩和配色色彩是UI设计中的重要组成部分，要根据产品的定位和需求，选择适合的配色方案。
可以运用调色环工具，自由组合所需颜色，也可以使用现成的配色方案，例如类似网页中常见的黑白灰色搭配，或是鲜艳明快的色彩。
1.2 字体选择字体对UI设计来说同样重要，合适的字体能让界面更加清晰易读。
可以选择常见的无衬线字体如Arial、Helvetica等，也可以根据产品的特点选择一些艺术感强的字体。
尽量避免使用过多的字体，保持界面的整洁性。
1.3 图片素材在UI设计中，常常会需要使用一些图片素材，如图标、背景图片等。
可以使用PS自带的画笔工具进行绘制，或是从一些免费或付费的素材网站上下载使用。
注意图片素材的分辨率和格式，要保证在不同设备上显示效果都良好。
第二章：常用的UI设计技巧UI设计中有许多技巧可以提升设计的效果和用户体验，下面介绍几个常用的技巧。
2.1 平面设计平面设计可以使界面更加简洁、直观，减少用户的学习成本。
通过运用色彩、线条和形状等元素，创造出简洁明了的界面效果。
可以使用PS中的形状工具、调整工具等来实现。
2.2 排版设计良好的排版设计可以提升文字的可读性，让用户更容易理解内容。
可以运用字间距、行间距、加粗等方式，调整文字的样式和布局。
同时，也可以通过添加一些插图或图片来提升文章的可读性，突出重点。
2.3 图标设计图标是UI设计中的重要元素，可以用来表示功能、指示状态、吸引用户注意等。
图标的设计要简洁明了，符合产品的风格。
可以使用PS的矢量工具绘制图标，并且通过添加渐变、阴影等效果使其更具立体感。
第三章：实战案例分析下面通过一个实战案例来展示如何使用Photoshop设计精美的UI界面。
《ps界面介绍》课件
选择工具
矩形选择工具
用于选择矩形区域，包 括矩形选框和椭圆选框
。
套索选择工具
用于选择不规则形状的 区域。
快速选择工具
通过拖动快速选择相似 颜色或形状的区域。
裁剪工具
用于裁剪图片或调整图 片大小。
裁剪与切片工具
01
02
03
裁剪工具
通过裁剪图片来突出重点 或调整构图。
切片工具
将图片切割成多个部分， 便于分别编辑或导出。
用于替换图片中的特定颜色。
铅笔工具
模拟真实铅笔效果，适用于绘制直线或曲线 。
历史记录画笔工具
恢复图片到之前的状态，类似于历史记录功 能。
文字工具
横排文字工具
用于在图片中添加横排文 字。
直排文字工具
用于在图片中添加直排文 字。
文字蒙版工具
创建一个文字形状的选区 ，用于添加文字或进行其 他编辑操作。
04
保存图片
选择“文件”菜单中的“保存” 选项，在弹出的保存对话框中选 择要保存的位置和文件名，选择 合适的格式，点击“保存”。
裁剪与调整图片大小
裁剪图片
选择工具箱中的“裁剪工具”，在图 片上拖拽出裁剪区域，调整裁剪框的 大小和位置，完成后按Enter键确认 。
调整图片大小
选择工具箱中的“图像大小”工具， 在弹出的对话框中输入新的宽度和高 度，按Enter键确认。
课程目标
掌握Photoshop界面 基本构成和布局
学会高效利用 Photoshop界面进行 图像处理和设计工作
熟悉菜单栏、工具箱 、面板等主要功能区 域的使用方法
02
Photoshop界面概览
菜单栏
文件
用于打开、保存、导入和导出文 件等操作。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（2）在【图层】面板中单击【创建新图层】按钮，新建【图层1】，如图所示。
9.1.1 制作界面主体效果
听我讲
（3）在工具栏中单击前景色，并在打开的【拾色器（前景色）】面板中设置前景 色为【白色】，单击确定，关闭【拾色器（前景色）】面板。在工具栏中选择【圆角 矩形工具】，然后在工具属性栏中设置【选择工具模式】为【像素】，【半径】为10 像素，然后再视图中依照如图所示绘制一个白色圆角矩形。
9.1.2 制作表单控件
听我讲
（9）选择【内阴影】复选框，并进入【内阴影】选项面板，然后将【阴影颜色】 的RGB值设置为213、213、213，【距离】设置为【1像素】，【大小】为【1像素】， 效果如图所示。
（10）最后单击【确定】按钮，完成设置图层样式，然后将其调整至如图所示的位 置处。
9.1.3 制作倒影效果
（6）在菜单栏中单击【选择】|【修改】|【扩展】命令，弹出【扩展选区】对话 框，设置【扩展量】为3像素，如图所示。
（7）单击【确定】按钮，即可扩展选区大小，如图所示。
9.3.2 制作主体效果
听我讲
（8）按Delete键删除选区内的图像，按Ctrl+D组合键，取消选区，如图所示。 （9）在菜单栏中选择【视图】|【清除参考线】命令，清除参考线，如图所示。 （10）选择工具箱中的【魔棒工具】，在图像编辑窗口中左下角的矩形块上创建一 个选区，如图所示。
9.1 社交APP登录界面设计 9.2 锁屏界面 9.3 手机来电界面
（）课时 （）课时 （）课时
案例名称 作品描述
跟我学
9.1 社交APP登录界面设计
本实例讲解如何制作社交APP登录界面，效果如图所示。
案例预览
9.1.1 制作界面主体效果
听我讲
本节制作社交通讯应用登录界面的背景效果，将使用【自然饱和度】来调整图层、 圆角矩形工具、图层样式和渐变工具等。
（1）在图层面板中，新建【图层2】，如图所示。 （2）选择工具箱中的【椭圆选框工具】，创建一个椭圆选区，如图所示。
9.2.2 制作圆环效果
听我讲
（3）在菜单栏中选择【编辑】|【描边】命令，弹出【描边】对话框，设置【宽度】 为2像素，【颜色】设置为白色，如图所示。
（4）单击【确定】按钮，即可描边选区，如图所示。
（4）在图层面板中双击【图层1】图层，在弹出的【图层样式】面板中，选择【描 边】复选框，在【描边】选项面板中将【大小】设置为2像素，【位置】为【外部】， 单击【颜色】为右侧的色块，并在打开的【拾色器（描边颜色）】面板中将RGB参数值 分别设置为16、93、198，如图所示。
9.1.1 制作界面主体效果
9.1.3 制作倒影效果
听我讲
（3）按下键盘上的Ctrl+T键，打开变换控制框。然后单击鼠标右键，在弹出的右 键菜单中选择【垂直翻转】选项，如图所示。
（4）对当前图像进行垂直翻转，确定选中【倒影】图层，单击【添加矢量蒙版】 按钮，为图层添加蒙版，单击【渐变工具】按钮，将颜色设置为黑白渐变，拖动鼠标 制作图像的倒影效果如图所示。
听我讲
（9）完成图像亮度及对比度后的效果如图所示。 （10）新建【自然饱和度1】调整图层，在打开的【属性】面板中将【自然饱和度】 设置为50，将【饱和度】设置为28，如图所示。
9.2.1 制作背景效果
听我讲
（11）设置图像的色彩饱和度后的效果如图所示。 （12）在图层面板中，单击【创建新图层】按钮，新建【图层1】，如图所示。 （13）在工具箱中单击前景色色块，在打开的【拾色器（前景色）】对话框中，将 前景色的RGB设置为1、23、51，设置完毕后单击【确定】按钮，完成设置，如图所示。
听我讲
下面主要运用单行选框工具、单列选框工具、【扩展】命令、魔棒工具以及填色操 作等，设计手机Fra bibliotek电UI的主体效果。
（1）单击设置前景色色块，在弹出的【拾色器（前景色）】对话框中，设置前景 色的RGB值设置为206、227、239，如图所示。
（2）按Alt+Delete组合键，为【图层1】填充前景色，如图所示。
9.3.1 添加参考线
听我讲
（3）在菜单栏中选择【视图】|【新建参考线】命令，弹出【新建参考线】对话框， 勾选【水平】单选按钮，设置【位置】为30厘米，如图所示。
（4）单击【确定】按钮，新建一条水平参考线，如图所示。 （5）使用同样的方法，继续创建两条【位置】分别为36、42厘米的水平参考线， 如图所示。
9.3.1 添加参考线
听我讲
（6）在菜单栏中选择【视图】|【新建参考线】命令，弹出【新建参考线】对话框， 勾选【垂直】单选按钮，设置【位置】为12.5，如图所示。
（7）单击【确定】按钮，即可新建一条垂直参考线，选择工具箱中的【矩形选框 工具】，沿参考线绘制一个矩形选区，如图所示。
9.3.2 制作主体效果
（3）调出裁剪控制框，如图所示。 （4）在工具属性栏中设置裁剪控制栏的长宽比为【1000】：【750】，如图所示。
9.2.1 制作背景效果
听我讲
（5）设置完毕后，即可调整裁剪控制框的长宽比，将鼠标指针移至裁剪控制框内， 单击鼠标左键的同时并拖拽图像到如图所示的位置处。
（6）执行上述操作后，按下键盘上的Enter键确认，即可按固定的长宽比来裁剪图 像，如图所示。
9.2.1 制作背景效果
听我讲
（7）在菜单栏中选择【图形】【新建调整图层】【亮度/对比度】命令，然后在弹 出的【新建图层】对话框中保持默认设置，最后单击【确定】按钮，如图所示。
（8）即可新建【亮度/对比度1】调整图层，展开【属性】面板，将【亮度】设置 为18，将【对比度】设置为30，如图所示。
9.2.1 制作背景效果
听我讲
（5）选择【投影】复选框并进入【投影】选项面板，选择【混合模式】右侧的 【设置阴影颜色】色块，并在打开的【拾色器（投影颜色）】面板中将RGB值设置为： 11、91、159，单击【确定】按钮，关闭拾色器，如图所示。
（6）完成后的效果所示。
9.1.2 制作表单控件
听我讲
接下来将制作APP登录界面中的表单控件效果。 （1）新建【图层2】图层，然后再工具箱中选择【圆角矩形工具】，并将【选择工 具模式】设置为【路径】，【半径】设置为【10像素】，然后依照图所示绘制图形。 （2）按下键盘上的Ctrl+Enter键，将当前图形转换为选区，如图所示。
（6）按下键盘上的Ctrl键，再图层面板中单击【图层2】左侧的缩略图，如图所示。
9.1.2 制作表单控件
听我讲
（7）新建【图层3】图层，然后按下键盘上的Ctrl+Del键，将当前选区填充为白色， 效果如图所示。
（8）按下键盘上的Ctrl+D键，取消选区，然后在图层面板中双击选择【图层3】图 层在打开的【图层样式】对话框中选择【描边】复选框，并进入【描边】选项面板， 然后将【大小】设置为【2像素】，将【描边颜色】的RGB值设置为192、192、192，如 图所示。
（4）确定当前图层处于选择状态，然后在菜单栏中选择【选择】【变换选区】命 令，然后依照图所示对处于编辑状态的选区进行调整。
9.1.2 制作表单控件
听我讲
（5）调整完毕后，按下键盘上的Enter键确认，按下键盘上的D键，恢复工具箱中 前景色与背景色的默认设置，然后按下键盘上的Ctrl+Delete键，将背景色指定给当前 选区，按下Ctrl+D键，取消选区，如图所示。
9.2.3 完善细节效果
听我讲
下面主要运用【外发光】图层样式、添加素材等操作，完善安卓系统锁屏界面的细 节效果。
（1）打开【锁屏素材2.psd】素材文件，将其拖拽至当前图像编辑窗口中的合适位 置，如图所示。
（2）双击【锁图标】图层，弹出【图层样式】对话框，勾选【外发光】复选框， 将【大小】设置为10像素，如图所示。
（5）打开随书附带光盘CDROM|素材|Cha09|社交APP登录界面3.psd，然后将其拖拽 至当前图像中，最终效果如图所示。
案例名称 作品描述
跟我学
9.2 锁屏界面
安卓系统用户可以设置不同的个性化的锁屏界面。锁屏不仅可以避免一 些不必要的误操作，还能方便用户的桌面操作，美化桌面环境，不同的锁屏 画面给用户带来不一样的心情。效果如图所示。
9.1.2 制作表单控件
听我讲
（3）在工具箱中选择【渐变工具】，然后再属性栏中选择【点按可编辑渐变】色 块，并在打开的【渐变编辑器】中双击左侧的色标，在打开的【拾色器（色标颜色）】 面板中将RGB值设置为：75、160、231，单击【确定】关闭拾色器。鼠标双击右侧的色 标，在打开的【拾色器（色标颜色）】面板中将RGB值设置为：16、90、153，单击 【确定】按钮，为选区填充渐变后的效果如图所示。
9.3.1 添加参考线
听我讲
设计来电界面时，主要运用到了辅助线工具，来定位苹果手机中的各个按钮位置， 其具体操作步骤如下：
（1）在菜单栏中选择【文件】|【打开】命令，打开随书附带光盘中的 CDROM|Cha09|手机来电素材.jpg素材文件，如图所示。
（2）打开【图层】面板，单击【创建新图层】按钮，新建【图层1】，如图所示。
9.3.2 制作主体效果
听我讲
（3）按【Ctrl+D】组合键，取消选区，如图所示。 （4）选择工具箱中的【单行选框工具】，沿参考线创建一个水平单行选区，如图 所示。
9.3.2 制作主体效果
听我讲
（5）选择工具箱中的单列选框工具，单击工具属性栏中的【添加到选区】按钮， 沿中间的垂直参考线创建一个单列选区，如图所示。
9.2.2 制作圆环效果
听我讲
（5）按Ctrl+D组合键，取消选区，如图所示。 （6）双击【图层2】，弹出【图层样式】对话框，勾选【外发光】复选框，设置 【发光颜色】为白色、【大小】设置为10像素，如图所示。