tamakyi
34a262091b
根因不是抠图参数：素材是白底+白车架，车架涂装与背景白是同一个值（都是 #f9f9f9）， 颜色上无法分离。四角 floodfill 只吃掉外圈，轮圈内、车架三角、车筐、枪与车架之间的白整块留着， 量化就是不透明像素里近白(>240) 占 50%。 - 处置：min(r,g,b)≥238 软过渡 + 饱和度>14 保留彩色 → 白全透明。近白降到 0.0%， 不透明率 19.4%，29KB；轮辐/车架/车筐成为描边，粉轮圈、蓝枪托、接触阴影保留 - 试过「按近白厚度区分白洞与白涂装」（腐蚀测厚度）→ 失败：轮辐间扇形白楔 9~13px 与车架管 5~10px 重叠，阈值怎么调都会留白楔，比原图更难看 - 画布保持 397×259 不裁：deco-size 是 auto 259px，宽度按比例算，裁了锚点会漂 - css 图片 ?v= → 20261021a；StaticVersion 20261021c → 20261021d（css 内容变了必须换缓存键） - docs：assets-spec 补「白上白」取舍与验收项「不透明像素近白占比≈0」，theme-shiroko 素材表同步
128 lines
6.7 KiB
Markdown
128 lines
6.7 KiB
Markdown
# 主题素材规格（shiroko）
|
||
|
||
给外部生成工具用的参数表。照着填尺寸/比例/雾度，导出后按「换图清单」替换即可。
|
||
所有尺寸都按 **2× 出图、1× 显示** 写，避免高分屏发虚。
|
||
|
||
## 一、总表
|
||
|
||
| 文件 | 用途 | 画布（生成） | 画布（导出） | 显示尺寸 | 透明 | 体积上限 |
|
||
| --- | --- | --- | --- | --- | --- | --- |
|
||
| `chibi/window.webp` | 人物 | 270 × 920 | 135 × 460 | 高 400px（宽 ≈117） | ✅ 需要 | 40 KB |
|
||
| `props/bike.webp` | 自行车 + 步枪 | 794 × 518 | 397 × 259 | 高 259px（宽 ≈397） | ✅ 需要 | 40 KB |
|
||
| `scene-desktop.webp` | 教室背景（桌面） | 3840 × 2160 | 1920 × 1080 | `cover` 铺满 | ❌ 不需要 | 40 KB |
|
||
| `scene-mobile.webp` | 教室背景（≤900px） | 1440 × 2006 | 720 × 1003 | `cover` 铺满 | ❌ 不需要 | 30 KB |
|
||
| `pattern-dark.svg` | 深色模式平铺纹样 | 240 × 240 | 240 × 240 | 平铺 | ❌ | 2 KB |
|
||
|
||
比例（认准这个，比像素更重要）：
|
||
|
||
- 人物 **1 : 3.41**（宽 : 高 ≈ 0.293）
|
||
- 道具 **1.53 : 1**（397 : 259）
|
||
- 桌面背景 **16 : 9**
|
||
- 移动背景 **0.718 : 1**（≈ 9 : 12.5）
|
||
|
||
## 二、人物 `chibi/window.webp`
|
||
|
||
| 项 | 值 |
|
||
| --- | --- |
|
||
| 画布 | 270 × 920 px，透明背景 |
|
||
| 姿势 | 侧后方 3/4 视角、双手背在身后、头略向右（**不要正面直视**） |
|
||
| 脚底 | **贴画布底边**（误差 ±4px），不要留空白 |
|
||
| 头顶 | 贴画布上沿；若画光环，环心必须透明 |
|
||
| 左右余量 | 各留 10~20px，别让手臂被画布裁掉 |
|
||
| 雾度 | RGB 压白 **16%**：`v' = v×(1-0.16) + 255×0.16` |
|
||
| 色彩 | 下表是**压白 16% 之后**的显示值，生成时按 `原色 = (显示值 − 40.8) / 0.84` 反算 |
|
||
|
||
| 部位 | 显示值 | 生成时用 |
|
||
| --- | --- | --- |
|
||
| 头发 | `#c4c3c6` | `#b9b8bb` |
|
||
| 围巾 | `#8abbc6`（青绿，别用纯蓝） | `#8fc1c9` |
|
||
| 西装 / 上衣 | `#565e72` | `#3a4256` |
|
||
| 鞋 | `#4f4f4f` | `#3f3f3f` |
|
||
| 袜 | `#ffffff` | **用 `#ededed`**（纯白会和背景粘在一起，抠图会吃穿） |
|
||
| 光环 | `#8abbc6` 细环 | `#7fd3dc` |
|
||
|
||
要点：
|
||
|
||
- **不能有描边**。平涂色块、无 line art、无渐变。
|
||
- 抠图后检查三处必须透明：**手与背之间**、**两腿之间**、**光环环心**。
|
||
这三处是闭合区域，只从四角抹白是抹不掉的（我们踩过）。
|
||
- 白袜子是 `#ededed` 左右，背景是 `#fdfdfd`，两者只差 16 级——抠图时**不要把阈值开大**，否则袜子会被吃穿。
|
||
|
||
## 三、道具 `props/bike.webp`
|
||
|
||
| 项 | 值 |
|
||
| --- | --- |
|
||
| 画布 | 794 × 518 px，透明背景 |
|
||
| 内容 | 银色／白色城市自行车 + 一把细长步枪斜靠车架 |
|
||
| 朝向 | **车头朝右**（和人物同向） |
|
||
| 地面 | 轮子底线贴画布底部，下方留 12~16px 给接触阴影 |
|
||
| 阴影 | 可以在图内自带一层椭圆软影（不透明度 15~20%，模糊 8~12px） |
|
||
| 雾度 | RGB 压白 **26%**（比人物淡一档，它在人身后） |
|
||
| 背景 | **必须是纯色绿幕或透明**，不要白底（白色车架 + 白底 = 无法分离，见下方“白上白”） |
|
||
|
||
要点：
|
||
|
||
- 侧视图即可，但不要画成“图标”——轮辐、脚踏、链条这些细节保留，否则缩到 259px 会变成一个圈。
|
||
- 枪要细长、冷色（灰蓝），**不要木色**（会像双管猎枪）。
|
||
|
||
⚠️ **白上白（本项目踩过）**：白底 + 白车架时，车身涂装和背景是同一个白（实测都是 `#f9f9f9`，
|
||
差 0~3 级），颜色完全分不开；四角 floodfill 只能吃掉外圈，轮圈内、车架三角、车筐里的白会整块留下，
|
||
看上去就是「没抠干净」。此时的取舍只有两条：
|
||
1. 把这批白**全部**设为透明 —— 车身填色一起走，成品是**线稿风**（描边 + 粉色轮圈 + 蓝枪托仍在，
|
||
轮辐、车架、车筐网格都清楚，现有的 `bike.webp` 就是这么做出来的，不透明率 19.4%、剩余近白 0%）；
|
||
2. 重新出一张**绿幕/透明背景**的素材，车身用浅灰蓝等中间调（白车在浅色场景里本来就发飘）。
|
||
|
||
## 四、场景 `scene-desktop.webp`
|
||
|
||
| 项 | 值 |
|
||
| --- | --- |
|
||
| 画布 | 3840 × 2160（16:9），不透明 |
|
||
| 导出 | 1920 × 1080，WebP q82 |
|
||
| 色调 | 灰蓝／暖白，均值亮度 **235~245**，标准差 6~9（几乎是白雾） |
|
||
| 处理 | 整体压白 30~38%，高斯模糊 1.2~1.4px |
|
||
|
||
**构图硬约束（这条最容易翻车）：**
|
||
|
||
1. **左侧 0~22% 的前景必须是空地（地板）**，不能有课桌、椅子、书包。
|
||
人物是贴在最上层的独立图层，脚下必须有地面，否则会读成“站在课桌上”。
|
||
2. 课桌、椅子、黑板放在**中部偏右**，因为中间会被卡片完全盖住。
|
||
3. **不要有必须完整露出的元素**（`background-size: cover` 会按视口裁两侧，1080 高的屏裁掉约 5%）。
|
||
4. 不要出现人、文字、水印。自行车也不要画进背景——它要跟着人物一起移动。
|
||
5. 玻璃／窗框这类高频细节会干扰卡片可读性，右侧留白区尽量干净。
|
||
|
||
## 五、换图清单
|
||
|
||
1. 覆盖同名文件（格式 `WebP`，有透明的存 `q88`，场景存 `q82`）。
|
||
2. `static/css/themes/shiroko.css`：
|
||
- 若**显示尺寸不变**：只改三处 URL 的 `?v=`（图片不走 `StaticVersion`，缓存 1 天）。
|
||
- 若显示尺寸变了：改 `--tb-deco-size` 的 `auto 400px`（人） / `auto 259px`（车）。
|
||
3. `internal/conf/static.go` 的 `StaticVersion` +1（CSS 改了必须）。
|
||
4. 重新编译部署（静态资源是编译期 embed，只重启不重编不会变）。
|
||
|
||
### 定位公式（改比例时才需要算）
|
||
|
||
`background-position` 的百分比是相对 **(定位区宽 − 图片宽)**，不是视口宽：
|
||
|
||
```
|
||
实际 left = (视口宽 - 显示宽) × (pos%） + 偏移量
|
||
```
|
||
|
||
当前值（视口 1512 时：人物左沿 173px、车左沿 -55px，两者重叠区由人物遮住）：
|
||
|
||
```css
|
||
/* 人物：显示高 400，显示宽 = 400 × 0.293 ≈ 117 */
|
||
left: max(10px, calc(50% - 524px)) bottom 36px;
|
||
/* 车：显示高 259，显示宽 ≈ 397 */
|
||
left: calc(50% - 612px) bottom 20px;
|
||
```
|
||
|
||
## 六、验收（不看代码也能查）
|
||
|
||
1. **白边**：放大 300% 看轮廓，出现 1px 白色描边就是没抠干净。
|
||
2. **闭合区域**：手内侧、腿间、环心应能透出背景色。
|
||
3. **接地**：脚底／轮底离画布底边 ≤ 4px；有阴影时阴影在轮子内侧。
|
||
4. **体积**：人 ≤40KB、车 ≤40KB、场景 ≤40KB（现在分别是 15 / 29 / 19 KB）。
|
||
5. **深色模式**：所有图片在深色下都不显示，不用管。
|
||
6. **白上白**：车这类「白底 + 白主体」的素材，验收要额外看「不透明像素里近白（>240）的占比」——
|
||
正常应接近 0；本项目修复前是 **50%**，说明一半的不透明区域其实是背景白。
|