字节笔记本
2026年7月5日
PixUp - 在线一键提取设计元素,导出透明 PNG 与调色板
做设计、做电商、做内容，常常会遇到同一个麻烦：拿到一张铺满元素的平铺图（emoji 表情包、图标素材、贴纸、精灵图），想把里面每一个单独抠出来存成透明底 PNG，手动一个个切又慢又容易切歪。
PixUp 就是来解决这件事的。它是一个跑在浏览器里的设计元素提取器，把图拖进去，自动识别每个元素的边界，连同投影一起裁成独立透明 PNG，顺手再给你每个元素的主色调色板。
在线地址：https://pixup.bytenote.net
它能干什么
- 一键切图：自动分割平铺稿里的所有元素，无需手动框选
- 透明底 PNG：连软投影一起保留，抠出来直接能用，不用再二次处理
- 主色板提取：每个元素自动分析 5 个主色及占比，点一下复制 hex 值
- 整批打包下载：所有元素压成一个 ZIP，文件名自动按 01、02、03 编号
- 完全本地处理：图片不上传服务器，断网也能用，私密素材放心扔进去
怎么用
打开网页就行，不用注册、不用登录、不用装客户端。
首页默认会跑一张演示图，让你直接看到效果。想处理自己的图，有两种方式：
- 把图片直接拖进窗口任意位置
- 点右上角「打开图片」选择文件
提取完成后，左边是带编号框的原图预览（每个元素外面套一个橙色边框、左上角有编号），右边是切好的元素网格。
四个滑块干什么用
不同素材的背景、元素密度、投影软硬都不一样，PixUp 提供了四个参数让你微调，实时拖动就能看到效果：
- 透明阈值：低于这个色差的像素直接当背景（值越大越宽容）
- 不透明阈值：高于这个色差才算元素主体（值越小越敏感）
- 合并间距：相隔多近的元素会被合并成同一个（处理番茄蒂这种分离部件）
- 最小面积：多小的噪点会被忽略掉（值越大越忽略细碎噪点）
不知道怎么调也没关系，默认参数对大多数平铺设计稿都已经够用。
主色板有什么用
每个元素卡片下面会有一条彩色色带，是这个元素的 5 个主色，按占比从大到小排列，色带宽度就代表占比。
点任何一个色块，hex 值直接复制到剪贴板。做品牌物料、配色参考、UI 还原时尤其方便——不用再单独打开取色器了。
9 种语言
界面支持中文、英语、日语、韩语、西班牙语、法语、德语、俄语、葡萄牙语。第一次打开按你浏览器的语言自动匹配，也可以在右上角手动切换，选择会记下来。
分享给海外同事或客户时，他们看到的就是自己的母语界面。
几个典型场景
- 表情包/贴纸整理：把一整套表情图从一张大图里快速拆成独立文件
- 图标素材二次加工：图标集合成稿拆出来，分别存档
- 电商素材处理：商品平铺图拆成单品的透明底图，方便重新组合排版
- 配色灵感：想从某张设计稿里取色，直接拖进去看主色板
关于这个工具
PixUp 完全是浏览器端运算的，所有处理都在你的设备上完成，图片数据从不离开你的电脑。算法基于 Canvas 原生手写，没有依赖任何第三方图像库，所以加载快、体积小，手机浏览器也能流畅跑。
整个工具是免费的，没有水印、没有次数限制、没有付费墙。如果你也经常和设计稿、素材图打交道，收藏一下 没坏处。