整套课件教程-UI界面设计.ppt

步骤35：选中图层（组）“餐饮图形1”“餐饮图形2”“餐饮装饰图形”“餐饮图标底图”，按【Ctrl】+【G】组合键将图层编组，将新图层组更名为“餐饮图标”，并调整图标位置。 步骤36：在工具栏中选择【横排文字工具】，输入图所示文字，并将其填充颜色设置为“R：207，G：207，B：207”，字符等各项参数设置如图所示，并调整文字位置。 步骤37：继续使用【横排文字工具】，输入图所示文字，并将其填充颜色设置为“R：0，G：0，B：0”，字符等各项参数设置如图所示，并调整文字位置。 步骤38：在工具栏中选择【圆角矩形工具】?与【矩形工具】，分别绘制圆角矩形、矩形，将其填充颜色均设置为“R：255，G：255，B：255” 示。选中两个图层，按【Ctrl】+【E】组合键合并形状，将新图层更名为“底部图标背景” 。 步骤39：绘制主页图标。在工具栏中选择【多边形工具】，双击画板，将边数设置为“3”，然后按住【Shift】键绘制一个正三角形，将其描边填充颜色设置为“R：207，G：207，B：207”。根据画面调整三角形各边长与锚点。 步骤40：在工具栏中选择【圆角矩形工具】?与【矩形工具】，分别绘制圆角矩形、矩形，将其描边填充颜色均设置为“R：207，G：207，B：207” 。 步骤41：使用【路径选择工具】?选中3个图形，利用布尔运算中的【合并形状】操作将其合并，效果如图所示。将图层更名为“主页图形1”。 步骤42：在工具栏中选择【圆角矩形工具】，绘制一个圆角矩形，将其内部填充颜色设置为“R：207，G：207，B：207”，各项参数设置如图所示，调整位置。将图层更名为“主页图形2”。 步骤43：选中图层“主页图形1”“主页图形2”进行编组，将图层组更名为“主页图标”。 步骤44：绘制关注图标。在工具栏中选择【椭圆工具】，按住【Shift】键绘制两个正圆形，将其描边填充颜色均设置为“R：207，G：207，B：207”，调整位置。分别将图层更名为“关注图形1”“关注图形2”，并选中图层进行编组，将图层组更名为“关注图标”。 步骤45：绘制“Travel”图标。选择【横排文字工具】?输入图所示文字，将其填充颜色设置为“R：16，G：24，B：32”，字符等各项参数设置如图所示，并调整文字位置。 步骤46：在工具栏中选择【椭圆工具】，按住【Shift】键绘制一个正圆形，将其填充颜色设置为“R：16，G：24，B：32”，各项参数设置如图所示，调整位置，使其与“Travel”图标水平居中对齐，并将图层更名为“指示点”。 步骤47：绘制个人中心图标。在工具栏中选择【椭圆工具】，按住【Shift】键绘制一个正圆形，将其描边填充颜色设置为“R：207，G：207，B：207”。 步骤48：在工具栏中选择【圆角矩形工具】，绘制一个圆角矩形，将其内部填充颜色设置为“R：207，G：207，B：207” 。在工具栏中选择【删除锚点工具】，删除圆角矩形最下端的两个锚点。 步骤49：在工具栏中选择【转换点工具】，将图形左右两端锚点转换为直角。使用【路径选择工具】?选中圆形与该图形，运用布尔运算中的【合并形状】操作将其合并。将图层更名为“个人中心”。 步骤50：调整、规范画板各元素位置，效果如图所示。 步骤51：导出并存储画板元素。在图层栏中，选中全部图层，右击，在弹出的快捷菜单中执行【快速导出为PNG】命令，将文件存储到文件夹中，即可获得界面各元素的PNG格式文件，文件名即图层名称。 第一节 了解应用软件界面设计 第二节 应用软件界面主要类型 第三节 应用软件界面面板设计 第四节 应用软件界面设计规范 第五节 应用软件界面设计风格 一、应用软件界面设计概述 Windows图形界面的出现标志着可视化界面时代的来临。由此，计算机用户不必通过专业的学习就可以根据图形、图像了解应用软件。软件界面设计逐渐成为用户与计算机之间交流的重要介质，在软件设计发展过程中越来越受重视。 案例分析：此款iOS系统购票App界面采用扁平化卡片式形式，通过主次卡片在界面中的布局体现内容的主次关系，视觉效果简洁，传达信息清晰。 步骤1：启动Photoshop CC 2018，执行【文件】→【新建】命令，在【新建文档】对话框中设置各项参数。 步骤2：利用工具栏中的【矩形工具】【圆角矩形工具】【椭圆工具】，结合布尔运算绘制状态栏图标。 步骤3：在工具栏中选择【横排文字工具】?编辑时间，字体采用【苹方黑体-简体-中粗】，字号设置为“31点”。 步骤4：在工具栏中选择【矩形工具】，绘制一个矩形，将其填充颜色设置为“R：245，G：245，B：245” 。 步骤5：在工具栏中选择【矩形工具】，绘制一个矩形，将其填充颜色设置为“R：255，