字体与版式设计项目式教程课件 项目3 字体设计的基本方法-设计公益展板字体

项目3字体设计的基本方法——设计公益展板字体学习目标学习目标说明知识目标掌握外形变化法、线化法、加衬线法、拉长法、矩形造字法、几何化法、轮廓线法、笔画造字法的应用方式掌握设计公益展板主标题字体的方法技能目标能够熟练运用字体设计的基本方法设计字体能够灵活运用AIGC工具生成字体设计方案素养目标培养丰富的想象力与创造力，打破对字体的常规认知，探索字体变化的无限可能在字体设计过程中，培养持之以恒、精益求精的“匠人”精神项目描述益心同行是一个拥有28名核心成员、超过500名注册志愿者的公益组织。该组织以“汇聚善意，行动改变世界”为理念，重点关注乡村儿童助学、流浪动物救助、环境保护等领域。在世界环境日到来之际，该组织计划制作一个公益展板投放在公共区域，以号召公众重视环境问题并采取相应的行动。项目目标项目名称世界环境日公益展板设计应用软件AIGC工具、Photoshop格式要求psd格式展板尺寸80厘米×45厘米，出血2厘米作品数量1个设计内容围绕“环境保护”这一主题进行设计，重点设计标题文字和主视觉图像设计要求①展板的画面能凸显原生态环境的魅力，展现大自然的美丽之处②展板的主标题文字设计美观，具有吸引力，且与主题相契合③展板采用现代设计风格，符合主流视觉效果配套资源素材\项目3\文案.txt效果\项目3\背景图.png、字体设计思路.docx、公益展板.psd、字体设计.psd知识分解3.1外形变化法3.2线化法3.3加衬线法3.4拉长法3.5矩形造字法3.6几何化法3.7轮廓线法3.8笔画造字法3.1外形变化法外形变化法是在了解文字笔画特征及形态规律的基础上，通过改变文字的形态结构和变形文字外观来设计字体。通过文字的形态结构变化设计字体时，可改变文字的部分形态结构比例、文字的重心位置，以及增加或削减文字正形或负形的面积，从而营造出独特的视觉效果通过变形文字外观来设计字体时，可打破文字外形的格局，对文字进行缩放、压扁、拉伸、倾斜、翻转、重叠、平行反向、扭曲等操作。▲“田”楷体字在该字体中，蓝色圆形区域便是文字的重心位置，黑色区域是文字的正形，其他区域是文字的负形。3.1外形变化法▲“丝”字体设计该字体设计以“黑体”作为基础字形，通过削减文字的部分笔画来增添设计感，使部分笔画形如“细丝”，与“丝”字本身内涵相契合。◄“鱼”字体设计（图源：探先生字体设计）该字体设计将“鱼”字上半部分运用扭曲的手法进行设计，使其形似小鱼；下半部分则将横笔画变化为类似浪花的形状，恰似水中泛起的涟漪。整体设计生动还原出鱼在水中自在遨游的视觉画面。3.1外形变化法3.2线化法3.3加衬线法3.4拉长法3.5矩形造字法3.6几何化法3.7轮廓线法3.8笔画造字法知识分解3.2线化法线化法是指用直线、曲线等线条代替文字的原本笔画，使文字具有更简洁、更整齐的形态特征的设计方法。在使用线化法设计字体时，需要注意以下要点。尽量保持原有笔画的走势，让文字笔画经过处理后，依然具有令人熟悉的形态框架，以便识别线条的粗细、疏密搭配会影响文字的整体节奏和韵律感，进而影响人的视觉感受，因此只有当这些因素与文字的内涵、想要传达的情感相契合时，才能达到较佳的视觉效果▲线化法在该字体设计中，“牵丝戏”3字在保留了大部分原有笔画走势的基础上，对部分笔画进行曲线化处理，使字体呈现出简洁且富有动感的视觉效果，营造出一种飘逸的氛围。3.1外形变化法3.2线化法3.3加衬线法3.4拉长法3.5矩形造字法3.6几何化法3.7轮廓线法3.8笔画造字法知识分解3.3加衬线法加衬线法是在了解文字笔画特征的基础上，为凸显设计意图，为文字笔画添加衬线装饰的设计方法。在使用加衬线法设计字体时，需要注意以下要点。01设计时尽量选择非衬线体或是以衬线装饰不明显的字体作为基本字体，以便做衬线装饰，效果会更明显02衬线装饰可以重复，但是变化不宜太多，一般以3种为宜，如宋体的三角、方头折角等03对于衬线装饰的个性笔画，需根据字体的主题来变化，要做到稳中有变、变中求新，并贴近主题和联系主题▲加衬线法“长白山”3字的字体设计仅在文字的顶端和字脚处添加了衬线，相比原字体便多了一份设计感。3.1外形变化法3.2线化法3.3加衬线法3.4拉长法3.5矩形造字法3.6几何化法3.7轮廓线法3.8笔画造字法知识分解3.4拉长法拉长法具有上下拉长和一点拉长两种方式。上下拉长需要先将基本字体变细，然后垂直拉长部分笔画，属于整体变化。拉长操作应在保持文字整体结构平衡的前提下进行，避免过度变形导致字形失真或难以辨认。尤其是上下拉长时，需确保纵向延伸不影响横向结构的稳定性01上下拉长适用于营造修长、优雅的视觉风格，而一点拉长更适合强调局部动感或焦点。设计字体时需根据设计目标选择合适的方式02▲拉长法3.1外形变化法3.2线化法3.3加衬线法3.4拉长法3.5矩形造字法3.6几何化法3.7轮廓线法3.8笔画造字法知识分解3.5矩形造字法矩形造字法是一种将文字的笔画用矩形代替，通过笔画的切割和相连来设计字体的方法。在使用矩形造字法时，需要先确定矩形的横、竖宽度，然后根据文字的整个结构搭建矩形，即形成文字。▲矩形造字法该字体设计先将“世外桃源”4字的笔画用矩形替代，然后通过改变笔画的位置、形状、长度来强化设计感。在确定矩形的长宽数值时，应考虑字体的正负空间，保持字内空间疏密得当，避免局部拥挤或空洞，以确保整体字形稳定、美观0102可通过调整矩形块的长度、对齐方式和间距，形成视觉节奏感3.1外形变化法3.2线化法3.3加衬线法3.4拉长法3.5矩形造字法3.6几何化法3.7轮廓线法3.8笔画造字法知识分解3.6几何化法几何化法是一种利用几何图形充当部分文字笔画的设计方法。汉字的形状结构丰富多样，但整体外形可归纳为正方形、长方形、三角形、菱形等几何形状，如“回”“月”“人”“中”分别对应这几种外形。▲几何化法该字体设计将“白”字的部分笔画用圆角矩形代替，原本尖锐的笔画转折变为圆润的弧形，直接改变了字体的视觉感受，形成具有童趣风格的字体设计。选择不影响主题识别的结构进行替换，避免破坏文字原有的形状结构与笔画逻辑，防止造成识别混淆几何替换不宜过多、过密，避免视觉冗余，应注重负形与正形的平衡，保持视觉上的通透感3.1外形变化法3.2线化法3.3加衬线法3.4拉长法3.5矩形造字法3.6几何化法3.7轮廓线法3.8笔画造字法知识分解3.7轮廓线法轮廓线法是一种通过保留文字外部轮廓而形成字体的设计方法，该设计方法能够赋予字体简练而精致的视觉效果。在使用轮廓线法设计字体时，需要注意以下要点。◄轮廓线法该字体设计的思路是先保留文字的外轮廓，然后删减部分轮廓线，构建出精致的视觉观感，同时也使字体具有一种上下通透的呼吸感。01同一组字体中轮廓处理手法（如断点位置、倾斜角度、线宽等）应保持一致，以强化整体感02控制轮廓复杂度，避免因轮廓转折过多或细节冗余而影响视觉整洁度，尽量保持轮廓线的流畅与统一03无论是删减、倾斜还是其他调整轮廓线的形式，都应建立在不破坏字体的整体结构，确保文字清晰识别的基础上3.1外形变化法3.2线化法3.3加衬线法3.4拉长法3.5矩形造字法3.6几何化法3.7轮廓线法3.8笔画造字法知识分解3.8.1笔画重叠法笔画重叠法是一种通过打破原有文字结构，使用某个笔画代替同组文字中同类型的笔画；或依据文字的形态、特点等，把邻近的笔画相连，形成笔画共享显示效果的设计方法。需要注意的是，只有邻近笔画具备共同特征，或当多个字经错落、穿插排列后邻近笔画可自然衔接时，才能形成协调的同体显示效果。▲笔画重叠法该字体设计将“看”字与“见”字的部分笔画重叠，使二者在视觉上形成一个整体。同时，这一设计强化“目”元素的存在，“目”作为与视觉相关的关键意象，与“看见”两字所表达的含义高度契合，生动地传达出通过眼睛实现观察、感知的语义内涵。3.8.2笔画重复法和省略法笔画重复法是一种通过重复使用字体内的某一笔画来设计字体的方法，能够产生非常有个性的字体设计，使人过目难忘。▲笔画重复法该字体设计将“再见北京”4字中的部分横笔画进行了重复运用，形成多栏的视觉样式，宛如为文字搭建起了一层层规整而有序的阶梯，并产生类似音乐节拍般的韵律感，使人们的视线在文字间有序流动，增添了阅读的趣味性。3.8.2笔画重复法和省略法笔画省略法是指特意减少或省略字体中的笔画的设计方法。对字体结构特征起关键作用的笔画不能省略，应尽量在同一类型的部首上省略，或在文字的同一方向上省略，以便文字快速识别。需注意的是：字体笔画的共用（一笔共用、两笔合一）、笔画的连笔、字体与字体挨近重叠，都属于可省略的笔画。▲笔画省略法（图源：平面设计账号）该字体设计以宋体为基本字形，笔画中的点可以理解为水滴，横笔末端的小三角可以理解为山。在设计时，省略了全部的横笔画，利用人的视觉感知特性自动补偿缺失的横笔，暗含水生万物之意，这与“上善若水”蕴含的深意不谋而合。3.8.3笔画连接法和断开法笔画连接法是从相邻文字中找寻可以连接的笔画的设计方法。该方法可让笔画有机连接，使文字变成一个整体，形成视觉连贯感，如将两个相邻的字共用一个笔画，或将两个相邻的字的笔画进行连接。◄笔画连接法该字体设计精妙地将“春”字的“日”部与“分”字的撇画相连，在确保两字结构完整、辨识无碍的基础上，巧妙构建出视觉上的有机整体。相连的笔画似春风轻拂，灵动飘逸，不仅增添了字体的动态美感，还带来了清新惬意的清凉之感。3.8.3笔画连接法和断开法笔画断开法是指采用剪切、错移、分解、手撕等手法断开文字的一些局部笔画，或删减笔画，使文字产生断裂、破碎、粗犷等感觉，从而打破文字间的拘束感的一种字体设计方法。需要注意的是，要在保持文字可识别性的前提下，适当断开笔画连接处。▲笔画断开法该字体设计适当断开了“字体设计”4字的部分笔画连接处，使字体呈现断裂粗犷之感，打破常规拘束，同时保留了文字的可识别性。3.8.4笔画叠加法笔画叠加法是一种将文字的笔画互相重叠，或将文字与文字、文字与图形相互重叠的设计方法。经叠加处理后的字体往往存在实形和虚形之分，这使字体产生了空间层次，丰富了展示效果。▲笔画叠加法（图源：墨云阁）该字体设计将文字笔画穿插叠加，实形与虚形相生，营造出强烈的空间感，尽显独特艺术魅力。项目实施本项目的实施主要包含使用DeepSeek和即梦AI生成展板背景图、使用豆包梳理字体设计思路、使用Photoshop设计主标题字体、使用Photoshop合成展板4个任务。任务3.1使用DeepSeek和即梦AI生成展板背景图（1）获取推荐提示词进入DeepSeek官网页面，在文本框中输入“若想使用即梦AI生成一张以世界环境日为主题的插画，且画面不能出现地球、人等元素，请给出一段提示词”提示词，单击按钮获取用于在即梦AI中生成图像的提示词。▲获取推荐提示词公益展板以“世界环境日”为主题，因此该展板的画面内容需要与“社会”“环境”等关键词挂钩。基于此，可借助DeepSeek展开联想、拟定提示词，再使用即梦AI生成展板背景图。任务3.1使用DeepSeek和即梦AI生成展板背景图（2）生成背景图进入即梦AI官网的“生成”页面，在文本框中设置创作类型为“图片生成”，模型为“图片3.0”，比例为“3∶2”，粘贴由DeepSeek生成的提示词，再适当调整提示词，单击按钮生成背景图。◄生成背景图（3）挑选要扩展的背景图从生成的4张背景图中挑选较满意的一张，此处选择第3张，单击该背景图，在打开的对话框右侧单击“扩图”按钮，在操作界面中选择扩图比例为“1.5x”，单击按钮。▲挑选要扩展的背景图任务3.1使用DeepSeek和即梦AI生成展板背景图（4）下载扩展后的背景图从生成的4张扩图后的背景图中选择较满意的一张，此处选择第3张，单击鼠标右键，在弹出的快捷菜单中选择“下载图片”命令，然后在图片存储的位置修改文件名称为“背景图”。▲下载扩展后的背景图任务3.2使用豆包梳理字体设计思路（1）获取字体设计建议进入豆包官网，在文本框处单击“添加文件”按钮，在弹出的面板中选择“上传文件或图片”选项，在打开的“打开”对话框中选择“背景图.png”图片，单击按钮。在文本框中输入提示词，单击按钮。▲获取字体设计建议主标题文字的字体设计应考虑与背景图的色彩搭配、风格搭配等要点，为此可将生成的背景图上传到豆包中，让该工具先分析背景图的特征，再给出主标题文字的字体设计意见，设计师再基于意见进行梳理，从而获取字体设计思路。任务3.2使用豆包梳理字体设计思路（2）整理字体设计思路阅读豆包生成的字体设计思路，可确定以无衬线字体——思源黑体为基础字形，白色或浅木色为基础色，字体风格简约大气，采用适当加粗和圆润处理笔画的形式来设计。（3）优化设计思路为了加强设计感，可在豆包生成的字体设计思路基础上，再运用几何化法将“世”“界”“境”“日”文字的部分笔画替换为几何图形，综合运用这两种设计思路设计出最终的字体。▲整理字体设计思路任务3.3使用Photoshop设计主标题字体（1）添加基础字形启动Photoshop，单击按钮，打开“新建文档”对话框，设置名称为“字体设计”、尺寸为“54厘米×15厘米”、分辨率为“72像素/英寸”、颜色模式为“CMYK”、背景内容为“黑色”，单击按钮创建文件。选择“横排文字工具”，设置字体为“思源黑体CN”、字体大小为“300点”、文本颜色为“#ffffff”，输入“世界环境日”文字，设置该文字所在图层的不透明度为“29%”。▲添加基础字形获取字体设计方案后，便可以在Photoshop中创建文件，并输入“世界环境日”主标题文字，然后使用各种工具加粗和圆润化处理该字体。任务3.3使用Photoshop设计主标题字体（2）加宽和圆润化处理“廿”结构的竖笔画新建图层并重命名为“直线型笔画”，选择“画笔工具”，设置画笔大小为“26像素”、硬度为“100%”，画笔样式为“硬边圆”，将鼠标指针移至“世”文字的“廿”结构的竖笔画开头处，单击鼠标左键绘制出1个圆形，然后按住“Shift”键不放，在该笔画的结尾处单击鼠标左键，此时将绘制出第2个圆形，并且两个圆形之间将自动连接形成竖笔画。需注意，两个圆形应为平行关系，以保证绘制出来的竖笔画是垂直的。（3）加宽和圆润化处理直线型笔画按照与步骤（2）相同的方式和注意事项绘制出其他直线型笔画。▲加宽和圆润化处理“廿”结构的竖笔画◄加宽和圆润化处理直线型笔画任务3.3使用Photoshop设计主标题字体（4）加宽和圆润化处理撇笔画新建图层并重名为“撇捺笔画”，将鼠标指针移至“界”文字“撇”笔画开头处，通过先单击鼠标左键，再按住鼠标左键不放并拖曳鼠标指针来绘制该笔画。需要注意的是，保证撇笔画的弧度流畅，可通过撤回操作并重新绘制的形式来获取满意的笔画效果。（5）加宽和圆润化处理剩余笔画按照与步骤（4）相同的方式，在该步骤创建的图层上绘制剩余笔画，使“世界环境日”文字笔画完整。▲加宽和圆润化处理撇笔画◄加宽和圆润化处理剩余笔画任务3.3使用Photoshop设计主标题字体（6）变形部分“廿”结构笔画此时已按设计方案完成字体设计，但是在视觉上仍感觉设计感缺失，因此可将部分横笔画变形为圆环。选择“椭圆工具”，取消填充，设置描边为“#ffffff”、描边宽度为“26像素”，绘制一个与“廿”两竖笔画等宽的圆环，然后单击“图层蒙版”按钮为圆环所在图层创建图层蒙版，设置前景色为“#000000”，使用“画笔工具”涂抹圆环的上半部分，再为“直线型笔画”图层创建图层蒙版，涂抹“廿”笔画的下半部分，使圆环与笔画充分融合。▲变形部分“廿”结构笔画任务3.3使用Photoshop设计主标题字体（7）变形“田”结构笔画选择“矩形工具”，取消填充，设置描边为“#ffffff”、描边宽度为“26像素”、圆角半径为“40像素”，绘制一个与“田”笔画等宽的圆角矩形。然后按照步骤（6）融合笔画的方式进行处理，使圆角矩形与“界”文字充分重合。（8）变形“日”结构笔画按照与步骤（6）和步骤（7）相同的方式变形“日”笔画，再绘制一个圆角矩形与“境”文字充分重合。此时，“日”字中的横笔画不太美观，可用图层蒙版遮盖住该笔画，再使用“矩形工具”绘制一个高度为“16”的矩形代替横笔画。▲变形“田”结构笔画▲变形“日”结构笔画任务3.3使用Photoshop设计主标题字体（9）变形其余笔画按照与步骤（6）相同的方式，先在“世”文字左下角绘制一个圆环，再利用图层蒙版使其与“世”文字充分重合。按照与步骤（7）相同的方式，在“日”文字外围绘制一个圆角矩形，再利用图层蒙版使其与“日”文字充分重合。（10）变色部分笔画此时主标题文字都呈白色显示，可将部分笔画变色为设计思路中提到的浅木色，再度增强设计感。选择除背景图层、文字图层以外的所有图层，按“Ctrl＋E”组合键合并。选择合并后的图层，单击“锁定透明像素”按钮，设置前景色为“#e5d2bb”，使用“画笔工具”涂抹“”笔画和“日”文字所在区域，完成字体设计，按“Ctrl＋S”组合键保存文件。▲变形其余笔画▲变色部分笔画任务3.4使用Photoshop合成展板（1）创建出血使用Photoshop新建名称为“公益展板”、尺寸为“84厘米×49厘米”、分辨率为“72像素/英寸”，颜色模式为“CMYK”、背景内容为“白色”的文件，其中，尺寸包含2厘米的出血区域。执行“视图—参考线—新建参考线版面”命令，在打开的“新建参考线版面”对话框中设置颜色为“浅红色”，单击选中“边距”复选框，设置上下左右数值均为“2厘米”，单击按钮。▲创建出血当前已经获取到公益展板的背景图和主标题文字，需要将它们和益心同行组织提供的文案信息组合在一起，形成完整的展板画面。任务3.4使用Photoshop合成展板（2）创建画面构图参考线执行“视图—参考线—新建参考线”命令，在打开的“新建参考线”对话框中单击选中“水平”单选框，设置数值为“16.3厘米”，颜色为青色”，单击按钮创建第1条参考线，按照相同的方法继续创建数值为“32.5厘米”的水平参考线，数值为“28厘米”“56厘米”的垂直参考线。（3）设计展板画面构图此时画面已经被分割为九宫格，执行“文件—置入嵌入对象”命令，打开“置入嵌入的对象”对话框，选择”背景图.png“文件，单击按钮置入该图片，然后放大图片并调整图片位置，使其铺满整个图像编辑区，且露珠部分位于第4个网格交汇点位置，使画面形成九宫格构图样式。▲创建画面构图参考线▲设计展板画面构图任务3.4使用Photoshop合成展板（4）设置垂直型文字布局按照与步骤（3）相同的方式，创建数值为“42厘米”，颜色为“黄色”的垂直参考线，作为文字居中布局的指引。切换到字体设计所在文件，将“世界环境日”文字拖曳到展板文件中，调整大小和位置，使该文字的1/2宽度与黄色参考线对齐，且该文字的1/2高度与“16.3厘米”青色参考线对齐。（5）添加文案信息由于主标题文字使用了“思源黑体CN”字体，其他文案则可使用非黑体字，以制造对比效果。选择“横排文字工具”，设置字体为“汉仪大宋简”，字体大小为“55点”，在主标题文字上方输入“WorldEnvironmentDay”文字；设置字体大小为“60点”，打开“文案.txt”文件，在主标题文字下方输入该文件中的第1句文案；设置字体大小为“40点”，在文案下方输入第2句文案。▲设置垂直型文字布局▲添加文案信息任务3.4使用Photoshop合成展板（6）美化文字和提高文字识别度此时部分文字所在位置受到背景图色彩的影响，识别度不高，可添加颜色框，同时还应对这些文案信息进行美化，