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

新形态立体化精品系列教材卡片设计项目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”素材，调整至合适大小后，在该图层上单击鼠标右键，在弹出的快捷菜单中选择“创建剪贴蒙版”