UI界面设计 1、图形制作 APP常用元素制作.pptxVIP

UI界面设计 视频教程 主讲教师：计算机与传媒系 冯 艳 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 第六节 APP常用元素制作 提 纲 图形制作 圆形、椭圆的绘制 正方形、长方形的绘制 圆角的绘制 Squircle的绘制 组合图形的绘制 虚线绘制的绘制 格 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 图形制作 1.1 UI设计概念 图形包括：圆形、方形、圆角、Squircle、组合图形、虚线等。 图形的应用范围很广，如图图标、自定义控件的制作、界面边框制作都能用到。如图 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 图形制作 1.1 UI设计概念 圆形、椭圆 常用于圆形按钮部件的制作和圆形区域的选取。 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 图形制作 圆形的绘制 画正圆技巧: 按住Shift键，可以画一个正圆 工具：选框工具---椭圆选矿工具 演示操作如下： 技巧 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 图形制作 1.1 UI设计概念 正方形、长方形 常用于方形按钮部件的制作和方形区域的选取。 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 图形制作 正方形、长方形的绘制 画正方形技巧: 按住Shift键，可以画一个正方形 工具：选框工具---矩形选框工具 演示操作如下： 技巧 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 图形制作 1.1 UI设计概念 圆角 指正方形/长方形的四个角不是直角，而是圆弧的形状。 常用于：圆角形按钮部件的制作和圆角边框的绘制 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 图形制作 圆角的绘制 工具：形状工具----圆角矩形工具 技巧：按住Shift键，可以画一个圆角正方形 形状工具默认按当前工具栏前景色进行填充，无须使用 油漆桶工具 演示如下： 方法 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 图形制作 圆角的绘制 圆角的大小可以调整 半径数值越大，圆角就越圆润 半径数值越小，圆角的角度就小 演示如下： 参数 半径10px 半径50px 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 图形制作 1.1 UI设计概念 Squircle 指在MeeGoo（咪咕，诺基亚系统）上使用的一种圆乎乎的很可爱的图标形状。 Squircle,是Square（正方形）与Circle圆形相结合的一种图形。 与圆角矩形区别： 四边非常圆润，而不是像圆角形那样保留了直线。 可以在NokiaN9 UX Guidelines官网上下载ps专用的Squircle psd模板， 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 图形制作 1.1 UI设计概念 组合图形 通过图形工具快捷栏的四个选项， 可以组合出很多ps工具原 本没有的图形。 这四个选项以此是：新选区、添加到选区、从选区减去、与选区交叉。 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 图形制作 1.1 UI设计概念 虚线绘制 虚线通常用作分割及边框效果，非常实用。ps没有直接画虚线的工具， 但是，画笔设置可以制作出虚线效果。 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 图形制作 1.1 UI设计概念 解答：选框工具与形状工具区别？ ”用形状工具也能画正方形和圆形，为什么还要用选区来画的方法呢“？ 那我们就通过下面的演示来看看这两者的区别。 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 1.1 UI设计概念 第六节 APP常用元素制作 谢 谢 大 家