修 shiroko 单车/步枪素材「白色没抠」:白上白只能全白转透明
根因不是抠图参数:素材是白底+白车架,车架涂装与背景白是同一个值(都是 #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 素材表同步
This commit is contained in:
@@ -528,3 +528,26 @@ base.css 还原成 CRLF,插入行要用同一行尾,否则变 MIXED。
|
||||
真实排版没问题 —— 移动端必须用**宽度锁定的 iframe**(生成器那套)验,别据 window-size 结论判 bug。
|
||||
shiroko 的窄屏块(≤900px)只有一条 `html[data-theme-style]`(0,1,1),但它没有任何
|
||||
`[data-page-scope]` 块,所以不会被压住;深色块的 `--tb-page-image` 覆盖窄屏属预期(深色不用实景照)。
|
||||
|
||||
## 19:2x shiroko 单车/步枪「白色没抠」→ 白上白,只能全白转透明
|
||||
|
||||
**根因不是抠图参数**:素材是「白底 + 白车架」。采样确认车架涂装与背景白是同一个值
|
||||
(都在 `#f9f9f9`,差 0~3 级),颜色上完全分不开;四角 floodfill 只吃掉外圈,
|
||||
轮圈内、车架三角、车筐、枪与车架之间的白整块留着 → 看着像没抠。
|
||||
量化:修复前**不透明像素里近白(>240) 占 50%**,全透明只有 43%。
|
||||
|
||||
试过三种程序化方案(都写了脚本):
|
||||
1. 只按「近白厚度」区分白洞/白涂装(腐蚀测厚度)→ **失败**:轮辐间的扇形白楔宽 9~13px,
|
||||
与车架管 5~10px 重叠,阈值怎么调都会留下白色楔子(更难看)。
|
||||
2. 全白转透明(`min(r,g,b)≥238` 软过渡 + 饱和度>14 保留彩色)→ 采用。成果:
|
||||
不透明率 19.4%、近白 0.0%、29KB;轮辐/车架/车筐全成描边,粉色轮圈 + 蓝枪托 + 阴影仍在。
|
||||
3. 手绘 SVG 替换:未做(不如现成素材真实)。
|
||||
|
||||
**代价要记住**:车身填色一起没了,成品是**线稿风**,在 1512 整页里偏淡(远看像铅笔稿)。
|
||||
若用户要「实心车」,唯一正解是重出一张**绿幕/透明背景 + 车身用浅灰蓝等中间调**的素材
|
||||
(白车在浅场景里本来就发飘),已写进 docs/theme-shiroko-assets-spec.md 的「白上白」小节,
|
||||
验收清单也加了「不透明像素近白占比应≈0」这条。
|
||||
|
||||
改动:`props/bike.webp`(397×259 画布不变,位置公式不用动)、css 里图片 `?v=20261020d→20261021a`、
|
||||
`StaticVersion 20261021c→20261021d`、两份 docs 同步。`go test ./internal/theme` 全绿。
|
||||
⚠️ 画布尺寸**不能裁**:裁完 `auto 259px` 的显示宽度变了,`left calc(50% - 612px)` 的锚点会跟着漂。
|
||||
|
||||
@@ -52,3 +52,9 @@
|
||||
删主题只需删文件:`build()` 读不到 css 会打 warning 并忽略,已选该主题的用户静默回退站点默认。
|
||||
`static/images/shiroko-cutout.png` 也一并删除(2026-10-21):它从不进 embed,只是 docs 里的图生图参考图,
|
||||
仓库不存这类大图。
|
||||
- ⚠️ **白上白素材无法用颜色分开**:白底 + 白主体(如自行车)时,车身与背景是同一个白
|
||||
(实测都 `#f9f9f9`),floodfill 只吃外圈,轮圈内/车架三角/车筐整块留下 = 看着"没抠干净"。
|
||||
自检:`不透明像素里近白(>240) 占比`,正常应≈0(修复前 50%)。要么全部转透明(成品变线稿风),
|
||||
要么重出绿幕/透明背景素材。细节见 `docs/theme-shiroko-assets-spec.md` 的「白上白」。
|
||||
- ⚠️ 换 `props/*.webp` 时**不要裁画布**:`--tb-deco-size` 是 `auto 259px`,宽度按原图比例算,
|
||||
裁完锚点 `left calc(50% - 612px)` 会漂;四周透明边留着不影响观感。
|
||||
|
||||
@@ -58,12 +58,20 @@
|
||||
| 地面 | 轮子底线贴画布底部,下方留 12~16px 给接触阴影 |
|
||||
| 阴影 | 可以在图内自带一层椭圆软影(不透明度 15~20%,模糊 8~12px) |
|
||||
| 雾度 | RGB 压白 **26%**(比人物淡一档,它在人身后) |
|
||||
| 背景 | **必须是纯色绿幕或透明**,不要白底(白色车架 + 白底 = 无法分离,见下方“白上白”) |
|
||||
|
||||
要点:
|
||||
|
||||
- 侧视图即可,但不要画成“图标”——轮辐、脚踏、链条这些细节保留,否则缩到 259px 会变成一个圈。
|
||||
- 枪要细长、冷色(灰蓝),**不要木色**(会像双管猎枪)。
|
||||
|
||||
⚠️ **白上白(本项目踩过)**:白底 + 白车架时,车身涂装和背景是同一个白(实测都是 `#f9f9f9`,
|
||||
差 0~3 级),颜色完全分不开;四角 floodfill 只能吃掉外圈,轮圈内、车架三角、车筐里的白会整块留下,
|
||||
看上去就是「没抠干净」。此时的取舍只有两条:
|
||||
1. 把这批白**全部**设为透明 —— 车身填色一起走,成品是**线稿风**(描边 + 粉色轮圈 + 蓝枪托仍在,
|
||||
轮辐、车架、车筐网格都清楚,现有的 `bike.webp` 就是这么做出来的,不透明率 19.4%、剩余近白 0%);
|
||||
2. 重新出一张**绿幕/透明背景**的素材,车身用浅灰蓝等中间调(白车在浅色场景里本来就发飘)。
|
||||
|
||||
## 四、场景 `scene-desktop.webp`
|
||||
|
||||
| 项 | 值 |
|
||||
@@ -113,5 +121,7 @@ left: calc(50% - 612px) bottom 20px;
|
||||
1. **白边**:放大 300% 看轮廓,出现 1px 白色描边就是没抠干净。
|
||||
2. **闭合区域**:手内侧、腿间、环心应能透出背景色。
|
||||
3. **接地**:脚底/轮底离画布底边 ≤ 4px;有阴影时阴影在轮子内侧。
|
||||
4. **体积**:人 ≤40KB、车 ≤40KB、场景 ≤40KB(现在分别是 16 / 23 / 19 KB)。
|
||||
4. **体积**:人 ≤40KB、车 ≤40KB、场景 ≤40KB(现在分别是 15 / 29 / 19 KB)。
|
||||
5. **深色模式**:所有图片在深色下都不显示,不用管。
|
||||
6. **白上白**:车这类「白底 + 白主体」的素材,验收要额外看「不透明像素里近白(>240)的占比」——
|
||||
正常应接近 0;本项目修复前是 **50%**,说明一半的不透明区域其实是背景白。
|
||||
|
||||
@@ -75,7 +75,7 @@ available = default,sakura,shiroko
|
||||
| 文件 | 用途 | 尺寸 | 体积 |
|
||||
| --- | --- | --- | --- |
|
||||
| `chibi/window.webp` | **当前使用**:侧后方视角、双手背在身后望向箱内,压白 16% | 135×460 | 13KB |
|
||||
| `props/bike.webp` | 自行车 + 步枪(镜像后车头朝右),压白 26%,自带接触阴影 | 397×259 | 22KB |
|
||||
| `props/bike.webp` | 自行车 + 步枪(车头朝右),压白 26% 后**只剩描边**(车身白填色已去掉,见下),自带接触阴影 | 397×259 | 29KB |
|
||||
| `chibi/wave.webp` | 备用:正面挥手 | 324×620 | 27KB |
|
||||
| `chibi/cheer.webp` | 双手欢呼 | 354×620 | 27KB |
|
||||
| `chibi/think.webp` | 托腮 | 283×620 | 26KB |
|
||||
|
||||
@@ -10,7 +10,7 @@ var (
|
||||
BuildCommit = "dev"
|
||||
|
||||
// StaticVersion 静态资源缓存版本号:base.css 与主题 css 共用,改样式只改这一处。
|
||||
StaticVersion = "20261021c"
|
||||
StaticVersion = "20261021d"
|
||||
)
|
||||
|
||||
// 文本审核通道取值([security] text_censor_source)。定义在 conf 侧,
|
||||
|
||||
@@ -46,7 +46,7 @@ html[data-theme-style="shiroko"] {
|
||||
其余 3 个槽位是"空气"(纯渐变):4 左窗光柱 / 5 地面光斑 / 6 底部轻压深。 */
|
||||
--tb-deco: url("/static/images/themes/shiroko/chibi/window.webp?v=20261020d"),
|
||||
radial-gradient(ellipse at center, rgba(63, 96, 138, 0.18) 0%, rgba(63, 96, 138, 0) 72%),
|
||||
url("/static/images/themes/shiroko/props/bike.webp?v=20261020d"),
|
||||
url("/static/images/themes/shiroko/props/bike.webp?v=20261021a"),
|
||||
linear-gradient(112deg, rgba(255, 250, 236, 0.50) 0%, rgba(255, 250, 236, 0.22) 20%, rgba(255, 250, 236, 0) 44%),
|
||||
radial-gradient(ellipse 560px 170px at 28% 94%, rgba(255, 248, 228, 0.80) 0%, rgba(255, 248, 228, 0) 72%),
|
||||
linear-gradient(0deg, rgba(110, 128, 156, 0.10) 0%, rgba(110, 128, 156, 0) 24%),
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 30 KiB |
Reference in New Issue
Block a user