Photoshop+Illustrator平面设计立体化教程（微课版）（Photoshop2021+Illustrator2021）课件全套 项目1-9初识Photoshop+Illustrator平面设计 - -商业设计案例

新形态立体化精品系列教材初识Photoshop+Illustrator平面设计项目1Photoshop+Illustrator平面设计立体化教程（微课版）（Photoshop2021+Illustrator2021）情景描述项目1初识Photoshop+Illustrator平面设计米拉在大四实习阶段找到了一份平面设计助理的实习工作，公司让资深设计师洪钧威（人称老洪）带领她开展工作。初入职场，老洪向米拉介绍了设计助理的主要工作内容，并告诉米拉，在平面设计工作中，Photoshop和Illustrator这两款软件经常配合使用。因此，米拉要想成为一名合格的设计助理，必须熟练掌握这两款软件的基本操作。为了让米拉尽快进入工作状态，老洪让她先熟悉平面设计基础知识，然后掌握Photoshop和Illustrator的基本操作，之后再交给她制作节气海报的工作任务。目录了解平面设计基础知识任务1.1熟悉Photoshop的基本操作任务1.2任务1.3熟悉Illustrator的基本操作综合实战制作“立夏”节气手机海报1．平面设计的应用领域平面设计是一种集创意、构图和色彩为一体的艺术表达形式，不仅注重视觉审美，还要传达出设计师所要表达的具体信息，其应用领域也很广泛，主要包括以下领域。卡片设计标志设计UI设计广告设计包装设计书籍装帧设计2．位图与矢量图计算机中显示的图形图像一般可以分为两大类，即位图和矢量图（通常我们所说的“图像”往往是指位图，而“图形”往往是指矢量图）。●

位图：位图又称为点阵图，由单个像素点组成。如右图所示。●

矢量图：矢量图又称为向量图，是指由点组成的直线或曲线所构成的图形，构成这些图形的点和线，可被称为对象，每个对象都是一个单独的个体，它具有大小、方向、轮廓、颜色和位置等属性。如上图所示。3．像素与分辨率像素和分辨率是两个密不可分的重要概念，它们共同决定了图像的数据量，与图像文件的清晰度也密切相关。像素是构成位图图像的最小单位，每个像素在位图图像中都有自己的位置，并且包含了一定的颜色信息。图像单位面积内的像素越多，颜色信息越丰富，图像效果就越好，文件也越大。像素分辨率是指单位长度上的像素数目，单位通常为“像素/英寸”和“像素/厘米”。图像的分辨率越高，包含的像素越多，图像就越清晰，相应的图像文件也就越大。分辨率4．颜色模式图像文件的颜色模式决定了图像颜色的显示效果，也决定了图像文件在计算机中显示或打印输出的方式，常见的图像颜色模式有以下8种。RGB颜色模式灰度模式位图模式Lab颜色模式双色调模式CMYK颜色模式多通道模式索引产色模式5．常见的图像文件格式Photoshop和Illustrator都支持多种文件格式，在其中存储图像文件时，应根据需要选择合适的文件格式。AI格式01EPS格式02PSD格式03PDF格式04SVG格式05JPEG格式06TIFF格式07PNG格式08BMP格式09SWF格式10GIF格式11目录了解平面设计基础知识熟悉Illustrator的基本操作任务1.3熟悉Photoshop的基本操作任务1.2任务1.1综合实战制作“立夏”节气手机海报1．认识Photoshop工作界面在计算机系统桌面上双击软件图标启动Photoshop2021，其工作界面如下图所示，主要包括菜单栏、标题栏、工具箱、工具属性栏、浮动面板、图像编辑区、状态栏。如左图所示。1．认识Photoshop工作界面菜单栏由“文件”“编辑”“图像”“图层”“文字”“选择”“镜”“3D”“视图”“增效工具”“窗口”和“帮助”12个菜单组成，每个菜单下包含多个命令。若命令右侧标有符号，则表示该命令还有子菜单若某些命令呈灰色显示，则表示没有激活或当前不可用。（1）菜单栏标题栏中通常会显示已打开或已创建图像文件的名称、格式、显示比例、当前所选图层、颜色模式、通道位数及该图像文件的“关闭”按钮。如果新创建的图像文件未命名且未被存储过，则标题栏中的文件名称将以“未命名＋连续数字”的形式显示。（2）标题栏1．认识Photoshop工作界面工具箱集合了Photoshop的常用工具，如右图所示，默认位置在工作界面左侧，将鼠标指针移动到工具箱顶部，按住鼠标左键不放并拖曳鼠标指针，可将工具箱移动到工作界面中的其他位置。（3）工具箱1．认识Photoshop工作界面在工具属性栏中可设置所选工具的参数。工具属性栏默认位于菜单栏下方，当设计师选择工具箱中的某个工具后，工具属性栏将显示该工具对应的参数选项。（4）工具属性栏在浮动面板中可进行选择颜色、编辑图层、新建通道、编辑路径和撤销等操作。在“窗口”菜单中选择某个面板的命令后，该面板将被添加到浮动面板中，以缩略图标的形式显示，设计师可通过拖曳面板缩略图标的方法来调整该面板的位置。（5）浮动面板1．认识Photoshop工作界面图像编辑区（也可称为画布）是在Photoshop中查看与编辑图像的区域，所有的图像处理结果都在图像编辑区中显示。（6）图像编辑区在状态栏中可查看当前图像在图像编辑区中的显示比例或文件的其他信息。状态栏默认位于图像编辑区左下方，左端显示当前图像编辑区的显示比例，在其中输入数值并按【Enter】键可改变图像的显示比例；中间区域默认显示当前文件的尺寸；单击右侧的按钮，可在弹出的下拉菜单中设置中间区域的显示内容。（7）状态栏2．新建和打开文件启动Photoshop后将进入开始界面，单击该界面左侧的“新建”按钮，可在弹出按钮，或选择【文件】/【新建】命令，或按【Ctrl+N】组合键，都可打开“新建文档”对话框（见左图），设置参数后，单击“创建”按钮即可新建对应的文件。3．置入、导入与导出文件选择【文件】/【置入嵌入对象】命令，打开“置入嵌入的对象”对话框（见右图），选择要置入的文件后，单击钮按钮，置入文件后，单击“置入”工具属性栏中的“提交变换”按，或按【Enter】键，或在图像编辑区以外的地方单击鼠标左键，都可完成置入操作，而单击“取消变换”按钮则可取消置入操作。（1）置入文件3．置入、导入与导出文件选择【文件】/【导入】命令，在打开的子菜单中选择所需命令后，按照提示进行操作。导入的文件将会创建一个新的图像文件来承载导入的文件内容。（2）导入文件选择【文件】/【导出】命令，在打开的子菜单中可以完成多种导出任务，如上图所示。设计师可以按照所要导出的内容、范围、格式来选择需要的命令。（3）导出文件4．调整文件大小选择【图像】/【图像大小】命令，打开“图像大小”对话框(见左图），在其中可设置图像尺寸宽度、高度及分辨率等，设置完毕后单击“确定”按键。（1）调整图像大小4．调整文件大小调整画布的大小也可以改变图像文件大小，具体方法为：选择【图像】/【画布大小】命令，打开“画布大小”对话框，设置完参数后，单击“确定”按钮。如左图所示。（2）调整画布大小5．存储与关闭文件选择【文件】/【存储】命令，或按【Ctrl+S】组合键，打开的“另存为”对话框（见右图），选择文件存储位置后，单击“保存”按钮。另外，“另存为”对话框只在首次保存当前文件时才会出现。（1）存储文件5．存储与关闭文件按照关闭文件的范围，可将关闭文件的方法划分为3种。（2）关闭文件关闭所有文件：选择【文件】/【关闭全部】命令，或按【Ctrl+Alt＋W】组合键，可关闭当前打开的所有文件。01>02>关闭当前文件：选择【文件】/【关闭】命令，或按【Ctrl+W】组合键，可关闭当前文件。03>关闭文件和软件：选择【文件】/【退出】命令，或单击Photoshop工作界面右上角的按钮，可关闭文件和软件。目录熟悉Photoshop的基本操作任务1.2熟悉Illustrator的基本操作任务1.3了解平面设计基础知识任务1.1综合实战制作“立夏”节气手机海报1．认识Illustrator的工作界面Illustrator2021的工作界面主要由菜单栏、控制栏、文件窗口、工具箱、面板等组成，如下图所示。1．认识Illustrator的工作界面（1）菜单栏Illustrator的菜单栏包含了文件、编辑、对象、文字、选择、效果、视图、窗口和帮助9个菜单。选择某一个菜单，在弹出的子菜单中选择一个命令，可执行该命令。（2）控制栏控制栏显示了一些常用的参数选项。使用不同工具或选择不同的对象时，控制栏的参数也会随之发生变化，如选择绘制的图形，控制栏会显示图形的填充、描边、不透明度、位置、宽度和高度等参数。若控制栏没有显示参数，可以选择【窗口】/【控制】命令将其展示出来。1．认识Illustrator的工作界面（3）文件窗口文件窗口包含标题栏、画板、滚动条和状态栏等部分，直接拖曳标题栏可将当前文件窗口从工作界面中分离出来，该文件窗口将变为浮动窗口，如右图所示，此时可将文件窗口移动至界面任意位置，拖曳窗口边缘可调整文件窗口的大小。当打开多个文件后，选择【窗口】/【排列】命令，在弹出的子菜单中可设置文件窗口的排列方式。1．认识Illustrator的工作界面（4）工具箱工具箱集合了Illustrator中的常用工具，默认位置在工作界面左侧，通过拖曳工具箱顶部可以将其移动到工作界面的任意位置。若工具图标右下角有一个黑色的小三角标记，表示该工具位于一个工具组中，工具组中还有一些隐藏的工具，在该工具图标上按住鼠标左键不放或单击鼠标右键，可显示该工具组中隐藏的其他工具，如右图所示。另外，选择【窗口】/【工具栏】/【高级】命令，可在工具箱中看到所有工具。1．认识Illustrator的工作界面（5）面板Illustrator提供了多种面板，主要用于编辑图稿、设置工具参数和选项等，设计师通过“窗口”菜单可以打开这些面板。系统默认已打开的面板是在操作过程中经常使用的，位于工作界面右侧，单击面板右上角的按钮可关闭该面板。面板可以单独显示，也可以拖曳面板到已有面板顶部形成面板组，单击按钮可以将展开的面板折叠成图标显示，如上图所示，单击按钮可再次展开面板。2．新建与设置文件选择【文件】/【新建】命令，或在启动界面单击“新建”按钮，都可打开下图所示的“新建文档”对话框，单击对话框上方的标签选项，展开对应参数选项，双击某种预设尺寸可以快速创建文件。若单击“更多设置”按钮，将打开“更多设置”对话框，如右图所示，在其中能设置更详细的文件设置，设置完成后单击“创建文档”按钮创建文件。3．置入文件在Illustrator中设计作品时，往往要用到很多素材，利用置入操作可以将多种类型的图像文件，包括位图和基于矢量的图像添加到当前文件中。其方法为：选择【文件】/【置入】命令，打开“置入”对话框，选择要置入的文件，单击“置入”按钮，如左图所示。返回工作界面，在空白处单击鼠标左键即可将文件按原大小置入到鼠标单击的位置；按住鼠标左键进行拖曳可自定义置入文件的大小和位置。4．查看文件（1）抓手工具当图像呈较大倍率显示时，在工具箱中选择“抓手工具”针将变为状态，按住鼠标左键不放并朝任意方向拖曳画板，可查看图像的各个部分。（2）缩放工具选择工具箱中的“缩放工具”，并将鼠标指针移动到画板中，此时鼠标指针会呈放大镜显示状态，其内部还显示一个“+”字形，在画板任一位置单击鼠标左键，可将当前画板放大一倍，且单击处的图像将移动到屏幕中间。4．查看文件（3）“导航器”面板当画板的放大倍率较大时，能一次性看到的画面较少，此时，可通过“导航器”面板快速查看整个画面。选择【窗口】/【导航器】命令，打开“导航器”面板，如下图所示。5．打开与关闭文件

启动Illustrator后，单击“打开”按钮，或选择【文件】/【打开】命令，或按【Ctrl+O】组合键，打开“打开”对话框，选择需要打开的文件，单击“打开”按钮。另外，双击AI格式的文件，或直接将AI格式的文件拖动到Illustrator工作界面的标题栏上可快速打开文件。若不需要某个文件，可将其关闭，其操作方法与Photoshop中关闭文件的操作相同。6．导出与存储文件导出为：选择该命令，可以将文件导出为PNG、JPG和PSD等常见的文件格式。01>02>导出为多种屏幕所用格式：选择该命令，可以生成不同大小和格式的文件，以适应不同屏幕的需求。03>存储为Web所用格式：选择该命令，可以在导出文件的同时，优化文件在计算机网站中或移动设备屏幕上的显示效果。在Illustrator中完成作品的创作后，可将其导出为不同格式的文件，方便在其他软件中打开和使用。选择【文件】/【导出】命令，在子菜单中提供了以下3种导出子命令。7．Illustrator和Photoshop的文件协同（1）在Illustrator中使用Photoshop文件在Illustrator中使用Photoshop文件主要有以下3种方法。①在Illustrator中打开或置入Photoshop文件②将选区对象复制到Illustrator③

将路径导出到Illustrator7．Illustrator和Photoshop的文件协同（2）在Photoshop中使用Illustrator文件正如在Illustrator中使用Photoshop文件一样，在Photoshop中使用Illustrator文件也有多种操作方法。复制并粘贴：在Illustrator中复制图形，然后切换到Photoshop中粘贴图形。01>02>导出和导入：在Illustrator中通过导出操作，将文件导出为PSD格式，保留图层、分辨率和颜色配置等信息，随后可在Photoshop中打开并编辑该文件。03>在Photoshop中置入链接或嵌入的文件：在Photoshop中选择【文件】/【置入链接的智能对象】命令，打开“置入链接的智能对象”对话框，选择需置入的AI格式文件，单击“确定”按钮。目录熟悉Photoshop的基本操作任务1.2熟悉Illustrator的基本操作任务1.3综合实战了解平面设计基础知识任务1.1制作“立夏”节气手机海报实战背景实战描述综合实战

制作“立夏”节气手机海报本例制作的手机海报是一种针对移动端所制作的海报。随着智能手机的盛行，一些企业开始通过手机海报来打开更加广阔的市场，提高企业知名度。某文化品牌委托公司制作节气海报，通过节气海报进行借势营销，推广品牌，要求结合节气特点，体现我国传统文化的魅力和美学艺术，整体画面要求简洁、美观。本实战的参考效果如上图所示。综合实战

制作“立夏”节气手机海报实战目标①运用已有的“立夏”节气图片、文案资料进行设计。②制作尺寸为1242像素×2688像素，分辨率为150像素/英寸的节气海报。③排版美观，主题突出，符合“立夏”节气的特点。实战描述知识要点在Photoshop中新建文件、置入文件、保存文件、导出文件，在Photoshop和Illustrator中复制与粘贴文件。思路及步骤综合实战

制作“立夏”节气手机海报（1）

启动Photoshop，在启动界面左侧单击“新建”按钮，打开“新建文档”对话框，在右侧的“预设详细信息”栏中设置名称为“‘立夏’节气手机海报”，宽度为“1242像素”，高度为“2688像素”，分辨率为“150像素/英寸”，单击“创建”按钮新建文件。（2）

选择【文件】/【置入嵌入对象】命令，打开“置入的嵌入对象”对话框，选择“荷叶.png”素材，单击”置入“按钮，按【Enter】键确认置入。（3）

打开素材文件夹，然后将“荷花.ai”素材拖动到“‘立夏’节气手机海报”文件中，在打开的“打开为智能对象”对话框中单击”确定“按钮。实战描述综合实战

制作“立夏”节气手机海报（4）

在图像编辑区中拖动置入的“荷花.ai”素材边框，调整至合适大小，然后将该素材移动到画面右上角。（5）

使用相同的方法再次置入“荷花.ai”素材，并调整其大小和位置。（6）

双击打开“立夏文案.ai”素材，选择其中的主题文字，按【Ctrl+C】组合键复制，然后在Photoshop中按【Ctrl+V】组合键粘贴，在打开的“粘贴”对话框中单击选中“像素”单选项，单击”确定”按钮，再使用相同的方法依次添加其他素材。（7）

按【Ctrl+S】组合键，打开“另存为”对话框，选择文件的保存位置后单击“保存”按钮。选择【文件】/【导出】/【快速导出为PNG】命令，打开“存储为”对话框，并按照设计主题命名，选择文件的保存位置后单击”保存“按钮，选择【文件】/【关闭】命令关闭文件。实战描述感谢聆听Photoshop+Illustrator平面设计立体化教程（微课版）（Photoshop2021+Illustrator2021）海量图书方便查询免费申请样书下载配套资源优惠购书成为作者更多样书申请和资源下载需求，请登录人邮教育社区（)囊括各大品类，您想要的应有尽有教师免费申请样书，我们将安排快递迅速送达教学视频、PPT课件、教学案例、习题答案、模拟试卷等丰富资源免费下载教师可以申请最低折扣学生直接优惠购买图书欢迎写文章／投稿，我们强大的编辑团队将为您提供专业和高效的编辑出版服务新形态立体化精品系列教材卡片设计项目2Photoshop+Illustrator平面设计立体化教程（微课版）（Photoshop2021+Illustrator2021）情景描述项目2卡片设计通过近两天的接触，老洪发现米拉对设计岗位的工作内容已有一定的解，于是老洪便决定将卡片设计中的部分任务交给米拉独立完成，他从中选择了较为简单的民宿品牌会员卡、设计公司名片和餐饮店会员卡的设计任务，顺便考察米拉的平面设计基础能力是否扎实。米拉跃跃欲试，准备认真研究客户的设计需求，充分发挥创意，制作出让客户满意的卡片设计作品。目录制作民宿品牌会员卡任务2.1制作设计公司名片

任务2.2综合实战制作餐饮店会员卡会员卡是指娱乐、健身、美容、旅游、餐饮等行业机构，以及商场、会所、宾馆、俱乐部等发行的，具有一定价值、金额或消费次数，供持卡人在消费活动中进行会员身份认证，并凭此消费、免于付费或享受折扣的凭证。朴宿民宿是一家开在千岛湖畔的民宿，为了提高顾客的忠诚度和吸引更多的顾客，准备制作民宿品牌会员卡，要求在会员卡中展现民宿周围的风景，让顾客直观地了解会员卡内容。（一）任务背景任务描述任务2.1制作民宿品牌会员卡①

制作尺寸为85.50mm×54mm（未包含出血尺寸），分辨率为300像素/英寸的民宿品牌会员卡。②

会员卡封面图可以运用民宿所在地的风景图作为背景，然后以代表宁静、祥和、深沉的蓝色为主色调，整体设计简约、干净。③

选取民宿周围的景点图像，以及制作矩形图形。（二）任务目标任务描述任务2.1制作民宿品牌会员卡（三）知识要点在Photoshop中隐藏与显示图层、绘制矩形选区、复制选区、填充选区，以及新建剪贴蒙版图层；在Illustrator中修改图形颜色。知识准备1．会员卡的尺寸规格会员卡的类型非常多，包括充值卡、积分卡、折扣卡、权益卡、礼品卡等多种类型，并且其尺寸规格有所不同。一般来说，会员卡的标准尺寸为85.50mm×54mm，下图所示为标准尺寸的会员卡。此外，还有一些比较特殊的会员卡，尺寸没有明确规定，可以根据需要进行定制，这种卡也称为异形卡，如下图所示。2．会员卡的设计注意事项会员卡不仅可以直观地展现品牌信息，也可以体现一个品牌的形象和格调，在设计时需要注意以下问题。●

内容展示：会员卡通常需要展示如会员姓名、会员号码、有效期、联系方式、联系地址等重要信息。●

出血：为了避免文字和图片太过靠边而被裁掉，在设计会员卡时注意设置出血尺寸，一般为2mm~3mm。●

颜色：为避免会员卡的印刷成品产生较大的颜色偏差，在设计会员卡时，尽量使用CMYK颜色。●

风格统一：会员卡大都是双面设计，同一张会员卡的正面和背面风格应基本一致，包括字体样式、色调、版式等。3．Photoshop中的“图层”面板简单来说，图层是Photoshop中存放图像、文本等内容的载体，是Photoshop中较为重要和常用的功能之一。“图层”面板是编辑图层的主要场所，可新建、重命名、删除、锁定和链接图层。选择【窗口】/【图层】命令，可打开下图所示的“图层”面板。4．Photoshop图层编辑（1）显示与隐藏图层当图像中包含的图层太多，而不方便查看某一个或某几个图层效果时，可以隐藏不需要的图层，待查看完毕后再显示这些图层。当图层缩览图左边显示按钮时，表示该图层为可见图层，单击按钮，按钮将变为

，此时图层将隐藏，右图所示为隐藏“图层2”图层的效果。再次单击

按钮，可显示隐藏的图层。若需要同时隐藏选中的多个图层，可选择【图层】/【隐藏图层】菜单命令，一次性隐藏选中的所有图层。4．Photoshop图层编辑（2）重命名图层在Photoshop中，新建图层的名称默认名称“图层1”“图层2”“图层3”等，但这种图层命名方式不利于查找图层，因此可重命名图层，使其更便于区分和查找。在需要重命名的图层上双击图层名称，当图层名称变为编辑状态时，在文本框中输入新的名称，然后按【Enter】键，即可完成图层的重命名操作，如右图所示。4．Photoshop图层编辑（3）复制与粘贴图层如果需要复制并粘贴其他图层，可按【Ctrl+C】组合键复制，并按【Ctrl+V】组合键粘贴。也可右键单击图层，在弹出的快捷菜单中选择“复制图层”命令，打开“复制图层”对话框，如右图所示，可以复制图层到当前文件、其他打开的文件或新建的文件中。4．Photoshop图层编辑（4）新建图层和图层组新建图层与图层组也是Photoshop中的常用操作，Photoshop提供了多种新建方法，设计师可根据需要选择。新建普通图层新建背景图层新建剪贴蒙版图层新建图层组5．Photoshop中的选框工具组（1）矩形选框工具当需要创建矩形形状的选区时，可以使用矩形选框工具

，该工具的工具属性栏如图下所示，各选项的含义如下。

按钮组：用于控制选区的创建方式。

羽化：用于实现选区边缘的柔和效果。数值越大，羽化效果越明显。

消除锯齿：用于消除选区边缘的锯齿，使选区边缘与周围像素之间的过渡变得较为平滑。

样式：用于设置选框的比例和尺寸，有“正常”“固定比例”“固定大小”3种选项。

“选择并遮住”按钮：创建选区后单击该按钮，可以在打开的“调整边缘”窗口中调整选区边缘，使其更加精准。5．Photoshop中的选框工具组（2）其他选框工具在创建椭圆或正圆形状的选区，可以使用椭圆选框工具

，如下图所示；如果需要创建宽度为1像素的行或列选区，可以选择单行选框工具

或单列选框工具

，然后在图像编辑区内单击鼠标左键完成创建，如下图所示。6．Photoshop中的选区编辑新建图层与图层组也是Photoshop中的常用操作，Photoshop提供了多种新建方法，设计师可根据需要选择。隐藏和显示选区反选和取消选区变换选区移动和选区修改选区存储和载入选区复制选区填充和描边选区7．Illustrator中的“颜色”面板Illustrator中的“颜色”面板可以设置或更改图形的填充和描边颜色。选择【窗口】/【颜色】命令，打开“颜色”面板，如左图所示。任务实施1．制作会员卡背景客户要求在会员卡中展示民宿周围的美丽风景，以吸引更多顾客前来旅游，于是米拉挑选了一张千岛湖风景图片，准备将其制作成会员卡背景，具体操作如下。1新建文件2设置标尺单位3创建参考线1．制作会员卡背景4变换矩形5设置矩形的圆角6创建剪贴蒙版2．添加民宿品牌标志1“打开为智能对象”对话框2添加标志3设置填充颜色为了让会员卡与品牌的整体形象保持一致，加深顾客对品牌的印象，米拉准备在会员卡正面添加民宿标志，并根据画面效果调整标志颜色，使画面更加和谐，具体操作如下。4查看修改的标志颜色3．添加会员卡文字信息1会员卡正面效果2创建图层组接下来米拉准备在会员卡正面添加相关的文字信息，以突出卡片的功能性，具体操作如下。3延长图像背景4．制作会员卡背面1隐藏图层2选择填充颜色为了方便顾客使用，米拉准备在会员卡背面添加简洁明了的会员卡使用说明，同时通过Photoshop的选区功能在背面添加与正面相同的部分画面，具体操作如下。3创建矩形选区4．制作会员卡背面4复制选区5填充背景色6会员卡背面效果目录制作民宿品牌会员卡制作餐饮店会员卡综合实战制作设计公司名片

任务2.2任务2.1名片是一种表示姓名及其所属组织、公司单位和联系方式的小卡片，在商业和社交场合中被广泛使用。本例客户需要一款具有现代感且简洁大方的公司名片，目前已提供了公司的标志，要求在名片中体现公司形象，以及职员的个人信息。（一）任务背景任务描述任务2.2制作设计公司名片①

制作尺寸为90mm×54mm，分辨率为300像素/英寸的名片。②

运用客户提供的公司标志来设计名片。③

绘制名片外观和装饰图案，丰富画面。④

利用样机制作名片效果图，便于客户查看。（二）任务目标任务描述（三）知识要点在Illustrator中绘制星形、直线和矩形，调整图形的边角；在Photoshop中裁剪图像、编辑智能对象图层。任务2.2制作设计公司名片知识准备1．名片的设计规范在设计名片时，一般需要添加公司名称及标志（如果是个人名片，则可不用添加）、图案和个人信息。其中，图案设计要简洁大方，且色彩不宜过多，最好不要超过3种颜色，一般以企业的标准色和辅助色为主，以达到与企业形象和谐统一的效果。另外，浅色图案的透明度尽量不低于5%，图案中线条的粗细尽量不低于0.1mm，否则印刷时将无法很好地显现。个人信息是指名片持有人的姓名、职务（或者业务范围）、联系方式、地址等文字信息，设计时注意文字字号尽量不小于5pt，以保证文字清晰、易识别。同时，名片上的字体要规范，尽量使用简体，以方便阅读。（3）保存规范（1）内容设计规范1．名片的设计规范根据排版方式的不同，可以将名片分为横版和竖版两类，因此其尺寸也有横版尺寸和竖版尺寸两种，如下图所示。一般来说，国内横版名片设计的标准尺寸为90mm×54mm，竖版名片设计的标准尺寸为54mm×90mm。（3）保存规范（2）尺寸规范1．名片的设计规范对于在Illustrator中设计的名片，在将其交到印刷厂进行印刷前，需要将所有文字转换为曲线（快捷键为【Ctrl+Shift+O】），避免输出制版时因找缺失字体而出现乱码，然后再将名片保存成低版本的EPS格式。对于在Photoshop中设计的名片，可以将名片保存成PNG或JPG格式，且保证分辨率不低于300像素/英寸。（3）保存规范2．Photoshop图像裁剪在处理图像的过程中，可通过裁剪图像来删除图像中不需要的部分，也可以使图像尺寸更符合需求。裁剪图像可以通过“裁剪工具”来完成，选择该工具，在图像上单击鼠标左键，图像上将出现一个裁剪框，将鼠标指针移至裁剪框的边界上，当鼠标指针变为曳裁剪框边界可调整裁剪框范围，按【Enter】键或单击工具属性栏中的如右图所示。3．Photoshop中的智能对象图层Photoshop中的智能对象图层是一种特殊的图层，使用智能对象图层可保留图像的源内容及其所有原始数据，不会对原始数据造成任何影响。创建智能对象图层主要有以下3种方式。●

转换为智能对象图层：选择【图层】/【智能对象】/【转换为智能对象】命令，可将选择的图层转换为智能对象图层，且该图层的缩览图右下角将出现智能对象图标。●

打开为智能对象图层：选择【文件】/【打开为智能对象】命令，可选择一个文件作为智能对象图层打开。●

通过置入文件创建：选择【文件】/【置入嵌入对象】命令，可选择一个文件置入到图像中，该文件将作为智能对象图层置入到“图层”面板。4．Illustrator画板设置新建文件后，可以更改画板的大小和位置，而且一个文件中可同时存在多个画板，常用于多页面设计作品。（1）“画板工具”的基本操作选择“画板工具”，将鼠标指针移动到画板内部，直接拖曳到其他位置可以移动画板，拖曳画板定界框上的控制点可以调整画板大小，如上图所示，在文档窗口的空白处拖动鼠标可以新建画板，如右图所示。4．Illustrator画板设置选择“画板工具”，在“属性”面板中可以可以快速编辑画板，如使用预设画板尺寸、调整画板方向、新建画板、删除画板、为画板命名、设置画板高度和宽度等，“属性”面板如右图所示。（2）“属性”面板5．Illustrator基本图形绘制在Illustrator中绘制简单图形主要有以下两种方法。（1）简单图形的绘图方式●

拖曳鼠标绘制图形：

选择形状工具组中的工具，在画板中图形起始位置单击并按住鼠标左键不放，拖曳鼠标指针到需要结束的位置，释放鼠标左键，可绘制出绘图工具对应的图形。●

通过参数对话框精确绘制图形：

选择形状工具组中的工具，单击画板，在打开的对话框中可以对图形的详细参数进行设置，单击“确定”按钮即可生成对应的图形。5．Illustrator基本图形绘制选择“直接选择工具”选择绘制好的图形，若图形上出现边角构件标志，则表示可以调整图形边角，从而更改图形外观。（2）调整图形边角●

调整全部边角：直接向内拖曳其中任意一个边角构件，可调整全部的边角，

松开鼠标完成操作，如右图所示。●

单独调整边角：当鼠标指针移动到任意一个边角构件上，先单击选中边角构件，鼠标指针则将变为形状，拖曳选中的边角构件可以单独调整选中的边角，如右图所示。5．Illustrator基本图形绘制（2）调整图形边角●

交替转换边角样式：按住【Alt】键不放，单击选中任意一个边角构件，可在“圆角”“反向圆角”和“倒角”3种边角样式中交替转换，如右图所示。●“边角”对话框：按住【Ctrl】键不放，同时双击选中其中一个边角构件，可打开“边角”对话框，在其中可以设置边角样式、边角半径和圆角类型，设置完成后单击“确定”按钮，完成调整，如右图所示。任务实施1．绘制名片外观客户想要制作横版的名片，因此米拉决定在Illustrator中使用矩形工具先绘制出矩形，作为名片外观，具体操作如下。1新建文件2设置矩形大小和位置3设置矩形填充色2．添加和排版装饰素材1绘制星形2设置描边颜色和粗细3复制直线查看了客户提供的公司标志和要求后，米拉有了一些设计灵感，准备直接利用公司标志作为素材来设计名片，这样既能体现公司形象，又简约耐看，具体操作如下。3．制作名片背面1绘制多边形2调整圆角3复制和修改多边形名片正面制作完成后，米拉准备继续制作名片背面。为了让名片背面和正面有一定联系，米拉打算先新建画板，然后在画板中绘制与名片正面主色调相同的矩形，作为名片背面的背景，再绘制一些其他图形作为装饰，具体操作如下。3．制作名片背面4绘制直线5添加文字6查看名片正面和背面的最终效果7导出图片4．制作名片立体效果1查看名片正面图像的替换效果2裁剪图像为了让客户看到名片完成后的立体效果，老洪将公司常用的名片样机发给米拉，让米拉直接在Photoshop中利用智能图层进行操作，并根据画面需求裁剪图像，具体操作如下。目录制作设计公司名片

任务2.2制作餐饮店会员卡综合实战制作民宿品牌会员卡任务2.1实战背景实战描述综合实战

制作餐饮店会员卡会员卡可以作为一种营销工具，扩大品牌的影响力和知名度。某餐饮店为了提升顾客的忠诚度和促进餐厅的长期发展，准备利用会员卡提供一些特殊优惠或福利给常客，从而增加顾客的满意度和回购率。现需要设计师根据提供的相关素材制作会员卡，要求在其中添加餐饮店的标志，及二维码，便于顾客扫码查看餐饮店信息，整体画面要求简洁、美观。本实战的参考效果如上图所示。实战目标①制作尺寸为85.50mm×54mm（未包含出血尺寸），分辨率为300像素/英寸的餐饮店会员卡。②排版美观、主题突出，符合餐饮店的特点。实战描述知识要点在Photoshop中创建剪贴蒙版图层、绘制圆形和矩形选区、添加素材；在Illustrator中调整图形颜色。综合实战

制作餐饮店会员卡思路及步骤（1）

打开Photoshop，新建文件，填充背景图层颜色为“#f5f4f3”。绘制大小为“85.50mm×54mm”的矩形作为会员卡的主体形状。（2）

置入“卡通食物底纹.png”素材，调整至合适大小后，在该图层上单击鼠标右键，在弹出的快捷菜单中选择“创建剪贴蒙版”命令。（3）

置入“美食图片.jpg”素材，依次使用矩形选框工具和椭圆选框工具在美食图片中绘制矩形和圆形选区，按【Ctrl+J】组合键复制选区，隐藏“美食图片”图层。实战描述综合实战

制作餐饮店会员卡（4）

使用横排文字工具分别输入与会员卡相关的文本，然后置入“餐饮店标志.ai”素材，调整大小和位置后在Illustrator中修改标志颜色为“#ea8313”，使标志在会员卡中更加和谐。（5）

选择除背景图层以外的其余图层，按【Ctrl+G】组合键创建图层组，修改图层组名称为“正面”。创建一个空白图层组“背面”，将“正面”图层组中的矩形、“美食图片”图层和“卡通食物底纹”图层复制到“背面”图层组中，并在图像编辑区中将其移动到会员卡正面效果下方。（6）

重新显示“美食图片”图层，继续在其中创建和复制选区。置入“二维码.png”素材，调整其大小和位置，最后使用横排文字工具制作餐饮店会员卡输入文本，保存文件。实战描述综合实战

制作餐饮店会员卡感谢聆听Photoshop+Illustrator平面设计立体化教程（微课版）（Photoshop2021+Illustrator2021）海量图书方便查询免费申请样书下载配套资源优惠购书成为作者更多样书申请和资源下载需求，请登录人邮教育社区（)囊括各大品类，您想要的应有尽有教师免费申请样书，我们将安排快递迅速送达教学视频、PPT课件、教学案例、习题答案、模拟试卷等丰富资源免费下载教师可以申请最低折扣学生直接优惠购买图书欢迎写文章／投稿，我们强大的编辑团队将为您提供专业和高效的编辑出版服务新形态立体化精品系列教材标志设计项目3Photoshop+Illustrator平面设计立体化教程（微课版）（Photoshop2021+Illustrator2021）情景描述项目3标志设计老洪最近接到很多设计标志的任务，便将部分任务分配给米拉，主要包括品牌标志和企业标志设计任务。老洪告诉米拉，要想设计出让客户满意的标志，不仅要能根据品牌标志和企业标志的设计要点，绘制符合需求的标志图形，还要从客户的角度出发，向客户展示标志的应用效果，便于客户查看。米拉接受任务后，便开始学习品牌标志和企业标志的相关知识，研究客户提供的资料，准备综合运用Photoshop和Illustrator进行制作，从而出色地完成标志设计任务。目录制作“渔家”品牌标志任务3.1制作“飞鹤儿童服饰”企业标志

任务3.2综合实战制作“中锌实业”企业标志品牌标志是品牌形象的代表，可以传达品牌的品牌价值观、文化内涵，以及产品特性、服务质量等。“渔家”是一个将新鲜的食材、传统的烹饪技巧与现代的餐饮理念相结合的美食品牌，致力于为消费者提供全方位的水产品美食，目前需要设计一个独特且具有识别性的品牌标志，以便于在宣传推广活动中更好地展示品牌形象和产品特色。（一）任务背景任务描述任务3.1制作“渔家”品牌标志①

制作尺寸为300像素×300像素，分辨率为300像素/英寸的品牌标志。②

标志图形美观生动，贴近品牌属性，标志配色符合大众审美。③

将完成后的标志应用到餐饮产品中，查看标志的应用效果。（二）任务目标任务描述任务3.1制作“渔家”品牌标志（三）知识要点在Photoshop中对齐与分布图像，盖印和合并图层；在Illustrator中运用线型绘图工具和形状生成器。知识准备1．品牌标志的配色色彩在标志中的作用决定了它在标志设计中的重要性，很多品牌都会精心选定某种颜色作为品牌色，就是标志的主色，如天猫标志中的红色（见下图），饿了么标志中的蓝色（见下图）等。（1）品牌标志的主色选择1．品牌标志的配色选择好主色后，标志设计师需要针对不同品牌的定位和目标受众，考虑在不同的背景中的标志应用效果，从而选择最佳的主色和背景色搭配方式。（2）品牌标志的色彩搭配比如，颜色鲜艳的主色搭配白色、浅灰色背景，可以营造出清新、明亮的效果，适合用于科技类、环保类等品牌的标志设计中如右图所示。上图所示的标志以白色为主色，搭配绿色背景，能直观地凸显品牌名称，同时也体现了品牌的环保理念。2．品牌标志的设计原则品牌标志的设计需要符合品牌的核心理念和价值观，同时，还需要符合独特性、广泛性、代表性，以及符合品牌定位等设计原则。●

具有独特性：一个好的品牌标志应该拥有自己独特的元素，使其在市场上能够脱颖而出，从而易于区别其他品牌，这样才能给潜在受众留下深刻的印象，从而建立品牌认知度和提高受众对品牌的忠诚度。●

具备广泛性：由于地域文化的差异，语言不能被受众迅速接受，但品牌标志以图形这种无国界语言进行展现，使标志具有一定的广泛性，能够被更多受众接受和理解。●

具备代表性：品牌标志应该体现品牌的理念、行业，以及品牌的价值观。●

符合品牌定位：一个品牌要想取得成功，必须具有明确的定位，而品牌标志也需要符合品牌定位。3．Photoshop图像对齐与分布若要对齐多个图层中的图像内容，可使用“移动工具”选择需要对齐的图层（2个以上），然后选择【图层】/【对齐】命令，在弹出的子菜单中选择相应的对齐命令，如左图所示。需要注意的是，如果所选图层与其他图层链接，则可同时对齐与之链接的所有图层。（1）

对齐图层3．Photoshop图像对齐与分布若要让多个图层采用一定的规律均匀分布，可使用“移动工具”选择需要分布的图层（3个以上），然后选择【图层】/【分布】命令，在弹出的子菜单中选择相应的分布命令，如左图所示。（2）分布图层4．Photoshop盖印图层和合并图层盖印图层的操作主要有以下3种。（1）盖印图层●

向下盖印：选择一个图层，按【Ctrl+Alt+E】组合键，可将该图层盖印到下面的图层中，原图层保持不变。●

盖印多个图层：选择多个图层，按【Ctrl+Alt+E】组合键，可将选择的图层盖印到一个新图层中，原图层中的内容保持不变。●

盖印可见图层：按【Shift+Ctrl+Alt+E】组合键，可将所有可见图层中的图像盖印到一个新图层中，原图层保持不变。4．Photoshop盖印图层和合并图层合并图层的操作主要有以下3种。（2）合并图层●

合并图层：在“图层”面板中选择两个或两个以上要合并的图层，选择【图层】/【合并图层】命令，或按【Ctrl+E】组合键。●

合并可见图层：选择【图层】/【合并可见图层】命令或按【Shift+Ctrl+E】组合键，该操作不合并隐藏的图层。●

拼合图像：选择【图层】/【拼合图像】命令，可合并“图层”面板中所有可见图层，并打开对话框询问是否丢弃隐藏的图层，同时以白色填充所有透明区域。5．Illustrator线型绘图工具使用“直线段工具”可以绘制不同长度、方向的直线。选择该工具后，在画板中单击确定路径起点，按住鼠标左键不放并拖动鼠标到需要结束路径的位置，然后释放鼠标即可完成线条的绘制，如下图所示。（1）直线段工具绘制时，按住【Shift】键不放，可绘制出水平、垂直或45°角及45°角倍数的直线；按住【Alt】键不放，可绘制出以鼠标单击点为中心向两边延伸的直线；按住【～】键不放，同时绘制出多条直线。5．Illustrator线型绘图工具使用“螺旋线工具”可以绘制出不同半径、段数和样式的螺旋线。选择该工具后，画板中按住鼠标左键不放并拖动鼠标到需要的位置，然后释放鼠标，完成螺旋线的绘制，如下图所示。（2）螺旋线工具在绘制过程中不释放鼠标，可以拖动鼠标旋转螺旋线，按住【Shift】键可以以45°角旋转螺旋线；按【Ctrl】键可以调节螺旋线衰减比例；按上、下、左、右键，可以调整螺旋线段数，按住【~】键，可同时绘制出多条螺旋线；按空格键可“冻结”正在绘制的螺旋线，可以在屏幕上任意拖动，松开空格键后可以继续绘制。5．Illustrator线型绘图工具“弧线工具”可用于绘制弧线。选择该工具后，在画板中单击确定路径起点，按住鼠标左键不放并拖动鼠标到需要结束路径的位置，然后释放鼠标即可绘制一条弧线，如下图所示。（3）弧形工具绘制弧线的过程中不释放鼠标，按【C】键可以在开放的弧线与闭合的弧线之间切换；按住【Shift】键，可以绘制正圆的四分之一；按【F】键可以上下翻转弧线；按住【~】键，可同时绘制出多条弧线。6．Illustrator形状生成器Illustrator中的形状生成器不仅可以分离重叠的形状，快速生成新图形，还可以将绘制的多个简单图形合并为一个复杂图形，使复杂图形的制作更加灵活、快捷。其操作方法为：选择“形状生成器”工具，在需要分割成独立形状的区域单击，此时该区域将生成单独的新图形，如下图所示。若在相交的两个图形之间拖动，可将两个图形合并为一个图形，如下图所示。任务实施1．绘制鱼主体图形客户要求“渔家”品牌标志要与水产品相关，因此，米拉打算在标志设计中将鱼作为主体图形，以体现渔家文化和水产品特点，具体操作如下。1“椭圆”对话框2调整圆形属性3复制圆形1．绘制鱼主体图形4再次复制圆形5合并图形6鱼身主体图形7填充和排列图形1．绘制鱼主体图形8调整星形圆角10得到鱼尾图形13编组和移动图形11旋转鱼尾图形12调整鱼尾图形位置9绘制矩形2．绘制标志装饰为了让品牌标志更加完整、美观，便于消费者识别和记忆品牌，米拉准备在标志中添加装饰图形和品牌文字，具体操作如下。1镜像变换图形2绘制矩形和圆形2．绘制标志装饰3输入文字4设置描边宽度5绘制弧线3．制作品牌标志应用效果完成标志设计后，米拉准备在Photoshop中制作标志的应用效果，这样更便于客户查看，具体操作如下。1输入文字2对齐图形3盖印图层目录制作“渔家”品牌标志制作“中锌实业”企业标志综合实战制作“飞鹤儿童服饰”企业标志

任务3.2任务3.1企业标志是企业形象的重要组成部分，它以特定、明确的图形来表现和代表企业的核心价值和形象。“飞鹤儿童服饰”是一家具有实力和潜力的儿童服装新兴企业，准备设计一个独特且具有识别性的标志来展示其企业形象和特色，从而提高企业在市场中的竞争力。（一）任务背景任务描述任务3.2制作“飞鹤儿童服饰”企业标志①

制作尺寸为300pt×300pt，分辨率为300像素/英寸的标志。②

标志能够体现“飞鹤儿童服饰”企业的特点。③

标志的色彩搭配要符合美学标准，尤其是满足儿童的审美需求。④

制作标志应用到办公室日常场景中的效果图，便于客户查看。（二）任务目标任务描述任务3.2制作“飞鹤儿童服饰”企业标志（三）知识要点在Illustrator中绘制网格、分割图形和填充图形；在Photoshop中绘制和变形图形。知识准备1．企业标志的设计原则企业标志是企业识别系统（CorporateIdentitySystem，CIS）战略中的关键部分，能够反映企业的历史、文化、价值观和未来愿景等，承载着企业的无形资产，是企业综合信息传递的媒介，能够帮助企业塑造良好的形象，提升企业价值和市场竞争力。要想设计出一个优秀的企业标志，需要遵循一些原则。明确传递企业的信息01>02>突出企业的核心优势03>突出企业的个性风格简洁易记04>05>能适应市场需求2．企业标志的设计要点设计一个符合企业形象、易于识别和记忆的企业标志至关重要，而掌握企业标志的设计要点，则可帮助设计师更好地把握企业核心理念和形象。应用广泛03>04>方便实用易读易识别01>02>个性鲜明3．Photoshop基本图形绘制（1）形状工具组形状工具组可用于绘制不同形状的几何图形，其功能类似选框工具组，但区别在于，使用形状工具组绘制的图形具有实体，而非选区状态，且会自动生成一个形状图层。“矩形工具”可用于绘制长方形、正方形和圆角矩形，该工具对应的工具属性栏如上图所示。3．Photoshop基本图形绘制（2）“形状”属性面板绘制形状后，可选择【窗口】/【属性】命令，打开“形状”属性面板，在其中可以快调整已绘制形状的大小、位置、描边、角半径等。右图所示为绘制矩形后打开的“形状”属性面板。4．Photoshop图形变换变换图形是在Photoshop中进行平面设计时经常使用的操作，它可以使图形产生缩放、旋转、斜切、扭曲、透视、变形和翻转等效果。选择矢量图形后，在Photoshop中选择【编辑】\【变换路径】命令，如右图所示，在弹出的子菜单中选择相应命令，即可变换图形。5．Illustrator图形分割在平面设计中经常会对图形进行分割，帮助平面设计师更好地组织和展示复杂的设计元素。在Illustrator中分割图形主要使用“美工刀工具”个对象沿分割线划分为各个部分。其使用方法为：选择一段闭合路径，选择“美工刀工具”，在起始位置按住鼠标左键不放，拖曳鼠标指针绘制穿过闭合路径的分割线，释放鼠标，闭合路径则被分割为两个闭合路径，左图所示为使用“美工刀工具”将圆角矩形分割为两部分的效果。6．Illustrator网格绘制使用“矩形网格工具”和“极坐标网格工具”来完成。可轻松创建不同间距、不同大小的网格。选择“矩形网格工具”工具后，在画板中按住鼠标左键不放并拖动鼠标到需要的位置，释放鼠标即可绘制出矩形网格。如果要按照指定数目的分隔线来创建矩形网格，可在画板中单击鼠标，打开“矩形网格工具选项”对话框，如右图所示。（1）矩形网格工具6．Illustrator网格绘制使用“极坐标网格工具”可以轻松绘制圆和直线组成的网格，常用于同心圆、箭靶、雷达、蜘蛛网、电扇等制作。如果要创建具有指定大小和分隔线数目的同心圆网格，可在画板中单击鼠标，打开“极坐标网格工具选项”对话框，如右图所示，设置相应的参数后，单击“确定”按钮。（2）极坐标网格工具任务实施1．绘制网格为了在标志中体现企业特点，米拉决定在Illustrator中绘制出一个“飞鸟”的图形作为标志的主体元素，首先她需要绘制出网格图形，具体操作如下。1创建网格2创建参考线3分离网格2．分割和填充网格绘制网格后，米拉还需要分割网格，以制作出“飞鸟”图形，也便于后续为网格填充颜色，让标志更加美观，具体操作如下。1绘制分割线2飞鸟图形3标志效果3．制作企业标志应用效果完成企业标志的制作后，米拉准备在Photoshop中绘制企业标志主要的应用场景，包括信封、档案袋、茶杯，便于客户查看，具体操作如下。1绘制矩形2调整圆角3选择“水平翻转”命令3．制作企业标志应用效果4调整角点5调整椭圆下边缘6添加文字7信封封面效果8其他效果目录制作“飞鹤儿童服饰”企业标志

任务3.2制作“中锌实业”企业标志综合实战制作“渔家”品牌标志任务3.1实战背景实战描述综合实战

制作“中锌实业”企业标志中锌实业有限公司是一家集科研、生产、贸易及技术服务的现代企业，为了提升用户对企业的识别度，树立企业形象，现需要设计师制作一个企业标志，要求图形要简洁、美观，能凸显企业形象，并结合中英文文字直观地体现企业信息，满足不同的用户需求。本实战的参考效果如上图所示。实战目标①制作尺寸为300pt×300pt，分辨率为300像素/英寸的企业标志。②制作企业标志在纸杯、档案袋、信封中的应用效果。③标志在视觉上要具有识别性和创意。实战描述知识要点在Illustrator中运用形状生成器工具；在Photoshop中绘制基本图形和变换图形。综合实战

制作“中锌实业”企业标志思路及步骤（1）

打开Illustrator，新建大小为“300px×300px”的文件，使用“椭圆工具”在画板中绘制大小正圆，然后设置描边颜色为“#A27F4B”，描边粗细为“3pt”，然后在圆的上下左右添加参考线。（2）

选择“椭圆工具”，在圆的中间绘制较小的正圆，然后设置填充颜色为“#a27f4b”。（3）使用“椭圆工具”在其他空白区域绘制大小为正圆，设置填充颜色为“白色”，然后为绘制的圆形添加参考线，方便后期裁剪。（4）

选择“矩形工具”，在上一步绘制的圆形上方沿着第2条参考线绘制矩形，该矩形要求覆盖右侧的整个圆形。（5）

选择圆形和矩形，使用“形状生成器工具”单击左侧半圆部分，预留该半圆图形。实战描述综合实战

制作“中锌实业”企业标志（6）

选择半圆，在其上单击鼠标右键，在弹出的快捷菜单中选择【变换】/【镜像】命令打开“镜像”对话框，单击“复制”按钮，复制半圆。（7）

调整镜像后半圆的位置，然后选择“矩形工具”，在两个半圆的中间区域绘制大小为的矩形，并设置填充颜色为“白色”，然后调整矩形的位置。（8）

使用“矩形工具”，在中间区域绘制2个矩形，并设置填充颜色为“白色”，调整矩形的位置，然后隐藏参考线，完成图形的制作。（9）

选择“文字工具”，输入企业相关文本，设置字体为“方正汉真广标简体”，文本颜色为“#a27f4b”，调整字体大小和位置，保存标志。（10）

打开Photoshop，使用“矩形工具”和“椭圆工具”绘制图形，并变换图形，制作纸杯、档案袋、信封，最后置入绘制的企业标志并添加文本。实战描述综合实战

制作“中锌实业”企业标志感谢聆听Photoshop+Illustrator平面设计立体化教程（微课版）（Photoshop2021+Illustrator2021）海量图书方便查询免费申请样书下载配套资源优惠购书成为作者更多样书申请和资源下载需求，请登录人邮教育社区（)囊括各大品类，您想要的应有尽有教师免费申请样书，我们将安排快递迅速送达教学视频、PPT课件、教学案例、习题答案、模拟试卷等丰富资源免费下载教师可以申请最低折扣学生直接优惠购买图书欢迎写文章／投稿，我们强大的编辑团队将为您提供专业和高效的编辑出版服务新形态立体化精品系列教材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．网页界面设计的注意事项

网页首页界面在网站结构中一般为第一级，与其有从属关系的页面为内页，又称二级页面，属于网页结构中的第二级。网页内页多用于对首页内容进行具体说明，在设计网页内页界面时需要注意以下事项；一是设计网页内页界面的页头时，应将页头应用到所