# 图片如何变成文件夹图标

每款皮肤都是一张图片：可能是你添加的，可能是 AI 模型画的，也可能来自社区皮肤包。FolderSkin 会用两种方式之一把它变成文件夹图标，而一张单独看很好看的图片，放到文件夹上也可能效果不佳。本页介绍 FolderSkin 如何判断用哪种方式、文件夹会对图片做什么，以及在把图片分享到皮肤包之前如何检查它（见 [PACKS.md](https://folderskin.app/zh-cn/docs/packs/)）。

如果你想让 AI 智能体代劳，[.claude/skills/folderskin-skins/SKILL.md](https://github.com/prajwal-svm/folderskin/blob/main/.claude/skills/folderskin-skins/SKILL.md) 会一步步引导 Claude Code 做出一个皮肤包。

## 图案还是成品文件夹

FolderSkin 会看图片周围是什么：

- **成品文件夹**放在真正的透明背景上，或者纯品红 `#FF00FF` 背景上。品红会被抠掉，图片会裁到文件夹的边缘，然后原样成为图标：等比缩放到适合图标的大小并居中，绝不裁切。用 [PROMPTS.md](https://folderskin.app/zh-cn/docs/prompts/) 里的提示词，图像模型画出来的就是这种。
- **其他一切都算图案**：照片、画作、花纹都是。FolderSkin 会把它包裹到自己的文件夹模板上，所以它和其他所有皮肤一样，有相同的页签、纸张和轮廓。

品红必须是纯 `#FF00FF` 或者非常接近它，所以在品红色纸上拍的产品照，或者一片艳粉色的晚霞，仍然会被当作图案处理。确切的规则见 [ARCHITECTURE.md](https://github.com/prajwal-svm/folderskin/blob/main/docs/ARCHITECTURE.md#artwork-or-a-finished-folder)（英文）。本页余下的内容都是关于图案的。

## 安全区域

合成器会把同一张图片按铺满方式缩放，分别放进 1024 × 1024 图标画布上的两个矩形里（相关常量见 [crates/folderskin-core/src/geometry.rs](https://github.com/prajwal-svm/folderskin/blob/main/crates/folderskin-core/src/geometry.rs)）：

- **后面板**：带页签的那部分，纵向范围是 y 36.5 到 973.5。它的宽高比和 1024 × 958 的图片非常接近，所以这里会显示图片的**完整高度**，左右两侧各裁掉约 18 px（1.8%）。
- **前面板**：盖住纸张的那一块，纵向范围是 y 160.5 到 973.5，圆角半径 55 px。它比图片更扁（宽高比更大），所以图片会按面板的宽度缩放，只保留中间约 87% 的高度：顶部大约裁掉 6%，底部也裁掉差不多同样多。

下面按 1024 × 958 图片的横向条带来说明（同样比例、不同尺寸的图片按比例换算即可）。条带之间有重叠，因为两块面板显示的是同一张图片中相互重叠的部分：后面板显示完整高度，前面板显示中间部分。

| 行（共 958 行） | 占高度的比例 | 最终落在哪里 |
|---|---|---|
| 0 – 62 | 顶部 6.5% | 页签里 |
| 62 – 127 | 接下来的 6.7% | 前面板上方、纸张旁边的那一条后面板 |
| 60 – 898 | 中间约 87% | 前面板，也就是大家真正会看的部分 |
| 898 – 958 | 底部 6.3% | 被裁掉 |

由此得出两条规则：

1. **顶部 12% 不要放重要内容**。这些行是页签和前面板上方那一细条。放在那里的人脸、地平线或标志，会被纸张切成两半。
2. **主体放在中间**。前面板会从顶部和底部各去掉约 60 px，而且在 1024 px 下四角有 55 px 的圆角，所以边角处的细节在小尺寸图标里反正也看不见。

平面和抽象的画作怎么处理都没问题，不用多想。主体明确的照片，则需要让主体落在中间那条带里。FolderSkin 总是让图案居中，所以如果主体偏上或偏下，请在添加图片或放进皮肤包之前，自己先裁好。

`folderskin-tools guide` 可以画出这些条带：

```sh
cargo run -p folderskin-tools -- guide --out /tmp/guide.png
```

它会生成一张 1024 × 958 的模板，上面标出了页签、纸边、前面板，以及前面板会裁掉的行。在图片编辑器里把它作为一个图层叠在你的图片上即可。

## 检查图片

`render` 会用和应用相同的代码，把任意图片画成应用会生成的文件夹，并告诉你它属于两类中的哪一类：

```sh
cargo run -p folderskin-tools -- render ~/Pictures/koi.webp --out /tmp/koi.png --size 512
# wrote /tmp/koi.png (512×512): artwork on FolderSkin's folder
```

分享图片之前，先看看结果。`--focus x,y` 可以移动图案的裁切位置，能快速看出换一种裁法会保留多少画面。不过应用本身总是围绕中心裁切，所以想要的裁切效果要直接做进图片里。`render --solid RRGGBB` 会用一种纯色画出模板，方便查看模板本身。

## 皮肤包里的图片

皮肤包里的图片以无损方式分享，所以皮肤包看起来和你做的一模一样。各项限制见 [PACKS.md](https://folderskin.app/zh-cn/docs/packs/)：每边最多 1024 px（三个系统中最大的图标尺寸），最少 256 px，每张最大 1.5 MB，整个皮肤包最多 64 MB。应用和 `packs make` 会替你把每张图片缩小，并编码为无损 WebP：

| 图片 | 格式 | 原因 |
|---|---|---|
| 成品文件夹 | 无损 WebP，保留透明度 | 每个像素都和画出来时一样，连边缘也不例外，体积约为 PNG 的三分之二 |
| 图案：照片、画作、渐变、颗粒质感 | 无损 WebP | 没有色块和振铃伪影，一张细节丰富的 1024 px 图片约 800 KB |
| 以上任意一种，细节太多，在 1024 px 下超过 1.5 MB | 无损 WebP，先缩到 896 px，还不行再缩到 768 px | 宁可缩小也不弄糊，应用会告诉你是哪几张 |

如果手动编码，用 PNG 也可以，`cwebp -lossless -z 9` 也行。新皮肤包不接受 JPEG 和有损 WebP：社区服务会拒绝，`packs check --require-lossless` 也会拒绝。图案不需要保留透明度，因为文件夹的形状由模板提供。1024 × 958 的图案被裁掉的部分最少，不过任何尺寸都能用。

同一个皮肤包里的成品文件夹会统一成同一种形状，所以并排摆放时大小一致。`packs make` 和社区的拉取流程会按这些文件夹形状的中位数重绘它们，偏差太大的文件夹则交给人来决定（见 [PACKS.md](https://folderskin.app/zh-cn/docs/packs/#一个皮肤包一种文件夹形状)）。

## 许可协议

只分享你自己做的、或者你有权分享的图片，并使用皮肤包可选的许可协议之一（见 [PACKS.md](https://folderskin.app/zh-cn/docs/packs/#许可协议)）。其他任何图片，比如图库照片、壁纸、别人作品的截图，或者你没读过使用条款的模型生成结果，都请留在你自己的电脑上：拖进应用就能在本地使用，它们永远不会离开你的电脑。