WebToLayers for Mac 是一款专为设计师和开发者打造的网页截图与分层导出工具。它不仅能捕获整个网页或指定区域的视觉内容，更能将网页元素（如文本、图片、背景、矢量图形）自动分离为独立的、可编辑的图层，并直接导出为分层的 PSD 或 Sketch 文件，极大简化了从网页获取设计素材并进行二次创作的流程。

一、核心界面与工作区详解

启动 WebToLayers 后，您将看到一个简洁但功能集中的主窗口，主要分为以下几个区域：

顶部工具栏：包含核心操作按钮。
- “New Capture” (新建捕获)：启动新的网页捕获任务。
- “Open” (打开)：打开之前保存的 .webtolayers 项目文件。
- “Export” (导出)：将当前捕获的图层导出为目标格式。
- “Settings” (设置)：配置默认的捕获和导出选项。
中央预览与编辑区：
- 网页预览：显示捕获的网页整体视觉效果。
- 图层列表面板：通常位于左侧或右侧，以树状结构列出所有自动生成的图层（如 <div>、<img>、<h1> 等），您可以在此重命名、显示/隐藏、选择图层。
- 属性检查器：选中某个图层后，此处会显示其尺寸、位置、字体、颜色等详细信息。
底部状态栏：显示当前操作的状态信息，如捕获进度、导出进度等。

二、完整操作流程：从捕获到导出

1. 创建/捕获新项目

操作步骤：

启动 WebToLayers。
点击顶部工具栏的 “New Capture” 按钮，或使用快捷键 ⌘N。
在弹出的对话框中，输入目标网页的完整 URL（例如：https://www.example.com）。
在下方设置捕获选项：
- Capture Mode (捕获模式)：选择 “Full Page” (整页) 或 “Visible Area” (可见区域)。
- Viewport Size (视口尺寸)：设置浏览器窗口的模拟宽度和高度（如 1440×900）。
- Delay Before Capture (捕获前延迟)：为等待动态内容加载，可设置秒数。
点击 “Capture” 按钮。软件将启动内置浏览器引擎加载该网页，并开始分析页面结构。

2. 在编辑工作区中处理图层

捕获完成后，网页内容会显示在中央预览区，所有元素已自动分层。

图层管理操作：

选择图层：在中央预览区直接点击元素，或在右侧图层列表中点击图层名称。
显示/隐藏图层：在图层列表中，点击图层名称旁边的眼睛图标 👁。
重命名图层：在图层列表中双击图层名称，或右键点击选择“Rename”，然后输入新名称。
调整图层顺序：在图层列表中直接拖拽图层上下移动。注意，此顺序会影响导出到 PSD/Sketch 中的图层堆叠顺序。
查看图层属性：选中一个图层后，在属性检查器中查看其具体的 CSS 样式、尺寸、位置等信息。

3. 导出最终文件

操作步骤：

确认所有需要的图层可见，并已完成必要的命名和排序。
点击顶部工具栏的 “Export” 按钮，或使用快捷键 ⌘E。
在弹出的导出设置窗口中：
- Format (格式)：选择 “Photoshop (PSD)” 或 “Sketch”。
- Destination (目标位置)：选择导出文件的保存路径。
- Options (选项)：
  - “Export Only Visible Layers”：仅导出可见图层。
  - “Preserve Text Layers”：保留文本为可编辑文本层（PSD）。
  - “Export with Background”：是否包含网页背景。
点击 “Export”。软件将开始渲染并生成分层文件，进度条显示在状态栏。
导出完成后，您可以在指定的目标位置找到生成的 PSD 或 Sketch 文件，并在相应软件中打开进行精细编辑。

三、常用功能进阶技巧

精准捕获特定区域：在“New Capture”设置中，除了整页和可见区域，部分版本支持自定义区域捕获。您可以在捕获后，在预览区使用裁剪工具选择特定区域，然后仅导出该部分对应的图层。
处理复杂动态网页：对于依赖 JavaScript 加载内容的单页应用 (SPA)，务必在捕获前设置足够的“Delay Before Capture”（如 3-5 秒），或使用“Interactive Capture”模式手动触发页面状态后再捕获。
优化图层结构：捕获后，图层可能非常繁多。您可以：
- 合并无关紧要的装饰性图层：按住 ⌘ 多选图层，右键选择“Group”进行编组（导出时组结构会被保留）。
- 批量隐藏/删除不需要的元素，以简化最终导出文件。
保存项目文件：在导出为设计文件前，可以使用 ⌘S 将当前状态保存为 .webtolayers 项目文件，方便日后重新调整和导出。

四、常见问题与解决方案

问题现象	可能原因	解决方案
捕获的页面布局错乱或空白	1. 网页使用了复杂或不被完全支持的 CSS/JS 框架。 2. 视口尺寸设置不当。 3. 网络加载失败。	1. 尝试不同的视口尺寸（如切换到移动端尺寸）。 2. 增加“捕获前延迟”时间。 3. 检查网络连接，或尝试捕获更简单的静态页面作为测试。
导出的 PSD 文件中文字是图片而非文本层	1. 网页字体特殊或使用了 WebFont 但未正确嵌入。 2. 导出时未勾选“Preserve Text Layers”选项。	1. 确保导出设置中“Preserve Text Layers”已勾选。 2. 对于特殊字体，导出后可能在 Photoshop 中需要手动替换字体。
图层数量过多，难以管理	网页结构复杂，每个 DOM 元素都被创建为独立图层。	1. 在导出前，在图层列表中大量隐藏不需要编辑的装饰性小元素图层。 2. 仅保留需要复用的核心组件图层可见再进行导出。
软件在捕获时卡住或无响应	1. 目标网页过大或资源过多。 2. 软件与当前 macOS 系统版本存在兼容性问题。	1. 耐心等待，大型页面分析和分层需要时间。 2. 尝试强制退出并重启软件。 3. 访问开发者官网，检查是否有更新版本。

五、WebToLayers for Mac 快捷键汇总表

功能	快捷键 (Mac)	说明
新建捕获	⌘N	打开新捕获对话框
打开项目	⌘O	打开 .webtolayers 项目文件
保存项目	⌘S	保存当前项目状态
导出文件	⌘E	打开导出设置对话框
关闭当前窗口	⌘W	关闭当前捕获项目
退出应用	⌘Q	完全退出 WebToLayers
隐藏/显示图层	点击眼睛图标	在图层列表中操作，无全局快捷键
重命名图层	双击图层名	在图层列表中操作
选择所有图层	⌘A	在图层列表激活时有效
查找	⌘F	在图层列表中搜索图层
复制	⌘C	复制选中图层信息（非图层本身）
粘贴	⌘V	粘贴信息
偏好设置	⌘,	打开应用程序偏好设置