mcpField
L
layer-typography

layer-typography

github.com/layerai其他70 次安装今天更新
代码仓库

关于 layer-typography

layer-typography 是 Layer 的排字技能,适合需要准确文案或品牌字体的图像制作流程。它通过分离文字与底图,支持后续修改和多语言复用。

主要功能

  1. 01精确渲染文字
  2. 02使用上传的品牌字体
  3. 03将文字与图像分层合成
  4. 04设置对齐、锚点与旋转
  5. 05替换图像中的现有文字

适用场景

  1. 01为宣传图添加准确标题
  2. 02使用品牌字体制作行动文案
  3. 03为多语言版本复用同一底图

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/layerai/skills --skill layer-typography

安装后在 Claude Code 中输入/layer-typography确认已加载。

详细介绍

分层排版

概述

图像模型会拼错文字,也无法使用字体文件。需要文案准确无误或采用品牌字体时,不要生成文字:先用 render_text 设置文字,再用 compose_image 将其叠加到画面上。画面和文字保存在不同文件中,因此修改文案只需重新渲染,无需重新生成;同一画面也能搭配各种语言(layer-localization)。

这两个工具会直接点名调用,而不是通过发现机制查找,因为它们是 Layer 自带的确定性文件操作,而非模型:不会运行模型,也不会消耗 Creative Units,因此无需估算。底图仍需付费生成,并且要通过 layer 技能中的常规估算关卡。

并非所有文字设计都适合在这里处理。render_text 用于设置纯色、平面文字。必须看起来像是场景一部分的文字设计(例如雕刻的招牌、霓虹灯管、带纹理的绘画风格标题)属于生成内容,layer-image 介绍了相关提示词写法。

如果可用技能中没有这里提到的同级技能,请让用户安装(npx skills add layerai/skills --skill <name>);无人值守时,根据工具架构继续操作,并指出此缺失。

快速参考

需求处理方式
文案准确、品牌字体、之后可编辑render_text,然后用 compose_image 将文字叠加到底图上
属于插画内容的文字设计生成(layer-image)
修改图像中已有的文字使用 list_base_models,并设置 filter.use_case: "edit_text"
用户磁盘上的品牌字体使用 request_file_upload_url,然后将 file_id 作为 font_file_id 传入
公开 URL 上的品牌字体upload_file
没有字体文件font_family:标准字体或 Google Fonts 字体系列名称

设置文字

先上传品牌字体。font_file_id 的优先级高于 font_family,而 font_weight(100 到 900,以 100 为步进;400 为常规,700 为粗体)用于选择文件中的字型,斜体字型则使用 italic。如果没有字体文件,font_family 会回退到指定的字体系列;即使外观相近,它也与品牌字体不同。发生这种情况时,请告知用户。

将画布尺寸(width、height,各自最大为 4096)设为大致符合文字在最终图像中所占的区域,以便放置后几乎无需缩放。先将文字设得很小再放大,会导致边缘发虚;先设得很大再缩小,则会减轻字重。

文字放不下时,系统会拒绝处理并告知所需尺寸。根据该尺寸作出判断:扩大文本框、调小 font_size,或缩短文案。不要为了让文字塞进框里而悄悄缩小字号,因为缩到很小才能放下的标题并不合格。

两种对齐方式各有用途。horizontal_alignment 和 vertical_alignment 用于在画布上放置文字块;text_align 用于对齐多行文字块中的各行。换行符会另起一行,长行会在空格处换行。line_height 只会拉开行间距。

除非设置了 background_color,否则画布背景为透明。#RRGGBBAA 可在文字后方绘制半透明底板,是在繁杂画面上增强对比度最简单的方法。

纯色平面文字没有描边或阴影。如需投影,可将同一段文字渲染两次:一次用深色,一次用字面颜色;然后在 compose_image 中叠放,并将深色文字向下、向右偏移几个像素。

放置

compose_image 最多将 16 个图层叠放成一张扁平 PNG,顺序为从底层到顶层。画布默认采用第一个图层的图像尺寸,因此先放入美术图,画布就会与其匹配。

  • 锚点是相对于画布边缘的像素偏移量。同时设置 left 和 right,框就会在两者之间延展。若要将文本固定在角落,或在不知道文本尺寸的情况下将其居中,可将四边都锚定在边距处,并设置 horizontal_alignment 和 vertical_alignment。width 和 height 要与 anchors 一起放在图层上,不能放在其中。
  • resize_strategy:文本和徽标使用 fit_and_pad,让它们按比例缩放以适配框,且不失真。满幅背景使用 fit_and_crop。文字绝不要使用 stretch。
  • 旋转会将图层旋转 90、180 或 270 度:可用于竖排书脊文字,或将卡片编号倒置放在对角上。

可读性

  • 按实际查看尺寸判断合成效果,而不是看全分辨率图像。商店图标标签或移动端按钮的显示尺寸都远小于画布。
  • 生成美术图时就规划好空间:要求在标题放置区域留出简洁、细节较少的区域。若文字覆盖画面中最繁杂的部分,就需要加底板,而加底板是一种妥协。
  • 与每条边缘都保持安全距离。平台会裁剪图片并叠加自己的 UI,紧贴边缘的 CTA 最容易被遮掉。
  • 使用一种字体,通过字重和字号建立层级,效果更像精心设计。使用三种字体则像勒索信。

更改图像中已有的文字

如果文字已嵌入现有美术图中,请按 use_case: "edit_text" 筛选 list_base_models,选取第一个结果,并在提示词中写出准确的替换文本。逐字检查输出。如果拼错两次,就改用干净底图去除旧文字(使用 erase_object 或 inpainting 模型),再用 render_text 和 compose_image 在底图上排字。

示例

“用我们的品牌字体,在这张主视觉图上放上标题 ‘Ember Vale’,并在下方加上 ‘Pre-register now’。”

  1. 主视觉图来自之前的一次生成,因此已有 file_id(1920 x 1080)。字体是本地 .otf 文件:调用 request_file_upload_url,完成两步上传,并保留 file_id。
  2. 用 render_text 渲染标题:设置 font_file_id、font_weight: 700、font_size: 160、color: "#FFF4E0",画布为 1200 x 240。如果请求被拒绝,请查看所需尺寸,并加宽画布。
  3. 用 render_text 将同一标题渲染为 #1A0F08,作为阴影。
  4. 用 render_text 渲染 CTA:设置 font_size: 56、background_color: "#000000B3",作为半透明底板;画布为 640 x 112。
  5. 使用 compose_image 合成四个图层,顺序从底层到顶层:不设锚点的主视觉图;锚定在 top: 124、left: 364,宽 1200、高 240 的阴影;叠在阴影上的标题,位置为 top: 120、left: 360;锚定在 bottom: 96、left: 640,宽 640、高 112 的 CTA。每个文本图层都使用 fit_and_pad。
  6. 按用户最终交付时的尺寸查看结果。这里没有任何步骤消耗 Creative Units,因此无需估算;报告时说明这一点。

常见错误

  • 拼错单词时重新生成图片,而不是直接设置文本。
  • 用一个具名字体系列替代品牌字体,却不告知用户。
  • 画布尺寸与最终文本框相差太大,导致文字缩放后模糊或笔画过细。
  • 文字无法通过校验时不断缩小 font_size,而不是调整框的尺寸或文本内容。
  • 期待 render_text 添加描边、渐变或光晕;它只能设置纯色。
  • 在文本图层上使用 stretch,导致字形变形。
  • 将文字放在画面边缘,或覆盖美术图中最繁杂的区域。
  • 资产之后还要本地化时,却将文字压平到美术图中。

评论

支持 Markdown