⭐ 觉得好用?收藏备用,下次直接打开
实时小预览(CSS pixelated 放大)
按住卡片即可拖动
🍳
拖入食物图片,或 点击选择
支持 JPG / PNG / WebP,本地处理不上传
怎么用
先在左侧填好名称品类(决定副标题颜色:菜品=橙红、工匠=绿、水果=粉…)、描述和数值;空字段会自动从卡片省略。
右侧上传一张食物图,按住像素卡片就能拖到任意位置;缩放滑块控制卡片在图上的大小。
数值支持正负(例如 -1),自动加 + 或保留 -。持续时间留空则不显示。
字体与还原度
采用开源 Fusion Pixel 12(OFL,TakWolf)作为像素字体,CJK 全覆盖;离屏 1× 渲染再硬像素整图放大,无抗锯齿
参考游戏标准 tooltip 双面板:橙色头牌(名称 + 品类)+ 奶油身体(描述 + 属性 + 价格),中间留 1 像素透明缝。
免责
本工具与 ConcernedApe 及《星露谷物语》官方无关,仅作风格化致敬;属性图标采用游戏官方资源,仅供个人非商业使用,请勿将生成图用于商业用途。
所有处理在浏览器本地完成,图片不上传

星露谷料理标签生成器 把任意一张美食照片配上《星露谷物语》风格的像素信息卡——填好名称、品类、属性数值、价格,工具自动生成”游戏 tooltip 双面板”叠在你的食物图上。所有处理在浏览器本地完成,图片不上传,导出 PNG 直接下载。

它解决什么

星露谷的 tooltip 信息卡视觉非常有辨识度——橙色头牌写名称和品类、奶油色身体写描述和加成、Fusion Pixel 风的像素字体、品类色块代码(菜品橙红、工匠绿、水果粉……)。手动在 Photoshop 里复刻一张要找字体、调色、对齐图标——非游戏开发者半小时起步。本工具一键生成。

双面板结构

参考游戏标准 tooltip:

区域内容配色
头牌(顶部)名称 + 品类标签橙色背景 + 黑边
缝隙1 像素透明
身体(下方)描述 + 属性加成 + 持续时间 + 价格奶油色背景 + 黑边

品类配色速查

品类副标题色典型物品
菜品橙红 #d6543a炒/烤/煮的料理
工匠物品绿 #3a8e30葡萄酒、蜂蜜、奶酪
水果#e25090甜瓜、星之果、芒果
蔬菜深绿 #2f6d2a南瓜、玉米、西红柿
矿物#8a4ec8钻石、宝石、化石
鱼类#3a78c8鲤鱼、鳟鱼、海洋鱼
采集物橙黄 #e09a2c蘑菇、野生韭菜、山药
自定义任意自由调色

字体与还原度

  • Fusion Pixel 12(开源 OFL 授权,作者 TakWolf)作为像素字体,CJK 全覆盖
  • 渲染:离屏 1× 像素绘制 → 整图整数倍放大,无抗锯齿
  • 浏览器缩放保持 100%(Ctrl + 0 重置),否则像素插值会模糊
  • 整数倍放大(1×/2×/3×/4×)最锐利,避免 2.5× 这种小数

隐私

  • 上传图片只在浏览器内处理,不发任何服务器
  • 字体、图标本地内嵌,离线可用
  • 导出 PNG 走浏览器内置下载,无中间服务

免责

  • 与 ConcernedApe 及《星露谷物语》官方无任何关联,仅作风格化致敬
  • 属性图标参考游戏官方资源,仅供个人非商业使用
  • 商业用途(菜单、海报、产品包装)请勿使用本工具生成的图

📍使用场景

  • 美食照配星露谷标签上传一张菜品 / 烘焙 / 自制饮料的照片,加上像素风信息卡——名称、品类、能量、生命值、价格——做出"刚把食物从背包里拿出来"的游戏感截图。
  • 自制游戏致敬卡片把生日蛋糕、团建料理、家庭聚餐照片做成星露谷风格分享图,用于朋友圈、微博、Discord、玩家社群发图。
  • 农场博主统一视觉自媒体账号需要风格统一的内容封面,用同一套 Fusion Pixel 字体 + 品类配色生成系列卡片,比每张图单独 P 字快得多。
  • 像素卡设计参考不只是星露谷玩家——任何想做 16-bit 风格 tooltip 的设计师,都可以用本工具直接出样图,再到 Photoshop / Figma 里二次加工。
  • 离线本地处理上传的图片只在浏览器里渲染,不上传到任何服务器;Fusion Pixel 字体本地内嵌,断网也能完整出图。

常见问题

像素卡上的"品类配色"是怎么定的?

参考《星露谷物语》游戏内的 tooltip 副标题色:菜品——橙红 #d6543a(炒/烤/煮的料理)、工匠物品——绿 #3a8e30(葡萄酒、蜂蜜、奶酪、梅干、罐头)、水果——粉 #e25090(甜瓜、星之果、芒果)、蔬菜——深绿 #2f6d2a矿物——紫 #8a4ec8(钻石、宝石、化石)、鱼类——蓝 #3a78c8采集物——橙黄 #e09a2c(蘑菇、野生韭菜、山药)。如果不确定怎么归类,菜品(橙红)是最通用的兜底。也可以选"自定义颜色"用色板自由调。

为什么字体看起来这么"硬",没有抗锯齿?

这是故意的。星露谷的 tooltip 是 16×16 像素艺术风格,文字字形也由像素组成——任何抗锯齿/平滑都会破坏"游戏内截图"的味道。本工具用 Fusion Pixel 12px(开源 OFL 授权,作者 TakWolf)作为像素字体,渲染流程是"离屏 1× 像素绘制 → CSS image-rendering: pixelated 整图整数倍放大",确保每个像素点都是硬边缘。如果你看到了模糊,多半是浏览器缩放不是 100%,或者放大倍数选了非整数(如 3.5×)——选 1×/2×/3×/4× 整数档最清晰。

名称太长会怎么样?描述太长会自动换行吗?

名称 限制 20 字符,超长会被截断;像素字宽度有限,建议 6-8 字最佳("琉璃山药"、"南瓜浓汤"、"史莱姆果冻")。描述 限制 60 字符并自动换行——按头牌宽度计算每行容纳的字数,超出换到第二行;超过两行的内容会被省略。星露谷原版的描述都是 1-2 行短句,建议保持这个节奏(如"又香又甜……加糖让它有了一点焦糖味。")。

能量、生命值、运气、速度……这些数值都是干嘛的?怎么填?

游戏里这些是食物给玩家的临时增益:(1) 能量(绿 ✚)/ 生命值(红 ♥)——直接回血回耐力,正数;(2) 体力上限 ⚡ / 运气 🍀 / 速度 👢 / 防御 🛡 / 吸引力 🧲——临时 buff,正数加成、负数减益(比如"啤酒 -1 速度");(3) 采矿 ⛏ / 钓鱼 🎣 / 采集 🌳——技能等级临时加成。填法:留空 = 卡片不显示这一行;填正整数 = 卡片显示 +30;填负整数 = 显示 -1(自动加号留给正数)。实务:(1) 自制美食卡只填 1-3 项最有"画面感",全填上反而拥挤;(2) 主菜配 能量+生命;(3) 饮料配 体力上限+运气;(4) 健康沙拉配 防御+生命。

"持续时间"和"价格"必须填吗?

都不是必填持续时间 留空就不显示;填了用 分:秒 格式(如 7:00 = 7 分钟,对应游戏里增益的持续时间)。价格 G 是星露谷里的金币 G——填整数即可,会自动渲染成黄色金币图标后跟数字(如 200G)。如果不想显示价格留空。留白原则:少即是多,三档属性 + 价格 = 标准星露谷卡的信息密度。

上传的图片会不会被压缩或上传?

完全不会上传。所有处理(图片解码、像素卡叠加渲染、最终合成 PNG)都在浏览器本地用 Canvas 完成,整张图不离开你的设备。导出时也是浏览器内合成 PNG 后弹出下载——文件路径走系统下载流程,不涉及任何网络请求。离线可用:进入工具一次后,关闭网络仍能完整出图——字体和品类图标都通过本地资源加载。

为什么导出的 PNG 里像素卡和原图比例不太协调?

需要手动调"放大倍数"。像素卡基础尺寸约 200×140px(1×),如果原图分辨率是 4000×3000 的手机原图,1× 的卡贴上去会非常小;推荐整数倍放大让卡和图视觉协调:(1) 原图宽 < 800px:选 1× 或 2×;(2) 原图宽 800-1500px:选 2× 或 3×;(3) 原图宽 1500-2500px:选 3× 或 4×;(4) 原图宽 > 2500px:选 4× 或更高。关键:选整数倍(1×/2×/3×/4×)像素最锐利;非整数(2.5×、3.5×)会有像素插值导致轻微模糊。

能拖动卡片到任意位置吗?怎么"贴在食物旁边"那种感觉?

按住卡片直接拖到画布上任意位置,松手即停;点"⟳ 重置位置"回到默认。构图建议:(1) 食物在中央 / 偏上 → 卡贴左下或右下角,留白处展示卡片信息;(2) 食物在角落 → 卡贴对角线另一端;(3) 食物大图全屏铺满 → 卡放在视觉重心略偏的位置(黄金比例 1/3 处)。避免:把卡贴在食物正中央挡住主体——星露谷原版的 tooltip 是悬停时弹出,不是叠在食物上的,过度遮挡会破坏"卡片是辅助信息"的感觉。

生成的图能商用吗?比如做菜单、餐厅海报?

不建议商用。本工具与 ConcernedApe 及《星露谷物语》官方无任何关联,仅作风格化致敬。属性图标(✚、♥、⚡、🍀 等的像素图)参考游戏官方资源,仅供个人非商业使用——把生成图用于商业菜单、餐厅装饰、付费课程封面、产品包装等用途存在版权风险。可以放心用的场景:朋友圈/微博/小红书发图、玩家社区分享、自己的非营利博客、生日卡片、群友互动。有商业需求请联系 ConcernedApe 工作室获取授权,或自行设计原创风格。

Fusion Pixel 字体支持英文、emoji、繁体字吗?

英文/数字/常用符号——完整支持(拉丁字母、ASCII、常见标点全部覆盖);简体中文——CJK 全覆盖(GB18030 范围内的字基本都有);繁体中文——大部分常用字支持,但某些异体字、生僻字可能落到系统兜底字体显示得不像素;日文假名——部分支持,平假名/片假名常用字有;emoji——不支持——emoji 是彩色矢量图,像素字体没有对应字形。如果输入了 emoji 会显示为方块或系统字体的 emoji(不像素)。实务:(1) 名称里别用 emoji,用文字描述("红心 → 心");(2) 数值前的图标(✚♥⚡🍀)是工具内置的像素图标,不走字体——这些一定锐利。