星露谷风格美食卡：Fusion Pixel 像素字体、品类配色与工坊排版的三件套

Q: 为什么自己 P 的星露谷卡总是看起来"差点意思"？

多半是字体抗锯齿没关掉。星露谷的视觉精髓是 16×16 像素艺术——每个像素都是硬边缘、整数倍放大、无任何模糊。自己 P 卡常见错误：(1) 用 Photoshop 默认抗锯齿——文字边缘被插值平滑，看起来"现代"但失去像素感；(2) 缩放用了 Bicubic / Lanczos——大数据集插值算法，结果是高质量但非像素的图；(3) 字体选错——用方正、思源等矢量字体直接小号渲染，看起来像素但其实是模糊的小字；(4) 背景色不对——拿黑色背景去叠原版的奶油色 tooltip。正确做法：(1) 字体用真正的像素字体（Fusion Pixel、Pixelify Sans、PressStart2P）；(2) 渲染时关掉抗锯齿（Photoshop "无消除锯齿"、CSS image-rendering: pixelated）；(3) 缩放选 Nearest Neighbor；(4) 整数倍放大（2×、3×、4×）。本工具已经替你处理好这些细节。

Q: Fusion Pixel 字体相比其他像素字体好在哪？

核心优势：CJK（中日韩）全覆盖 + OFL 开源协议。对比同类字体：(1) Press Start 2P（Google Fonts）——经典像素感，但只支持基本拉丁字母，中文显示为方块；(2) Pixelify Sans——拉丁 + 部分扩展，中文不支持；(3) 方正像素字体——商业字体，授权费贵，且很多字体本质是矢量字体降级渲染；(4) VonwaonBitmap——优秀的中文像素字体但字符覆盖窄；(5) Fusion Pixel 12px（TakWolf 开源）——12px 高度的真像素字体，覆盖 GB18030 范围（中文 70000+ 字符 + 拉丁 + 假名 + 西里尔），OFL 协议可商用可修改。实测：(1) "琉璃山药" Fusion Pixel 显示完美；(2) 同样 "琉璃山药" Press Start 2P 显示 4 个方块；(3) Fusion Pixel 字体设计师 TakWolf 持续维护，覆盖率每版增加。

Q: 品类配色（橙红 / 绿 / 粉…）的依据是什么？能自定义吗？

配色直接参考游戏内 tooltip 的副标题颜色。星露谷在 tooltip 副标题（"菜品 / 工匠物品 / 水果"等）用了一组固定色：(1) 菜品——橙红 #d6543a（炒/烤/煮的料理，如蘑菇泡菜、煎鱼）；(2) 工匠物品——绿 #3a8e30（葡萄酒、蜂蜜、奶酪、罐头、啤酒）；(3) 水果——粉 #e25090（甜瓜、星之果、芒果、苹果）；(4) 蔬菜——深绿 #2f6d2a（南瓜、玉米、西红柿）；(5) 矿物——紫 #8a4ec8（钻石、宝石、化石）；(6) 鱼类——蓝 #3a78c8（鲤鱼、鳟鱼、海洋鱼）；(7) 采集物——橙黄 #e09a2c（蘑菇、野生韭菜、山药）。自定义颜色：本工具支持选"自定义颜色…"用色板自由调，适合做非游戏物品（如自家狗狗的"宠物零食卡"、生日蛋糕的"庆典糕点卡"——选个有意义的色）。实务：(1) 不确定怎么归类，菜品（橙红）是最通用的兜底；(2) 自制饮料归"工匠物品"（绿）很合适；(3) 烘焙类别接近"菜品"。

Q: 双面板 tooltip 结构怎么排出来"像游戏截图"？

关键是头牌 / 身体的比例和缝隙。星露谷标准 tooltip 双面板：(1) 头牌——顶部约 1/4 高，橙色背景 + 黑边，含名称（最大字号）+ 品类标签（小字号、副标题色）；(2) 身体——下方 3/4 高，奶油色背景 + 黑边，含描述（小字、自动换行）+ 属性图标加成 + 价格行；(3) 缝隙——头牌和身体之间留 1 像素透明缝（不是空白），让两块面板"漂浮分离"。视觉细节：(1) 黑边宽度 1-2 像素，硬边缘不柔化；(2) 底色填充饱和（奶油 #f1d6a4、橙色 #d6543a 全填充，非渐变）；(3) 字体阴影是黑色硬投影（不是模糊阴影），向右下偏 1 像素；(4) 图标和文字保持像素对齐——不能"图标精致但文字粗糙"，所有元素分辨率一致。本工具自动处理这些——只要在表单填好内容、选好品类、调好放大倍数，输出图自动符合规范。

Q: 数值（能量 / 生命值 / 速度）填什么数字才"像游戏内的"？

参考游戏实际数值范围。能量 ✚ 和生命值 ♥：(1) 小食——回 30-60 能量（小饼干、生菜）；(2) 常规菜品——回 100-200 能量、50-100 生命（蘑菇泡菜、煎鱼）；(3) 高级菜品——回 200-300 能量、100-150 生命（南瓜浓汤、龙虾浓汤）；(4) 顶级料理——回 300+ 能量、150+ 生命（完美水果沙拉）。临时增益（持续 3-7 分钟）：(1) 运气 🍀 ——通常 +1 到 +3（农业之神祝福这种顶级 +5）；(2) 速度 👢——+1（咖啡）、+0.5（肉桂咖啡）；(3) 防御 🛡——+1 到 +5（鱼炖肉、鳗鱼）；(4) 吸引力 🧲——+1 到 +2（贵族的早餐）；(5) 采矿 / 钓鱼 / 采集 ⛏🎣🌳——+1 到 +4（蘑菇的烟熏 / 蜗牛汤 / 香料浆果）。实务：(1) 自制美食卡只填 1-3 个最有"画面感"的数值，全填上反而拥挤；(2) 主菜配能量 + 生命；(3) 饮料配体力上限 + 运气；(4) 健康沙拉配防御 + 生命；(5) 高级料理可以同时给 3-4 个 buff。

Q: 为什么我的输出图放大后还是模糊？

多半是浏览器缩放或非整数倍放大。第一步检查：浏览器缩放是不是 100%？Ctrl + 0 重置。任何非 100% 的缩放都会让像素插值，破坏锐利感。第二步检查：放大倍数选了几？(1) 整数倍（1×、2×、3×、4×）——每个像素整齐对应屏幕上的整数像素，最锐利；(2) 非整数（2.5×、3.5×）——浏览器或 canvas 内部做插值，引入轻微模糊；(3) 超过原图分辨率上限——比如 1× 卡是 200px 宽，源图只有 800px 宽却选 6× 放大（卡变 1200px > 源图宽），卡片会比图还大不协调。第三步检查：导出时格式选 PNG（无损）还是 JPG（有损）？JPG 会引入轻微像素晕染，输出星露谷卡推荐 PNG。最佳组合：浏览器缩放 100% + 整数倍放大 + 输出 PNG = 锐利。

Q: 生成的图能用在朋友圈、小红书、餐厅菜单吗？

朋友圈、小红书、玩家社群可以；商业用途（菜单、海报、产品包装）不建议。版权说明：(1) 本工具与 ConcernedApe 及《星露谷物语》官方无任何关联——完全是粉丝向的风格化致敬；(2) 属性图标（✚、♥、⚡、🍀 等）参考游戏官方资源——版权归 ConcernedApe 工作室；(3) Fusion Pixel 字体是开源 OFL 协议，可商用可修改——但只是字体本身，配上游戏图标的整体设计仍有风险。安全用法（个人非商业）：(1) 朋友圈 / 微博 / 小红书 / 抖音晒图；(2) 玩家社区分享（贴吧、官方 Discord、NGA）；(3) 个人博客 / 非营利的内容平台；(4) 给朋友的生日卡 / 节日卡；(5) 群友互动表情包。有风险用法（商业）：(1) 餐厅菜单 / 价目表；(2) 餐厅装饰墙画；(3) 印在产品包装上销售；(4) 付费课程 / 知识付费内容封面；(5) 商业广告投放。有商业需求：联系 ConcernedApe 工作室获取授权，或自行设计原创风格的非游戏 IP 化卡片。

2026-05-01 · 约 5 分钟 🍳 星露谷料理标签

星露谷物语的 tooltip 视觉非常有辨识度——橙色头牌写名称和品类、奶油色身体写描述和加成、Fusion Pixel 风的像素字体、品类色块代码。手动在 Photoshop 里复刻一张要找字体、调色、对齐图标——半小时起步。这篇拆解原版规则的三个核心要素，讲清如何还原”游戏内截图”质感。

三件套构成

星露谷美食卡 = 像素字体（不抗锯齿）
              + 品类配色（副标题色）
              + 双面板布局（头牌 + 身体）

任何一项不对，整张卡就”差点意思”——像现代海报模仿了像素感，而不是真的像素。

第一件套：像素字体

字体选择

字体	字符覆盖	协议	中文支持
Fusion Pixel 12	CJK + 拉丁 + 假名 + 西里尔	OFL（开源）	✅ GB18030
Press Start 2P	仅基本拉丁	OFL	❌
Pixelify Sans	拉丁 + 部分扩展	OFL	❌
VonwaonBitmap	中文 + 拉丁	自由	✅ 较少字
方正像素	中文 + 拉丁	商用付费	✅

Fusion Pixel 12（TakWolf 开源）的优势：

12px 高度真像素字体（不是矢量降级）
CJK 全覆盖（中文 70000+ 字符）
OFL 协议可商用可修改
持续更新维护

本工具内置该字体，无需另外安装。

渲染流程

1. 离屏 1× 像素绘制
   ↓ 用 Canvas 在 1:1 像素网格上画字
2. 整图整数倍放大
   ↓ image-rendering: pixelated
3. 浏览器按"最近邻"算法放大
   ↓ 每个原像素扩成 N×N 块
4. 输出锐利像素图

关键：放大用 Nearest Neighbor（最近邻），不是 Bicubic / Lanczos——后者高质量但平滑像素，破坏 16-bit 风。

浏览器缩放陷阱

浏览器 100% + 工具内 3× 放大 → 锐利
浏览器 125% + 工具内 3× 放大 → 模糊（双层插值）
浏览器  90% + 工具内 3× 放大 → 模糊

校准前 Ctrl+0 重置 100%——之后保持不变。

整数倍 vs 非整数倍

倍数	效果
1×	原始像素（很小）
2×	每像素扩成 2×2，锐利
3×	每像素扩成 3×3，锐利
4×	每像素扩成 4×4，锐利
2.5×	每像素扩成 2.5×2.5，必然插值，模糊
3.5×	同上，模糊

只选 1×/2×/3×/4× 整数档。

第二件套：品类配色

副标题色板（参考游戏原版）

品类	HEX	典型物品
菜品	`#d6543a` 橙红	炒/烤/煮的料理（蘑菇泡菜、煎鱼）
工匠物品	`#3a8e30` 绿	葡萄酒、蜂蜜、奶酪、罐头、啤酒
水果	`#e25090` 粉	甜瓜、星之果、芒果、苹果
蔬菜	`#2f6d2a` 深绿	南瓜、玉米、西红柿
矿物	`#8a4ec8` 紫	钻石、宝石、化石
鱼类	`#3a78c8` 蓝	鲤鱼、鳟鱼、海洋鱼
采集物	`#e09a2c` 橙黄	蘑菇、野生韭菜、山药
自定义	任意	非游戏物品（生日蛋糕、节日料理）

不确定归类怎么办

菜品（橙红）是兜底——任何”做出来”的食物都可以归这里
工匠物品（绿）适合自制饮料、自酿酒类、自制果酱
水果 / 蔬菜直接看食材主体（生的水果直接配粉、蔬菜配深绿）
创意菜（融合菜）——选最接近的主类别

自定义色用法

非游戏向的应用：

场景	推荐色
庆生蛋糕	玫瑰金 `#e8a987`
节日料理	节日红 `#c41e3a`
健康轻食	橄榄绿 `#7a8c3f`
海鲜大餐	海蓝 `#1c5d8c`
宠物零食	米黄 `#e6c882`
咖啡饮品	咖啡棕 `#6f4e37`

第三件套：双面板布局

标准结构

┌────────────────────────────────┐
│        头牌（橙色背景）         │
│   名称（大字）                  │
│   品类标签（小字，副标题色）    │
└────────────────────────────────┘
        ↑ 1 像素透明缝
┌────────────────────────────────┐
│        身体（奶油色背景）       │
│   描述（小字，自动换行）        │
│                                │
│   ✚ 能量      +200             │
│   ♥ 生命值    +90              │
│   ⏰ 持续时间 7:00              │
│                                │
│   💰 价格 G   200              │
└────────────────────────────────┘

视觉细节

元素	规则
黑边宽度	1-2 像素，硬边缘
底色填充	全饱和无渐变（奶油 `#f1d6a4`、橙色 `#d6543a`）
文字阴影	黑色硬投影，向右下偏 1 像素
头身缝隙	1 像素透明（不是 0，让面板”漂浮分离”）
像素对齐	所有元素分辨率一致，不混搭精致图标和粗糙文字

信息密度

少即是多——星露谷原版的描述都是 1-2 行短句，属性 1-3 项最有画面感：

卡片类型	推荐数值
主菜	能量 + 生命值 + 价格
饮料	体力上限 + 运气 + 价格
健康沙拉	防御 + 生命值 + 持续时间
高级料理	能量 + 生命 + 速度 + 持续时间

全部填满 8 项数值反而拥挤，看起来像 Excel 表不像 tooltip。

数值参考（向游戏靠近）

等级	能量 ✚	生命 ♥	持续 ⏰
小食	+30 ~ +60	+10 ~ +30	—
常规菜品	+100 ~ +200	+50 ~ +100	3-5 分钟
高级菜品	+200 ~ +300	+100 ~ +150	5-7 分钟
顶级料理	+300+	+150+	7-10 分钟

Buff	数值范围	典型菜品
运气 🍀	+1 ~ +3	蘑菇泡菜 / 农业之神祝福
速度 👢	+0.5 ~ +1	咖啡 / 肉桂咖啡
防御 🛡	+1 ~ +5	鱼炖肉 / 鳗鱼
采矿 ⛏	+1 ~ +4	蘑菇的烟熏
钓鱼 🎣	+1 ~ +4	蜗牛汤
采集 🌳	+1 ~ +4	香料浆果
吸引力 🧲	+1 ~ +2	贵族的早餐

构图技巧

卡片位置

按住像素卡片可以拖到画布任意位置：

食物在中央 / 偏上 → 卡贴左下或右下角
食物在角落    → 卡贴对角线另一端
食物大图全屏  → 卡放在视觉重心略偏的位置（黄金比例 1/3 处）

避免：

卡贴食物正中央挡住主体（违背”卡片是辅助”）
卡远离食物（视觉割裂）
卡叠在文字 / 标签 / Logo 上（信息打架）

放大倍数选择

原图宽度	推荐倍数
< 800px	1× / 2×
800-1500px	2× / 3×
1500-2500px	3× / 4×
> 2500px	4×+

一般规则：卡的宽度占画布宽度 25-40% 视觉协调；超过 50% 卡太大喧宾夺主；小于 15% 卡太小看不清字。

输出建议

用途	格式	备注
社交分享	PNG	锐利无损
朋友圈	PNG → 系统压缩	压完仍然锐利
二次编辑	PNG	可在 PS 里继续叠加
网页内嵌	WebP	体积小（如平台支持）

输出 PNG 是默认推荐——星露谷卡的核心是像素锐利，JPG 必然引入轻微晕染。

实战清单

✅ 要做：

浏览器缩放 100%（Ctrl+0）
选整数倍放大（1×/2×/3×/4×）
品类色按”游戏内副标题色”映射
描述限 1-2 行，属性 1-3 项最有画面感
卡片占画布 25-40% 视觉协调

❌ 避免：

浏览器缩放不是 100%（双层插值模糊）
选 2.5× / 3.5× 等非整数倍（必然模糊）
全部数值填满（拥挤如 Excel）
卡盖在食物正中央（破坏主体）
商业用途使用（版权风险）

一句话总结

星露谷美食卡 = 像素字体（Fusion Pixel）+ 品类配色（橙红/绿/粉…）+ 双面板布局（头牌+身体+1px 缝），三件套缺一不可；浏览器缩放 100%、整数倍放大、PNG 输出，就能还原”游戏内截图”质感。

❓ 常见问题

为什么自己 P 的星露谷卡总是看起来"差点意思"？

多半是字体抗锯齿没关掉。星露谷的视觉精髓是 16×16 像素艺术——每个像素都是硬边缘、整数倍放大、无任何模糊。自己 P 卡常见错误：(1) 用 Photoshop 默认抗锯齿——文字边缘被插值平滑，看起来"现代"但失去像素感；(2) 缩放用了 Bicubic / Lanczos——大数据集插值算法，结果是高质量但非像素的图；(3) 字体选错——用方正、思源等矢量字体直接小号渲染，看起来像素但其实是模糊的小字；(4) 背景色不对——拿黑色背景去叠原版的奶油色 tooltip。正确做法：(1) 字体用真正的像素字体（Fusion Pixel、Pixelify Sans、PressStart2P）；(2) 渲染时关掉抗锯齿（Photoshop "无消除锯齿"、CSS image-rendering: pixelated）；(3) 缩放选 Nearest Neighbor；(4) 整数倍放大（2×、3×、4×）。本工具已经替你处理好这些细节。

Fusion Pixel 字体相比其他像素字体好在哪？

核心优势：CJK（中日韩）全覆盖 + OFL 开源协议。对比同类字体：(1) Press Start 2P（Google Fonts）——经典像素感，但只支持基本拉丁字母，中文显示为方块；(2) Pixelify Sans——拉丁 + 部分扩展，中文不支持；(3) 方正像素字体——商业字体，授权费贵，且很多字体本质是矢量字体降级渲染；(4) VonwaonBitmap——优秀的中文像素字体但字符覆盖窄；(5) Fusion Pixel 12px（TakWolf 开源）——12px 高度的真像素字体，覆盖 GB18030 范围（中文 70000+ 字符 + 拉丁 + 假名 + 西里尔），OFL 协议可商用可修改。实测：(1) "琉璃山药" Fusion Pixel 显示完美；(2) 同样 "琉璃山药" Press Start 2P 显示 4 个方块；(3) Fusion Pixel 字体设计师 TakWolf 持续维护，覆盖率每版增加。

品类配色（橙红 / 绿 / 粉…）的依据是什么？能自定义吗？

配色直接参考游戏内 tooltip 的副标题颜色。星露谷在 tooltip 副标题（"菜品 / 工匠物品 / 水果"等）用了一组固定色：(1) 菜品——橙红 #d6543a（炒/烤/煮的料理，如蘑菇泡菜、煎鱼）；(2) 工匠物品——绿 #3a8e30（葡萄酒、蜂蜜、奶酪、罐头、啤酒）；(3) 水果——粉 #e25090（甜瓜、星之果、芒果、苹果）；(4) 蔬菜——深绿 #2f6d2a（南瓜、玉米、西红柿）；(5) 矿物——紫 #8a4ec8（钻石、宝石、化石）；(6) 鱼类——蓝 #3a78c8（鲤鱼、鳟鱼、海洋鱼）；(7) 采集物——橙黄 #e09a2c（蘑菇、野生韭菜、山药）。自定义颜色：本工具支持选"自定义颜色…"用色板自由调，适合做非游戏物品（如自家狗狗的"宠物零食卡"、生日蛋糕的"庆典糕点卡"——选个有意义的色）。实务：(1) 不确定怎么归类，菜品（橙红）是最通用的兜底；(2) 自制饮料归"工匠物品"（绿）很合适；(3) 烘焙类别接近"菜品"。

双面板 tooltip 结构怎么排出来"像游戏截图"？

关键是头牌 / 身体的比例和缝隙。星露谷标准 tooltip 双面板：(1) 头牌——顶部约 1/4 高，橙色背景 + 黑边，含名称（最大字号）+ 品类标签（小字号、副标题色）；(2) 身体——下方 3/4 高，奶油色背景 + 黑边，含描述（小字、自动换行）+ 属性图标加成 + 价格行；(3) 缝隙——头牌和身体之间留 1 像素透明缝（不是空白），让两块面板"漂浮分离"。视觉细节：(1) 黑边宽度 1-2 像素，硬边缘不柔化；(2) 底色填充饱和（奶油 #f1d6a4、橙色 #d6543a 全填充，非渐变）；(3) 字体阴影是黑色硬投影（不是模糊阴影），向右下偏 1 像素；(4) 图标和文字保持像素对齐——不能"图标精致但文字粗糙"，所有元素分辨率一致。本工具自动处理这些——只要在表单填好内容、选好品类、调好放大倍数，输出图自动符合规范。

数值（能量 / 生命值 / 速度）填什么数字才"像游戏内的"？

参考游戏实际数值范围。能量 ✚ 和生命值 ♥：(1) 小食——回 30-60 能量（小饼干、生菜）；(2) 常规菜品——回 100-200 能量、50-100 生命（蘑菇泡菜、煎鱼）；(3) 高级菜品——回 200-300 能量、100-150 生命（南瓜浓汤、龙虾浓汤）；(4) 顶级料理——回 300+ 能量、150+ 生命（完美水果沙拉）。临时增益（持续 3-7 分钟）：(1) 运气 🍀 ——通常 +1 到 +3（农业之神祝福这种顶级 +5）；(2) 速度 👢——+1（咖啡）、+0.5（肉桂咖啡）；(3) 防御 🛡——+1 到 +5（鱼炖肉、鳗鱼）；(4) 吸引力 🧲——+1 到 +2（贵族的早餐）；(5) 采矿 / 钓鱼 / 采集 ⛏🎣🌳——+1 到 +4（蘑菇的烟熏 / 蜗牛汤 / 香料浆果）。实务：(1) 自制美食卡只填 1-3 个最有"画面感"的数值，全填上反而拥挤；(2) 主菜配能量 + 生命；(3) 饮料配体力上限 + 运气；(4) 健康沙拉配防御 + 生命；(5) 高级料理可以同时给 3-4 个 buff。

为什么我的输出图放大后还是模糊？

多半是浏览器缩放或非整数倍放大。第一步检查：浏览器缩放是不是 100%？Ctrl + 0 重置。任何非 100% 的缩放都会让像素插值，破坏锐利感。第二步检查：放大倍数选了几？(1) 整数倍（1×、2×、3×、4×）——每个像素整齐对应屏幕上的整数像素，最锐利；(2) 非整数（2.5×、3.5×）——浏览器或 canvas 内部做插值，引入轻微模糊；(3) 超过原图分辨率上限——比如 1× 卡是 200px 宽，源图只有 800px 宽却选 6× 放大（卡变 1200px > 源图宽），卡片会比图还大不协调。第三步检查：导出时格式选 PNG（无损）还是 JPG（有损）？JPG 会引入轻微像素晕染，输出星露谷卡推荐 PNG。最佳组合：浏览器缩放 100% + 整数倍放大 + 输出 PNG = 锐利。

生成的图能用在朋友圈、小红书、餐厅菜单吗？

朋友圈、小红书、玩家社群可以；商业用途（菜单、海报、产品包装）不建议。版权说明：(1) 本工具与 ConcernedApe 及《星露谷物语》官方无任何关联——完全是粉丝向的风格化致敬；(2) 属性图标（✚、♥、⚡、🍀 等）参考游戏官方资源——版权归 ConcernedApe 工作室；(3) Fusion Pixel 字体是开源 OFL 协议，可商用可修改——但只是字体本身，配上游戏图标的整体设计仍有风险。安全用法（个人非商业）：(1) 朋友圈 / 微博 / 小红书 / 抖音晒图；(2) 玩家社区分享（贴吧、官方 Discord、NGA）；(3) 个人博客 / 非营利的内容平台；(4) 给朋友的生日卡 / 节日卡；(5) 群友互动表情包。有风险用法（商业）：(1) 餐厅菜单 / 价目表；(2) 餐厅装饰墙画；(3) 印在产品包装上销售；(4) 付费课程 / 知识付费内容封面；(5) 商业广告投放。有商业需求：联系 ConcernedApe 工作室获取授权，或自行设计原创风格的非游戏 IP 化卡片。