theme(shiroko): 人像换成侧后方窗边背影,压白 16% 融入场景
- 盘腿坐的正面人像在空教室里像贴纸:直视访客、没有环境、配色比场景饱和 - 新素材 chibi/window.webp:侧后方视角、双手背在身后望向箱内,抠白底后压白 16% 与压白 38% 的场景同一雾度;配椭圆接触阴影,脚踩地面不悬空 - 尺寸 380->400px,接触阴影同步复位;静态版本 20261019r
This commit is contained in:
+19
-4
@@ -29,7 +29,7 @@ available = default,sakura,shiroko
|
|||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
| 底层 | 教室场景插画(压白 38%、轻度虚化) | `--tb-page-image`,16:9 桌面 / 9:16 移动两张 |
|
| 底层 | 教室场景插画(压白 38%、轻度虚化) | `--tb-page-image`,16:9 桌面 / 9:16 移动两张 |
|
||||||
| 中层 | 卡片与顶栏:半透明白 + `backdrop-filter` 磨砂 | `--tb-surface: rgba(255,255,255,.86)` / `--tb-navbar` |
|
| 中层 | 卡片与顶栏:半透明白 + `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/cheer.webp` | 双手欢呼 | 354×620 | 27KB |
|
||||||
| `chibi/think.webp` | 托腮 | 283×620 | 26KB |
|
| `chibi/think.webp` | 托腮 | 283×620 | 26KB |
|
||||||
| `chibi/doze.webp` | 打瞌睡 | 274×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-desktop.webp` | 教室场景(16:9,压白 38% + 虚化 1.4px) | 1920×1080 | 22KB |
|
||||||
| `scene-mobile.webp` | 教室场景(9:16 中裁) | 720×1003 | 6KB |
|
| `scene-mobile.webp` | 教室场景(9:16 中裁) | 720×1003 | 6KB |
|
||||||
| `pattern-dark.svg` | 深色模式平铺纹样(雪花 + 光环) | 240×240 | 0.7KB |
|
| `pattern-dark.svg` | 深色模式平铺纹样(雪花 + 光环) | 240×240 | 0.7KB |
|
||||||
@@ -62,7 +62,8 @@ available = default,sakura,shiroko
|
|||||||
| 素材 | 来源 |
|
| 素材 | 来源 |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| `static/images/shiroko-cutout.png` | **用户自行用 AI 生成**的立绘,仅作生成参考图,不再上页面 |
|
| `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 生成(提示词见下),未使用任何外部素材 |
|
| `scene-desktop.webp` / `scene-mobile.webp` | WorkBuddy ImageGen 生成(提示词见下),未使用任何外部素材 |
|
||||||
| `pattern-dark.svg` | 手写 SVG,纯几何,无外部素材 |
|
| `pattern-dark.svg` | 手写 SVG,纯几何,无外部素材 |
|
||||||
|
|
||||||
@@ -84,6 +85,19 @@ available = default,sakura,shiroko
|
|||||||
- 抠图:从四角 + 四边中点共 8 点做 floodfill(容差 16),再对 alpha 做 1px MinFilter 收边去白边,
|
- 抠图:从四角 + 四边中点共 8 点做 floodfill(容差 16),再对 alpha 做 1px MinFilter 收边去白边,
|
||||||
裁 bbox 后统一缩放到高 620、WebP q90。
|
裁 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 线稿,风格和用户那张立绘(色块、无描边)冲突,
|
关键经验:**必须是"平涂无描边"**。先试过用手写 SVG 线稿,风格和用户那张立绘(色块、无描边)冲突,
|
||||||
而且没有真人手感会画得很抽象;用参考图 + image-to-image 出来的四张,角色特征和画风都稳。
|
而且没有真人手感会画得很抽象;用参考图 + image-to-image 出来的四张,角色特征和画风都稳。
|
||||||
|
|
||||||
@@ -94,6 +108,7 @@ available = default,sakura,shiroko
|
|||||||
|
|
||||||
1. 加姿态:按上面的提示词骨架换动作句生成,白底 → 抠图 → 存 `chibi/<name>.webp`(高 620),
|
1. 加姿态:按上面的提示词骨架换动作句生成,白底 → 抠图 → 存 `chibi/<name>.webp`(高 620),
|
||||||
再塞进 `shiroko.css` 的 `--tb-deco`(记得保持 6 个值,并按上面的摆位原则定位)。
|
再塞进 `shiroko.css` 的 `--tb-deco`(记得保持 6 个值,并按上面的摆位原则定位)。
|
||||||
|
换 `<img>` 时别忘了给 URL 带 `?v=`——图片不走 `StaticVersion` 缓存键,`max-age` 是 1 天。
|
||||||
2. 换立绘:透明 PNG 覆盖 `static/images/shiroko-cutout.png`,再按同一提示词骨架重新生成姿态。
|
2. 换立绘:透明 PNG 覆盖 `static/images/shiroko-cutout.png`,再按同一提示词骨架重新生成姿态。
|
||||||
3. 换配色:改 `shiroko.css` 的令牌即可,插画是位图,换色需重新生成。
|
3. 换配色:改 `shiroko.css` 的令牌即可,插画是位图,换色需重新生成。
|
||||||
4. 新增素材不需要改 `static/fs.go`(已嵌整个 `images/themes` 目录);但改了 CSS 必须把
|
4. 新增素材不需要改 `static/fs.go`(已嵌整个 `images/themes` 目录);但改了 CSS 必须把
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ var (
|
|||||||
BuildCommit = "dev"
|
BuildCommit = "dev"
|
||||||
|
|
||||||
// StaticVersion 静态资源缓存版本号:base.css 与主题 css 共用,改样式只改这一处。
|
// StaticVersion 静态资源缓存版本号:base.css 与主题 css 共用,改样式只改这一处。
|
||||||
StaticVersion = "20261019q"
|
StaticVersion = "20261019r"
|
||||||
)
|
)
|
||||||
|
|
||||||
// 文本审核通道取值([security] text_censor_source)。定义在 conf 侧,
|
// 文本审核通道取值([security] text_censor_source)。定义在 conf 侧,
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
|
|
||||||
素材(static/images/themes/shiroko/):
|
素材(static/images/themes/shiroko/):
|
||||||
- scene-desktop.webp / scene-mobile.webp 教室场景(16:9 / 9:16,已压白与轻度虚化)
|
- scene-desktop.webp / scene-mobile.webp 教室场景(16:9 / 9:16,已压白与轻度虚化)
|
||||||
- chibi/*.webp Q 版人物(wave/cheer/think/doze/sit),以用户立绘为参考图生成 + 抠白底
|
- chibi/window.webp 人物(侧后方视角、双手背在身后,已抠白底并压白 16%)
|
||||||
- pattern.svg / pattern-dark.svg 雪花 + 光环的极淡平铺纹样(深色模式用)
|
- pattern.svg / pattern-dark.svg 雪花 + 光环的极淡平铺纹样(深色模式用)
|
||||||
来源、提示词与处理参数见 docs/theme-shiroko.md。 */
|
来源、提示词与处理参数见 docs/theme-shiroko.md。 */
|
||||||
html[data-theme-style="shiroko"] {
|
html[data-theme-style="shiroko"] {
|
||||||
@@ -30,19 +30,21 @@ html[data-theme-style="shiroko"] {
|
|||||||
--tb-shadow-hover: 0 1px 2px rgba(38, 56, 82, 0.07), 0 24px 56px -24px rgba(38, 56, 82, 0.38);
|
--tb-shadow-hover: 0 1px 2px rgba(38, 56, 82, 0.07), 0 24px 56px -24px rgba(38, 56, 82, 0.38);
|
||||||
|
|
||||||
/* 整页场景:一张教室插画,cover 铺满;不再叠纹样(纹样压在实景上会变成噪点) */
|
/* 整页场景:一张教室插画,cover 铺满;不再叠纹样(纹样压在实景上会变成噪点) */
|
||||||
--tb-page-image: url("/static/images/themes/shiroko/scene-desktop.webp?v=20261019q");
|
--tb-page-image: url("/static/images/themes/shiroko/scene-desktop.webp?v=20261019r");
|
||||||
--tb-page-pattern: none;
|
--tb-page-pattern: none;
|
||||||
|
|
||||||
/* 人物站在场景左侧地面:离底边 36px,配一层椭圆接触阴影,避免悬空 */
|
/* 人物:侧后方视角、双手背在身后望向箱内(不是正面盯着访客),
|
||||||
--tb-deco: url("/static/images/themes/shiroko/chibi/sit.webp"),
|
站在场景左侧地面,离底边 36px,配一层椭圆接触阴影,避免悬空。
|
||||||
radial-gradient(ellipse at center, rgba(63, 96, 138, 0.20) 0%, rgba(63, 96, 138, 0) 72%),
|
图已压白 12%,与压白 38% 的场景同一"雾度",避免变成高对比贴纸。 */
|
||||||
|
--tb-deco: url("/static/images/themes/shiroko/chibi/window.webp?v=20261019r"),
|
||||||
|
radial-gradient(ellipse at center, rgba(63, 96, 138, 0.18) 0%, rgba(63, 96, 138, 0) 72%),
|
||||||
none,
|
none,
|
||||||
none,
|
none,
|
||||||
none,
|
none,
|
||||||
none;
|
none;
|
||||||
--tb-deco-size: auto 340px, 120px 14px, auto, auto, auto, auto;
|
--tb-deco-size: auto 400px, 96px 13px, auto, auto, auto, auto;
|
||||||
--tb-deco-position: left max(6px, calc(50% - 520px)) bottom 36px,
|
--tb-deco-position: left max(10px, calc(50% - 524px)) bottom 36px,
|
||||||
left max(6px, calc(50% - 492px)) bottom 29px, left top, left top, left top, left top;
|
left max(22px, calc(50% - 512px)) bottom 29px, left top, left top, left top, left top;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme="dark"][data-theme-style="shiroko"] {
|
html[data-theme="dark"][data-theme-style="shiroko"] {
|
||||||
@@ -65,7 +67,7 @@ html[data-theme="dark"][data-theme-style="shiroko"] {
|
|||||||
|
|
||||||
/* 深色不用浅色场景(白天教室压在深底上会很脏),回到纯色渐变 + 极淡纹样 */
|
/* 深色不用浅色场景(白天教室压在深底上会很脏),回到纯色渐变 + 极淡纹样 */
|
||||||
--tb-page-image: linear-gradient(180deg, #161d26 0%, #141a22 60%, #11161d 100%);
|
--tb-page-image: linear-gradient(180deg, #161d26 0%, #141a22 60%, #11161d 100%);
|
||||||
--tb-page-pattern: url("/static/images/themes/shiroko/pattern-dark.svg?v=20261019q");
|
--tb-page-pattern: url("/static/images/themes/shiroko/pattern-dark.svg?v=20261019r");
|
||||||
--tb-page-pattern-size: 340px 340px;
|
--tb-page-pattern-size: 340px 340px;
|
||||||
--tb-deco: none, none, none, none, none, none;
|
--tb-deco: none, none, none, none, none, none;
|
||||||
--tb-deco-size: auto, auto, auto, auto, auto, auto;
|
--tb-deco-size: auto, auto, auto, auto, auto, auto;
|
||||||
@@ -75,7 +77,7 @@ html[data-theme="dark"][data-theme-style="shiroko"] {
|
|||||||
/* 窄屏:卡片占满宽度,两侧没有视觉空间 —— 换成竖版场景,人物退场 */
|
/* 窄屏:卡片占满宽度,两侧没有视觉空间 —— 换成竖版场景,人物退场 */
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
html[data-theme-style="shiroko"] {
|
html[data-theme-style="shiroko"] {
|
||||||
--tb-page-image: url("/static/images/themes/shiroko/scene-mobile.webp?v=20261019q");
|
--tb-page-image: url("/static/images/themes/shiroko/scene-mobile.webp?v=20261019r");
|
||||||
--tb-surface: rgba(255, 255, 255, 0.92);
|
--tb-surface: rgba(255, 255, 255, 0.92);
|
||||||
--tb-deco: none, none, none, none, none, none;
|
--tb-deco: none, none, none, none, none, none;
|
||||||
--tb-deco-size: auto, auto, auto, auto, auto, auto;
|
--tb-deco-size: auto, auto, auto, auto, auto, auto;
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Reference in New Issue
Block a user