第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界面概览
菜单栏
文件
用于打开、保存、导入和导出文 件等操作。
使用Photoshop设计手机APP的界面
使用Photoshop设计手机APP的界面Photoshop是一款功能强大的设计软件，广泛应用于各种领域，包括手机APP界面的设计。
本文将详细介绍使用Photoshop设计手机APP界面的步骤和技巧。
设计手机APP界面的步骤如下：1. 收集创意和灵感：- 浏览各种APP界面设计作品，获取创意和灵感。
- 关注当前流行的设计风格和趋势，例如扁平化设计、暗黑模式等。
2. 确定APP的功能和目标用户：- 确定手机APP的功能和要解决的问题。
- 定义目标用户，了解用户需求和喜好，为界面设计做出合理的调整。
3. 制定草图和线框图：- 使用草图工具，例如铅笔或PS的画笔工具，绘制初步的界面构思。
- 根据功能和用户需求，绘制线框图，定义界面的元素和布局。
4. 设计界面元素：- 使用PS的形状工具和文本工具，设计各种按钮、文本框、图标等界面元素。
- 通过调整颜色、大小和位置等属性，使得元素在界面上具有合适的视觉效果。
5. 选择和应用颜色方案：- 根据品牌色彩或用户偏好，选择合适的颜色方案。
- 使用PS的取色器工具，获取颜色的RGB或Hex值，保证界面上的各个元素色彩的一致性。
6. 设计界面的布局和层次结构：- 使用PS的图层面板，对界面元素进行分组和排序，保证良好的层次结构。
- 调整元素的对齐和间距，保证界面整体的平衡和美观。
7. 添加图片和图标：- 使用PS的智能对象功能，导入手机APP所需的图片和图标。
- 根据需要进行裁剪、缩放和调整颜色等处理，使其符合界面的设计风格。
8. 设计交互效果：- 使用PS的动画工具，设计一些简单的交互效果，如按下按钮时的颜色变化、页面切换动画等。
- 导出GIF或视频格式的效果图，以便在展示或演示时使用。
9. 优化和导出界面素材：- 确保界面的可用性和易用性，对元素进行细微调整和优化。
- 使用PS的切片工具，将界面元素按照需要导出为图片或图标文件。
10. 建立设计规范和文档：- 汇总设计所用的字体、颜色、图标等元素信息，建立设计规范文档。
UI设计网页美工设计师的Photoshop CC 生成器切片全攻略
UI设计网页美工设计师的Photoshop CC 生成器切片全攻略在很多的设计项目中都会用到PS软件，PS功能强大功能中有一个切片工具，这是UI设计师和网页美工设计人员需要的掌握的使用方法。
来自非凡学院UI设计培训的武老师为同学们带来了PS 切片工具的教程的全攻略。
在非凡学院学习UI设计培训、网页设计培训、网页美工培训等课程的同学使用的都是学院默认版本CS6进行练习，虽然老师们在课堂上都会强调PS的版本再高，但使用得最多最实用的功能仍然是那几个，事实也确实如此。
但对于切片功能，CC版本以后确实发生了重大变化，使得原来的切片输入工具失去了意义。
以下仅针对需要经常使用Photoshop进行切片的同学，请安装至少Photoshop CC2014以上版本才能使用生成器。
打开编辑菜单——首选项，在增效工具下勾选启用生成器，然后关闭软件重开。
一、单个形状切片输出值得注意的是，生成器并不支持像素对象的输出，所以首选的是形状图层，请同学们注意。
1，首先我创建一个“切图示范”的文件，保存在指定位置，格式是psd。
2，接下来使用形状层绘制两个图标，比较常见的填充色和描边色图标，分别按要求进行命名，然后在图层名称的后缀加上 . png3，保存。
选择文件菜单——生成——图像资源。
4，在保存psd文件的位置会自动生成一个同名assets文件夹，然后在里面就可以找到刚刚命名为.png 的图标文件，它们被自动切片输出，怎么样？很方便吧？5，但大家仔细看一下，发现由于图标锁定宽高比的关系，变成了39*40。
按照设计规范，这显然是不合格的，图标尺寸出现奇数，并且不是我们规范中的44*44的尺寸。
接下来我们在原来图标图层的下方，分别创建两个44*44的正方形形状层。
6，分别各自选中上方图标，按住Ctrl载入选区的方式载入下方正方形选区并添加图层蒙版。
原有的两个正方形最后可以删除或隐藏。
7，再次保存刷新，在输出位置可以看到输出的png尺寸，变成了规范要求的44*44，同时周围保持透明边距。
PhotoshopCCUI设计案例教程教学教案
《Photoshop CC UI设计案例教程》教学初中九年级数学教案第1讲课时内容初识UI设计授课时间90分钟课时2教学目的☑了解UI设计地有关概念。
☑了解UI设计项目流程。
☑了解UI设计地风格表现。
☑了解UI设计地行业发展。
☑了解UI设计地学习方法。
教学重点☑了解UI设计地有关概念与常用软件。
教学难点☑掌握UI设计地学习方法。
初中九年级数学教案教学设计1、教学思路:（1）通过对UI设计地有关概念,项目流程,风格表现与行业发展地讲解,可以对UI设计有一个宏观地认识;（2）通过UI设计地学习方法地讲解,可以更好地了解如何学习UI设计。
2、教学手段:（1）通过资料了解UI设计地基本概念;（2）通过深入讲解了解UI设计地项目流程,风格表现,行业发展与学习方法。
学习内容讨论问题:1,UI设计地常用软件有哪些？2,UI设计地学习方法有哪几类？内容大纲:具体可结合本项目地PPT课件进行配合讲解。
1.1 UI设计地有关概念1.1.1 UI设计地概念1.1.2 UI与WUI与GUI1.1.3 UI设计常用术语中英文对照1.1.4 UI设计常用软件1.2 UI设计项目流程1.2.1 项目设计流程1.2.2 UI设计流程1.3 UI设计地风格表现1.4 UI设计地行业发展1.4.1 UI设计行业现状1.4.2 UI设计发展趋势1.5 UI设计地学习方法小结1、了解UI设计地有关概念,项目流程,风格表现与行业发展。
2、掌握UI设计地学习方法。
第2讲课时内容图标设计授课时间90分钟课时 2教学目的☑了解图标地基础知识。
☑熟练掌握图标地设计规范。
☑了解图标地风格类型。
教学重点☑熟练掌握图标地设计流程与原则。
教学难点☑了解并掌握图标地尺寸与单位。
初中九年级数学教案教学设计1、教学思路:（1）通过对课堂实训案例地讲解掌握绘制扁平化风格-单色面性图标地方法与技巧;（2）再通过有关地解析掌握图标地基础知识,设计规范与风格类型;（3）最后通过课堂练习与课后习题消化所学知识。
如何使用Photoshop来设计UI界面
如何使用Photoshop来设计UI界面Photoshop已经成为了界面设计师的常用工具，因为它提供了丰富的功能和强大的设计能力。
通过使用Photoshop，设计师可以创建出具有吸引力和易用性的用户界面（UI）。
在本文中，将详细介绍如何使用Photoshop来设计UI界面的步骤。
步骤1：准备工作在开始设计UI之前，首先要梳理需求，并对设计进行初步规划。
明确设计的目标和风格，了解用户的需求和偏好。
同时，还需要收集相关素材，例如图标、图片、颜色方案等。
步骤2：创建画布打开Photoshop，并新建一个空白画布。
根据设计需求，设置画布的尺寸和分辨率。
一般来说，移动端UI的画布尺寸可以设置为手机屏幕的宽度和高度，而Web端UI的画布尺寸则可以根据设计要求来设定。
步骤3：绘制基本结构通过使用矩形工具、椭圆工具等功能，绘制UI界面的基本结构。
根据设计需求，设置好各个元素的位置和大小。
可以使用参考线和网格来辅助对齐和布局。
此外，还可以通过图层面板来管理不同的元素，并为每个元素命名。
步骤4：添加背景和颜色选中背景图层，然后选择合适的颜色或者插入自己的图片作为背景。
可以使用渐变工具或填充工具来为界面添加背景的颜色。
在选择颜色时，要考虑整体的风格和配色方案，并根据需求选择符合用户喜好的颜色搭配。
步骤5：设计按钮和图标按钮和图标是UI界面中常用的元素。
通过使用形状工具和笔刷工具，设计师可以绘制出具有吸引力和易用性的按钮和图标。
在设计按钮时，要考虑按钮的大小、形状、颜色和样式。
可以使用渐变效果、阴影效果等来增加按钮的立体感。
步骤6：添加文本元素在UI界面中，文本元素也是非常重要的部分。
通过使用文本工具，设计师可以添加标题、标签、按钮文字等文本内容。
在选择字体时，要考虑字体的风格、可读性和适应性。
可以使用段落面板和字符面板来对文本进行格式化。
步骤7：优化和调整在完成基本的UI设计后，设计师可以对整体设计进行优化和调整。
可以调整元素的大小和位置，修改颜色和样式，增加细节和效果等。
学习使用Photoshop制作UI设计
学习使用Photoshop制作UI设计章节一：介绍Photoshop的背景和作用Photoshop是一款由Adobe公司开发的图像处理软件，被广泛运用于图像处理、UI设计、网页设计等领域。
它有着强大的功能和丰富的工具，能够帮助设计师创建出精美的UI设计。
本文将介绍学习使用Photoshop制作UI设计的基本方法和技巧。
章节二：准备工作和界面介绍在开始学习使用Photoshop制作UI设计之前，我们首先需要下载和安装Photoshop软件，并且了解软件的界面和基本功能。
Photoshop的界面包括菜单栏、工具栏、选项栏等，设计师需要熟悉这些界面元素的作用和操作方法。
章节三：图层操作和图像编辑在Photoshop中，图层是一种非常重要的概念。
设计师可以将不同的元素（如按钮、文本框等）放置在不同的图层中，并对图层进行编辑和调整，从而实现精确的UI设计。
本章节将介绍图层的创建、命名、复制、合并等操作，以及对图层进行调整和编辑的方法。
章节四：色彩和渐变的运用色彩在UI设计中起着非常重要的作用，能够影响用户的感知和情绪。
设计师可以利用Photoshop提供的各种调色工具和调色板，选择合适的颜色和渐变效果来创建吸引人的UI界面。
本章节将介绍如何使用Photoshop进行色彩选择、调整和渐变效果的添加。
章节五：形状和文本处理UI设计中常常需要使用各种形状和文本元素，如按钮、图标、标题等。
设计师可以利用Photoshop的形状工具和文本工具，创建和编辑这些元素。
本章节将介绍如何使用形状工具绘制各种形状，并进行编辑和填充。
同时，还会介绍如何使用文本工具添加和编辑文本内容。
章节六：图像导入和剪裁有时候，UI设计需要使用一些特定的图像素材。
设计师可以利用Photoshop的图像导入和剪裁功能，将所需的图像导入到设计中，并对其进行剪裁和调整。
本章节将介绍如何导入图像文件，如何使用剪裁工具对图像进行剪裁，以及如何进行图像尺寸和分辨率的调整。
PS教程第9章 网页制作
第9章综合案例制作课题第一节按钮制作课时教学内容1、掌握Photoshop制作按钮的方法2、了解网站首页的组成内容教学目标掌握Photoshop制作按钮的方法；了解网站首页的组成内容教学重点网站首页的组成内容教学难点掌握Photoshop制作按钮的方法教学活动及主要语言学生活动一、创设意境，导入新课（设疑法、提问法）导入：网站首页是一个网站的门面，要想设计出一个优秀的网站，就必须让它能引人入胜，能吸引每一个来访者的注意力，引起人们的好奇心。
优秀的首页是一个好的网站必须具备的要素。
在网页制作过程中，Photoshop 软件起到了重要的作用。
本章课程将学习网页的总要组成内容的制作方法。
提出疑问：老师现在有个问题,请一位同学来回答：网站首页包含了那些元素？由同学做答，老师补充并引入新课题：总要组成内容：按钮、GIF动画、网页LOGO、网页导航、网站首页排版等。
接下来看本节课案例效果图：二、新课教学（讲解法、提问法、示范法、练习法）1、新建文件，使用“圆角矩形”工具在工具属性栏中设置参数，固定大小值为（W:20,H:6）、半径为30像素。
绘制圆角矩形。
观察学生反映(对导入是否产生兴趣),并随着教师的讲解，引导出本节课要学习的内容。
此部分主要由老师来讲解，同时学生也配合着老师回答一些常见问题学生听课状态:此时学生应该注意听教师的讲解，因为此处是新知识，同时也应积极回答相应的问题，进行认真的思考学生听讲，笔记学生思考、讨论2、制作圆角矩形选区，创建一个新图层。
点击“图层1”，确定它为当前图层，点击鼠标左键绘制固定大小的圆角矩形路径，按<Ctrl+Enter>键，将路径转为选区，如图所示。
3、填充颜色，打开工具箱中“拾色器”对话框，设置前景色淡蓝色RGB为（149.197.217）。
将圆角矩形填充为淡蓝色，得到如图所示的效果。
4、为圆角矩形添加立体效果单击图层面板中的【添加图层样式】按钮。
分别设置斜面和浮雕、内发光、光泽、渐变叠加、外发光、投影，如图所示。
《Photoshop CC移动UI设计实例教程(微课版)》 教案
《Photoshop CC移动UI设计实例教程（微课版）》教案1.1 课程背景1.1.1 随着移动互联网的快速发展，移动应用界面（UI）设计成为了设计师们关注的焦点。
1.1.2 Photoshop CC作为一款功能强大的图像处理软件，在移动UI设计领域具有广泛的应用。
1.1.3 本教程通过实例讲解Photoshop CC在移动UI设计方面的应用，帮助学员掌握相关技巧。
二、知识点讲解2.1 Photoshop CC基本操作2.1.1 界面布局：介绍Photoshop CC的工作界面及各个功能区的用途。
2.1.2 文件操作：讲解新建、打开、保存和关闭文件的方法。
2.1.3 图像编辑：学习裁剪、缩放、旋转和翻转图像的操作。
三、教学内容3.1 实例1：制作登录界面3.1.1 设计思路：讲解登录界面的设计流程，包括布局、颜色搭配和字体选择等。
3.1.2 制作步骤：使用Photoshop CC绘制登录界面的背景、输入框、按钮等元素。
3.1.3 技巧点拨：介绍如何调整图层顺序、使用图层样式和蒙版等技巧。
四、教学目标4.1 掌握Photoshop CC的基本操作。
4.2 学会使用Photoshop CC制作移动UI设计中的常见元素。
4.3 能够独立设计并制作出符合设计思路的移动应用界面。
五、教学难点与重点5.1 难点：Photoshop CC的高级功能，如图层样式、蒙版和调整图层等在实际操作中的应用。
5.2 重点：实例教学中涉及到的具体制作步骤和技巧，以及如何将设计思路转化为实际操作。
（由于篇幅原因，仅展示了前五个章节的结构，您可以根据这个结构继续编写后续章节。
）教案六、教具与学具准备6.1 教学用具6.1.1 计算机及投影设备6.1.2 Photoshop CC软件6.1.3 教学PPT6.1.4 教学视频（微课）七、教学过程7.1 导入新课7.1.1 展示实例效果，引发学生兴趣7.1.2 介绍本节课的教学内容和目标7.1.3 简要说明实例制作过程7.1.4 提出问题，引导学生思考7.2 知识讲解7.2.1 讲解Photoshop CC基本操作7.2.1.1 界面布局及功能区用途7.2.1.2 文件操作方法7.2.1.3 图像编辑技巧7.2.2 知识点拓展7.2.2.1 介绍图层概念及其用途7.2.2.2 讲解图层样式、蒙版和调整图层的使用方法7.2.2.3 分析实例中应用的知识点7.3 实践操作7.3.1 学生自主尝试制作实例7.3.1.1 按照设计思路绘制界面元素7.3.1.2 调整图层顺序、应用图层样式等技巧7.3.1.3 学生相互交流、讨论遇到的问题和解决方法7.3.2 教师辅导7.3.2.1 针对学生遇到的问题提供指导7.3.2.2 演示制作过程，讲解相关技巧7.3.2.3 鼓励学生提出问题和意见，共同探讨八、板书设计8.1 教学重点板书8.1.1 Photoshop CC基本操作8.1.2 实例制作步骤及技巧8.1.3 设计思路与实际操作的转化方法8.2 教学难点板书8.2.1 图层样式、蒙版和调整图层的使用8.2.2 实例中涉及的高级功能8.2.3 针对性的问题解决方法九、作业设计9.1 课后练习9.1.1 制作一个简单的移动应用界面9.1.2 要求运用所学知识和技巧，体现个人设计风格9.1.3 提交作业时附上设计思路说明9.2 拓展作业9.2.1 分析并模仿一个喜欢的移动应用界面9.2.2 学会从实际应用中吸取经验，提高设计水平9.2.3 撰写课后心得体会，分享学习经验十、课后反思及拓展延伸10.1 教学效果反思10.1.1 学生对知识的掌握程度10.1.2 教学过程中存在的问题10.1.3 针对性地调整教学方法，提高教学效果10.2 学生学习反馈10.2.1 收集学生作业，评估学习成果10.2.2 听取学生意见，了解学习需求10.2.3 鼓励学生积极参与课堂讨论，提高课堂氛围10.3 拓展延伸10.3.1 介绍相关书籍、教程、在线课程等学习资源10.3.2 推荐参加设计比赛、研讨会等活动，拓宽视野10.3.3 鼓励学生自主探究，培养创新意识重点和难点解析一、重点环节1.1 知识点讲解在教学过程中，Photoshop CC基本操作的讲解是重点环节。
PhotoshopCC UI设计案例教程3 App界面设计
交互自查表
3.1 App基础知识
4.界面设计 原型图审查通过之后，就可以进入界面的视觉设计阶段了，这个 阶段的设计图就是产品最终呈现给用户的界面。
App界面
3.1 App基础知识
5.界面测试 界面测试阶段是让具有代表性的用户进行典型操作，设计人员和 开发人员在此阶段共同观察、记录。在测试中可以对设计的细节进行 相关的调整。
3.1.2.App设计的流程
App设计可以按照分析调研、交互设计、交互自查、界面设计、 界面测试、设计验证的步骤来进行 。
App设计的流程图
3.1 App基础知识
1.分析调研 App的设计是根据品牌的调性、产品的定位而进行的，不同应用 领域的App，设计风格也会有区别。因此，我们在设计之前应该先分 析需求，了解用户特征，再进行相关竞品的调研，明确设计方向。
3.2.1 iOS设计规范
4. iOS字体 (1) 系统字体 iOS 英 文 使 用 的 是 San Francisco (SF) 字 体 ， 其 中 SF 字 体 有 SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字。 中文使用的是苹方，共有6个字重。
3.1.3 App设计的原则
（2）遵从 流畅的动画和清晰美观的界面可以帮助用户理解内容并与之互动， 同时不干扰到用户的使用。内容一般填满整个屏幕，而半透明和模糊 效果通常暗示有更多内容。最低限度地使用边框、渐变和阴影可使界 面轻盈，同时确保内容明显。
以色列设计师Vlad Tyzun创作的App界面，各元素通过精心设计后，巧妙的突出重要内容
3.2.1 iOS设计规范
《移动端UI设计》课程习题答案
《移动端UI设计》课程习题答案第1章了解移动终端UI设计一、判断题对、对、错、错、对二、选择题1.B2.ABC3.ACD4.B5.C三、略第2章 UI图标设计【答案】一、判断题1.√2.×3.×4.√5.×二、选择题1.C2.B3.C4.B5.B三、操作题略第3章滑块设计【答案】一、判断题1.√2.×3.×4.√5.√二、选择题1.ABC2.ABC3.D4.ABCD5.ABCD三、操作题略第4章按钮设计【答案】一、判断题1.×2.√3.√4.×5.×二、选择题1.A2.B3.D4.C5.C三、操作题略第5章表单控件设计【答案】一、判断题1.√2.√3.×4.√5.√二、选择题1.C2.B3.C4.ABCD5.ABCD三、操作题略第6章 APP导航设计答案：一、判断题1.×2. ×3.4. √5. ×二、选择题1.ABCD2.ABCD3.ABC4.ABCD5.ACD三、操作题略第7章移动端界面设计答案：一、判断题1.√2.×3.√4.√5.×二、选择题1.B2.C3.A4.B5.C三、略第8章 APP综合设计实例答案：一、判断题1.×2. ×3.√4.√5. √二、选择题1.ABCD2.ABC3.B4.A5.B三、略第9章切图与标注答案：一、判断题1.√2.√3. ×4.√5. ×二、选择题1.ABC2.ABCD3.B4.ABCD5.ABCD三、略。
- 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像素，如图所示。