Photoshop UI设计实战案例教程（移动端+Web端） 课件 第2章 移动端 App 的“轻拟物” 风格 UI 设计.pptx

;本章概述：本章主要介绍Photoshop基础操作。涵盖工作界面各区域功能，如菜单栏、工具栏等。详细讲解矢量绘画工具（钢笔、矩形等）、文字工具的基础使用，包括输入编辑变形。同时阐述图层基本操作，如新建、复制等，以及滤镜的基本概念和操作方法，为后续UI设计学习奠定坚实基础。

;;本节概述

视觉风格演进

早期UI设计追求拟物风格，模拟现实物体，刻画光影和质感。2010年微软MetroUI引入极致扁平化风格，几乎去除所有多余视觉元素。2013年iOS7将扁平化风格进一步推广，其特点包括图标应用色彩渐变、背景模糊和使用圆角。

“轻拟物”风格特点

在扁平化流行后出现的“轻拟物”风格，是一种“轻量”的拟物。

它比经典拟物更扁平，但相比扁平化增加了渐变、光影、立体以及轻微的物体质感等元素。

这种风格结合了拟物和扁平的优点，既能保留扁平化的高效，又能提供更多细节审美感受。它适用于生活、娱乐类应用，且有自身色彩搭配特点，较少用大面积高饱和度、强对比度色彩，多使用高饱和加高明度的柔和色彩或“高级灰”色调。;2.1.1早期视觉风格的演进——从拟物到扁平

本小节讲述UI设计风格的演进。早期追求拟物风格，模拟现实物体，刻画光影和质感。2010年微软MetroUI引入扁平化风格，去除多余元素。2013年iOS7进一步推广扁平化，有色彩渐变、背景模糊和圆角等特点。这种演进是技术革新和设计思想转变的结果，从精致静态向简约动态转变。;2.1.2视觉审美的某种归途——“轻拟物”风格

此小节介绍“轻拟物”风格。它在扁平化流行后出现，是一种“轻量”的拟物。相比扁平化，增加了渐变、光影、立体等元素，但又比经典拟物更扁平。它结合了拟物和扁平的优点，在情感化和细节上更胜一筹，适用于生活、娱乐等应用，色彩搭配也有自身特点。

;;2.2.1制作页面背景

本小节介绍磨砂玻璃质感音乐播放器的页面背景制作1.新建文档与背景图层处理

首先，通过按Ctrl+N组合键新建一个空白文档，设置宽度为856像素，高度为1852像素。默认生成的背景图层处于锁定状态，需双击将其转换为普通图层并命名为“底层背景”。;;2.2.1制作???面背景

4.添加渐变蒙版

选择渐变工具，设置为“径向渐变”，从椭圆圆心偏右上位置开始，按住Shift键往右上角拖动，为椭圆图层添加一个从中央到四周的透明度渐变效果。;2.2.1制作页面背景

5.复制与调整图层

保持椭圆图层选中，按Ctrl+J组合键复制，再按Ctrl+T组合键调出缩放调节手柄，调整大小和位置，确定后按Enter键，通过数字键修改不透明度为15%。用同样方法在左上角绘制一组类似的渐变椭圆形状并缩小。;2.2.1制作页面背景

5.复制与调整图层

保持椭圆图层选中，按Ctrl+J组合键复制，再按Ctrl+T组合键调出缩放调节手柄，调整大小和位置，确定后按Enter键，通过数字键修改不透明度为15%。用同样方法在左上角绘制一组类似的渐变椭圆形状并缩小。;2.2.1制作页面背景

7.智能对象操作

将背景图层和曲线所在图层打包进一个“智能对象”图层，然后复制该智能对象图层。因为智能对象图层的复制层会随初始层内容更新而同步更新，所以在制作基于智能对象图层复制层的高斯模糊时，只需调整初始智能对象的内容，所有复制层都会同步更新。

;2.2.2设计制作专辑封面

1.绘制矢量圆形

选择椭圆工具，在画面上部绘制一个宽高参考值为624像素的正圆形状图层，填充为纯白色，描边为无。

调整位置时，可按Ctrl+T组合键调出调节手柄框，在工具属性栏的X和Y文本框中输入合适数值，使正圆形位于正中央偏上位置，也可手动控制移动。;2.2.2设计制作专辑封面

3.打造基础磨砂玻璃效果

选中智能对象复制层“形状11复制”，执行“滤镜模糊高斯模糊”命令，设置“半径”为18，得到圆形范围的磨砂玻璃基础效果样式。;2.2.2设计制作专辑封面

4.增强层次感

双击编组“专辑封面模糊”，弹出“图层样式”窗口，先勾选“渐变叠加”添加渐变样式，设置“混合模式”为“正常”，“不透明度”为30%，“角度”为135度，调整渐变色条两端色值。

再勾选“投影”图层样式，设置颜色色值、混合模式、不透明度、角度、距离和大小等参数，得到淡淡的蓝色大投影效果。

还可勾选“内阴影”图层样式，设置相关参数，进一步优化效果。;2.2.2设计制作专辑封面

5.添加专辑封面图

在“实例文件第2章素材”文件夹中找到图片“专辑封面素材2.jpg”，按Ctrl+C组合键复制，回到Photoshop中不选中任