AI 图片排版：可编辑文字与多语言布局

把画面和信息保留为两份可编辑的内容：用 AI 图片建立场景，再在排版工具里放入确认过的文字。这样改日期、换语言或做手机版时，就不必重新生成整张图。

真正困难的往往不只是错别字，而是让一张漂亮的图片，在实际展示尺寸下把事情说清楚。标题每个字都对，仍可能淹没在枝叶里；英文排得舒服，换成中文后，也可能因为断行和字面密度不同而失去层次。

本文用一个虚构的植物花艺工作坊“花开时的田野笔记”做示例。具有摄影质感的场景为本文生成，文字另行排版。活动信息都是教学文案，不是真实活动公告。文末可下载的 SVG 保留了可编辑文字和内嵌的位图。

先准备一份能做完的简报

你可以直接使用本文的无文字源图、下方的可编辑海报，以及下一节的四项文案，不必先重新生成图片。把源图、可编辑母版和最后导出的预览分别保存，避免下一次修改时只剩下一张扁平图片。

这次做两份交付物：一份能够作为图片分享的竖版海报，一份把重要信息保留为普通文字的网页。它们的验收条件不同。海报需要在导出后保持设计好的版面；网页即使图片不可用、文字增加到两行，活动名称和地点仍要清楚。一张导出图片不会自动完成这两个任务。

动手前写下三个条件：准备在哪个宽度展示、需要哪几种语言、最长的场地名称是什么。条件还没有确定，可以先做临时版，但要标出自己的假设。本文演示中英文，不代表一套固定模板可以原样适用于所有文字系统。

先决定读者必须读到什么

选字体之前，先把信息写成普通文字。这个例子有四种职责：

它们不需要同样醒目。在这份设计里，标题最大，说明与实用信息稍小，但仍应可读。这是针对当前任务的编辑判断，不是所有海报都必须遵守的公式。如果是一张即将开场的入场券，时间可能更重要。

把确认过的文案单独保存，先校对日期、地址和标点，再打磨海报。真实场地名称很长，就用完整名称试排；不要先放一个好看的短占位词，到交付时才发现真实信息根本装不下。

把“不能变的事实”和“可以调整的表达”分开。时间在每次修订中都不能丢，标题的断行却可以变化。文案表先写完整日期，海报里再决定是否使用缩写，这样设计者不会把简写误认为另一种日期。地点不能为了好看被缩短成另一个场地，专有名称也不能未经确认就自由翻译。

一个实用的开始方法，是先把图片隐藏，只排这四项信息。此时若仍分不清标题、活动类型和地点，问题在信息组织，而不是图片不够漂亮。等纯文字的阅读顺序成立，再把画面放回来。这样也更容易判断：某个字太小，究竟是整个版面都拥挤，还是花朵刚好挡住了它。

给文字一块区域，而不只是要求“留白”

源图把花瓶与花朵安排在右侧，左上方的墙面相对安静，适合容纳标题。安静不等于纯白：墙上仍有质感，只是比花朵少了许多争抢注意力的边缘。

在画面边界以内划出文字框，为真实文案留足空间，避开花瓶、最繁密的花瓣以及预期会被裁切的位置。这里的版面边距是你主动留下的呼吸空间，不等于印刷出血，也不是平台保证不会裁掉的安全区。印刷文件的边界问题可以接着看出血与成品线指南。

如果换尺寸后裁切会侵入文字框，就为新尺寸重新编排。挪动几像素并不能挽救每一种裁切。宽高比指南解释了为什么改变画布形状，也会改变可用空间。

文字要能改，断行要有理由

在排版工具中使用真正的文字对象。短标题可以手动断行，较长的说明适合放进能够自动换行的文字框。Adobe 区分了会随输入继续延伸的点文字，以及在边界内流动的区域文字。理解这个差别，才知道一段文字应该保留设计好的断行，还是在修改后重新流动。Adobe：添加与管理文字

逐行读一遍，看它们是否形成完整短语。英文标题分成“Field notes”和“in bloom”两部分；中文也应按意思断开，而不是照搬英文的位置。让介词落单、把日期切成两截，都会迫使读者自己拼回信息。可以调整文字框、字号，或与文案负责人一起改写，但不要把字横向压扁，只为让它勉强装进去。

下载中文可编辑海报和英文可编辑海报。SVG 中包含内嵌图片和独立的 text 元素，字形没有转成轮廓路径。用支持 SVG 文字的编辑器打开，尝试把“四号工作室”改成别的地点。文件没有附带字体；发生字体替换时，行宽可能变化，保存后要重新打开检查。

完成一次真正的文案修改

1. 复制一份母版。按可编辑文档打开，而不是把它作为一张扁平图片插入另一个文件。
2. 用文字编辑工具选择地点。如果只能选中整个矩形，先确认自己选到的是编组、导入图片，还是文字对象；一个边界框本身不能证明文字可改。
3. 把地点换成“河畔植物艺术中心 · 四号工作室”。这是刻意加长的虚构练习文案。保留原来的活动名称、日期、时间和图片。
4. 检查整行文字。即使每个字都正确，只要进入枝叶、越过文字区域，或者迫使读者眯眼，排版就还没有完成。

英文文件里原来的地点对应下面这个元素。它只是实际文件中的一段，不是一份完整 SVG：

<text x="82" y="1006" font-family="Arial, sans-serif"
      font-size="54" fill="#30251e">Studio No. 4</text>

这里保存的是字符。替换字符，会改动这个文字对象，而不需要重新绘制背景照片。用文本编辑器也能完成替换，但在视觉编辑器里更方便检查版面。坐标和字号对应本文这张 1024 × 1536 的画布，不是所有海报都应该照抄的标准值。

修订时，先试增加一行，再调整文字区域，最后才检查字号与间距。中文可以把“河畔植物艺术中心”和“四号工作室”视为两个信息单元，英文则先试在“Riverside Botanical”后断行，让“Centre · Studio No. 4”保持完整。如果两行依然无法在图片旁舒服地放下，就把完整地点移到独立的安静区域，而不是一直缩小。

每次只改变一个排版决定，更容易知道问题怎样解决。例如先保持字号，观察换行有没有消除碰撞；仍然拥挤，再扩大文字区域。不要同时换字体、缩小字号、压缩字宽、挪动位置，最后只留下一个“好像能放下”的结果。这里的逐步修改是检查方法，不是在宣称对模型做了单变量实验。

修好地点后，还要回看它与标题的关系。把地点放大到和主标题一样，虽然解决了小字问题，却可能让读者认不出活动叫什么。目标是让实用信息清楚且有合适的权重，不是让所有文字同样大。

翻译文字，也重新组织版面

英文名称是“Field notes in bloom”，说明是“A botanical workshop”。中文的信息职责相同，但字面宽度和阅读节奏不同。示例把两种语言分别排成自然的短语，并为各自的字形调整了间距。

翻译可能改变文字的宽度和高度，即使字符数量变少也一样。W3C 的国际化指南建议采用灵活版面，并分开处理内容与呈现；它并没有给出一个可以让所有语言都自动装下的统一膨胀比例。W3C：翻译中的文本尺寸

尽早使用最长的真实文案试排，检查字体是否包含所需字符与标点。不同语言应保留相同的信息优先级，但可以根据阅读需要使用不同字号、断行与间距。

在加长地点练习中，不要按照英文的字符位置给中文断行。先读出场地名与房间名的关系，再决定一行还是两行；两种语言都要让“四号工作室”属于正确的场地。英文里的空格数量和中文的字数，也不是视觉宽度相同的保证。

中英文并排看时，可以有不同的文字面积，但不能出现不同的活动事实。检查名称是否对应同一件事，日期和时间是否一致，是否无意中多出了“含全部材料”“适合初学者”之类未经确认的承诺。语言自然不等于可以自行补信息。

版式调整后，再与原始文案表逐项核对一次。剪切一行再粘贴到别处，容易漏掉标点或最后几个字；字体替换后，某些字符也可能显示成空框。不要只比对设计截图的大体形状，要真正读出最终文字。多语言验收是内容检查，也是排版检查。

检查整行文字下面的背景

只在一块空白处取色，不能证明整行字都清楚。沿着文字检查它经过的最亮和最暗区域。即使整体配色柔和，细枝也可能穿过笔画，干扰阅读。

先尝试移动文字。如果仍然无法安排，再考虑一块明确的纯色底板，或换一张更合适的图片。不要习惯性地把整张照片压暗：可能损失了画面，某些字却仍然难读。

针对网页文字，WCAG 2.2 AA 级的最低对比度一般是 4.5:1，符合大文本定义的文字是 3:1，并有明确的例外。这是网页无障碍标准，不是所有印刷海报的统一审美公式。数值达到门槛，也不保证细体字横跨繁密枝叶时一定读得舒服。W3C：最低对比度

对比度检查应当在最终裁切后再做。原来在浅墙上的一行字，可能因为响应式容器换了裁切位置，落到一片深色叶子上。如果使用半透明底板，要检查最终透明度与下面的图片，不能只拿底板本身的颜色计算。目视检查和对比度计算各自回答一部分问题，谁都不能替代另一项。

例如，标题前半段在浅墙上很清楚，后半段却穿过白花瓣。把整行字一律改成浅色，可能救回后半段，又丢掉前半段。此时更直接的修订可能是移动整块文字、缩短标题的行宽，或者给它安排一块明确的底色。优先处理文字与背景的关系，再考虑增加描边或阴影。

把网页当成第二份版面

本文的网页排版示例把同一幅场景与普通中英文文字组合起来。图片与信息各有区域，窄屏时上下排列。它是一份重新组织的网页呈现，不是把原海报拉伸到窗口宽度；其中的活动信息仍然全部是虚构的。

制作自己的网页时，先把名称、说明、日期、时间、完整地点写进文档，再决定图片放在哪里支持它们。不要让一张会被裁切的背景图，成为唯一保存地址的地方。结构可以很简单：

<article>
  <img src="botanical-scene.webp" alt="">
  <h2>花开时的田野笔记</h2>
  <p>植物花艺工作坊</p>
  <p>2026 年 10 月 25 日 · 14:00</p>
  <p>河畔植物艺术中心 · 四号工作室</p>
</article>

这里的图片起装饰作用，因为活动类型和实用信息已经完整写在文字里。若网页是一堂依靠插花形状来讲解的课程，图片就需要另一种替代文字。图片替代文字指南会逐个演示这种语境判断。

检查这个网页时，可以选中并复制日期，也可以收窄窗口，看地点是否自然换行。如果内容仍然完整，说明信息没有被固定在某一张画布的像素位置上。但这并不意味着不必设计：标题和说明仍需要清楚的层次，文字块仍要与图片形成舒服的关系，只是允许它们随着阅读条件变化。

在交付尺寸下收尾

导出后，按实际展示宽度打开最终文件。用手机大小检查，而不只盯着放大的编辑画布。把较小的时间、地点读出声，再检查最长的译文、标点、画面边缘和裁切。

用于网站时，在扁平海报旁边提供普通 HTML 标题和活动详情，或者直接用 HTML 呈现这些信息。这样读者才能缩放、选取文字，或改变呈现方式。W3C 的图片文字指南解释了这个区别与例外。可编辑 SVG 母版对设计者有用，但把它作为一张图片显示，并不自动等于网页上可访问的文字。W3C：图片文字

把可编辑母版、确认后的文案与最终导出文件放在一起。好的交付，让下一位接手的人可以改信息而不必重画花朵，也能逐一核对各语言是否仍然说着正确的事情。

练习：接受长地点，保住原来的设计

用上面的长地点，各做一份中文与英文版本。保持原图、原日期和时间，交付可编辑母版、一张图片导出，以及一份把完整信息保留为文字的网页。不要只交一张看起来漂亮的截图。

按下面的判据验收：

• **文案完整。**两份版本指向同一个活动和地点，没有丢掉“四号工作室”，也没有编出不存在的地址。
• **阅读顺序明确。**先找到活动名称，再找到时间和地点，不必沿着花朵寻找信息。让另一个人只看几秒，说出他先读到了什么，可以帮助发现自己已经习惯而忽略的层次问题。
• **版面容纳真实内容。**长地点不与图片碰撞，也不越过预定边界。按实际展示宽度打开导出图，不放大编辑画布也能读出实用信息。
• **文件仍可改。**重新打开交付母版，只改地点；标题与花朵保持完整。若必须重新描字或重生图片，说明交付的不是所需母版。
• **网页保留文字能力。**可以选取并复制日期，缩窄窗口后完整地点仍然可见。图片未出现时，文字也能说明活动是什么、何时、何地。

这道练习没有唯一正确的断行。两行地点、独立的信息底板、图片下面的网页文字，都可能成立。缺少地点的漂亮海报不能通过；信息虽然齐全，但在指定尺寸下读不出来，也需要再修一次。把“能交付”定义成这样的可观察结果，比一直寻找一个更厉害的生图提示词更有用。