Photoshop UI设计实战案例教程（移动端+Web端） 课件全套 第1-7章 Photoshop基础操作 -综合案例 设计网站欢迎页

PhotoshopUI设计实战案例教程

(移动端+Web端)本章概述：本章主要介绍Photoshop基础操作。涵盖工作界面各区域功能，如菜单栏、工具栏等。详细讲解矢量绘画工具（钢笔、矩形等）、文字工具的基础使用，包括输入编辑变形。同时阐述图层基本操作，如新建、复制等，以及滤镜的基本概念和操作方法，为后续UI设计学习奠定坚实基础。第1章Photoshop基础操作第1章Photoshop基础操作1.1Photoshop工作界面与基础功能全览1.2矢量绘画工具的基础操作1.3文字工具基础操作1.4图层的基本操作1.5滤镜1.1Photoshop工作界面与基础功能全览1.1.1Photoshop工作界面本小节主要介绍Photoshop安装后打开的工作界面。它大致分为菜单栏、工具属性栏、工具栏、画布和工具参数面板等区域。菜单栏提供各类操作命令；工具属性栏随工具选择显示相关参数；工具栏包含多种绘图和编辑工具；画布是创作区域；工具参数面板用于设置颜色、图层等，各区域相互配合，构成完整的工作环境。1.1.2菜单栏该小节详细阐述菜单栏的11个菜单。其中“文件”用于工程文件操作，“编辑”针对图层元素编辑，“图像”调整整个工程文件，“图层”操作图层对象，“文字”处理文字对象，“选择”涉及选区操作，“滤镜”添加视觉效果，“3D”处理3D对象，“视图”辅助绘画，“窗口”管理工具面板，“帮助”提供官方教程，等等1.1Photoshop工作界面与基础功能全览1.1.3工具栏与工具属性栏该小节介绍工具栏及工具属性栏。工具栏包含众多设计界面的工具，如移动工具用于移动元素，画布工具设置画布范围等。每次选择不同工具，顶部的工具属性栏会显示对应工具的参数，如矩形选框工具的选区模式、绘制样式等，这些工具和参数是进行各种设计操作的基础。1.1Photoshop工作界面与基础功能全览1.1.3工具栏与工具属性栏1.1Photoshop工作界面与基础功能全览移动工具：用于移动图层，可自动选择图层、显示变换控件，对应的顶部属性栏上还包括对齐工具和散布均分工具，用于对齐和均匀分布元素。画布工具：用于设置画布的范围大小，可通过拖动鼠标新建画布，或单击画布四周的图标进行操作。矩形选框工具功能：在画布上画出矩形选区，最大不超过画布大小，最小不小于1像素×1像素。属性栏设置：包括选区模式图标（新建选区、选区相加、选区相减、选区相交）、选区“羽化”值、绘制样式（正常、固定比例、固定大小）。除此之外，还包括椭圆选框工具等套索工具类型：包括常规套索工具、多边形套索工具和磁性套索工具，用于创建任意形状选区。使用方法：单击并拖动鼠标即可创建选区，可进行放大、缩小、羽化边缘等操作。魔棒工具：用于快速选择一定范围内的像素和颜色，可通过容差值调整选区范围大小。裁剪工具：通过绘制矩形来裁剪画面，可在工具属性栏中调整裁剪相关设置，还包含切片工具和切片选择工具。吸管工具：功能：用于拾取图像中某位置的颜色，可用于填充选区或绘制图形。其他功能：包含“显示取样环”“显示标尺”等选项。画笔工具：用途：是Photoshop进行绘画类工作时最常用的工具，可创建各种形状和效果的图形。特点：包含多种不同大小、粗细、形状的笔刷，可调整颜色、不透明度、流量等参数。橡皮擦工具：用于擦除图像，可调整硬度、大小和不透明度等属性，只能作用于单个图层，对矢量文字和矢量图形无效。渐变工具：使用方法：用于填充颜色、制作纹理和光影效果，包括设置不同的渐变方式（线性渐变、径向渐变、角度渐变等）、在渐变色条上增加或减少颜色手柄等。注意事项：必须先选择一个图层，且无法作用于矢量图形。文字工具：用于创建文字元素，包括横排文字工具和竖排文字工具，可在工具属性栏中调整文字的字体、字重、大小、段落对齐方式、字体颜色等。钢笔工具：用于创建和编辑矢量路径，可用于绘制形状、路径和选区。选择工具：分类：包括路径选择工具和直接选择工具，用于选择矢量路径。功能：路径选择工具只能选择整条路径，不能选择路径上的单个锚点；直接选择工具可以选择单个或多个锚点，并可移动锚点和方向点，调整路径形状。预设形状工具：包括矩形工具、圆角矩形工具、椭圆工具和自定形状工具，可用于绘制各种矢量图形和矢量路径抓手工具：用于滚动查看画布不同区域，按住空格键可快速切换到抓手工具。抓手工具：用于滚动查看画布不同区域，按住空格键可快速切换到抓手工具。其他更多工具：其他更多的工具收纳在了这个“更多”图标中，点击展开可见1.1.4画布该小节重点讲解画布。它是Photoshop进行绘画创作、图像处理和界面设计的主要区域。画布可显示正在编辑的图像或PSD工程文件，能通过缩放工具和抓手工具调整大小和位置。同时，画布上可显示标尺和参考线用于辅助绘图，顶部还有文件切换栏和底部的状态栏显示相关信息。1.1Photoshop工作界面与基础功能全览1.1.5图层面板和路径面板此小节介绍图层面板和路径面板。图层面板用于管理图层，包括图层的显示隐藏、顺序叠加、锁定透明度等操作，还可通过底部按钮进行相关功能操作。路径面板用于创建、编辑和管理路径，路径可用于精确选区、遮罩等操作，两个面板的合理使用对设计至关重要。1.1Photoshop工作界面与基础功能全览1.1.6颜色和色板面板该小节介绍颜色和色板面板。颜色面板可通过单击选择颜色作为前景色或背景色。色板面板是预设颜色集合，也可创建新色板添加常用颜色，还可载入其他色板库。这两个面板为设计提供了便捷的颜色选择和管理方式，有助于提高设计效率和保持色彩一致性。1.1Photoshop工作界面与基础功能全览1.1.7文字字符相关面板本小节介绍文字字符相关面板，主要是字符面板和段落面板。字符面板用于设置文字的字体、大小、颜色、行距、字距、基线偏移等参数。段落面板则允许用户对文本的对齐方式、行距、缩进等进行调整，两个面板配合使用，可满足各种文字排版需求。1.1Photoshop工作界面与基础功能全览1.1.8历史记录面板本小节介绍历史记录面板。它以时间线形式记录编辑图像时的操作步骤，每个操作以图标和文本显示。用户可通过单击历史记录状态回退到特定操作点，还可使用历史记录画笔工具恢复到特定历史状态，底部的按钮可进行创建新文档、创建快照和删除状态等操作。1.1Photoshop工作界面与基础功能全览1.1.9属性面板与调整面板本小节介绍属性面板与调整面板。属性面板用于显示和编辑所选对象的属性，如颜色、大小、位置等，不同类型图层显示不同参数。调整面板是集合多种图像调整工具的面板，可调整图像颜色、亮度等，单击按钮会在图层面板生成对应调整图层并显示参数。1.1Photoshop工作界面与基础功能全览1.2矢量绘画工具的基础操作1.2.1钢笔工具本小节介绍于钢笔工具。它是一种矢量绘图工具，有“形状”和“路径”两种绘制模式。在“形状”模式下，绘制的矢量图形会自动生成图层且可设置样式；“路径”模式下，绘制的是临时工作路径，可转换为选区等。钢笔工具还包含多种子工具，通过具体的操作方法，如单击确定锚点、拖动绘制曲线等，能准确创建和编辑矢量路径。1.2矢量绘画工具的基础操作1.2.2矩形工具及圆角矩形工具本小节介绍矩形工具及圆角矩形工具。矩形工具在画布上单击并拖动可创建矩形，按住Shift键可创建正方形。其绘制模式与钢笔工具类似，还有“像素”绘制模式。圆角矩形工具多了“半径”参数用于设置圆角大小，通过简单操作即可绘制出不同形状的矩形和圆角矩形，满足多种设计需求。1.2矢量绘画工具的基础操作1.2.3多边形工具本小节介绍讲解多边形工具。它默认收纳在工具栏更多菜单面板中，可用于绘制多边形和星形。通过设置边数，如3为三角形、5为五边形等，按住Shift键可绘制等边多边形。还可展开下拉面板设置是否绘制星形及相关参数，操作灵活，能绘制出多种规则的矢量图形。1.2矢量绘画工具的基础操作1.2.4直线工具本小节介绍直线工具。它用于创建直线，线的粗细由工具属性栏最右侧“粗细”参数控制。在“形状”绘制模式下，直线实际是窄长长方形。通过单击“粗细”参数左侧齿轮按钮，可设置直线起点和终点是否带箭头，操作简便，能快速创建出符合要求的直线。1.2矢量绘画工具的基础操作1.2.5自定形状工具本小节介绍自定形状工具。它包含数十种预设形状，用户也可添加自己绘制的形状或其他矢量图形到预设形状库中。在设计过程中，可直接选择预设形状进行使用，为创作提供了更多的图形选择，丰富了设计元素。1.3文字工具基础操作1.3.1输入并编辑文字本小节介绍文字输入与编辑方法。通过工具栏选择文字工具（横排或竖排），在画布上单击即可输入文字。输入后，可在属性、字符、段落面板中调整字体、大小、颜色、对齐方式等。还可使用快捷键快速切换工具及操作，如按T键切换文字工具。同时，右键单击文字图层可进行栅格化等操作，以满足不同的文字处理需求。1.3文字工具基础操作1.3.2文字变形本小节介绍文字变形功能。在选中文字图层且保持文字工具选中状态下，点击工具属性栏“文字变形”按钮，可调出对话框进行变形操作。该功能可创建特殊文字效果，如弧形、波浪形等，为文字增添独特的视觉效果，丰富设计的表现形式。1.3.3创建路径文字本小节介绍介绍创建路径文字的方法。先绘制矢量路径（形状或路径模式均可），然后选择文字工具，将鼠标指针移至路径上，文字工具图标改变后单击输入文字，文字会沿着路径分布。这种方式可以创造出富有创意的文字排版效果，使文字与图形更好地融合。1.4图层的基本操作1.4.1新建图层本小节介绍新建图层的方法。在Photoshop中，有多种新建图层的方式。可以使用组合键Shift+Ctrl+N，也可单击图层面板底部的创建新图层按钮，或者执行“图层>新建>图层”命令。新建图层后，还可通过双击图层名称文字区域激活重命名操作，方便对图层进行管理和区分。1.4图层的基本操作1.4.2智能对象图层本小节介绍智能对象图层。它可由普通图层转换而来，包含图像数据且保留原始特性。对其进行变换操作不会破坏原始图像，具有执行非破坏性变换、处理矢量数据、添加智能滤镜、联动跟随等优点。可通过右击图层选择相关命令进行转换操作。1.4图层的基本操作1.4.3调整图层本小节介绍调整图层。它是一种特殊图层类型，在调整图像属性时不会直接影响原始图像像素数据。可帮助改变图像的亮度、对比度、色彩等属性，还可应用滤镜效果和颜色校正。通过执行“图层>新建调整图层”命令或单击图层面板底部按钮来创建，常用的有多种类型。1.4图层的基本操作1.4.4图层的编组、复制、合并与导出本小节讲解图层的编组、复制、合并与导出操作。编组可选中多个图层后按Ctrl+G组合键实现，方便管理图层。复制图层快捷键为Ctrl+J，合并图层有多种方法。导出图层可选中图层后右键选择相关命令，如快速导出为PNG等，满足不同的设计需求。1.4图层的基本操作1.4.5设置图层不透明度与填充本小节介绍图层不透明度与填充的设置。在图层面板右上角有相应设置项，不透明度会同时影响图层内容和样式，填充只影响图层内容。可直接输入数值或拖动滑动条调整，也可利用键盘数字键快速调整，如按数字键6可设为60%。1.4图层的基本操作1.4.6图层蒙版的使用本小节介绍图层蒙版的使用。它是一种非破坏性图像编辑工具，原理是在图层上覆盖一层有透明、半透明和不透明状态的“玻璃片”。可通过绘制填充色彩（黑、白、灰）来控制蒙版效果，添加方式多样，还可进行删除、停用、启用和应用等操作，并且有普通图层蒙版和矢量蒙版两种类型。1.4图层的基本操作1.4.7图层的叠加模式本小节介绍图层的叠加模式。它是确定当前图层和底层图像之间像素颜色混合的方式，不同的混合模式会使图像呈现不同效果。例如“正片叠加”“滤色”“正常”等模式，同一图像使用不同模式叠加在其他图层上的效果各异，在设计中可根据需要选择合适的模式。1.4图层的基本操作1.4.8图层样式简介这里介绍图层样式。在Photoshop中可为图层添加样式来创建丰富视觉效果，如渐变、发光、描边、阴影等。普通、矢量形状、智能对象和文字图层均可添加，可同时勾选多个样式，且每个样式可设置不同效果、不透明度和混合模式，丰富设计的表现形式。1.5滤镜1.5.1“滤镜”菜单本小节介绍“滤镜”菜单。它是Photoshop强大的工具，可应用各种视觉和艺术效果，改变图像外观。菜单包含多组滤镜，如“模糊”“扭曲”等，每组有子菜单。使用时先选图层，再选滤镜即可生效。不同滤镜可制作磨砂玻璃、模拟景深模糊等效果，应用广泛，是图像处理和界面设计的重要手段。1.5滤镜1.5.2滤镜库的使用本小节介绍滤镜库。它是一个方便的滤镜工具，在一个窗口中可添加与调整不同滤镜效果，无需切换菜单和窗口。窗口包含多组滤镜，如“风格化”“画笔描边”等。左侧是图像预览区，中间是滤镜组，右侧是参数设置区，通过操作可实时预览和调整滤镜效果。1.5滤镜1.5.3智能滤镜本小节介绍智能滤镜。选择图层后，将其转换为智能滤镜（类似转换为智能对象），此时不添加滤镜，可手动添加。智能滤镜效果与普通滤镜相同，但不会改变原始图像像素。通过它可随时修改参数或隐藏效果，恢复原始图像，提供了更灵活的滤镜使用方式。PhotoshopUI设计实战案例教程(移动端+Web端)本章概述：本章主要介绍Photoshop基础操作。涵盖工作界面各区域功能，如菜单栏、工具栏等。详细讲解矢量绘画工具（钢笔、矩形等）、文字工具的基础使用，包括输入编辑变形。同时阐述图层基本操作，如新建、复制等，以及滤镜的基本概念和操作方法，为后续UI设计学习奠定坚实基础。第2章移动端App的“轻拟物”风格UI设计第2章移动端App的“轻拟物”风格UI设计2.1什么是“轻拟物”风格设计2.2实例1:磨砂玻璃质感的音乐播放器设计2.3实例2:“石膏”质感的计时器表盘设计2.4实例3:清新轻拟物风格的日历组件2.5拓展训练：融合不同轻拟物质感的界面设计本节概述视觉风格演进早期UI设计追求拟物风格，模拟现实物体，刻画光影和质感。2010年微软MetroUI引入极致扁平化风格，几乎去除所有多余视觉元素。2013年iOS7将扁平化风格进一步推广，其特点包括图标应用色彩渐变、背景模糊和使用圆角。“轻拟物”风格特点在扁平化流行后出现的“轻拟物”风格，是一种“轻量”的拟物。它比经典拟物更扁平，但相比扁平化增加了渐变、光影、立体以及轻微的物体质感等元素。这种风格结合了拟物和扁平的优点，既能保留扁平化的高效，又能提供更多细节审美感受。它适用于生活、娱乐类应用，且有自身色彩搭配特点，较少用大面积高饱和度、强对比度色彩，多使用高饱和加高明度的柔和色彩或“高级灰”色调。2.1什么是“轻拟物”风格设计2.1.1早期视觉风格的演进——从拟物到扁平本小节讲述UI设计风格的演进。早期追求拟物风格，模拟现实物体，刻画光影和质感。2010年微软MetroUI引入扁平化风格，去除多余元素。2013年iOS7进一步推广扁平化，有色彩渐变、背景模糊和圆角等特点。这种演进是技术革新和设计思想转变的结果，从精致静态向简约动态转变。2.1什么是“轻拟物”风格设计2.1.2视觉审美的某种归途——“轻拟物”风格此小节介绍“轻拟物”风格。它在扁平化流行后出现，是一种“轻量”的拟物。相比扁平化，增加了渐变、光影、立体等元素，但又比经典拟物更扁平。它结合了拟物和扁平的优点，在情感化和细节上更胜一筹，适用于生活、娱乐等应用，色彩搭配也有自身特点。2.1什么是“轻拟物”风格设计2.2实例1:磨砂玻璃质感的音乐播放器设计本节概述设计思路该实例介绍了用Photoshop绘制具有磨砂玻璃质感的音乐播放器界面，核心在于利用对后层背景的模糊来体现这种质感，主要借助“高斯模糊”滤镜和矢量蒙版实现。同时，遵循对比原则，如立体与扁平效果的强烈对比，以突出界面操作的主次关系。设计过程1.制作页面背景首先通过图层样式绘制渐变背景，将默认背景图层转换为普通图层后，添加“渐变叠加”样式。接着添加椭圆形状的装饰性元素，设置其不透明度和渐变蒙版，再复制、调整位置和不透明度，丰富背景。还使用钢笔工具添加曲线点缀，调节曲线图层不透明度，最后将相关图层打包为智能对象并复制。2.设计制作专辑封面绘制圆形专辑封面的磨砂玻璃背景，调整位置后，通过复制智能对象、绘制矢量蒙版、添加滤镜等操作打造基础效果。进一步添加专辑封面图并转换为智能对象图层，编组后添加矢量蒙版，对封面图进行缩放、移动并添加图层样式。3.设计制作按钮组件绘制播放按钮组件，包括复制磨砂玻璃质感图层作为背景，微调质感，绘制播放图标并添加效果。按照类似方法绘制“上一首”和“下一首”按钮，可加强磨砂玻璃质感。然后绘制播放进度条，设置其样式和投影效果。最后添加歌曲名称等文字元素，并绘制底部的辅助功能按钮。2.2.1制作页面背景本小节介绍磨砂玻璃质感音乐播放器的页面背景制作1.新建文档与背景图层处理首先，通过按Ctrl+N组合键新建一个空白文档，设置宽度为856像素，高度为1852像素。默认生成的背景图层处于锁定状态，需双击将其转换为普通图层并命名为“底层背景”。2.2实例1:磨砂玻璃质感的音乐播放器设计2.添加渐变样式转换为普通图层后，再次双击该图层打开“图层样式”窗口，勾选“渐变叠加”样式，选择“紫色_13”渐变效果，也可根据喜好调整色值。2.2实例1:磨砂玻璃质感的音乐播放器设计2.2.1制作页面背景3.椭圆工具绘制与设置使用椭圆工具，在工具属性栏设置矢量工具绘制模式为“形状”，填充为纯白色，描边为无，绘制一个大正圆形。选中该图层后，通过数字键设置不透明度为40%。2.2.1制作页面背景4.添加渐变蒙版选择渐变工具，设置为“径向渐变”，从椭圆圆心偏右上位置开始，按住Shift键往右上角拖动，为椭圆图层添加一个从中央到四周的透明度渐变效果。2.2实例1:磨砂玻璃质感的音乐播放器设计2.2.1制作页面背景5.复制与调整图层保持椭圆图层选中，按Ctrl+J组合键复制，再按Ctrl+T组合键调出缩放调节手柄，调整大小和位置，确定后按Enter键，通过数字键修改不透明度为15%。用同样方法在左上角绘制一组类似的渐变椭圆形状并缩小。2.2实例1:磨砂玻璃质感的音乐播放器设计2.2.1制作页面背景5.复制与调整图层保持椭圆图层选中，按Ctrl+J组合键复制，再按Ctrl+T组合键调出缩放调节手柄，调整大小和位置，确定后按Enter键，通过数字键修改不透明度为15%。用同样方法在左上角绘制一组类似的渐变椭圆形状并缩小。6.钢笔工具添加曲线使用钢笔工具，设置绘制模式为“形状”，填充为无，描边为纯白色，粗细为2像素，绘制一条曲线作为参考，还可绘制多条曲线，调节各曲线图层不透明度，形成透明度的梯度变化节奏感。2.2实例1:磨砂玻璃质感的音乐播放器设计2.2.1制作页面背景7.智能对象操作将背景图层和曲线所在图层打包进一个“智能对象”图层，然后复制该智能对象图层。因为智能对象图层的复制层会随初始层内容更新而同步更新，所以在制作基于智能对象图层复制层的高斯模糊时，只需调整初始智能对象的内容，所有复制层都会同步更新。2.2实例1:磨砂玻璃质感的音乐播放器设计2.2.2设计制作专辑封面1.绘制矢量圆形选择椭圆工具，在画面上部绘制一个宽高参考值为624像素的正圆形状图层，填充为纯白色，描边为无。调整位置时，可按Ctrl+T组合键调出调节手柄框，在工具属性栏的X和Y文本框中输入合适数值，使正圆形位于正中央偏上位置，也可手动控制移动。2.创建矢量蒙板选中背景智能图层“形状11”，按Ctrl+J组合键复制一层智能对象，该复制层会随原始智能对象图层内容更新而更新。复制后，按Ctrl+G组合键将智能对象图层编组并命名为“专辑封面模糊”。为该组绘制一个矢量蒙版，先切换到刚才新建的形状图层“椭圆2”，按A键切换到路径选择工具，选中椭圆路径并复制，再选中编组“专辑封面模糊”粘贴，即可自动生成矢量蒙版。2.2实例1:磨砂玻璃质感的音乐播放器设计2.2.2设计制作专辑封面3.打造基础磨砂玻璃效果选中智能对象复制层“形状11复制”，执行“滤镜>模糊>高斯模糊”命令，设置“半径”为18，得到圆形范围的磨砂玻璃基础效果样式。2.2实例1:磨砂玻璃质感的音乐播放器设计2.2.2设计制作专辑封面4.增强层次感双击编组“专辑封面模糊”，弹出“图层样式”窗口，先勾选“渐变叠加”添加渐变样式，设置“混合模式”为“正常”，“不透明度”为30%，“角度”为135度，调整渐变色条两端色值。再勾选“投影”图层样式，设置颜色色值、混合模式、不透明度、角度、距离和大小等参数，得到淡淡的蓝色大投影效果。还可勾选“内阴影”图层样式，设置相关参数，进一步优化效果。2.2实例1:磨砂玻璃质感的音乐播放器设计2.2.2设计制作专辑封面5.添加专辑封面图在“实例文件>第2章>素材”文件夹中找到图片“专辑封面素材2.jpg”，按Ctrl+C组合键复制，回到Photoshop中不选中任何图层，按Ctrl+V组合键粘贴图片，并将其所在图层转换为智能对象图层，双击图层名称处将图层重命名为“专辑封面图”。6.添加矢量蒙版并调整选中“专辑封面图”图层，按Ctrl+G组合键为该图层编组并命名为“专辑封面图编组”。按A键切换为路径选择工具，选中前面绘制的圆形矢量形状图层“椭圆2”的路径，按Ctrl+C组合键复制路径；再选中“专辑封面图编组”图层，按Ctrl+V组合键粘贴圆形路径，为该图层添加一个正圆形矢量蒙版。最后选中“专辑封面图”智能对象图层，按Ctrl+T组合键进行缩放和移动操作，并双击编组图层“专辑封面图编组”，调出“图层样式”窗口，勾选“描边”图层样式，调整相关参数。2.2实例1:磨砂玻璃质感的音乐播放器设计2.2.3设计制作按钮组件1.绘制播放按钮组件（1）选择编组图层“专辑封面模糊”，按Ctrl+J组合键复制出一层新的磨砂玻璃质感图层，重命名为“播放/暂停按钮背景”，按A键切换到路径选择工具，选中该编组图层的矢量蒙版路径，缩小并移动它的位置。（2）微调播放按钮的磨砂玻璃质感，双击编组图层“播放/暂停按钮背景”，调出“图层样式”窗口，调整两个“内阴影”图层样式的参数。2.2实例1:磨砂玻璃质感的音乐播放器设计2.2.3设计制作按钮组件1.绘制播放按钮组件（3）绘制播放图标，选择矩形工具，设置“填充”为纯白色，“描边”为无，圆角为4像素，先绘制一个竖向的长方形矢量形状，然后按住Alt键拖动鼠标复制出一个相同的长方形，将两个长方形矢量形状图层选中，按住Shfit键拖动鼠标使其居中，按Ctrl+G组合键编组并命名为“播放图标”。最后双击“播放图标”编组图层，打开“图层样式”窗口，勾选添加“渐变叠加”图层样式并调整参数。2.2实例1:磨砂玻璃质感的音乐播放器设计2.2.3设计制作按钮组件2.绘制其他按钮按照上一步骤的方法绘制出“上一首”和“下一首”按钮，注意背景尺寸要略小于中央的播放按钮的背景尺寸，中间的双三角形图标可以使用三角形工具来绘制，并将“播放图标”编组图层的渐变图层样式复制粘贴到“上一首”“下一首”按钮的双三角形图标编组图层上。如果想进一步加强磨砂玻璃的质感，可为相关图层添加“添加杂色”滤镜。2.2实例1:磨砂玻璃质感的音乐播放器设计2.2实例1:磨砂玻璃质感的音乐播放器设计2.2.3设计制作按钮组件3.绘制播放进度条（1）绘制进度条背景使用矩形工具在播放按钮组件和专辑封面之间的区域绘制一个细长条形，设置“填充”为纯白色，“描边”为无，圆角设为6。将矢量形状图层重命名为“播放进度条背景”，并按数字键6将图层不透明度改为60%。（2）设置样式和投影效果双击“播放进度条背景”图层，调出“图层样式”窗口，勾选添加“渐变叠加”图层样式，设置相关参数。按Ctrl+J组合键复制一个图层，重命名为“进度”，并将图层的“不透明度”修改为100%，按Ctrl+T组合键使用自由缩放控制手柄缩短复制的矢量形状横向宽度。2.2实例1:磨砂玻璃质感的音乐播放器设计2.2.3设计制作按钮组件3.绘制播放进度条（3）调整进度条的图层样式再双击新复制的“进度”图层，打开“图层样式”窗口，调整该图层的渐变效果。为进度条添加投影效果，在“进度”图层的“图层样式“窗口中进行操作，勾选“投影”图层样式，设置相关参数。2.2实例1:磨砂玻璃质感的音乐播放器设计2.2.3设计制作按钮组件4.添加文字元素按T键选择文字工具，设置字符大小为60点，排列设为居中分布，颜色色值设为#3518b2，添加歌曲名称作为最主要的文字元素。还可添加其他辅助文字，如歌曲专辑名称、进度时间码、歌曲时长等，将文字颜色色值统一改为#2d2e5e，字体大小改为40。2.2实例1:磨砂玻璃质感的音乐播放器设计2.2.3设计制作按钮组件5.绘制底部辅助按钮绘制“收藏”图标选择矢量形状工具中的多边形工具，设置边数为5，圆角设为6像素，在弹出的多边形属性面板中将“星形比例”设为60%，设置“填充”色值为#3518b2，“描边”为无，在下方绘制一个五角星图标。按5键将多边形矢量形状的图层不透明度改为50%。2.2实例1:磨砂玻璃质感的音乐播放器设计2.2.3设计制作按钮组件5.绘制底部辅助按钮绘制“播放列表”图标选择矩形工具，保持填充色、描边和圆角参数不变，在星形收藏图标右侧绘制一个由三条细横线组成的图标。按5键将播放列表的图层不透明度改为50%。绘制“分享”图标选择钢笔工具，设置绘制模式为“形状”，“填充”为无，“描边”为6像素，“填充”色值保持不变为#3518b2，设置端点和角点为“圆头”和“圆角”，在播放列表图标右侧绘制一个形状参考图标的图标。图层的“不透明度”设为50%。绘制“更多”图标选择椭圆工具，将“填充”色值再次设为#3518b2，“描边”为无，按住Shift键绘制3个小的正圆形上下排列。将图层不透明度改为50%。排列4个图标最后将4个图标排列整齐，调整位置使其左右平衡，同时选中4个图标所在图层，选择移动工具，使这4个图标水平分布并对齐。2.3实例2:“石膏”质感的计时器表盘设计本节概述设计思路该实例介绍了绘制具有“石膏”质感的计时器界面，核心是模拟石膏的特性。通过不同角度的阴影样式叠加，营造出表面无高光和反光、阴影和明暗面过渡柔和的效果。同时，整体界面色彩采用冷白色调，阴影注意色彩倾向，以体现石膏的质感并避免过多写实细节干扰用户操作。设计过程1.绘制页面背景和主体时间拨盘绘制界面背景：新建文档后，将背景图层转换为普通图层，添加渐变图层样式，设置渐变色值、不透明度、样式和角度等参数。绘制中央拨盘主体：使用椭圆工具绘制正圆形拨盘主体，设置填充色值和描边，添加投影图层样式，设置混合模式、颜色、不透明度、角度、距离、扩展和大小等参数。为拨盘添加细节：复制拨盘主体图层，调整投影样式创建内凹立体效果，包括调整不透明度、角度、距离、扩展和大小等参数。绘制计时器进度条：复制拨盘主体图层并调整位置和形状作为进度条，添加锚点并调整路径形状，设置填充、描边和投影等样式，添加时间数字。2.绘制下方的按钮组绘制按钮的背景：对拨盘相关图层编组并复制，调整大小和位置作为按钮背景，调整图层内各部分的投影样式。绘制按钮图标并添加辅助文字：使用矩形工具绘制按钮图标，添加文字内容并设置字体、颜色、大小和不透明度等参数。2.3实例2:“石膏”质感的计时器表盘设计2.3.1绘制页面背景和主体时间拨盘1.绘制界面背景新建文档与图层设置打开Photoshop，按Ctrl+N组合键新建一个空白文档，设置宽度和高度为856像素和1852像素，将背景图层转换为普通图层并命名为“底层背景”。添加渐变图层样式双击“底层背景”图层，调出“图层样式”窗口，勾选“渐变叠加”图层样式。设置渐变色条左右两端色值分别为#cedfff和#edf5fc，不透明度为100%，样式为“线性”，角度为-90度，缩放为120%。2.3实例2:“石膏”质感的计时器表盘设计2.3.1绘制页面背景和主体时间拨盘2.绘制中央拨盘主体绘制拨盘形状选择椭圆工具，设置绘制模式为“形状”，填充色值为#edf5fc，描边为无，在界面中央上方按住Shift键绘制一个正圆形，大小和位置参考图，重命名为“拨盘主体”添加投影效果双击“拨盘主体”图层，调出“图层样式”窗口，勾选“投影”图层样式。设置投影的混合模式为“正片叠底”，投影颜色色值为#4a50da，不透明度为15%，角度为135度，距离为90像素，扩展为10%，大小为150像素。进一步完善拨盘投影效果单击“投影”样式右端的“添加”按钮，设置投影的混合模式为“正常”，投影颜色为纯白色，不透明度为90%，角度为-45度，距离为80像素，扩展为10%，大小为180像素，初步呈现平缓凸起的圆盘效果。2.3实例2:“石膏”质感的计时器表盘设计2.3.1绘制页面背景和主体时间拨盘3.为拨盘添加细节创建拨盘内陷效果选中形状图层“拨盘主体”，按Ctrl+J组合键复制，重命名为“拨盘内陷”，按Ctrl+T组合键调出自由缩放控制手柄，按住Alt键进行以圆心为轴心的中央缩放，缩小一圈，大小参考图。添加渐变和投影样式双击“拨盘内陷”图层，调出“图层样式”窗口，勾选“渐变叠加”图层样式，设置混合模式为“正常”，渐变色条两端色值分别为#e4ecff和#f5faff，不透明度为100%，角度为-45度，缩放为100%。修改投影样式，设置第一个投影样式的不透明度为100%，角度为135度，距离为6像素，扩展和大小均为0；设置第二个投影样式的角度为-45度，距离为6像素，扩展和大小均为0，创建轻薄的内凹立体效果。2.3实例2:“石膏”质感的计时器表盘设计2.3.1绘制页面背景和主体时间拨盘4.绘制计时器进度条（1）绘制进度条形状选中形状图层“拨盘主体”，按Ctrl+J组合键复制该图层，并将复制出的图层重命名为“时间进度条”。按Ctrl+T组合键调出自由缩放变换手柄，然后按住Alt键拖动手柄对该图层进行缩放，使其大致位于两个圆形之间。（2）调整进度条路径按A键切换到路径选择工具，选中形状图层“时间进度条”的形状路径，再选择钢笔工具，并将鼠标指针移到形状图层“时间进度条”的形状路径上，在圆形路径右下角添加一个锚点。用鼠标右键单击路径选择工具，在弹出的面板中选择直接选择工具，按住Shift键选中两个锚点，然后按Delete键删除这两个锚点，使原来完整的圆形变成一段断开的弧形。2.3实例2:“石膏”质感的计时器表盘设计2.3.1绘制页面背景和主体时间拨盘4.绘制计时器进度条（3）设置进度条样式确认使用工具是直接选择工具后，修改工具属性栏中的参数，将填充改为无，将描边改为任意一种颜色，这里将描边粗细设为12像素，然后将“描边选项”中的“端点”改为圆头。双击形状图层“时间进度条”，弹出“图层样式”窗口，勾选“渐变叠加”图层样式，并取消勾选第一个“投影”样式，设置渐变色条左右两端色值分别为#219eff和#703eff，角度为-90度，缩放为100%。修改时间进度条的投影效果，设置其不透明度为50%，距离为6像素，扩展为0，大小为15像素，添加时间数字，设置字体、颜色和不透明度等参数。2.3实例2:“石膏”质感的计时器表盘设计2.3.2绘制下方的按钮组1.绘制按钮的背景复制与调整图层选中图层“拨盘内陷”和“拨盘主体”，按Ctrl+G组合键对它们进行编组，并重命名为“凸起表盘”。保持编组“凸起表盘”选中的状态，按Ctrl+J组合键复制该编组图层，并重命名为“按钮1背景”。选择编组图层“按钮1背景”，按Ctrl+T组合键对其进行缩放和移动，调整后的大小和位置符合设计要求。调整图层内元素展开编组图层“按钮1背景”，选择其中的“拨盘内陷”图层，重命名为“按钮内陷”，将编组图层“按钮1背景”下的“拨盘主体”图层重命名为“按钮主体”。按Ctrl+T组合键调出缩放移动手柄，按住Alt键适当缩小一点。双击“按钮主体”图层调出“图层样式”窗口，设置第一个“投影”样式的不透明度为100%，距离为60像素，扩展为6%，大小为100像素；设置第2个“投影”样式的距离为40像素，扩展为5%，大小为70像素。2.3实例2:“石膏”质感的计时器表盘设计2.3.2绘制下方的按钮组2.绘制按钮图标并添加辅助文字绘制按钮图标切换使用矩形工具，设置“填充”色值为#8f93e7，“描边”为无，“圆角大小”为12像素，按住Shift键在左边按钮的中央绘制一个小正方形作为取消按钮；再在右边的按钮上绘制两个窄矩形作为暂停按钮。添加辅助文字选择文字工具，将色值设为#031179，编辑并添加文字内容，为两个按钮添加辅助文字Cancel、Pause和为页面标题添加文字Timer，字体均设为细体。设置Cancel和Pause的字体大小为45，图层不透明度设为60%，标题Timer的字体大小为66。2.4实例3:清新轻拟物风格的日历组件本节概述设计思路本实例致力于打造局部轻拟物风格与主体扁平化风格融合的日历组件。重点是为所选日期范围创建突出的立体效果，确保用户能快速识别，同时保持组件其他部分的简约扁平风格，并在部分按钮上保留立体细节，给用户带来交互惊喜。设计过程1.绘制组件主体背景和编排日历数字背景绘制：转换背景图层后添加渐变样式。用矩形工具绘制组件主体并设置投影。再绘制标题栏，添加投影和渐变样式，最后添加标题文字。数字编排：使用文字工具添加星期和日期数字，部分数字调整不透明度。2.绘制已选择日期范围的效果样式选择范围背景：绘制矩形并调整为胶囊形状作为日期范围背景，设置填充、描边、投影和渐变样式。为组件主体添加底色，设置渐变样式。选日期手柄：复制并调整顶部蓝色图层作为选日期手柄，修改字符并添加渐变、投影和内阴影样式。复制该图层完成另一个手柄绘制。3.绘制底部的两个按钮左侧按钮：绘制胶囊形状左侧按钮，添加文字。右侧按钮：复制左侧按钮并调整，添加多种图层样式，再添加文字。2.4实例3:清新轻拟物风格的日历组件2.4.1绘制组件主体背景和编排日历数字1.绘制组件的背景（1）新建文档与背景设置打开Photoshop，按Ctrl+N组合键新建一个空白文档，将宽度和高度均设为1280像素，命名为“2.4实例3”。双击默认的“背景”图层，转换为普通图层，重命名为“底层背景”。双击“底层背景”图层，调出“图层样式”窗口，在左侧栏勾选“渐变叠加”图层样式，设置渐变色条左右两端颜色值分别为#cedfff和#edf5fc，不透明度为100%，样式为“线性”，角度为-90度，缩放为120%。2.4实例3:清新轻拟物风格的日历组件2.4.1绘制组件主体背景和编排日历数字1.绘制组件的背景（2）绘制组件主体选择矩形工具，将“填充”颜色设为纯白色，“描边”设为无，圆角大小设为120像素，按住Shift键绘制一个正方形，大小和位置符合要求，重命名为“组件主体”双击编组图层“组件主体”，调出“图层样式”窗口，在左侧栏选择勾选“投影”图层样式，设置混合模式为“正片叠底”，投影颜色为#4a50da，不透明度为12%，角度为90度，距离为120像素，扩展为0%，大小为60像素。再单击按钮添加第二个投影效果，设置其混合模式为“正片叠底”，不透明度为8%，距离为40像素，大小为30像素。选择路径选择工具，选中形状图层“矩形1”的矩形路径，按Ctrl+C组合键复制路径，然后切换选中编组图层“组件主体”，按住Ctrl+V组合键粘贴路径，此时自动生成一个形状与“矩形1”完全相同的矢量蒙版。2.4实例3:清新轻拟物风格的日历组件2.4.1绘制组件主体背景和编排日历数字1.绘制组件的背景（3）绘制组件标题栏选择矩形工具，设置“填充”颜色为蓝色，“描边”为无，圆角大小为18像素，然后在编组图层“组件主体”内绘制一个新的矩形，绘制完成后移动新绘制的蓝色矩形两边自由缩放手柄，使其与背景的白色矩形两边对齐，以作为日历组件的标题背景栏，重命名为“标题栏背景”。用鼠标右键单击编组图层“组件主体”，在弹出的菜单中选择“复制图层样式”选项，再切换选中蓝色形状图层“标题栏背景”，单击鼠标右键，在弹出的菜单中选择“粘贴图层样式”选项，为标题栏背景添加投影效果。2.4实例3:清新轻拟物风格的日历组件2.4.1绘制组件主体背景和编排日历数字1.绘制组件的背景（4）调整图层样式和添加标题文字双击蓝色形状所在图层“标题栏背景”，调出“图层样式”窗口，设置第一个“投影”图层样式的不透明度为60%，距离为15像素，大小为36像素。然后调整第二个“投影”样式的不透明度为60%，距离为15像素，大小为36像素。勾选“渐变叠加”图层样式，设置渐变条预设为“蓝色_24”，不透明度为100%，角度为180度，缩放为150%。2.4实例3:清新轻拟物风格的日历组件2.4.1绘制组件主体背景和编排日历数字2.添加标题文字、日期数字和星期，绘制日历视图（1）添加标题文字添加标题文字，按T键切换到文字工具，设置“字体”为粗体字，“字体颜色”为纯白色，“大小”为72，字符的字距为200，再输入文字内容“JUNE”（1）添加星期和部分日期数字选择文字工具，设置字体大小为48，字体色值为#666597，“不透明度”为30%。再输入7个单词，分别是Sun、Mon、Tue、Wed、Thu、Fri、Sat，它们排布位置符合设计要求。（2）添加日历月视图数字将字体设为细体字，字体颜色设为深蓝色，输入5行数字（每行7个数字）作为日历月视图，注意最后一行的1-5这几个数字属于下个月，因此需要将不透明度降低50%。2.4实例3:清新轻拟物风格的日历组件2.4.2绘制已选择日期范围的效果样式1.绘制选择范围的背景（1）绘制日期范围背景形状选择矩形工具，“填充”设为纯白色，“描边”设为无，在第4行数字从23-28绘制一个矩形，调整为胶囊形状，重命名为“日期范围背景”，放置在月视图数字组和星期字符组图层下方。2.4实例3:清新轻拟物风格的日历组件2.4.2绘制已选择日期范围的效果样式1.绘制选择范围的背景（2）设置日期范围背景样式双击图层“日期范围背景”调出“图层样式”窗口，勾选“渐变叠加”图层样式，设置渐变色条左右两端色值分别为#cad8f3和#e5edf8，角度设为-87度，缩放设为100%。勾选“描边”图层样式，设置“大小”为5像素。勾选并添加两个“投影”图层样式，设置第1个“投影”图层样式的混合模式为“滤色”，颜色为纯白色，不透明度为100%，角度为-45度，距离为30像素，大小为45像素。设置第2个“投影”图层样式的混合模式为“正片叠底”，颜色色值为#4a50da，不透明度为8%，角度为135度，距离为36像素，大小为60像素。2.4实例3:清新轻拟物风格的日历组件2.4.2绘制已选择日期范围的效果样式1.绘制选择范围的背景（2）为组件主体添加底色选中矢量形状图层“矩形1”，双击该图层弹出“图层”样式窗口，勾选“渐变叠加”图层样式，设置渐变色条左右两端的色值分别为##e6ebf2和#ffffff，角度为-87度，缩放为100%。2.4实例3:清新轻拟物风格的日历组件2.4.2绘制已选择日期范围的效果样式2.绘制添加两个选日期的手柄组件绘制第一个选日期手柄切换选中顶部的蓝色形状图层“标题栏背景”，按Ctrl+J组合键复制出一层新的相同图层，重命名为“选择入住日期手柄”，缩放大小并移至合适位置，调整为胶囊形状，修改数字23的字符颜色为白色，内容编辑为“23in”，字体改为粗体。设置第一个选日期手柄样式双击图层“选择入住日期手柄”调出“图层样式”窗口，勾选“渐变叠加”图层样式，将渐变色条左右两端色值分别设为#2c17cd和#2871fa，角度设为120度，缩放为150%。添加两个投影样式，设置第一个投影样式的投影颜色为#4a50da，混合模式为“正片叠底”，不透明度为50%，角度为90度，距离为8像素，大小为15。设置第二个投影样式的“不透明度”为15%，距离为30，大小为30，其他参数和第一个投影样式的参数一样。2.4实例3:清新轻拟物风格的日历组件2.4.2绘制已选择日期范围的效果样式2.绘制添加两个选日期的手柄组件为第一个选日期手柄添加内阴影样式勾选“内阴影”样式，设置“混合模式”为“滤色”，不透明度为40%，角度为120度，距离为3像素，大小为1像素。绘制第二个选日期手柄选中样式调整完毕的“选择入住日期手柄”，按Ctrl+J组合键复制，重命名为“选择离开日期手柄”，将其移动到右侧，并将数字28改为纯白色，内容改为“28out”，其中数字28改为粗体字。2.4实例3:清新轻拟物风格的日历组件2.4.3绘制底部的两个按钮1.绘制左侧按钮（1）绘制按钮形状选择矩形工具，“填充”设为#e6ebf2，“描边”设为无，并将圆角调到100，绘制出一个胶囊形状的左侧按钮，大小和位置符合设计要求，重命名为“左侧按钮”（2）添加按钮文字使用文字工具在左侧按钮中输入文字“CANCEL”，设置字体大小为48，字体颜色为#5d637a，字体为细体。2.4实例3:清新轻拟物风格的日历组件2.4.3绘制底部的两个按钮2.绘制右侧按钮（1）复制与调整按钮选中图层“左侧按钮”，按Ctrl+J组合键复制并重命名为“右侧按钮”，将其移动到右侧（2）设置按钮样式双击图层“右侧按钮”，调出“图层样式”窗口，依次勾选添加“描边”、两个“内阴影”、“渐变叠加”和“投影”共5个图层样式。设置“描边”图层样式的“大小”为3像素，“位置”为外部，颜色为纯白色设置第一个“内阴影”样式的“混合模式”为“正片叠底”，“不透明度”为33%，颜色为#8894f1，“角度”为135度，“时间戳：2024年1月1日12:00:00距离”为24像素，“大小”为36像素设置第二个“内阴影”样式的“混合模式”为“滤色”，“不透明度”为100%，颜色为纯白色，“角度”为-45度，“距离”和“大小”与第一个“内阴影”图层样式相同设置“渐变叠加”图层样式的“不透明度”为100%，渐变色条左右两端色值分别为#cad8f3和#e5edf8，“角度”为-87度设置“投影”图层样式的“混合模式”为“正片叠底”，颜色为#4a50da，“不透明度”为8%，“角度”为135度，“距离”为36像素，“大小”为60像素（3）添加按钮文字使用文字工具设置字体大小为48，颜色为#412ef5，字体建议设为regular，在右侧按钮中输入文字“CONFIRM”2.5拓展训练:融合不同轻拟物质感的界面设计最终效果设计思路本实例旨在综合运用前面所学技巧，将磨砂玻璃、石膏质感凸起等不同拟物风格整合到一个界面中。设计过程整合主要元素界面中最主要的元素是5张日历事件卡片，用矩形工具绘制，并通过“渐变叠加”“投影”等图层样式实现效果。制作磨砂玻璃效果将卡片及相关元素编组，转为智能对象并复制一层。用矩形工具绘制矢量蒙版，对复制的智能对象图层添加“高斯模糊”滤镜，再添加半透明浅色渐变效果，做出磨砂玻璃效果制作凸起元素卡片中两个凸起元素的制作方法和实例2中的“石膏质感拨盘”相同，将形状由圆形改为圆角矩形，再用文字工具添加字符元素完善其他元素左侧的月视图组及其代表今天的蓝色标识和右上角的标签切换组件，使用“渐变叠加”和两个“投影”即可，参考实例3中日历组件底板和顶部标题栏背景的投影效果制作2.5拓展训练:融合不同轻拟物质感的界面设计PhotoshopUI设计实战案例教程(移动端+Web端)第3章移动端App的卡片设计本章概述：第3章主要介绍移动端App的卡片设计。首先阐述卡片在UI设计中的概念，它是一种综合性信息集合组件，能有效组织信息。接着介绍其常见类型和应用场景，如音乐、天气、日历等应用中作为核心功能入口或组织分类信息的载体。然后通过多个实例详细讲解设计过程，包括2.5D风格的天气卡片、音乐卡片、日程卡片等，涉及各种工具和图层样式的运用，最后还提及数据可视化卡片设计作为拓展训练，展示了卡片设计的多样性和实用性。第3章移动端App的卡片设计3.1移动端UI设计中的卡片设计3.2实例1:2.5D风格的天气卡片设计3.3实例2:音乐卡片设计3.4实例3:日程卡片设计3.5拓展训练:数据可视化卡片设计本节概述概念阐述首先明确了卡片是一种综合性信息集合组件，它能够将文字、图像、图标等多种元素整合在一起，以一种简洁、直观的方式呈现给用户。作用及优势强调了卡片在移动端UI设计中的重要作用。它可以有效地组织信息，使用户能够快速浏览和获取关键内容。同时，卡片的形式具有灵活性和可扩展性，能够适应不同的屏幕尺寸和设备类型。设计要点还提到了一些卡片设计的要点。例如，要注意卡片的尺寸和比例，以确保在不同设备上的显示效果；要合理运用色彩、字体和图标等元素，增强卡片的视觉吸引力；要考虑卡片之间的间距和排列方式，以提高用户的操作体验。3.1移动端UI设计中的卡片设计3.1.1UI中的卡片是什么此小节着重介绍了移动端UI设计中卡片的定义。卡片是一种集成多种元素的信息集合组件，它将文字、图像、图标等融合在一起。这种设计形式简洁直观，能高效地向用户传达信息。它具有一定的独立性和完整性，在界面中可作为一个独立的模块存在，同时又能与其他卡片或组件相互配合，构成完整的UI界面，是移动端UI设计中一种重要的信息组织和展示方式。3.1移动端UI设计中的卡片设计3.1.2卡片的常见应用场景该小节阐述了卡片在移动端UI设计中的常见应用场景。卡片广泛应用于各类App中，如音乐App中用于展示专辑封面、歌曲信息等；天气App中呈现天气状况和相关数据；日历App里展示日程安排。它还可用于新闻资讯类App，以卡片形式展示新闻标题和图片等内容。通过这些应用场景可知，卡片能够有效地组织和分类信息，使用户可以快速浏览和获取所需内容，提升了用户体验。3.1移动端UI设计中的卡片设计3.2实例1:2.5D风格的天气卡片设计本节概述设计思路

本实例旨在打造具有2.5D风格的天气卡片，核心是通过光影和立体效果呈现天气信息。利用图层样式和形状工具，营造

出卡片的立体感，同时结合天气元素的特点进行设计，使信息直观且具有吸引力。设计过程1.绘制卡片背景和基本形状绘制背景：新建文档，将背景图层转换为普通图层，添加渐变图层样式，设置渐变色值和角度等参数。绘制卡片主体：使用矩形工具绘制卡片形状，设置填充颜色和描边，添加投影图层样式，设置混合模式、颜色、不透明度、角度、距离和大小等参数，营造立体感。2.添加天气元素绘制太阳或云朵：根据天气情况，使用形状工具绘制太阳或云朵形状，设置填充和描边，添加图层样式，如渐变叠加和投影，使其具有立体感和光影效果。添加温度和其他信息：使用文字工具添加温度、天气状况等文字信息，设置字体、颜色和大小，使其与卡片整体风格协调。3.完善卡片细节添加阴影和高光：通过调整图层样式和绘制形状，为卡片添加阴影和高光，增强立体感。调整整体效果：检查卡片的整体效果，对颜色、光影和元素位置进行调整，确保信息清晰、美观。3.2.1绘制第一张卡片1.新建文档与背景设置新建一个空白文档。然后将背景图层转换为普通图层，重命名为“底层背景”。双击“底层背景”图层，调出“图层样式”窗口，勾选“渐变叠加”图层样式，调整参数3.2实例1:2.5D风格的天气卡片设计3.2.1绘制第一张卡片2.绘制卡片主体形状（1）绘制卡片外形选择矩形工具，设置绘制模式为“形状”，填充色值为#FFFFFF，描边为无，在画面中央绘制一个矩形。3.2实例1:2.5D风格的天气卡片设计3.2.1绘制第一张卡片2.绘制卡片主体形状（2）添加投影效果双击调出“图层样式”窗口，勾选“渐变叠加”样式和“投影”图层样式，调整参数。3.2实例1:2.5D风格的天气卡片设计3.2.1绘制第一张卡片3.绘制卡片内部元素1)为第一张卡片添加文字元素文字元素包含日期、城市名称、当前温度、当天的最高温度/最低温度等信息。3.2实例1:2.5D风格的天气卡片设计2)为第一张卡片绘制天气图标(1)绘制太阳的主体。(2)绘制太阳的光芒形状。3.2.1绘制第一张卡片3.绘制卡片内部元素3)为第一张卡片绘制天气图标(3)按Shift键选中这两个胶囊圆角矩形，再按Ctrl+G组合键编组，并命名为“光芒组1”。(4)为太阳填色，添加“渐变”图层样式。(5)为太阳添加发光效果。(6)调整整体的太阳形状，模拟一定的透视效果。3.2实例1:2.5D风格的天气卡片设计3.2.1绘制第一张卡片3.绘制卡片内部元素4)为天气图标制作立体效果(1)复制“太阳”编组图层，并调整位置。(2)对厚度层的路径形状进行微调，进一步优化太阳的厚度效果。(3)使用上一步骤中同样的方法，对太阳其他部分的路径形状进行微调3.2实例1:2.5D风格的天气卡片设计3.2.1绘制第一张卡片3.绘制卡片内部元素5)为太阳图标制作投影(1)绘制投影的形状,并在图层面板上更改图层顺序至“太阳”编组图层之下,按Ctrl+T组合键调出自由缩放变换手柄框，并切换到“透视”状态，先向上移动右侧中间的端点，再向右上方移动下侧中间的端点，调整图形3.2实例1:2.5D风格的天气卡片设计3.2.1绘制第一张卡片3.绘制卡片内部元素5)为太阳图标制作投影(2)调整投影的颜色和模糊效果。调整投影，先调出“图层样式”窗口，添加“渐变叠加”样式。在渐变编辑器中设置颜色和不透明度指示器。再设置角度，然后为投影添加“高斯模糊”滤镜，需将矢量形状图层转换为智能对象3.2实例1:2.5D风格的天气卡片设计3.2实例1:2.5D风格的天气卡片设计3.2.2绘制多云天气卡片1.复制晴天天气卡片·编组与复制：同时选中晴天天气卡片相关图层并编组为“晴天卡片”，按Ctrl+J组合键复制，重命名为“多云卡片”，并移至合适位置。·调整太阳效果：由于渐变原因，复制卡片的太阳效果不同，需手动调整。双击“多云卡片”编组图层中的“太阳”图层，调出“图层样式”窗口，选中“渐变叠加”图层样式，在“渐变编辑器”窗口移动渐变色条下的手柄调整太阳渐变，“太阳厚度”图层的渐变样式可参考上述步骤进行相应调整。·修改文字与太阳图标：选中两个太阳编组图层，按Ctrl+T组合键调出自由缩放变换手柄，适当缩小多云卡片的太阳图标，为云朵图标留出空间，之后修改“多云卡片”编组图层的文字内容。3.2实例1:2.5D风格的天气卡片设计3.2.2绘制多云天气卡片2.添加绘制云朵天气图标·绘制基础形状：使用椭圆工具和圆角矩形工具绘制大小不一的3个圆形形状和一个圆角矩形，移动摆放成云朵形状。·调整变形：将4个新绘制的矢量形状所在的图层进行编组并重命名为“云朵”，按Ctrl+T组合键调出自由缩放变换手柄，使用“透视”模式将云朵形状调整至合适形状。·添加渐变效果：将云朵移动到合适位置，双击“云朵”图层调出“图层样式”窗口，勾选“渐变叠加”样式，在“渐变编辑器”窗口设置渐变色条的2手柄的色值分别为#bbc8e4和#ffffff，然后将“角度”设为79度。3.2实例1:2.5D风格的天气卡片设计3.2.2绘制多云天气卡片3.为云朵添加立体效果·复制并移动：复制“云朵”图层，重命名为“云朵厚度”，向左、向上移动一点位置，增加厚度空间。·添加渐变样式：双击“云朵厚度”图层调出“图层样式”窗口，单击“渐变叠加”右侧的“+”按钮，再添加一个“渐变叠加”图层样式，将“不透明度”设为60%，将渐变色条左右两端色值分别设为#051c4d和#8693b8。·丰富云团效果：复制一层“云朵”图层并将云朵缩小，同时选中“云朵”和“云朵厚度”2个图层，按Ctrl+G组合键编组并重命名为“云朵1”，按Ctrl+J组合键复制并重命名为“云朵2”，然后适当缩小并移动位置，将图层的“不透明度”改为90%。3.2实例1:2.5D风格的天气卡片设计3.2.2绘制多云天气卡片3.为云朵添加立体效果·修改云团的投影：选中“多云卡片”编组图层内的“投影”图层，将“不透明度”改为60%，并适当向下移动放大，读者也可根据自身喜好和需求进行调整，至此，多云天气卡片基本绘制完成。3.2实例1:2.5D风格的天气卡片设计3.2.3绘制雷雨天气卡片1.复制并调整相关元素·复制卡片并调整样式：选中“多云卡片”编组图层，按Ctrl+J组合键复制并重命名为“雷雨卡片”，向下移动至合适位置。双击“云朵1”编组图层内的“云朵”表面图层，调出“图层样式”窗口，选中“渐变叠加”样式，调整渐变色条两个手柄的位置。·删除与调整图标：雷雨天气不需要太阳图标，将其删除，随后将云朵图标略微往上移动一段距离，并适当缩小，还可将小云朵图标与大云朵图标适当拉开一些距离，再修改第三张“雷雨卡片”的文字内容。3.2实例1:2.5D风格的天气卡片设计3.2.3绘制雷雨天气卡片2.绘制闪电图标·绘制形状：使用钢笔工具绘制一个闪电形状，设置钢笔工具的绘制模式为“形状”，描边为无，填充为白色，将新绘制的闪电矢量形状图层重命名为“闪电”，并在图层面板上将其拖动到“云朵2”编组图层和“云朵1”编组图层之间。3.2实例1:2.5D风格的天气卡片设计3.2.3绘制雷雨天气卡片3.为闪电图标添加光效·添加外发光效果：双击“闪电”图层调出“图层样式”窗口，添加“外发光”图层样式，设置颜色值为#517aff，“不透明度”为70%，“扩展”为3%，“大小”为50像素。·设置投影样式：选中“投影”样式，设置“混合模式”为“变亮”，色值为#295bff，“不透明度”设为80%，“大小”为150像素。3.2实例1:2.5D风格的天气卡片设计3.2.3绘制雷雨天气卡片4.为闪电图标添加立体效果·复制并移动图层：选中“闪电”图层，按Ctrl+J组合键复制并重名为“闪电厚度”，将其拖动到“闪电”图层的下一层，将图层的“不透明度”修改为40%，单击“投影”左边的眼睛图标将“投影”图层样式隐藏。·调整外发光效果：将“闪电厚度”图层适当移动，双击“闪电厚度”图层打开“图层样式”窗口，将“外发光”的“大小”修改为80像素。·修改路径形状：切换到钢笔工具，当鼠标指针移动到路径上时，钢笔工具切换为了添加模式，在闪电的末端位置单击添加一个路径锚点。由于添加的锚点有左右两个曲线手柄，移动锚点会形成弯曲形状，不符合要求，需按住Alt键，将钢笔工具切换成“转换点工具”模式，单击刚才添加的锚点，取消锚点左右两侧的曲线手柄，使锚点所在曲线区域从弯曲形状变成锐角形状，并将该锚点移动到合适的位置，与闪电表面的末端契合。·重复操作并调整：重复上述步骤，再添加几个锚点并移动位置，最终调整闪电厚度形状。还可多增加一组闪电，进一步丰富天气效果3.3实例2:音乐卡片设计本节概述设计思路：界面分为3部分，包括一张功能较全的大卡片和2张小卡片。大卡片的播放进度条设计独特，用音波阵列展示歌曲高潮部分。小卡片承载部分信息，下方有磨砂玻璃效果区域。图片是重要元素，界面色彩与图片适配。设计过程：1.大卡片绘制新建文档与绘制背景：新建文档，将背景图层转换为普通图层并命名。添加圆角矩形作为卡片背景，调整位置并添加渐变图层样式。添加图片素材：创建小圆角矩形作为矢量蒙版，添加图片素材并调整大小和位置，添加两层阴影效果。绘制进度条：绘制音波阵列进度条，复制多个组成阵列，调整高度，添加播放进度和时长数字，并添加“颜色叠加”样式。绘制按钮：绘制播放、上一首/下一首按钮，添加“颜色叠加”和“投影”图层样式。添加文字：添加歌曲名称和歌手名称字符，设置不同字体样式和透明度。最后为主卡片整体添加“投影”图层样式。2.小卡片绘制绘制矢量蒙版：绘制小卡片的矢量蒙版，调整位置并编组，粘贴为矢量蒙版路径。添加图片素材：添加图片素材并转换为智能对象，调整大小和位置。添加信息与按钮组件：添加磨砂玻璃质感矩形作为组件背景，复制粘贴为矢量蒙版，添加图片的模糊效果和颜色叠加。添加歌单信息文本和播放按钮。复制创建第三张卡片：复制编组图层“音乐小卡片01”，更改图片素材，更新相关效果，如“高斯模糊”，至此3张音乐卡片基本绘制完成。3.2.3绘制雷雨天气卡片1.新建文档设置文档参数：打开Photoshop后，按Ctrl+N组合键新建一个空白文档，命名为“3.3实例2:音乐卡片设计”，将宽度设为1080，高度设为1920，单位为像素。转换背景图层：新建空白文档后，双击默认生成的背景图层，转换为普通图层，并将其命名为“底层背景”。3.3实例2:音乐卡片设计3.2.3绘制雷雨天气卡片2.绘制主卡片背景添加圆角矩形：在工具栏选中圆角矩形工具，在工具属性栏中设置绘制模式为“形状”，“填充”为任意纯色，“描边”为无，“半径”即圆角半径为90像素，在新建文档的画布范围内任意位置单击，调出“创建矩形”对话框，设置宽度为900像素，“高度”为1150像素，单击“确定”按钮，生成一个圆角矩形调整位置并添加样式：选中新建的圆角矩形图层，双击圆角矩形图层名称的区域，将图层重命名为“主卡片背景”，按Ctrl+T组合键调出自由变换手柄工具，在工具属性栏中将X设为540像素，Y设为665像素，即将主卡片背景矩形调整到页面水平居中、靠近顶部的位置。双击“主卡片背景”图层除图层名称字符以外的区域，调出“图层样式”窗口，勾选“渐变叠加”图层样式，设置“混合模式”为“正常”，“不透明度”为100%，“角度”为128度，双击渐变色条调出“渐变编辑器”窗口，将渐变色条左右两端色值分别设为#c7fff8和#dfefff，为主卡片背景添加一个浅蓝色调的渐变。3.3实例2:音乐卡片设计3.2.3绘制雷雨天气卡片3.添加图片素材（1）创建矢量蒙版：再次创建一个小的圆角矩形，选中圆角矩形工具，将“半径”改为60像素，在画布范围内任意位置单击调出“创建矩形”对话框，设置宽度为800像素，“高度”为500像素，创建一个新的圆角矩形，将这个小圆角矩形作为矢量蒙版。3.3实例2:音乐卡片设计3.2.3绘制雷雨天气卡片3.添加图片素材（2）添加图片：从“素材文件>第3章>3.3音乐卡片设计”文件夹中找到素材图片“3.3实例2图片素材1.jpg”，按Ctrl+C组合键复制，然后回到Photoshop中，选中编组图层“主卡片专辑封面”，按Ctrl+V组合键粘贴刚才复制的图片，图片显示区域仅限于矢量蒙版范围内，调整图片大小和位置，按Ctrl+T组合键调出自由变换手柄工具，在工具属性栏中将X设为540像素，Y设为395像素，W和H即宽高尺寸设为33%。

4.添加阴影效果：双击编组图层“主卡片专辑封面”，调出“图层样式”窗口，单击左侧栏最底部的“投影”右侧的图标，在勾选“投影”样式的同时，在下面添加一个新的“投影”样式，设置第一个“投影”样式的“混合模式”为正片叠底，颜色值为#074097，“不透明度”为12%，“角度”为90度，“距离”为20像素，“大小”为30像素，设置第2个“投影”样式的“混合模式”为正片叠底，颜色值为#076297，“不透明度”为30%，“角度”为90度，“距离”为40像素，“大小”为90像素。3.3实例2:音乐卡片设计3.2.3绘制雷雨天气卡片5.绘制进度条（1）绘制音波阵列：创建小圆角矩形作为音波线，选择圆角矩形工具，单击画布调出“创建矩形”对话框，将“宽度”为6像素，“高度”设为40