一、通过图层样式面板查看阴影数值

PxCook在解析Sketch或PSD文件方面做得相当到位。图层样式这类细节都能被很好地结构化。

当你导入一份带有投影效果的设计稿后，最直观的方法就是利用右侧的属性面板。那里就像是参数详情的“仪表盘”。

X/Y偏移、模糊半径、扩展值乃至颜色和透明度，都一目了然地陈列着。

具体操作步骤

操作非常简单：

• 首先，在左侧图层面板中找到并点击那个带阴影的目标图层（例如一个按钮或卡片）。
• 接着，将目光移到右侧的“属性”区域。
• 往下滚动，找到“图层样式”模块，点开“投影”或“Drop Shadow”的折叠项。

现在，你就能看到所有关键数值了：

• X 偏移量（单位：px）
• Y 偏移量（单位：px）
• 模糊半径（Blur，单位：px）
• 扩展（Spread，单位：px，部分版本显示为“大小”或“Scale”）
• 不透明度（Opacity，百分比）

整个过程，就像在查看一个设计元素的“成分表”。

二、启用高精度标注模式显示阴影详情

有时候默认视图可能为了简洁，没有展示全部信息。这通常是因为没有切换到“高精度”模式。

这个模式就像是给标注工具开了“写轮眼”。它能强制解析并渲染出所有图层效果的原始数值。

对于需要交付给开发同学进行精确还原的场景来说，这几乎是必备操作。

如何开启高精度模式

开启路径很清晰：

1. 点击顶部菜单栏的“设置” → “标注设置”。
2. 在全局配置窗口中，找到“标注内容”选项卡。
3. 勾选“显示图层效果参数”和“显示阴影详细值”这两个选项。
4. 确认后关闭设置窗口。

现在，再去选中那个带阴影的图层。你会发现右侧面板或悬浮标注框里，Offset X/Y、Blur、Spread、Color这些字段和对应数值，都已清晰在列。

三、导出JSON标注数据并人工提取阴影字段

如果遇到界面显示不全，或需要批量检查几十个元素的阴影值，有没有更高效的办法？

答案是肯定的。PxCook提供的JSON数据导出功能，此时就能派上大用场。

导出的文件里，所有图层样式都以标准的键值对形式存储。这相当于拿到了设计稿的“原始数据包”。

你可以用文本编辑器或写段简单脚本快速检索。

操作步骤与数据提取

操作步骤也不复杂：

1. 点击右上角的“导出”按钮（图标通常是一个向上的箭头）。
2. 在下拉菜单中选择“导出标注数据（JSON）”。
3. 将文件保存到本地，用VS Code、Sublime Text等文本编辑器打开。
4. 使用查找功能，直接搜索关键词“shadow”或“dropShadow”。

在搜索结果里，你会找到类似的结构对象。仔细辨认其中这几个关键字段：

• “x”: 数值
• “y”: 数值
• “blur”: 数值
• “spread”: 数值
• “color”: “#RRGGBBAA”

它们所对应的值，就是你寻找的投影参数。

这种方法虽然多了一步，但在处理复杂或批量任务时，效率优势非常明显。

《夸克》非常好用的免费AI浏览器

下载APP查看