无Photoshop授权的Web开发者：如何从PSD提取Zeplin类设计信息？

作为常年和设计文件死磕的前端开发者，太懂你这种手里只有PSD却没PS权限的尴尬了！不用慌，下面这些工具和方法完全能替代Zeplin帮你抠出尺寸、颜色、字体、边框圆角这些CSS关键信息：

一、在线工具：无需安装，打开即用 #

Photopea #

这绝对是我首推的神器——完全在线的PS替代工具，支持直接打开PSD文件，界面和操作逻辑和PS几乎一致。

• 尺寸/位置：选中目标图层后，右侧属性面板会直接显示宽高、X/Y坐标，和Zeplin一样直观。
• 颜色：用左侧的取色器工具点击元素，底部状态栏会显示HEX、RGB、HSL值，直接复制就行；如果是图层样式里的颜色（比如边框、背景），可以在图层样式面板里查看精确值。
• 字体：如果是可编辑的文字图层，选中后右侧会显示字体名称、字号、行高、字重，甚至可以直接复制文字内容。
• 边框/圆角：打开图层的「混合选项」，就能看到边框的宽度、颜色，圆角的半径参数，直接抄下来就行。

轻量在线PSD查看器 #

有些专门做PSD解析的轻量在线工具，上传文件后会自动列出所有图层，点击图层就能查看基础属性：尺寸、颜色值、文字信息，部分工具还能一键导出图层的CSS代码片段，适合快速提取简单元素的信息。

二、桌面开源工具：本地运行更稳定 #

GIMP #

老牌开源图像编辑软件，完全免费，能完美打开大多数PSD文件。

• 操作逻辑和PS类似，选中图层后，通过「工具选项」面板查看尺寸；用颜色拾取器获取颜色值。
• 文字图层的字体信息可以在「文字工具」的属性面板里找到；边框、圆角这类图层样式，需要在「图层属性」的「图层样式」里查看。
• 唯一小缺点是界面比PS/Photopea稍显粗糙，但胜在完全免费无广告。

三、导入设计协作平台：获得类Zeplin的体验 #

Figma #

如果你有Figma账号（免费版完全够用），可以直接把PSD文件导入Figma：

1. 打开Figma项目，拖入PSD文件完成导入；
2. 选中任意元素，打开右侧的「Inspect」面板——这里的信息和Zeplin几乎一模一样：尺寸、间距、颜色、字体、边框、圆角，甚至能直接复制生成好的CSS代码，连hover状态的样式都能看到（如果PSD里有对应的图层）。
3. 导入后还能给元素加注释，方便后续和设计师沟通，比单纯的提取工具更实用。

小技巧补充 #

• 如果PSD图层分组复杂，记得先展开分组找到目标元素，避免选中错误的图层导致信息不准；
• 提取渐变颜色时，Photopea和Figma都能直接显示渐变的色值和角度，比手动取色更准确；
• 如果PSD里的文字图层被栅格化了（变成图片），可以用字体识别工具上传截图识别字体，算是应急方案。

内容的提问来源于stack exchange，提问作者croraf