字体与版式设计项目式教程课件 项目5 字体设计的编排与组合-设计产品包装标签字体

项目5字体设计的编排与组合——设计产品包装标签字体学习目标学习目标说明知识目标熟悉字体编排的基本要求掌握字体的编排方式和组合方法技能目标能够在遵守字体编排要求的基础上，合理编排和组合字体能够在各种设计作品中灵活编排和组合字体素养目标培养对字体设计编排与组合的学习兴趣，提升字体设计能力坚持不懈地追求细节的完美，培养耐心和专注的品质培养对字体细节美感的敏锐捕捉能力，提升审美水平项目描述产品标签是附着在产品表面或包装上，用于向消费者传递关键信息的标识。一家名为“沁香茗苑”的茶叶商多年来扎根于有着深厚茶文化底蕴的江南水乡，以“匠心制茶，只为那一缕纯粹茶香”为理念，致力于为茶友们带来高品质、原生态的茶叶。现如今，该品牌为了提升某款罐装茉莉花茶的销量，准备在其包装上增加不干胶的产品标签，并标注出该茶叶的名称、产地、净含量、工艺特点、配料表和适合人群等信息，帮助消费者做出购买决策。项目目标项目名称茉莉花茶产品标签设计应用软件AIGC工具、Illustrator格式要求AI格式展板尺寸8厘米×5厘米作品数量1个设计内容围绕展示茉莉花茶信息展开设计设计要求①产品标签的画面美观，能吸引消费者目光②产品标签的字体编排和组合形式美观、合理，能快速、准确传达产品信息③采用复古风格，视觉效果具有中式典雅风范配套资源素材\项目5\茉莉花.png、茶叶.png、祥云.ai效果\项目5\产品标签.ai、产品信息.txt知识分解5.1字体编排的基本要求5.2字体的编排方法5.3字体的组合方式5.1.1符合阅读习惯1．竖向阅读在造纸术普及之前，竹简和木牍是主要的书写载体。这些材料呈狭长形，需用绳串联成卷。人们在其上从上到下刻写文字，从而形成了竖向的阅读习惯。按照这种阅读习惯，可使用竖向方式编排字体。▲竖向编排的字体该字体编排采用竖向编排形式，宛如一幅古朴雅致的水墨小品，自带悠远醇厚的文化氛围。2．横向阅读受西文化影响，国人发现拉丁文字采用从左到右横排的方式，且现代科学名词、公式等横排更便于书写和阅读。同时，从人体生理特征来看，人眼水平视野相对更广，对横向事物的观察可能更深入细致。◄横向编排的字体（图源：邓远健；GDC2013提名奖）在设计作品中，无论是汉字还是拉丁文字，都采用横向编排的形式，同时这种紧凑的编5.1.2主次明确人们除了遵循特定的阅读习惯，还会按照由主要到次要、由大到小、由强及弱的顺序逐层阅读信息。通常，同一平面的文字具有不同的作用，如书籍的内页包含标题、副标题、正文、附文等类型的文字。因此，在编排这些文字时，首先要明确文字的层级。例如，标题作为重点内容，层级最高，应选用具有大字号、鲜明色彩和较粗字形的字体；再根据主次顺序，依次编排副标题、正文、附文的字体，以确保信息清晰呈现。▲主次明确的字体编排在该书籍的封面和书脊设计中，字体编排巧妙实现了主次分明。书籍名称的字体以最大字号呈现，字形规整且较粗，占据中间区域，能够在第一时间被读者识别。出版社、编辑等信息的字体、字号明显次之，同时被放置在非中间区域，不会喧宾夺主。5.1.3具有愉悦性和美学价值随着生活水平的提高，人们开始在精神层面寻求更多愉悦。对于文字，人们不仅要求从中获得信息和知识，还愈发看重字体编排所带来的视觉美观价值。优秀的字体编排通过字体外形结构、色彩等元素的有机组合，能够带来愉悦的心理感受和美的视觉享受，从而在无形中影响人们对字体设计作品的态度，也对文化的传承和传播具有重要意义。◄具有愉悦性和美学价值的字体编排（图源：AnnaHurley与设计工作室Olio）该作品为BurmaSuperstar餐厅的包装设计，在包装的字体编排方面主次明确，不仅使信息传达更有条理，还营造出一种整洁、有序的美感，让消费者在浏览时感到舒适和愉悦。另外，多数字体采用居中对齐的形式，给人一种秩序感，符合美学原则中的对称与平衡，使整体布局显得规整、稳定。5.1.4具有创意在字体编排过程中，设计师需要融入创意以达到预想的设计效果。这种创意需要建立在设计师充分了解字体的形体结构、字形特点的基础上，通过采用字体的自适应（以字体自身的编排为主）和他适应（基于画面和主题进行的编排）的方式，对整组或单个字体运用一些设计表现手法，如重叠、重复等，形成打破字体常规状态的视觉创意。◄具有创意的字体编排在该字体编排中，没有采用常规的整齐排列方式，而是高低错落、疏密不一。字体的字距和行距都非常紧凑，同时添加了红色的点和线，与文字相互交织、穿插，仿佛是文字之间的关联线索或是某种情感的表达，并在视觉上形成一个整体。这些细节都使字体编排效果更具创意性。知识分解5.1字体编排的基本要求5.2字体的编排方法5.3字体的组合方式5.2.1图形化编排图形化编排是指利用字体的外形结构，借助位置、疏密变化、留白等因素对字体进行图形化塑造。图形化编排后的字体常作为主视觉图像或装饰元素进行运用，如在海报设计中，它可以成为画面的核心视觉元素，快速吸引观众的目光；在包装设计上，它又可以作为独特的装饰图案，提升产品的视觉吸引力。▲图形化编排的字体（图源：花瓣网）图中的字体经过笔形和位置处理，形成圆形的灯身，与上下灯口、灯绳图案构成完整的灯笼。5.2.2空间编排空间编排是指借助一定的方法，在编排字体的过程中营造出立体空间效果，其方法多种多样：利用字体固有的形态，将字体视作一个面，通过分割、位移等技巧营造空间层次感引入动态意象，如将字体想象为液态形象，通过其流动、扭曲的形态隐喻空间存在通过利用透视、变形等方式改变字体维度来塑造字体的立体结构，营造出空间效果5.2.3动态编排动态编排是指依据人们浏览内容的习惯，结合字体各部分在大小、方向、面积等方面的差异，在编排上强调其运动感与跳跃性。动态编排追求突破常规、平板、静态的编排方法，但依旧需要遵循字体编排的基本要求，切忌毫无章法地胡乱编排。常见的动态编排方法便是将字体或部分字体结构远距离摆放在平面空间的四角，利用人们的浏览习惯（先上后下，先左后右）形成动态效果。◄空间编排和动态编排的字体（图源：谢君伟、邹靖）该海报中的“长安三万里”文字在编排时，借助群山图像中的留白塑造出类似书法笔画的形态，这些形态富有变化和动感，线条的粗细、转折和延伸都给人一种像水一样流动的感觉，让文字从上到下在视觉上仿佛化身为“从山顶流向山脚的溪流”，形成了具有动势的立体空间效果。5.2.4溢血编排溢，作为动词意为“充满而流出来”；血，取自版式设计与印刷领域的“出血”一词。溢血编排是指字体的编排超出既定空间，拥挤、紧张的编排方式。这种编排方式同样是对传统编排方式的突破，通过将字体填满并超出空间，以拥挤的排布给人充实、延展的心理暗示，营造出一种前卫、新奇的视觉效果。▲溢血编排（图源：KarolinaKaczmarek）知识分解5.1字体编排的基本要求5.2字体的编排方法5.3字体的组合方式5.3.1相似字体的组合1．相似风格的字体组合相似风格的字体是指字体与字体在形体结构、质感、空间效果和变化特点等方面具有一定的相似性。采用相似风格的字体组合方式，既能突出画面的整体感，使最终画面给人一种整洁、美观的视觉感受，又能有效地强调文字所表达的信息。▲相似风格的字体组合（图源：黄海）在该海报中，字体都选用衬线体，并且字体外形规整，忽视上方字体的分割设计，在外形上，该字体与左下角字体的外观将基本一致，给人一种统一、整齐的视觉美感。2．相似大小的字体组合相似大小的字体是指字体与字体在形体结构比例、大小等方面给人的视觉感受基本相同，每个字体占用的画面空间呈现出相近的效果。采用相似大小的字体组合方式，既能使字体产生统一的协调感，又能使画面呈现出整齐感，从而有效地引起人们的注意，便于文字信息的传达。◄相似大小的字体组合（图源：白金创意国际大学生平面设计大赛文字设计作品）整个文字分为上下两部分，上半部分采用手写体的方式进行展现，下半部分则采用无衬线体的方式展现，使文字更具识别性。由于上下两部分的文字大小基本相同，所以显得规律、整齐。5.3.1相似字体的组合3．相似色彩的字体组合相似色彩的字体是指字体与字体在色彩的色相、纯度和明暗程度等方面具有一定的相似性。采用相似色彩的字体组合方式，既能增强文字信息在视觉上的整体性，也便于人们识别文字信息，从而引导其进一步阅读、理解文字信息，达到较佳的传达效果。◄相似明度的字体组合在该海报中，浅灰色的汉字和白色的拉丁文字，两者相似的明度在视觉上搭配和谐。作为主视觉的拉丁文字，运用了丰富的色彩进行装饰，但是这些色彩的明度又非常相近，不显凌乱。这种设计方式使得该海报即使不运用图像元素，也能使视觉效果非常丰富，不显单调。5.3.2字体的对比组合1．不同大小的字体对比组合依据一定的主次关系，组合不同大小的字体，可显著增强表现效果。较大字号的字体能够迅速吸引人们目光，成为视觉焦点，从而突出主题内容；较小字号的字体则起到补充说明、丰富细节的作用。▲不同大小、笔画粗细的字体对比组合（图源：SHEEP）在该海报中，三条文字信息布局紧凑，都位于画面底部，以便人们浏览内容。在字体组合方面，字体都采用白色，具有整体性，但是每条文字信息的字体大小和笔画粗细皆不相同。电影名称汉字字体的大小最大、笔画最粗，形成最高层级；电影名称英文字体的大小次之、笔画粗细次之，形成中间层级；导演名称字体的大小最末、笔画最细，形成最低层级。这种字体大小对比、笔画粗细对比的组合设计，让文字信息的重要程度清晰明了，可以有效引导人们按照层级性来进行浏览。2．不同笔画粗细的字体对比组合字体笔画粗细的对比，能为字体赋予强烈的节奏感，让人们感受到画面所呈现的动感韵律之美。组合不同笔画粗细的字体时，构思立意至关重要。富有巧思的设计能够使字体对比呈现出新颖独特、形态优美、变化丰富且统一和谐的效果。笔画是构成字体的基础元素，改变笔画粗细，可改变字体的结构，使字形更加新颖、美观。5.3.2字体的对比组合3．不同色彩的字体对比组合字体的色彩对比形式多样，包括冷暖对比、明度对比、纯度对比、色相对比，有彩色与无彩色对比等。不同的色彩对比效果能营造出截然不同的独特氛围，产生不一样的视觉效果。组合不同色彩的字体时，应根据文字信息需要表达的氛围、传递的情绪，选择合适的色彩进行搭配，使呈现的效果精准契合文字传达需求。▲冷暖对比的字体组合图中两排文字都采用毛笔字体，且大小相近，但是上排字体主要运用橙红色，下排字体主要运用蓝紫色，都与其字义相符合。两排文字在视觉上形成了冷暖对比，具有较强的视觉吸引力。▲色相对比（图源：PaulMcNeil）在该作品的字体设计中，运用蓝色和青色作为字体颜色。这两种颜色都属于冷色且明度相近，但是仅凭色相对比，便营造出字体如“音符”般悦动在画面中的视觉效果。▲有彩色与无彩色对比（图源：2023首尔爵士音乐节品牌视觉）米黄(有彩色)与底部重叠编排的黑色（无彩色）形成强对比，保证了米黄色字体的识别度。5.3.2字体的对比组合4．不同肌理的字体对比组合肌理具有颇为强烈的视觉吸引力，凭借这一特性，把不同肌理效果的字体组合搭配在一起，能够营造出极具冲击力的视觉反差效果。不同的肌理可以传达出各异的情感和氛围，如粗糙的肌理能传递质朴、原始的感觉；细腻的肌理能传递精致、优雅的感觉。当将多种不同肌理效果的字体组合使用时，这种因肌理差异所产生的视觉反差，会极大地增强画面的层次感与丰富度。▲不同肌理对比的字体组合（图源：京都艺术大学毕业展海报局部）图中左上角的文字在视觉上更为光滑，与图中右下角具有颗粒质感的多色文字形成了肌理对比。5.3.3字体与图案的组合1．字体嵌入图案的组合字体嵌入图案的组合在视觉上与字体的图形化编排较为相似，都会让字体以某个具体的图案轮廓呈现出来，但是字体嵌入图案的组合方式重点在于将已有的图案嵌入到字体的编排之中，图案作为外部元素被引入，与字体形成一种叠加或镶嵌的关系，二者之间的融合相对较为表面，存在一定的界限感。采用字体嵌入图案的组合方式时，不仅需要字体与图案协调配合，更需要字体与图案之间相互融合，既要有各自的特色，又要达到视觉的统一。▲字体嵌入图案的组合在该字体组合中，字体和苹果图案都采用红色，并且字体被嵌入到苹果图案中，凸显了“苹果”文字的语义。5.3.3字体与图案的组合2．字体与图案的“嫁接”组合嫁接是植物的人工繁殖方法之一，而这里所说的字体与图案的“嫁接”则是指字体与图案之间形成一种衔接关系，彼此组合为新的整体形象，使字体造型更加丰富多变和优美。一般情况下，字体与图案的“嫁接”组合要注意字体的排列及图案的位置，使其过渡自然、柔和，呈现出完整、统一的效果。而除了笔画与图案的完美衔接，将整组字体的造型设计与某个图案进行有效融合，也是“嫁接”的一种表现方式。▲字体与图案的“嫁接”组合（图源：花瓣网）该字体不但在其下方添加文字框图案，增添了立体感；还在其上方添加了类似“漫画竖线”的图案，形成了拟人化的呼喊出文字信息的视觉样式。项目实施本项目的实施主要包含使用豆包生成产品标签设计方案和图示、使用Illustrator绘制产品标签、使用Illustrator设计字体3个任务。任务5.1使用豆包生成产品标签设计方案和图示（1）整理产品标签信息将项目描述文字整理到txt文档中，再联系商家获取需要在产品标签上展示的产品信息，添加到该文档中，保存该文档并设置名称为“产品信息.txt”。▲整理产品标签信息由于产品标签需要展示产品的关键信息，应联系商家获取详细信息后，根据信息量设计产品标签，否则会出现标签无法容纳信息的情况。另外，可借助豆包分析标签设计背景并给出设计方法，再根据详细信息生成大致的图示，以有效提升制作效率。任务5.1使用豆包生成产品标签设计方案和图示▲获取设计方案（2）获取设计方案进入豆包首页，单击“添加文件”按钮，在弹出的快捷菜单中选择“上传文件或图片”命令，打开“打开”对话框，选择“产品信息.txt”文档，单击按钮，等待文字解析成功后，输入“先分析上传文档中的内容，然后给出罐装茉莉花茶的产品标签设计方案，要求方案包括产品标签的外形设计、字体设计的思路，其中字体设计应包括字体之间的编排和组合建议”提示词，单击按钮获取设计方案。（3）确定设计方案阅读生成的方案，若方案满意则进行后续操作，若不满意则重新生成。▲确定设计方案任务5.1使用豆包生成产品标签设计方案和图示▲获取图示（4）获取图示确定设计方案后，在文本框中输入“根据上述设计方案和上传的文档信息给出产品标签设计图示”提示词，单击按钮生成设计方案对应的图示。豆包每次生成4张图示，本例选择第2张图示作为设计参考，该图的外形形似椭圆形，而椭圆形在传统文化中象征着生命的圆满和延续，正如茶叶和茉莉花茶虽然被采摘，却被制作成茉莉花茶延续自己的生命，并且该图的背景具有水墨晕染效果，视觉效果美观，且符合中式美学特点。将鼠标指针移至第2张图片，此时图片下方将显示按钮组，单击“下载原图”按钮下载该图片。任务5.2使用Illustrator绘制产品标签（1）绘制背景色启动Illustrator，新建名称为“产品标签设计”、尺寸为“8厘米×5厘米”、颜色模式为“CMYK”、光栅效果为“高（300ppi）”的文件。设置填色为“#cccccc”，使用“矩形工具”绘制比画布略大的矩形，然后在“图层”面板中单击该矩形图层前方的空白区域，使其出现图标，表示该图层已锁定。▲绘制背景色观察可发现，产品标签图示的外轮廓是由多个不规则圆弧组成，可借助Illustrator的“椭圆工具”和路径生成器来绘制，然后添加祥云纹素材、水墨晕染素材、茉莉花素材来制作完整的标签画面。由于图示中的编排较为常规，可在此基础上适当优化。任务5.2使用Illustrator绘制产品标签▲绘制大椭圆形（2）绘制大椭圆形置入“图示.png”文件，调整大小和位置，设置不透明度为“49%”，然后锁定该文件所在的图层。选择“椭圆工具”，设置填色为“#ffffff”、描边为“#1b9b43”、描边粗细为“1pt”，在产品标签中心区域绘制一个大椭圆形。（3）确定设计方案制作上方椭圆形。使用与步骤（2）相同的方式，在大椭圆形上方和右上方绘制3个不同大小的小椭圆形。选择右上角的2个小椭圆形，单击鼠标右键，在弹出的快捷菜单中依次选择“变换”“镜像”命令，打开“镜像”对话框，单击选中“垂直”单选项，再单击按钮，得到与原图形呈垂直对称的图形，调整其位置。▲制作上方椭圆形任务5.2使用Illustrator绘制产品标签▲制作下方椭圆形（4）制作下方椭圆形选择此时大椭圆形上方的5个小椭圆形，按照与步骤（3）相同的方式，获得与原图形呈水平对称的图形，然后调整位置。（5）组合多个椭圆形选择所有椭圆形，选择“形状生成器”，将鼠标指针移至大椭圆形区域，此时该区域将会出现网格状的显示内容，通过拖曳鼠标指针可合并出现网格状的区域，从而将多个椭圆形构成一个完整的不规则形状。▲组合多个椭圆形任务5.2使用Illustrator绘制产品标签（6）制作内轮廓装饰隐藏图示图像，将不规则形状的填充调整为“#f3f8e6”；复制不规则形状，缩小尺寸，取消填色，设置描边粗细为“0.25pt”；复制不规则形状，放大尺寸，取消描边，并置于原不规则形状的下层。（7）绘制背景装饰色块选择“画笔工具”，取消填充，设置描边为“#efea3a”、描边粗细为“2pt”，执行“窗口—画笔库—艺术效果—艺术效果_水彩”命令，打开对应的对话框，选择“水彩湿”选项，拖曳鼠标指针在不规则图形内部绘制色块（8）添加茶叶和茉莉花图像置入“茶叶.png、茉莉花.png”文件，调整大小和位置，然后通过复制和调整旋转角度，获取多个茶叶图像来装饰不规则图形。◄制作内轮廓装饰◄绘制背景装饰色块◄添加茶叶和茉莉花图像任务5.3使用Illustrator编排和组合字体（1）编排和组合产品名称字体由于黑体的笔画更粗，即使用小字号，仍比大字号的楷体字更具吸引力，因此可将产品名称的字体调整为黑体字，并根据当前空间设定字号。选择“文字工具”，设置字体为“汉仪粗黑简”、字号为“18pt”、文本颜色为“#209442”，分别输入“沁”“香”“茉”“莉”“花”“茶”文字。▲编排和组合产品名称字体此时的产品标签内装饰元素的布局和图示存在一定差异，出于美观度和整体性的考虑，可在设计方案的基础上进行调整，使字体编排和组合效果更贴合实际需求，视觉效果更加强烈。任务5.3使用Illustrator编排和组合字体▲编排和组合核心信息字体（2）编排和组合核心信息字体核心信息字体可采用设计方案中提及的楷体字体，并将颜色调整为浅灰色