281 lines
10 KiB
Markdown
281 lines
10 KiB
Markdown
# 暗金荒野主题资产切片研究
|
||
|
||
生成时间：2026-07-17T16:41:28+08:00
|
||
|
||
## 输入资产
|
||
|
||
- 背景图：`sessions/_attachments/094d7907-875d-41f4-9985-992c87c9b9cc.webp`
|
||
- 图标板：`sessions/_attachments/43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp`
|
||
- 完整界面参考：`sessions/_attachments/f01c1388-b603-434a-b226-2ff5771d4925.webp`
|
||
|
||
三张图尺寸均为 `1672x941`，格式为 RGB WebP，无 alpha 通道。
|
||
|
||
坐标约定：本文所有裁剪框均使用 `[x, y, w, h]`，其中 `x+w` / `y+h` 是右边界 / 下边界的排他坐标。由于源图是有损 WebP，边缘估算建议按 `±3px` 处理；真正导出时可再外扩 `2-4px` 做抗锯齿和阴影保留。
|
||
|
||
## 背景图定位与遮罩建议
|
||
|
||
### 视觉结构
|
||
|
||
- 左侧 `x=0-740` 是较干净的暗色烟雾区，适合承载侧边栏、搜索框、会话列表和中左侧主内容。
|
||
- 右侧 `x=920-1560, y=80-760` 是人物、法阵和权杖主体，视觉权重高，不适合直接压大段正文。
|
||
- 下方 `y=780-941` 有烟尘、碎石和暗部，可放输入框，但输入框自身需要较实的半透明面板。
|
||
- 背景平均亮度很低，左侧安全区采样亮度约 `22/255`，右侧人物区约 `38/255`；遮罩目标不是继续压暗整图，而是稳定文本和边框对比。
|
||
|
||
### 推荐 CSS
|
||
|
||
桌面端推荐保留人物在右中部，同时让左侧和主聊天区域更稳：
|
||
|
||
```css
|
||
.theme-gilded-wasteland {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
color: var(--gilded-text);
|
||
background-color: #050707;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.theme-gilded-wasteland::before {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: -2;
|
||
background-image: url("/assets/theme/gilded-wasteland/background.webp");
|
||
background-size: cover;
|
||
background-position: 62% 50%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.theme-gilded-wasteland::after {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: -1;
|
||
pointer-events: none;
|
||
background:
|
||
linear-gradient(
|
||
90deg,
|
||
rgba(4, 6, 6, 0.94) 0%,
|
||
rgba(4, 6, 6, 0.86) 18%,
|
||
rgba(4, 6, 6, 0.58) 48%,
|
||
rgba(4, 6, 6, 0.30) 70%,
|
||
rgba(4, 6, 6, 0.62) 100%
|
||
),
|
||
linear-gradient(
|
||
180deg,
|
||
rgba(0, 0, 0, 0.40) 0%,
|
||
rgba(0, 0, 0, 0.08) 24%,
|
||
rgba(0, 0, 0, 0.16) 70%,
|
||
rgba(0, 0, 0, 0.70) 100%
|
||
),
|
||
radial-gradient(
|
||
ellipse at 74% 34%,
|
||
rgba(216, 168, 92, 0.12) 0%,
|
||
rgba(216, 168, 92, 0.04) 22%,
|
||
transparent 42%
|
||
);
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.theme-gilded-wasteland::before {
|
||
background-position: 70% 50%;
|
||
}
|
||
|
||
.theme-gilded-wasteland::after {
|
||
background:
|
||
linear-gradient(90deg, rgba(4, 6, 6, 0.92), rgba(4, 6, 6, 0.76)),
|
||
linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.72));
|
||
}
|
||
}
|
||
```
|
||
|
||
### 定位取值
|
||
|
||
- 常规桌面：`background-position: 62% 50%`，人物仍在右侧，左中区域更可读。
|
||
- 参考图同尺寸复刻：`background-position: center center` 也可用，因为参考图本身没有裁切。
|
||
- 侧边栏更宽或主面板偏左时：可调到 `64% 50%`，避免人物头部过早进入主消息卡片。
|
||
- 移动端：建议 `70% 50%` 并提高遮罩不透明度，优先保证内容可读。
|
||
|
||
## 图标板网格边界
|
||
|
||
图标板不是透明 sprite，而是「暗色背景 + 金色边框 + 标题 + 三规格图标 + 尺寸标签」的展示板。建议把它作为切片源，不要直接拿整板做 CSS sprite。
|
||
|
||
### 列边界
|
||
|
||
| 列 | x0 | x1 | 宽度 |
|
||
| --- | ---: | ---: | ---: |
|
||
| C1 | 50 | 295 | 245 |
|
||
| C2 | 315 | 562 | 247 |
|
||
| C3 | 582 | 829 | 247 |
|
||
| C4 | 846 | 1092 | 246 |
|
||
| C5 | 1111 | 1358 | 247 |
|
||
| C6 | 1377 | 1621 | 244 |
|
||
|
||
### 行边界
|
||
|
||
| 行 | y0 | y1 | 高度 |
|
||
| --- | ---: | ---: | ---: |
|
||
| R1 | 50 | 187 | 137 |
|
||
| R2 | 201 | 339 | 138 |
|
||
| R3 | 354 | 490 | 136 |
|
||
| R4 | 506 | 641 | 135 |
|
||
| R5 | 655 | 786 | 131 |
|
||
| R6 | 798 | 927 | 129 |
|
||
|
||
### 卡片矩阵
|
||
|
||
| 卡片 | 名称 | 整卡裁剪框 `[x,y,w,h]` |
|
||
| --- | --- | --- |
|
||
| R1C1 | new chat | `[50,50,245,137]` |
|
||
| R1C2 | dropdown | `[315,50,247,137]` |
|
||
| R1C3 | search | `[582,50,247,137]` |
|
||
| R1C4 | shortcut | `[846,50,246,137]` |
|
||
| R1C5 | collapse / expand | `[1111,50,247,137]` |
|
||
| R1C6 | add (circle) | `[1377,50,244,137]` |
|
||
| R2C1 | theme / star | `[50,201,245,138]` |
|
||
| R2C2 | ai swirl | `[315,201,247,138]` |
|
||
| R2C3 | status (online) | `[582,201,247,138]` |
|
||
| R2C4 | loading | `[846,201,246,138]` |
|
||
| R2C5 | attachment | `[1111,201,247,138]` |
|
||
| R2C6 | send | `[1377,201,244,138]` |
|
||
| R3C1 | stop | `[50,354,245,136]` |
|
||
| R3C2 | settings | `[315,354,247,136]` |
|
||
| R3C3 | user / profile | `[582,354,247,136]` |
|
||
| R3C4 | terminal / prompt | `[846,354,246,136]` |
|
||
| R3C5 | copy | `[1111,354,247,136]` |
|
||
| R3C6 | delete | `[1377,354,244,136]` |
|
||
| R4C1 | refresh | `[50,506,245,135]` |
|
||
| R4C2 | folder | `[315,506,247,135]` |
|
||
| R4C3 | chat bubble | `[582,506,247,135]` |
|
||
| R4C4 | notification | `[846,506,246,135]` |
|
||
| R4C5 | upload | `[1111,506,247,135]` |
|
||
| R4C6 | download | `[1377,506,244,135]` |
|
||
| R5C1 | info | `[50,655,245,131]` |
|
||
| R5C2 | warning | `[315,655,247,131]` |
|
||
| R5C3 | close | `[582,655,247,131]` |
|
||
| R5C4 | check | `[846,655,246,131]` |
|
||
| R5C5 | lock | `[1111,655,247,131]` |
|
||
| R5C6 | eye / visibility | `[1377,655,244,131]` |
|
||
| R6C1 | fullscreen | `[50,798,245,129]` |
|
||
|
||
## 常用图标推荐裁剪框
|
||
|
||
默认建议切 32px 规格，因为它能向下缩放到 24px / 16px，且保留更多金属高光和阴影。下表是「图标主体裁剪框」，不包含卡片标题、尺寸标签和外框。
|
||
|
||
| 图标语义 | 来源卡片 | 32px 主体框 `[x,y,w,h]` | 备注 |
|
||
| --- | --- | --- | --- |
|
||
| new chat | R1C1 | `[204,85,69,65]` | 十字星形，外扩较多以保留长尖角 |
|
||
| search | R1C3 | `[746,86,62,62]` | 放大镜手柄在右下，透明化时保留阴影 |
|
||
| dropdown | R1C2 | `[480,98,59,45]` | 三角图标高度较小，可居中放入 32px 容器 |
|
||
| theme / star | R2C1 | `[204,236,70,65]` | 星芒很长，不建议再紧缩 |
|
||
| ai swirl | R2C2 | `[476,236,65,65]` | 旋涡近似正方形 |
|
||
| status / online | R2C3 | `[749,242,53,53]` | 需要把绿色填充计入 mask |
|
||
| attachment | R2C5 | `[1277,236,49,60]` | 回形针纵向更高，容器内垂直居中 |
|
||
| send | R2C6 | `[1533,237,63,57]` | 纸飞机尖角在右上 |
|
||
| stop | R3C1 | `[211,392,56,56]` | 方形停止按钮 |
|
||
| settings | R3C2 | `[476,389,65,62]` | 齿轮外齿需要保留 |
|
||
| user / profile | R3C3 | `[743,389,65,62]` | 头像圆框 |
|
||
| terminal / prompt | R3C4 | `[1009,393,59,55]` | 矩形外框有阴影 |
|
||
| copy | R3C5 | `[1278,392,48,56]` | 双页图标偏窄 |
|
||
| refresh | R4C1 | `[211,541,57,57]` | 圆箭头 |
|
||
| chat bubble | R4C3 | `[745,541,62,55]` | 气泡尾巴在左下 |
|
||
| close | R5C3 | `[749,690,53,53]` | X 形，适合放入 32px 方形容器 |
|
||
| check | R5C4 | `[1010,693,56,47]` | 勾号高度较小，容器内垂直居中 |
|
||
|
||
### 16px / 24px / 32px 自动裁剪规则
|
||
|
||
整卡内三个规格的位置基本稳定，推荐通过卡片边界自动切，而不是手工维护所有坐标。
|
||
|
||
1. 先按上文卡片矩阵定位目标卡片。
|
||
2. 在卡片内部建立三个横向检测带：
|
||
|
||
```text
|
||
16px: [card.x + 18, card.x + 70]
|
||
24px: [card.x + 82, card.x + 145]
|
||
32px: [card.x + 152, card.x + card.w - 20]
|
||
```
|
||
|
||
3. 纵向检测带取：
|
||
|
||
```text
|
||
[card.y + 35, min(card.y + card.h - 35, card.y + 100)]
|
||
```
|
||
|
||
4. 对检测带内像素建立图标 mask：
|
||
|
||
```text
|
||
gold = r > 75 && g > 48 && b < 90 && r >= g - 8 && r - b > 22
|
||
pale = r > 135 && g > 105 && b < 95 && r - b > 35
|
||
green = g > 70 && r < 95 && b < 80 && g - r > 8
|
||
mask = gold || pale || green
|
||
```
|
||
|
||
5. 对 mask 像素取最小外接矩形，再外扩 `4px` 得到主体裁剪框。
|
||
6. 如果要导出统一尺寸图标，把主体框透明化后放入固定画布：
|
||
|
||
| 源规格 | 推荐输出画布 | 用途 |
|
||
| --- | ---: | --- |
|
||
| 16px | `20x20` 或 `24x24` | 列表小图标、状态点 |
|
||
| 24px | `32x32` | 常规按钮 |
|
||
| 32px | `40x40` 或 `48x48` | 主操作按钮、头像旁标识 |
|
||
|
||
### 自动检测边界算法
|
||
|
||
卡片边界可以用金色边缘峰值检测自动恢复，适合后续批量生成 manifest。
|
||
|
||
```text
|
||
1. 读取 RGB WebP。
|
||
2. 计算相邻像素梯度：
|
||
edge = abs(r-r0) + abs(g-g0) + abs(b-b0)
|
||
3. 对 edge > 18 的像素分别累加到 x/y 投影。
|
||
4. 对投影做半径 1-2px 的平滑。
|
||
5. 在 x 轴选取强峰并按宽度 239-247px 配对，得到左右边界：
|
||
[50,295], [315,562], [582,829], [846,1092], [1111,1358], [1377,1621]
|
||
6. 在 y 轴选取强峰并按高度 129-138px 配对，得到上下边界：
|
||
[50,187], [201,339], [354,490], [506,641], [655,786], [798,927]
|
||
7. 用卡片位置矩阵给每个 cell 赋语义标签。
|
||
8. 在 cell 内按 16/24/32 检测带取主体 mask 外接框。
|
||
```
|
||
|
||
## 透明化与输出格式方案
|
||
|
||
### 图标透明化
|
||
|
||
源图标板是 RGB WebP，背景和图标都已经混合压缩，不能直接得到完美 alpha。推荐流程：
|
||
|
||
1. 从图标板按主体框裁剪，裁剪时外扩 `2-4px`。
|
||
2. 从裁剪框边缘做暗背景 flood-fill，把与边缘连通且亮度低、饱和度低的区域标记为背景。
|
||
3. 对非背景像素按亮度和色相生成 alpha：
|
||
- 金色 / 浅金高光：保留。
|
||
- 绿色状态图标：单独保留，避免被金色阈值漏掉。
|
||
- 暗色压缩噪点：alpha 压低到 `0`。
|
||
4. 对 alpha 做轻微 `1px` 羽化，减少 WebP 黑边。
|
||
5. 把图标居中放入统一画布，按钮内再用 CSS 控制 `width/height`。
|
||
|
||
建议保留一份 manifest，记录源图、源框和输出文件名，后续可重复生成：
|
||
|
||
```json
|
||
{
|
||
"search": {
|
||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||
"card": "R1C3",
|
||
"variant": "32px",
|
||
"bbox": [746, 86, 62, 62],
|
||
"output": "icons/search-32.png"
|
||
}
|
||
}
|
||
```
|
||
|
||
### 输出格式
|
||
|
||
- 背景：保留 WebP 或转 AVIF/WebP 两套，作为 CSS 背景图，不需要透明通道。
|
||
- 图标主格式：透明 PNG。它对 alpha 最稳，适合切片后人工复核和 UI 直接引用。
|
||
- 图标 Web 优化：可额外导出 lossless WebP，使用 `image-set()` 或构建工具按浏览器能力选择。
|
||
- 不建议：直接用原始图标板做 CSS sprite。它包含展示卡片、标题、尺寸标签和暗纹理背景，透明化与 hover/filter 都会困难。
|
||
|
||
### 质量检查点
|
||
|
||
- 用深色、浅色、半透明按钮背景分别检查黑边。
|
||
- 对 `status / online` 单独检查绿色中心是否完整。
|
||
- 对 `new chat`、`theme / star`、`send` 检查尖角是否被裁掉。
|
||
- 对 `dropdown`、`check` 这类非方形图标，导出后应放入统一画布居中，而不是强行拉伸。
|