theme(shiroko): 人像换成侧后方窗边背影,压白 16% 融入场景

- 盘腿坐的正面人像在空教室里像贴纸:直视访客、没有环境、配色比场景饱和
- 新素材 chibi/window.webp:侧后方视角、双手背在身后望向箱内,抠白底后压白 16%
  与压白 38% 的场景同一雾度;配椭圆接触阴影,脚踩地面不悬空
- 尺寸 380->400px,接触阴影同步复位;静态版本 20261019r
This commit is contained in:
tamakyi
2026-10-20 00:05:01 +08:00
parent b916a7f37a
commit e95671f2fe
5 changed files with 32 additions and 15 deletions
+19 -4
View File
@@ -29,7 +29,7 @@ available = default,sakura,shiroko
| --- | --- | --- |
| 底层 | 教室场景插画(压白 38%、轻度虚化) | `--tb-page-image`,16:9 桌面 / 9:16 移动两张 |
| 中层 | 卡片与顶栏:半透明白 + `backdrop-filter` 磨砂 | `--tb-surface: rgba(255,255,255,.86)` / `--tb-navbar` |
| 上层 | 人物站在场景左侧地面(337px 高)+ 椭圆接触阴影 | `--tb-deco` 前两个槽位 |
| 上层 | 人物站在场景左侧地面(400px 高)+ 椭圆接触阴影 | `--tb-deco` 前两个槽位 |
| 深色 | 不用场景(白天教室压在深底上会脏),回到深色渐变 + 极淡纹样 | 深色块单独覆盖 |
摆位经验(都是踩过的):
@@ -48,11 +48,11 @@ available = default,sakura,shiroko
| 文件 | 用途 | 尺寸 | 体积 |
| --- | --- | --- | --- |
| `chibi/wave.webp` | 挥手 | 324×620 | 27KB |
| `chibi/window.webp` | **当前使用**:侧后方视角、双手背在身后望向箱内,压白 16% | 135×460 | 13KB |
| `chibi/wave.webp` | 备用:正面挥手 | 324×620 | 27KB |
| `chibi/cheer.webp` | 双手欢呼 | 354×620 | 27KB |
| `chibi/think.webp` | 托腮 | 283×620 | 26KB |
| `chibi/doze.webp` | 打瞌睡 | 274×620 | 26KB |
| `chibi/sit.webp` | 盘腿坐 | 321×620 | 29KB |
| `scene-desktop.webp` | 教室场景(16:9,压白 38% + 虚化 1.4px) | 1920×1080 | 22KB |
| `scene-mobile.webp` | 教室场景(9:16 中裁) | 720×1003 | 6KB |
| `pattern-dark.svg` | 深色模式平铺纹样(雪花 + 光环) | 240×240 | 0.7KB |
@@ -62,7 +62,8 @@ available = default,sakura,shiroko
| 素材 | 来源 |
| --- | --- |
| `static/images/shiroko-cutout.png` | **用户自行用 AI 生成**的立绘,仅作生成参考图,不再上页面 |
| `chibi/*.webp` | WorkBuddy ImageGen **以用户立绘为参考图**(image-to-image)生成,再抠白底 |
| `chibi/window.webp` | WorkBuddy ImageGen 生成(文生图 → image-to-image 转平涂),再抠白底 |
| `chibi/wave.webp` 等 | WorkBuddy ImageGen **以用户立绘为参考图**(image-to-image)生成,再抠白底 |
| `scene-desktop.webp` / `scene-mobile.webp` | WorkBuddy ImageGen 生成(提示词见下),未使用任何外部素材 |
| `pattern-dark.svg` | 手写 SVG,纯几何,无外部素材 |
@@ -84,6 +85,19 @@ available = default,sakura,shiroko
- 抠图:从四角 + 四边中点共 8 点做 floodfill(容差 16),再对 alpha 做 1px MinFilter 收边去白边,
裁 bbox 后统一缩放到高 620、WebP q90。
### 当前人像(window.webp)的两步做法
正面立绘站在空教室里像贴纸(无环境、直视访客、饱和度高)。改成**侧后方视角 + 二次转平涂**:
1. 文生图先出姿势与角色:`flat vector chibi, three-quarter back view, hands clasped behind back,
short silver-grey bob, grey wolf ears, pale aqua fish-shaped halo, teal scarf, navy blazer,
grey pleated skirt, black and teal sneakers`(第一版带了教室窗框,背景处理不掉);
2. 再把这张图扔回 image-to-image(`input_fidelity: high`)转成"纯色块、无描边、去掉窗框与场景,
纯白背景",这样既保住姿势,又能拿到和立绘一致的平涂风格;
3. 抠白底后把 RGB 压白 **16%**(`v*(1-k)+255*k`,alpha 不动)——场景本身压白 38%,
人像不压白就是全页对比度最高的一块,必然"突兀";
4. 裁 bbox、缩到高 460,WebP q86(约 13KB)。
关键经验:**必须是"平涂无描边"**。先试过用手写 SVG 线稿,风格和用户那张立绘(色块、无描边)冲突,
而且没有真人手感会画得很抽象;用参考图 + image-to-image 出来的四张,角色特征和画风都稳。
@@ -94,6 +108,7 @@ available = default,sakura,shiroko
1. 加姿态:按上面的提示词骨架换动作句生成,白底 → 抠图 → 存 `chibi/<name>.webp`(高 620),
再塞进 `shiroko.css` 的 `--tb-deco`(记得保持 6 个值,并按上面的摆位原则定位)。
换 `<img>` 时别忘了给 URL 带 `?v=`——图片不走 `StaticVersion` 缓存键,`max-age` 是 1 天。
2. 换立绘:透明 PNG 覆盖 `static/images/shiroko-cutout.png`,再按同一提示词骨架重新生成姿态。
3. 换配色:改 `shiroko.css` 的令牌即可,插画是位图,换色需重新生成。
4. 新增素材不需要改 `static/fs.go`(已嵌整个 `images/themes` 目录);但改了 CSS 必须把