九宫格切图完全教程：把一张图切成 3×3 的方法与技巧

九宫格大概是中文互联网最常见、也最容易被做坏的切图操作。常见的结果是：切完之后每一块都像随手截的图，拼回去也没有「原来是一整张」的惊喜感。

问题通常不在工具，而在切之前没有预判构图。这篇从视觉原理讲到实操细节，包括命名与发布顺序这些真正会翻车的环节。

一、九宫格为什么有效

九宫格的吸引力来自一个认知落差：用户以为点开的是 9 张图，结果发现是一整张。这个「发现」的瞬间会带来额外的停留时间和互动意愿。

要让这个落差成立，有两个前提：

• 单看每一块都成立：任意一块拿出来，都不能是纯粹的色块或残缺的笔画
• 拼起来有整体感：九块拼回原图时，接缝处要自然，不能有明显的错位或压缩痕迹

二、切之前：先选对原图

适合做九宫格的图

• 主体居中、四周有延伸：如风景、建筑、街景、全景人像。中心块是主体，四周块提供环境信息
• 有重复纹理：如花海、书架、人群、水波。切开的每一块都有内容密度
• 本身就是拼贴设计：你主动设计成 3×3 排版的图

不适合做九宫格的图

• 信息密集的长图文：切开后每张都是半截字，毫无意义
• 主体过小且偏于一角：大部分块会是空白背景
• 已经是很小的图：切开后每块分辨率不足，上传再压缩就彻底糊了

三、切之前：先统一成 1:1

这是最容易被跳过、也最影响成品的一步。

如果你直接把一张 3:4 的竖图切成 3×3，得到的九块会是细长的竖条（宽高比 1:1.33）。这种比例在小红书、朋友圈的九宫格里会显得很别扭，拼合时也容易看出变形。

正确顺序：先把原图裁成 1:1 正方形，再切 3×3。这样每一块都是标准正方形，拼合后完全还原。

裁 1:1 时如何不丢主体

• 用「平台画幅」里的 1:1 模板，拖动图片调整位置，而不是简单粗暴地居中裁切
• 如果原图主体偏左或偏右，宁可裁掉一部分背景，也要保证主体完整
• 构图时把主体放在井字线交点附近，而不是正中心 —— 视觉上更耐看

四、三种实现路径对比

方案 A：在线切图工具（推荐）

• 优点：不用安装、不用注册、处理完就走；图片不上传服务器，隐私风险低
• 缺点：依赖浏览器性能，超大图片处理会慢
• 适合：绝大多数日常场景，尤其是偶尔切一次的用户

刃图 FrameLab 的做法是：选择 3×3 模板 → 调整预览 → 一次性导出 9 张，并按 {index} 自动命名。

方案 B：设计软件（Photoshop / Figma）

• 优点：精度完全可控，可以做复杂的拼接设计；切片功能可自定义每一块的边界
• 缺点：学习成本、软件成本；导出步骤繁琐（切片 → 导出为 Web 格式 → 重命名）
• 适合：本身就在做设计、需要精确控制每一块内容的人

方案 C：手机 App

• 优点：切完直接发，链路最短
• 缺点：多数 App 会加水印、压缩画质，或要求订阅才能导出高清；图片会上传到对方服务器
• 适合：临时、不重要的图

五、切图时的三个细节

1. 缝隙：留白还是贴死

九宫格在小红书 / 朋友圈展示时，块与块之间会有几像素的系统间距，无法消除。这意味着：

• 如果你的图有横穿画面的强烈直线（如地平线、建筑边缘），间距会让这条线看起来是断的
• 解决思路：要么接受它（观众会自动脑补），要么主动在切图时给每块加一点白边，把系统间距变成设计的一部分

2. 命名：顺序决定成败

导出时务必使用带序号的文件名：

• 推荐格式：01.jpg … 09.jpg（补零，这样按文件名排序时 10 不会排在 2 前面）
• 如果工具支持命名模板，用 {index} 或 {name}_{index}
• 命名顺序统一为从左上到右下、按行优先

3. 发布顺序：最容易翻车的一步

不同平台的图集排序规则不一样：

• 小红书：后上传的排在前面。所以要从第 9 张倒序上传，或上传后在编辑器里拖动调整
• 微信朋友圈：按选择的先后顺序排列，选图时从 1 选到 9 即可

发布前一定在预览里左右滑一遍，确认拼合正确再发出去。

六、不止九宫格：其他分割方式

3×3 只是最常见，不是唯一。根据内容需要，这些分割方式同样常用：

• 2×2 / 4×4：块更大，细节更清楚，适合内容密度高的图
• 1×3 横向三联：适合超宽风景图、横向对比图
• 3×1 纵向三联：适合竖版长图、步骤图
• 不等分切割：手动拖动分割线，让主体占据更大的块。比如人物特写，可以让中间块占 50%，两侧各 25%

不等分切割是区分「随手切」和「有设计感」的关键。用可拖动的分割线，比固定均分模板灵活得多。更多分割思路见图片分割与裁剪的 6 种实用技巧。

七、批量：一次切多张图

如果你在做系列内容（比如一周九宫格、多套产品图），逐张处理会非常耗时。

批量切图的逻辑是：设定一组分割参数，套用到多张图上。前提是这些图的比例一致 —— 所以还是要先统一裁成 1:1。

• 单批次建议不超过 12 张，避免浏览器内存压力
• 每张图建议不超过 30 MB、单边不超过 8192 px
• 导出时打包成 ZIP，文件名用 {name}_{index} 避免不同图的切片混在一起

八、常见问题

切完之后每块都很小，上传变糊怎么办？

先确认原图分辨率。要做 3×3，原图至少要有 1800 × 1800 px（每块 600×600）。如果原图只有 1080×1080，每块只有 360×360，上传必然糊。换更高分辨率的原图，或减少分割份数（改 2×2）。

能不能切成 3×3 之后还能拼回原图？

可以，前提是没有缩放和压缩。导出时选择 PNG 无损格式、DPR 1×、不加边距和圆角，九块就能像素级拼回原图。

九宫格用 PNG 还是 JPG？

照片类用 JPG（质量 85 以上）或 WebP，体积小加载快；带文字、插画、纯色块的用 PNG，避免压缩噪点。详见图片格式选择指南。

有没有不用上传图片就能切的方法？

有。刃图 FrameLab 的全部处理都在浏览器本地通过 Canvas 完成，图片数据不经过任何服务器，关闭页面后自动清除。对未公开的素材尤其合适。