Photoshop+Illustrator平面设计立体化教程（微课版）（Photoshop2021+Illustrator2021）课件 项目4 UI设计

新形态立体化精品系列教材UI设计项目4Photoshop+Illustrator平面设计立体化教程（微课版）（Photoshop2021+Illustrator2021）情景描述项目4UI设计UI（UserInterface）设计，即用户界面设计，主要包括对界面的人机交互、操作逻辑和界面美观度的整体设计。老洪最近接到很多UI设计任务，便将部分任务分配给米拉，包括天气预报App界面和家居网站界面。老洪告诉米拉，UI设计是一个涉及版面布局、颜色搭配等方面的综合性工作，不仅需要掌握色彩理论，以及排版、布局、图标设计等基本技能，还需要了解和理解用户的需求、目标、行为和偏好，以便设计出符合用户心理和使用习惯的界面。目录制作天气预报App界面任务4.1制作家居网站界面任务4.2综合实战制作旅游网站首页界面天气预报App的主要用户群体是希望了解未来天气状况的人，他们需要快速获取温度、湿度、风速、气压、降雨量等基本气象信息。此外，用户还希望了解未来几天的天气预报，以便安排出行、户外活动等。本任务需要设计师设计一个直观、易于使用且具有吸引力的天气预报App界面，要求能够满足用户的基本需求。（一）任务背景任务描述任务4.1制作天气预报App界面①

制作尺寸为1080像素×1920像素，分辨率为72像素/英寸的App界面。②

整体界面清晰、简洁，颜色和谐、以清新自然的蓝色为主色调。③

突出显示重要信息，如当前温度、气象等，使用户能够快速找到所需的信息。④

图标直观、易辨认，且风格一致。（二）任务目标任务描述任务4.1制作天气预报App界面（三）知识要点在Illustrator中运用路径查找器、曲率工具和“符号”面板；在Photoshop中运用图层样式和图层不透明度。知识准备1．App界面构成元素若想要设计出兼具实用性与美观性的App界面，需要先了解App界面的基本构成元素，右图所示为京东App的各个界面，可发现其界面分为3个部分，分别是标题栏、信息展示区、底部导航栏。

标题

栏：

标

题

栏

用

于

放

置AppLogo（或者名称）、当前界面相关信息等，如京东App中的“首页”“同城”文字所在区域都属于标题栏。

信息展示区：信息展示区位于标题栏下方，属于App界面的主要区域，可以根据App应用的具体内容进行合理安排。

底部导航栏：底部导航栏位于App界面底部，用于在不同的界面间切换。2．App界面设计要点设计师在进行App界面设计时，需要展现App的特点和功能，使其能够更快、更准确地传递信息。App界面的设计要点主要包括以下4点。

要明确传达主旨：优秀的App界面首先要能够明确传达App主旨，即App的主要功能。

要保证功能的合理性：在进行App界面设计时，需要考虑App的使用特点，以保证App功能的合理性。

要有清晰的展现信息层级：App界面设计可根据内容的主次，将信息区分为不同的信息层级，当用户点击该层级信息时，将自动跳转到该层级中，方便用户查看。

要具备美观性：优秀的App界面不但要内容明确，而且要具备美观性，只有具有吸引力的App界面才能吸引更多人浏览。3．Photoshop图层样式为图层应用图层样式，可使图层中的图像具有特殊的质感、纹理等效果。选择图层后，Photoshop提供了3种添加图层样式的方法，选择【图层】/【图层样式】命令，在弹出的子菜单中选择一种样式命令；或在“图层”面板底部单击“添加图层样式”按钮

，在弹出的下拉菜单中选择需要创建的样式命令；或双击需要添加图层样式的图层右侧的空白区域，都将打开“图层样式”对话框，如右图所示，设置相关参数后，单击“确定“按钮。4．Photoshop图层不透明度若需要在画面中展现下方图层中的内容，可以通过调整该图层的不透明度，使该图层中的内容呈现透明效果，使其下方的图层显现，并与之叠加显示。具体方法为：选中需要调整不透明度的图层后，在“图层”面板上调整“不透明度”数值，如下图所示。5．Illustrator中的路径查找器“形状模式”按钮组有“联集”按钮

、“减去顶层”按钮

、“交集”按钮

、“差集”按钮

、”扩展“按钮5个按钮。下图所示为原图和采用“形状模式”按钮组中各按钮运算同一位置的矩形和正圆的效果展示。（1）“形状模式”按钮组5．Illustrator中的路径查找器“路径查找器”按钮组包括“分割”按钮

、“修边”按钮

、“合并”按钮

、“裁剪”按钮

、“轮廓”按钮

、“减去后方对象”按钮6个按钮。下图所示为原图和采用“路径查找器”按钮组中各按钮运算同一位置的矩形和正圆的效果展示。（2）“路径查找器”按钮组6．Illustrator曲率工具曲率工具可以帮助设计师快速地计算出曲线的曲率，从而更好地绘制带有曲线的图形。选择曲率工具

，在画板上单击确定一个锚点，曲线起始位置，继续单击确定另一个锚点，确定曲线转折点，移动鼠标指针，软件会根据鼠标指针悬停位置预览生成路径的形状，在合适位置继续单击鼠标左键创建第3个锚点时，这3个锚点将自动连接，并且形成平滑的曲线，如下图所示。任务实施1．制作天气图标米拉通过观察发现，晴、雨、雪这些天气图标并不是单一的规则图形，而是多个图形的组合，而且部分图形并不规则，于是她决定在Illustrator中使用路径查找器和曲率工具来绘制天气图标，可操作性更强，具体操作如下。1创建锚点2转换锚点3闭合路径1．制作天气图标7绘制正圆和矩形8修边图形9删除矩形4调整图形边缘5翻转图形6复制图形1．制作天气图标13分割图形14镜像和编组图形15太阳图形效果10调整圆角11转换锚点12闭合路径2．制作App其他图标1绘制风扇图形2绘制小人形状米拉发现除了天气图标外，很多天气预报App界面中还有一些其他图标，比如湿度、风向、气压、体温等图标，为了让App其他图标和前面制作的天气图标有一定联系，米拉打算在设计时采用相同的色调和风格，具体操作如下。2．制作App其他图标3创建锚点5减去水滴图形4调整图形6绘制其他图标3．制作App界面1添加素材4设置“内发光”和“外发光”图层样式图标绘制完成后，米拉准备将这些图标运用在App界面中，具体操作如下。2绘制图形和线条3添加天气图标3．制作App界面5查看效果6添加“投影”图层样式”图层样式7最终效果目录制作天气预报App界面制作旅游网站首页界面综合实战制作家居网站界面任务4.2任务4.1梦想家家居致力于为消费者提供高质量、风格多样的家居产品，近期该品牌需要设计官方网站界面，要求突出“梦想家”的品牌特色，展示品牌形象和价值观，页面布局清晰、简洁，色彩搭配和谐，字体大小适中，以提升用户的浏览体验。（一）任务背景任务描述任务4.2制作家居网站界面①

制作尺寸为1920像素×3309像素，分辨率为72像素/英寸的网络界面。②

利用Illustrator中的“符号”面板创建网页图标。③

在Photoshop中创建和编辑文字。（二）任务目标任务描述任务4.2制作家居网站界面（三）知识要点Illustrator中的“符号”面板，Photoshop中文字的创建和编辑。知识准备1．网页界面组成网页界面一般分为导航栏、Banner、相关版块、尾页4个部分，下图所示为华为公司官方网站的首页。2．网页界面设计的注意事项

网页首页界面在网站结构中一般为第一级，与其有从属关系的页面为内页，又称二级页面，属于网页结构中的第二级。网页内页多用于对首页内容进行具体说明，在设计网页内页界面时需要注意以下事项；一是设计网页内页界面的页头时，应将页头应用到所有页面，以便于查看；二是设计网页内页界面时，页面的导航栏不能删除，并且高度不能低于30像素。3．Photoshop中的文字创建（1）横排文字工具输入排列方向平行于水平线方向的文本可以使用横排文字工具

，该工具的工具属性栏如下图所示。选择横排文字工具

，在工具属性栏中根据具体需求设置相关参数后，在图像编辑区内单击鼠标左键，插入文本定位点后即可输入点文本，如下图所示。3．Photoshop中的文字创建（2）直排文字工具输入排列方向垂直于水平线方向的文本可以使用直排文字工具

，该工具的工具属性栏和使用方式与横排文字工具

基本一致，只是文本对齐方式按钮组

内的按钮略有差异，该按钮组包括“顶对齐文本”按钮

、“居中对齐文本”按钮

、“底对齐文本”按钮

，如下图所示。3．Photoshop中的文字创建（3）横排文字蒙版工具和直排文字蒙版工具输入带有选区效果的文本可以使用横排文字蒙版工具

或直排文字蒙版工具

，这两个工具的工具属性栏、使用方式和文本排列方向分别与横排文字工具

、直排文字工具

一致，只是输入的文本状态有所差别。4．Photoshop中的文字编辑（1）“字符”面板通过“字符”面板可设置文本的字符属性，包括间距、缩放比例、行距、特殊字体样式等。选择【窗口】/【字符】命令，打开“字

符”面

板，

如左图所示。4．Photoshop中的文字编辑（2）“段落”面板通过“段落”面板可设置文本的对齐方式、缩进方式、避头尾法则和间距组合等属性。选择【窗口】/【段落】命令，或在“字符”面板上单击“段落”选项卡切换面板，如左图所示。5．Illustrator中的“符号”面板Illustrator提供了“符号”面板，专门用来创建、存储和编辑一些常用的图形元素，具体使用方法为：选择【窗口】/【符号】命令，打开“符号”面板，在“符号”面板中可选中符号，直接将其拖曳到当前画板中，得到一个符号范例，如下图所示。任务实施1．绘制网站图标米拉准备在网站上添加一些图标来丰富画面，为了节约时间，她打算直接利用Illustrator中的符号类型来制作，具体操作如下。1添加“主页”图标

2调整图标大小

3复制标志1．绘制网站图标4添加“购物车”图标

5添加和修改图标2．制作网站导航栏1绘制矩形完成网站图标的制作后，米拉准备直接在Photoshop中根据从上到下的顺序来布局网站界面，首先米拉需要制作家居网站的导航栏，具体操作如下。2添加“投影”图层样式和素材3完成导航栏的制作3．制作网站Banner由于网站Banner的空间有限，因此米拉打算采用简洁明了的风格，尽量不使用过多的文字和图片，以免造成视觉冲突，同时为了吸引用户的注意力，米拉还准备将主题文字放大、加粗和居中，使视觉效果更突出，具体操作如下。2输入文字1添加素材和矩形4．制作网站相关版块客户要求在网站中添加关于“梦想家”家居网站的业务介绍和品牌介绍，米拉打算将这部分内容安排在网站的相关版块中，具体操作如下。2添加“投影”图层样式1添加素材3添加文字和编辑文字4．制作网站相关版块5添加素材4绘制矩形6添加文字5．制作网站页尾版块为了与其他版块的风格保持一致，米拉打算将网站页尾版块的底纹设计为灰色，并且在其中添加简洁的文字内容，具体操作如下。完成网站页尾版块目录制作家居网站界面任务4.2制作旅游网站首页界面综合实战制作天气预报App界面任务4.1实战背景实战描述综合实战

制作旅游网站首页界面随着全球旅游业的快速发展，人们对旅游的需求和期望也在不断提高，旅游网站作为人们获取旅游信息和服务的渠道之一，竞争越来越激烈。某旅游公司为了在各大旅游网站中脱颖而出，吸引用户眼球，需要重新设计旅游网站界面，增强用户的浏览体验和操作体验，以进一步扩大公司影响力和知名度。本实战的参考效果如上图所示。实战目标①制作尺寸为1920像素×3498像素，分辨率为72像素/英寸的旅游网站首页界面。②绘制旅游网站首页界面中的装饰图标。③通过简洁明了的布局，简洁、易懂的图标和按钮，以及高质量的图片展示，提高界面的可读性和易操作性。实战描述知识要点Illustrator中的“符号”面板和“曲率工具”Photoshop中的文字输入与编辑，图层样式和图层不透明度。综合实战

制作旅游网站首页界面思路及步骤（1）

打开Illustrator，新建大小为“100px×100px”的文件。打开“符号”面板，单击“符号库菜单”按钮，在弹出的下拉菜单中选择“移动”命令，打开“移动”面板，将其中的“用户-灰色”图标拖动到画板中，然后修改图标颜色为“#2479e4”。（2）

新建画板，使用相同的方法依次在第2个和第3个面板中从“地图”面板中拖出“机场”图标，从“网页图标”面板中拖出“记事本”图标，并更改图标颜色为“#2479e4”。（3）

新建画板，选择“曲率工具”，设置填充为“#2479e4”，描边为“无”，在图像编辑区中绘制人物手型图形，如果对绘制图形不满意，可拖动图形上的锚点进行调整。（4）

选择“椭圆工具”，在手形图形上方绘制椭圆，选择该图形，按住【Alt】键，向下拖动复制椭圆，使用相同的方法再次复制一个椭圆。实战描述综合实战

制作旅游网站首页界面（5）