《PhotoshopCCUI设计案例教程电子教案第3章教案.docx》由会员分享，可在线阅读，更多相关《PhotoshopCCUI设计案例教程电子教案第3章教案.docx（84页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、YOUR LOGO原创力独家文档教材配套参考答案 课 题: 第3章 App界面设计课 时: 16课时授课类型: 讲授+实训教学目标: 了解App的基础知识 掌握App的设计规范 认识App常用界面类型教学重点:App的设计规范、App常用界面的设计方法教学难点:App常用界面的设计方法本章技能点：社交类App-闪屏页的绘制方法、社交类App-欢迎页的绘制方法、社交类App-首页的绘制方法、社交类App-消息列表页的绘制方法、社交类App-聊天页的绘制方法、社交类App-个人中心页的绘制方法本章教学技巧：1.知识讲解2.案例实训教学过程：（一）课前准备1.授课前准备准备好教学用具和教学设备2.板
2、书课题：第3章 App界面设计项目目标： 了解App的基础知识 掌握App的设计规范 认识App常用界面类型3.课程引入通过“制作侃侃App”案例效果展示引入App界面设计的概念 （二）课程内容3.1 App基础知识本节介绍App相关的基础知识，包括App的概念、App的流程以及App设计的原则。3.1.1 App的概念App是应用程序Application的缩写，一般指智能手机的第三方应用程序，如图所示。用户主要从应用商店下载App，比较常用的应用商店有苹果的App Store、华为应用市场等。应用程序的运行与系统密不可分，目前市场上，主要的智能手机操作系统有苹果公司的iOS和谷歌公司的An
3、droid系统。对于UI设计师而言，要进行移动界面设计工作，需要分别学习两大系统的界面设计知识。由Ron Design Agency创作的App界面3.1.2.App设计的流程App设计可以按照分析调研、交互设计、交互自查、界面设计、界面测试、设计验证的步骤来进行，如图所示。App设计的流程图1.分析调研App的设计是根据品牌的调性、产品的定位而进行的，不同应用领域的App，设计风格也会有区别。因此，我们在设计之前应该先分析需求，了解用户特征，再进行相关竞品的调研，明确设计方向，如图所示。 QQ音乐（左）、网易云音乐（中）、虾米音乐（右），三款虽然同是音乐App，但产品定位不同，因此设计风格也
4、有所区别2.交互设计交互设计是对整个App设计进行初步构思和流程制定的环节。一般需要进行纸面原型设计、架构设计、流程图设计、线框图设计等具体工作，如图所示。乌克兰UI/UX设计师Tatiana Lazarenko创作的App交互设计3.交互自查交互设计完成之后，进行交互自查是整个App设计流程非常重要的一个阶段。可以在执行界面设计之前检查出是否有遗漏缺失的细节问题，如下所示。4.界面设计原型图审查通过之后，就可以进入界面的视觉设计阶段了，这个阶段的设计图就是产品最终呈现给用户的界面。界面设计要求设计规范，图片、文字内容真实，并运用墨刀、principle等软件制作成可交互的高保真原型，以便后续
5、的界面测试，如图所示。乌克兰设计师StasAristov、AlyaPrigotska、Thanh Do联合创作的App界面5.界面测试界面测试阶段是让具有代表性的用户进行典型操作，设计人员和开发人员在此阶段共同观察、记录。在测试中可以对设计的细节进行相关的调整，如图所示。越南设计师Tran Mau Tri Tam进行的App细节调整6.设计验证设计验证是最后一个阶段，是为App进行优化的重要支撑。在产品正式上线后，通过用户的数据反馈进行记录，验证前期的设计，并继续优化，如图所示。App界面优化，由XToken0x设计师创作，图片来源于追波网3.1.3 App设计的原则在进行App设计时，需要遵
6、循iOS和Android系统的规范，因此可以根据iOS下的设计原则以及Android系统下Material Design语言中的设计原则进行设计。1.iOS设计原则iOS系统设计有清晰、遵从、深度三大原则。（1）清晰在整个系统中，文字在各种尺寸上都要清晰易读，图标精确而清晰，装饰精巧且恰当，令用户更易理解功能。利用负空间、颜色、字体、图形等界面元素巧妙地突出重要内容，并传达交互性，如图所示。以色列设计师Vlad Tyzun创作的App界面，各元素通过精心设计后，巧妙的突出重要内容（2）遵从流畅的动画和清晰美观的界面可以帮助用户理解内容并与之互动，同时不干扰到用户的使用。内容一般填满整个屏幕，而
7、半透明和模糊效果通常暗示有更多内容。最低限度地使用边框、渐变和阴影可使界面轻盈，同时确保内容明显，如图所示。印度设计师Abhisek Das创作的App界面。其中位于左侧App界面中橙色渐变银行卡旁边的卡采用了半透明效果，暗示用户可以进行滑动查看更多内容。两张App界面的渐变、边框以及阴影都不是很明显，使界面非常轻盈（3）深度独特的视觉层级和真实的动画效果传达层次结构，赋予界面活力，并促进用户理解。令用户通过触摸和探索发现程序的功能，不仅会使用户提高乐趣，更加方便用户了解功能，还能使用户关注到额外的内容。在浏览内容时，层级的过渡可提供深度感，如图所示。 乌克兰设计公司Cadabra Studi
8、o创作的App界面2.MaterialDesign设计原则Material Design语言有材质隐喻、大胆夸张、动效表意、灵活、跨平台五大原则。（1）材质隐喻Material Design的灵感来自物理世界及其纹理，包括它们如何反射光线和投射阴影。它对材料表面进行了重新构想，加入了纸张和墨水的特性，如图所示。材质隐喻（2）大胆夸张Material Design以印刷设计方法中的排版、网格、空间、比例、颜色和图像为指导，来创造视觉层次、视觉意义以及视觉焦点，使用户沉浸其中，如图所示。大胆夸张（3）动效表意通过微妙的反馈和平滑的过渡使动效保持连续性。当元素出现在屏幕上时，它们在环境中转换和重组，
9、相互作用并产生新的变化，如图所示。动效表意（4）灵活Material Design系统旨在实现品牌表达。它与自定义代码库集成，允许无缝实现组件、插件和设计元素，如图所示。灵活（5）跨平台Material Design使用包括Android、iOS、Flutter和Web的共享组件跨平台管理，如图所示。 跨平台3.2 App设计的规范App设计的规范分为iOS设计规范和Android设计规范两部分。3.2.1 iOS设计规范iOS的基础设计规范包括单位及尺寸、界面结构、布局、字体4个方面。1.iOS设计单位及尺寸（1）相关单位PPI：像素密度（Pixels Per Inch，PPI）是屏幕分辨率
10、单位，表示的是每英寸所拥有的像素数量，如图所示。像素密度越大，画面越细腻。因此，iPhone4与iPhone3GS屏幕尺寸虽然相同，但实际像素大了一倍，清晰度自然变高。PPI的计算公式（X、Y分别为横向、纵向的像素数）Asset：比例因子。标准分辨率显示器具有1:1的像素密度，用1x表示，其中一个像素等于一个点。高分辨率显示器具有更高的像素密度，比例因子为2.0或3.0，分别用2x和3x表示，如图所示。因此，高分辨率显示器需要具有更多像素的图像。一个10px10px的标准分辨率（1x）图像，该图像的2x版本为20px20px，3x版本为30px30px逻辑像素和物理像素：逻辑像素（Logic
11、Point），单位为“点”（points，pt），是根据内容尺寸计算的单位。iOS开发工程师和使用Sketch软件设计界面的UI设计师使用的单位都是pt。物理像素（Physical Pixel），单位“像素”（pixels，px），是按照像素格计算的单位，也就是移动设备的实际像素。使用Photoshop软件设计界面的UI设计师使用的单位都是px。例如，iPhoneX/XS逻辑像素是375812pt，由于视网膜屏像素密度的增加，即1pt=3px，因此iPhoneX/XS的物理像素是11252436px，如图所示。逻辑像素与物理像素的转换（2）设计尺寸iOS常见的设备尺寸，如图下所示。在进行界面设
12、计时，为了一稿适配多种尺寸，都是以iPhone6/6s/7/8为基准的。如果使用Photoshop就创建7501334px尺寸的画布，如果使用Sketch就建立375667pt尺寸的画布。iOS常见设备的尺寸iOS设计标准尺寸2.iOS界面结构iOS界面主要由状态栏、导航栏、标签栏组成，其结构如图和图所示。iOS手机端界面结构图 图片来源于520设计网iOS iPad界面结构图，图片来源于520设计网3.iOS布局（1）网格系统网格系统（Grid Systems），又称为栅格系统，是利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，进行页面布局设计的方式，能
13、使布局规范、简洁、有秩序，如图所示。网格系统（2）组成元素网格系统由列、水槽以及边距3个元素组成，如图所示。列是内容放置的区域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕左右边缘之间的距离。组成元素（列、水槽、边距）（3）网格的运用单元格：iOS的最小点击区域是44pt，即88px（2x）。因此，在适用性方面，能被整除的偶数4和8作为iOS最小单元格比较合适。其中4px容易将页面切割细碎，所以比较推荐使用8px，如图所示。单元格列：列的数量有4、6、8、10、12、24这几种情况。其中4列通常在2等分的简洁页面时使用，6、12和24基本满足所有等分情况，然而24列将页面切割太碎，
14、如图3-27所示，因此实际使用还是以12列和6列为主。 列的使用水槽：水槽、边距以及横向间距的宽度可以依照最小单元格8px为增量进行统一设置，如24、32、40。其中32px（16pt2x）最为常用，如图所示。水槽边距：边距的宽度也可以与水槽有所区别。在iOS中以2x为基准，常见的边距有20px、24px、30px、32px、40px以及50px。边距的选择应结合产品本身的气质，其中30px是最为舒适的边距，也是绝大多数App首选的边距，如图所示。iOS中的“设置”及“通用”页面都采用了30px的边距4.iOS字体（1）系统字体iOS英文使用的是San Francisco （SF）字体，其中S
15、F字体有SF UI Text（文本模式）和SF UI Display（展示模式）两种尺寸。SF UI Text适用于小于等于19pt的文字，SF UI Display适用于大于等于20pt的文字。中文使用的是苹方字体，共有6个字重，如图所示。iOS系统字体 （2）字号大小iOS设计时要注意字号的大小，下所示。苹果官网的建议全部是针对英文SF字体而言的，中文字体需要UI设计师灵活运用，以最终呈现效果的实用性和美观度为基准进行调整。其中10pt（2x为20px）是手机上显示的最小字体，一般位于标签栏的图标底部。为了区分标题和正文，字体大小差异至少保持在4px(2pt2x)，正文的合适行间距在1.5
16、2倍之间。基于2x即iPhone6/7/8App界面中的字号3.2.2 Android设计规范Android系统基础规范也包括设计尺寸及单位、界面结构、布局、字体4个方面。1.Android设计尺寸及单位（1）相关单位DPI：网点密度（Dot Per inch，DPI）是打印分辨率的单位，表示每英寸打印的点数。在移动设备上等同于PPI，表示的是每英寸所拥有的像素数量。通常PPI代表苹果手机，DPI代表安卓手机。独立密度像素与独立缩放像素：独立密度像素（Density-independent pixels，dp）是安卓设备上的基本单位，等同于苹果设备上的pt。Android开发工程师使用的单位是
17、dp，所以UI设计师进行标注时应将px转化成dp，公式为dpppi/160 = px。当设备的DPI值是320时，通过公式可得出1dp=2px，如图所示（类似iPhone6/7/8的高清屏）。dp与px的转换独立缩放像素（Scale-independent Pixel，sp）是Android设备上的字体单位。Android平台允许用户自定义文字大小（小、正常、大、超大等），当文字尺寸是“正常”状态时，1sp=1dp，如图所示。而当文字尺寸是“大”或“超大”时，1sp1dp。UI设计师进行Android界面的设计时，标记字体的单位选用sp。（2）设计尺寸Android常见的设备尺寸，如下所示。在
18、进行界面设计时，如果想要一稿适配Android和iOS，就使用Photoshop新建7201280px尺寸的画布。如果根据Material Design新规范单独设计Android设计稿，就使用Photoshop新建10801920px尺寸的画布。无论哪种需求，使用Sketch只建立360640dp尺寸的画布即可。 Android常见的设备尺寸Android设计标准尺寸2.Android界面结构Android界面主要由状态栏、导航栏、顶部应用栏组成，其结构如图所示。Android界面结构3.Android布局在iOS的设计规范中，我们已经剖析了网格系统及其组成元素，因此在Android布局中不
19、再赘述，直接进行Android中网格的布局。单元格：Android的最小点击区域是48dp，如图所示，因此能被整除的偶数4和8作为Android最小单元格比较合适。单元格所有组件都与移动设备的8dp网格对齐，如图所示。移动设备的8dp网格图标、文字和组件中的某些元素可以与4dp网格对齐，如图所示。与4dp网格对齐列：列的数量在手机设备上推荐4列，平板电脑上推荐8列，如图所示。 列的数量，手机设备（左） 平板电脑（右） 水槽：水槽和边距的宽度在手机设备上推荐16dp，平板电脑上推荐24dp，如图所示。手机设备、平板电脑水槽和边距的宽度边距：边距的宽度可以和水槽统一。另外边距可以根据产品的设计要求
20、，和水槽不同，如图所示。当Android中边距的宽度和水槽不同时，其宽度的设置具体可以参考iOS布局中边距的宽度。边距的宽度4.Android字体规范（1）系统字体Android英文使用的是Roboto字体，共有6个字重。中文使用的是思源黑体，又称为“Source Han Sans”或“Noto”，共有7个字重，如图所示。思源黑体（2）字号大小Android设计时要注意字号的大小，如下所示。Android系统App的字体建议Android各元素以7201280px为基准设计，可以与iOS对应，其常见的字号大小为24px、26px、28px、30px、32px、34px，36px等，最小字号为2
21、0px，如图所示。 Android（左）与iOS（右）对应界面3.3 App常用界面类型界面设计是产品用户体验里非常重要的一环。在App中，常用界面类型为闪屏页、引导页、首页、个人中心页、详情页以及注册登录页。3.3.1 闪屏页闪屏页又称为“启动页”，是用户点击App应用图标后，预先加载的一张图片。闪屏页承载了用户对App的第一印象，是情感化设计的重要组成部分，其设计类型可以细分为品牌推广型、活动广告型、节日关怀型等。1.品牌推广型品牌推广型闪屏页是为表现产品品牌而设定的。基本采用“产品logo+产品名称+宣传语”的简洁化设计形式，如图所示。1号店（左）闲鱼（右）的品牌推广型闪屏页2.活动广告
22、型活动广告型闪屏页是为推广活动或广告而设定的，通常将推广的内容直接设计在闪屏页内。多采用插画和海报的设计形式，常用暖色营造热闹的氛围，如图所示。百度网盘（左）百度浏览器（中）知乎（右）的活动广告型闪屏页“双11”（左）国庆（中）“双12”（右）的活动广告型闪屏页3.节日关怀型节日关怀型闪屏页是为营造节假日氛围，同时凸显产品品牌而设定的。多采用“产品logo+内容插画”的设计形式，使用户感受到节日的关怀与祝福，如图所示。闲鱼（左）口袋兼职（右）的节日关怀型闪屏页QQ音乐（左）QQ浏览器（右）的节日关怀型闪屏页3.3.2 引导页引导页是用户第一次打开或经过更新后打开App看到的一组图片，通常由35
23、页组成。引导页起到了在用户使用App之前，提前帮助用户快速了解App的主要功能和特点的作用，可以细分为功能说明型、产品推广型、搞笑卖萌型。1.功能说明型功能说明型引导页是引导页中最基础的一种，主要对产品的新功能进行展示，常用于App重大版本的更新中。多采用插图的设计形式，达到短时间内吸引用户的效果，如图所示。高德地图App的功能说明型引导页2.产品推广型产品推广型引导页是要表达App的价值，让用户更了解这款App的情怀。多采用与企业形象和产品风格一致的生动化、形象化的设计形式，让用户感到画面的精美，如图所示。京东商城App的产品推广型引导页3.搞笑卖萌型搞笑卖萌型引导页是引导页中设计难度较高的
24、，主要站在用户的角度介绍App的特点。多采用拟人的夸张设计形象及丰富的交互动画，让用户身临其境，如图所示。搞笑卖萌型引导页3.3.3 首页首页又称为“起始页”，是用户使用App的第一页。首页承担着流量分发的作用，是展现产品气质的关键页面，可以细分为列表型、网格型、卡片型、综合型。1.列表型列表型首页是在页面上将同级别的模块进行分类展示，常用于以数据展示、文字阅读等为主的App。采用单一的设计形式，方便用户浏览，如图所示。 英国设计师George Gliddon创作（左）今日头条（中）由俄罗斯设计师Alexander Zaytsev创作（右）的列表型首页2.网格型网格型首页是在页面上将重要的功能
25、以矩形模块的形式进行展示，常用于工具类App。采用的统一矩形模块的设计形式，刺激用户点击，如图所示。天天P图（左）Word（中）墨刀（右）的网格型首页3.卡片型卡片型首页是在页面上将图片、文字、控件放置于同一张卡片中，再将卡片进行分类展示，常用于数据展示、文字阅读、工具使用等类型的App。采用的统一的卡片设计形式，不仅让用户一目了然，更能加强产品内容的点击欲望，如图所示。SaturnCube团队创作（左）微信读书（中）翻译大全（右）的卡片型首页4.综合型综合型首页是由搜索栏、Banner、金刚区、瓷片区以及标签栏等组成的页面，运用范围较广，常用于电商类、教育类、旅游类等方面。采用丰富的设计形式
26、，能满足用户的需求，如图所示。 1号店（左）途牛旅游（中）翻译大全（右）的综合型首页3.3.4 个人中心页个人中心页是展示个人信息的页面，主要由头像和信息内容组成。个人中心页有时也会以抽屉打开的形式出现，如图所示。淘宝（左）闲鱼（右）的个人中心页3.3.5 详情页详情页是展示App产品详细信息，用于用户产生消费的页面。页面内容较丰富，以图文信息为主，如图所示。京东商城（左）途牛（中）36Kr（右）的详情页3.3.6 注册登录页注册登录页是电商类、社交类等功能丰富型App的必要页面。页面设计直观简洁，并且提供第三方账号登录，国内常见的第三方账号有微博、微信、QQ等，国外常见的第三方账号有Face
27、book、Twitter等，如图所示。Done（左）智联招聘（中）36Kr（右）注册登录页3.4 课堂案例制作侃侃App【案例学习目标】学习使用不同的绘制工具绘制图形，使用图层样式添加特殊效果，并应用移动工具移动装饰图片来制作App界面。【案例知识要点】使用椭圆工具和圆角矩形工具绘制图形，使用描边和渐变叠加命令为图形添加效果，使用剪贴蒙版命令为图片添加蒙版，使用横排文字工具输入文字，效果如图所示。【效果所在位置】云盘/Ch03/效果/制作侃侃App。 1制作侃侃App闪屏页（1）按Ctrl+N组合键，新建一个文件，宽度为750像素，高度为1334像素，分辨率为72像素/英寸，背景内容为白色，如
28、图3-64所示。单击“创建”按钮，完成文档新建。（2）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框。选择云盘中的“Ch03 素材 制作侃侃App 制作侃侃App闪屏页 01”文件，单击“置入”按钮，按Enter键确认操作，效果如图所示，在“图层”控制面板中生成新的图层并将其命名为“底图”。（3）按Ctrl+T组合键，在图片周围出现变换框，拖曳右上角的控制手柄，调整图片的大小及其位置，按Enter键确认操作，如图所示。（4）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在40像素的位置新建一条水平参考线，设置如图所示，单击“确定”按钮，完成参考线的创建，效果如图所示。（
29、5）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch03 素材 制作侃侃App 制作侃侃App闪屏页 02”文件。单击“置入”按钮，将图片置入到图像窗口中，将其拖曳到适当的位置， 按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的图层并将其命名为“状态栏”。（6）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，选择“窗口 字符”命令，弹出面板，将“颜色”设为白色，其他选项的设置如图所示，按Enter键确认操作，效果如图所示。 （7）选择“椭圆”工具，在属性栏的“选择工具模式”选项中选择“形状”，将“填充”颜色设为白色，“描边”颜色设为
30、无。按住Shift键的同时，在图像窗口中适当的位置绘制圆形，效果如图所示，在“图层”控制面板中生成新的形状图层“椭圆1”。（8）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“描边”命令，弹出对话框，在“填充类型”选项的下拉列表中选择“渐变”选项，单击“渐变”选项右侧的“点按可编辑渐变”按钮，弹出“渐变编辑器”对话框，在“位置”选项中分别输入0、100两个位置点，分别设置两个位置点颜色的RGB值为0（254、72、49）、100（255、130、18），如图所示，单击“确定”按钮。返回到“描边”对话框，其他选项的设置如图所示，单击“确定”按钮，效果如图所示。 （9）将“椭圆
31、1”图层拖曳到“图层”控制面板下方的“创建新图层”按钮上进行复制，生成新的形状图层“椭圆1 拷贝”。按Ctrl+T组合键，在图形周围出现变换框，按住Alt+Shift组合键的同时，拖曳右上角的控制手柄等比例缩小图形，按Enter键确定操作。在“图层”控制面板中，双击“椭圆1 拷贝”图层的缩览图，在弹出的对话框中，将颜色设为黑色，单击“确定”按钮。删除“椭圆1 拷贝”图层的图层样式，效果如图所示。（10）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch03 素材 制作侃侃App 制作侃侃App闪屏页 03”文件，单击“置入”按钮，将图片置入到图像窗口中，将其拖曳到
32、适当的位置并调整其大小，按Enter键确定操作，在“图层”控制面板中生成新的图层并将其命名为“人物1”。按Alt+Ctrl+G组合键，为“人物1”图层创建剪贴蒙版，效果如图所示。（11）按住Shift键的同时，选中“椭圆 1”图层，按Ctrl+G组合键，群组图层并将其命名为“头像1”，如图所示。（12）将“头像1”图层组拖曳到“图层”控制面板下方的“创建新图层”按钮上进行复制，生成新的图层组“头像1 拷贝”，将其命名为“头像2”，如图所示。按Ctrl+T组合键，在图片周围出现变换框。选择“移动”工具，在图像窗口中将其拖曳到适当的位置并调整大小，按Enter键确认操作，效果如图所示。 （13）展
33、开“头像2”图层组，选中“人物1”图层，按Delete键，删除该图层。选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch03 素材 制作侃侃App 制作侃侃App闪屏页 04”文件。单击“置入”按钮，将图片置入到图像窗口中，将其拖曳到适当的位置并调整其大小，按Enter键确定操作，在“图层”控制面板中生成新的图层并将其命名为“人物2”。按Alt+Ctrl+G组合键，为“人物2”图层创建剪贴蒙版，效果如图所示。（14）双击“椭圆 1”图层的“描边”图层样式，弹出“图层样式”对话框，选项的设置如图所示，单击“确定”按钮，效果如图所示。 （15）折叠“头像2”图层组中的
34、图层。选择“椭圆”工具，在属性栏中将“填充”颜色设为白色，按住Shift键的同时，在图像窗口中拖曳鼠标绘制圆形，效果如图所示。（16）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch03 素材 制作侃侃App 制作侃侃App闪屏页 08”文件，单击“置入”按钮，将图片置入到图像窗口中，将其拖曳到适当的位置并调整其大小，按Enter键确定操作，在“图层”控制面板中生成新的图层并将其命名为“人物3”。（17）按Alt+Ctrl+G组合键，为“人物3”图层创建剪贴蒙版，效果如图所示。使用相同的方法制作其他图形和图片，效果如图所示。在“图层”控制面板中，选中“人物7”图
35、层，按住Shift键的同时，单击“椭圆 2”图层，将需要的图层同时选取。按Ctrl+G组合键，群组图层并将其命名为“更多头像”，如图所示。 （18）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为白色，其他选项的设置如图所示，按Enter键确认操作，效果如图所示。使用相同方法输入其他文字，设置如图所示，效果如图所示。在“图层”控制面板中分别生成新的文字图层。侃侃App闪屏页制作完成。 2制作侃侃App欢迎页（1）按Ctrl+N组合键，新建一个文件，宽度为750像素，高度为1334像素，分辨率为72像素/英寸，背景内容为白色，如图所示，单击“创建”按钮
36、，完成文档新建。（2）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch03 素材 制作侃侃App 制作侃侃App欢迎页 01”文件，单击“置入”按钮，将图片置入到图像窗口中。将其拖曳到适当的位置并调整其大小，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的图层并将其命名为“底图”。 （3）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在40像素的位置新建一条水平参考线，设置如图所示，单击“确定”按钮，完成参考线的创建，效果如图所示。 （4）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch03 素材 制作
37、侃侃App 制作侃侃App欢迎页 02”文件，单击“置入”按钮，将图片置入到图像窗口中。将图片拖曳到图像窗口中适当的位置，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的图层并将其命名为“状态栏”。（5）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为白色，其他选项的设置如图所示，效果如图所示。用相同的方法再次输入文字，设置如图所示，效果如图所示，在“图层”控制面板中分别生成新的文字图层。 （6）选择“圆角矩形”工具，在属性栏的“选择工具模式”选项中选择“形状”，将“填充”颜色设为白色，“描边”颜色设为无，“半径”选项设置为10像素
38、。在图像窗口中适当的位置绘制圆角矩形，在“图层”控制面板中生成新的形状图层 “圆角矩形1”。选择“窗口 属性”命令，弹出“属性”面板，设置如图所示，按Enter键确认操作，效果如图所示。 （7）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“渐变叠加”命令，弹出对话框，单击“渐变”选项右侧的“点按可编辑渐变”按钮，弹出“渐变编辑器”对话框。在“位置”选项中分别输入0、100两个位置点，分别设置两个位置点颜色的RGB值为0（255、134、16）、100（254、44、60），如图所示。单击“确定”按钮，返回到“渐变叠加”对话框，其他选项的设置如图所示，单击“确定”按钮，效果
39、如图所示。 （8）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为白色，其他选项的设置如图所示，按Enter键确认操作，效果如图所示，在“图层”控制面板中生成新的文字图层。 （9）将“圆角矩形1”图层拖曳到“图层”控制面板下方的“创建新图层”按钮上进行复制，生成新的形状图层“圆角矩形1 拷贝”。选择“移动”工具，按住Shift键的同时，将其向下拖曳到适当的位置。删除“圆角矩形1 拷贝”图层的图层样式，效果如图所示。（10）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为黑色，其他选项的设置如图所示，按Ent
40、er键确认操作，效果如图所示。使用相同方法输入其他文字，在“字符”面板中，将“颜色”设为白色，其他选项的设置如图所示，按Enter键确认操作，效果如图所示。（11）按CtrlO组合键，打开云盘中的“Ch03 素材 制作侃侃App 制作侃侃App欢迎页 03”文件，选择“移动”工具，将“QQ”图形拖曳到图像窗口中适当的位置并调整其大小，效果如图所示，在“图层”控制面板中生成新的形状图层“QQ”。 使用相同的方法拖曳其他图形到适当的位置。效果如图所示。侃侃App欢迎页制作完成。 3制作侃侃App首页（1）按Ctrl+N组合键，新建一个文件，宽度为750像素，高度为4054像素，分辨率为72像素/英
41、寸，背景内容为白色，如图所示，单击“创建”按钮，完成文档新建。（2）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在40像素的位置新建一条水平参考线，设置如图所示，单击“确定”按钮，完成参考线的创建。（3） 选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch03 素材 制作侃侃App 制作侃侃App首页 01”文件，单击“置入”按钮，将图片置入到图像窗口中。将其拖曳到适当的位置，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的图层并将其命名为“状态栏”。（4）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在128像素（距离上方
42、参考线88像素）的位置新建一条水平参考线，设置如图所示，单击“确定”按钮，完成参考线的创建，效果如图所示。用相同的方法，在32像素的位置新建一条垂直参考线，设置如图所示，单击“确定”按钮，完成参考线的创建。 （5）用相同的方法，在375像素（页面中心位置）和718像素（距离右侧32像素）的位置新建两条垂直参考线，效果如图所示。（6）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为黑色，其他选项的设置如图所示，按Enter键确认操作，效果如图所示，在“图层”控制面板生成新的文字图层。 （7）按CtrlO组合键，打开云盘中的“Ch03 素材 制作侃侃Ap
43、p 制作侃侃App首页 02”文件。选择“移动”工具，将“编辑”图形拖曳到图像窗口中适当的位置并调整其大小，效果如图所示，在“图层”控制面板中生成新的形状图层“编辑”。在“图层”控制面板中，按住Shift键的同时，单击“发现”图层，将需要的图层同时选取。按Ctrl+G组合键，群组图层并将其命名为“导航栏”，如图所示。 （8）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在168像素（距离上方参考线40像素）的位置新建一条水平参考线，设置如图所示，单击“确定”按钮，完成参考线的创建，效果如图所示。用相同的方法，在416像素（距离上方参考线248像素）的位置新建一条水平参考线，效果如图所
44、示。 （9）选择“圆角矩形”工具，在属性栏中将“填充”颜色设为白色，“半径”选项设置为26像素，在图像窗口中适当的位置绘制圆角矩形，效果如图所示，在“图层”控制面板中生成新的形状图层“圆角矩形1”。（10）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“投影”命令，弹出对话框。将阴影颜色设为黑色，其他选项的设置如图所示，单击“确定”按钮，效果如图所示。（11）选择“椭圆”工具，按住Shift键的同时，在图像窗口中适当的位置绘制圆形，效果如图所示。在属性栏中将“填充”颜色设为黑色，在“图层”控制面板中生成新的形状图层“椭圆1”。（12）按Ctrl+J组合键，复制图层，在“图层
45、”控制面板中生成新的形状图层并将其命名为“椭圆2”。选择“移动”工具，按住Shift键的同时，将其拖曳到适当的位置，如图所示。单击图层左侧的眼睛图标，隐藏该图层，并选中“椭圆1”图层。（13）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch03 素材 制作侃侃App 制作侃侃App首页 03”文件，单击“置入”按钮，将图片置入到图像窗口中。将其拖曳到适当的位置并调整大小，按Enter键确定操作，在“图层”控制面板中生成新的图层并将其命名为“头像1”。按Alt+Ctrl+G组合键，为“头像1”图层创建剪贴蒙版，效果如图所示。 （14）选择“横排文字”工具，在适当的
46、位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为浅蓝色（132、144、166），其他选项的设置如图所示，按Enter键确认操作，效果如图所示，在“图层”控制面板中生成新的文字图层。 （15）选中“椭圆2”图层，单击图层左侧的空白图标，显示该图层，效果如图所示。（16）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“渐变叠加”命令，弹出对话框。单击“渐变”选项右侧的“点按可编辑渐变”按钮，弹出“渐变编辑器”对话框，在“位置”选项中分别输入0、100两个位置点，分别设置两个位置点颜色的RGB值为0（255、134、16）、100（254、44、60），如图所示，单击“确定”按钮。返回到“渐变叠加”对话框，其他选项的设置如图所示，单击“确定”按钮，效果如图所示。（17）在“02”图像窗口中选中“相机”图层，选择“移动”工具，将其拖曳到图像窗口中适当的位置并调整大小，效果如图所示，在“图层”控制面板中生成新的形状图