APP UI设计之道

作者简介

甘霖， 现任华北理工大学艺术学院动画与数字艺术系主任，副教授、硕士生导师。作品获第五届华北地区包装设计大赛金奖并入选《中国设计年鉴》，监制作品26集原创三维动画片《七星传奇》于2011年6月在中央电视台一套综合频道播出；出版学术专著4部，高等学校教材2部；多幅艺术作品、学术论文发表于《装饰》、《电影文学》等核心期刊。

内容简介

第3 章 APP 中的光影设计 本章收录了四个界面和图标的设计实践练习，包含图形绘制、图层样式技巧等操作。通过这些练习，可以使读者更加深刻地认识到光与影在设计中起到的重要作用。 关键知识点 矢量工具的应用 透视感和玻璃质感 图层样式 光与影 3.1　玻璃质感图标设计 玻璃质感被广泛应用于设计中，可以说是设计师的宠儿。这不仅因为玻璃看上去玲珑剔透、透明质感非常好，还因为玻璃的反光会轻松营造出清新、唯美的感觉。 3.1.1 设计构思 本案例制作具有玻璃质感的界面。首先利用绿色作为背景，为圆角矩形添加图层样式表现出玻璃的质感，再加上反光的设计，使玻璃质感更加突出，最后绘制APP 图标，完成本例的制作。 3.1.2 操作步骤 (1) 新建文档。执行“文件”→“新建”命令，在弹出的“新建文档”窗口中，选择新建一个800×800 像素的文档，如图3-1 所示。 (2) 设置颜色。在工具栏中把前景颜色设置为深绿色(#1e7214)，把背景颜色设置为绿色(#46a33b)，如图3-2 所示。 图3-1 图3-2 (3) 填充渐变。单击工具栏中的“渐变工具”，打开渐变编辑器，在背景图层中填充渐变色，如图3-3 和图3-4 所示。 (4) 绘制圆角矩形。新建图层，单击工具栏中的“圆角矩形工具”按钮，在选项栏中选择工具的模式为“形状”，绘制圆角矩形，如图3-5 和图3-6 所示。 (5) 添加斜面和浮雕。执行“添加图层样式”→“斜面和浮雕”命令，打开“图层样式”面板。选择“斜面和浮雕”选项，设置参数，添加斜面和浮雕效果，如图3-7 和图3-8 所示。 (6) 添加描边。在打开的“图层样式”界面中选择“描边”选项，设置参数，添加描边效果，如图3-9 和图3-10 所示。 图3-3 图3-4 图3-5 图3-6 图3-7 图3-8 图3-9 图3-10 (7) 添加内阴影。在打开的“图层样式”界面中选择“内阴影”选项，设置参数，添加内阴影效果，如图3-11 和图3-12 所示。 图3-11 图3-12 (8) 添加内发光。在打开的“图层样式”界面中选择“内发光”选项，设置参数，添加内发光效果，如图3-13 和图3-14 所示。 图3-13 图3-14 (9) 添加投影。在打开的“图层样式”界面中选择“投影”选项，设置参数，添加投影效果，如图3-15 和图3-16 所示。 图3-15 图3-16 (10) 绘制圆角矩形。新建图层，单击工具栏中的“圆角矩形工具”按钮，在选项栏中选择工具的模式为“形状”，绘制圆角矩形，如图3-17 和图3-18 所示。 图3-17 图3-18 (11) 不透明度。修改图层的不透明度为18%、填充为38%，如图3-19 所示。 (12) 改变描点。单击工具栏中的“转换点工具”，转化为常规路径，如图3-20 所示。 图3-19 图3-20 (13) 添加渐变叠加。执行“添加图层样式”→“渐变叠加”命令，打开“图层样式”面板。选择“渐变叠加”选项，设置参数，添加渐变叠加效果，如图3-21 和图3-22 所示。 《APP UI设计之道》以Photoshop UI图标制作和界面交互设计为中心，通过50余个典型实例，讲解了当前热门的手机APP UI设计技术，主要有图标制作、质感效果制作、字体制作、三维ICON制作、图形设计、各类控件制作等，以及手机整体界面的制作方法，帮助读者在短的时间内精通UI设计技术，迅速从新手变为UI界面和APP界面的设计高手。适合UI设计爱好者，想进入UI设计领域的读者朋友，以及设计专业的大中专学生阅读。 《APP UI设计之道》的内容设计以让读者学有所依、学有所用为宗旨，采用以例带点的讲解方式，即将每个知识点的讲解都融入到具体的典型实例中，范例丰富、情景生动、图文并茂、内容翔实，可以带给读者独特而高效的学习体验。