Ps：画板

Web 或 UX 设计师 User Experience Designer经常需要同时设计适合多种设备（如手机、平板、电脑等）的网站或应用程序的 UI 界面，Photoshop 提供的画板 Artboard功能可以简化这些设计过程。

可以将一个画板理解为文档中的单个画布，可不受文档自身的画布大小的约束。多个画板就相当于在一个文档中有多个独立的画布。因此，可以用不同的画板布置适合不同设备和屏幕的设计。

也就是说， 虽然多个画板存在于同一个 Photoshop 文档中，但每个画板都有自己的坐标系和边界。整个文档的画布尺寸会根据画板的位置和大小自动调整，以容纳所有画板。

带有画板的文档可以看成一类特殊的 PSD 文档。

在图层面板中，画板显示为类似于图层组的结构，但它们是特殊的容器，具有独立的属性（如坐标系、剪裁边界）。画板内的内容被限制在其边界内，不会影响其他画板。

◆  ◆  ◆

添加新画板

1、在新建文档时添加画板

Ps菜单：文件/新建

File/New

在图层面板上选择一个或多个图层组或图层。

右键单击所选图层（组），然后选择“来自图层的画板” Artboard from Layers或“来自图层组的画板” Artboard from Group。

或者，在Ps菜单：图层/新建 New菜单下或图层面板控制菜单中执行相关命令。

3、使用画板工具添加画板

画板工具除了提供新建画板（可选择常用设备和屏幕尺寸的预设）之外，还可用来调整画板大小和位置、复制或删除以及对齐和分布画板等。

《Ps：画板工具》

◆  ◆  ◆

画板外观与视图

1、设置画板背景

在画板的“属性”面板（Ps菜单：窗口/属性）中，在“画板背景颜色” Artboard background color设置画板背景颜色，也可以将画板背景设置为透明。

2、自定义画板外观

在 Photoshop 首选项的“界面”选项卡中，可以设置画板的背景颜色以及画板的边界样式。

提示：

仅适用于 RGB 颜色模式且使用图形处理器。

3、显示或隐藏画板名称、网格以及参考线等

Ps菜单：视图/显示/画板名称

Show/Artboard Names

Ps菜单：视图/显示/网格

Show/Grid

Ps菜单：视图/显示/画板参考线

Show/Artboard Guides

为画板添加参考线的方式与普通文档添加全局参考线的方式一致。

不同的是，画板参考线附着于特定画板并能随画板一起移动或复制。

请参阅：

《Ps：参考线》

4、让画板居中显示

按住 Alt 键点击图层面板中的画板名称。

◆  ◆  ◆

操作画板

1、重命名画板

与重命名图层组一样，在图层面板上双击画板名称并输入新名称。

或者使用菜单命令。

Ps菜单：图层/重命名画板

Layer/Rename Artboard

2、在画板间移动元素

可以在文档窗口内不同画板之间进行拖移，当拖移到所有画板之外时，表示此元素不属于任何画板。

当在画板中添加或移动元素时，该元素图层会沿该画板的 Z 顺序移动到图层面板的顶部。

提示：

在画板之间移动元素时，Photoshop 会尝试将该元素放置在相对于标尺原点（位于画板的左上角）的相同位置。

也可以在图层面板中进行拖移。将元素图层从一个画板（图层组）拖移到另一个画板（图层组）。

还可以使用现有画板将不在任何画板中的图层元素进行编组。只需将画布上的元素拖移到目标画板。或者，将其移动到图层面板中的目标画板。

3、复制图层或图层组

在文档窗口中选择一个或多个元素进行复制（快捷键：Ctrl + C），再选中另一个画板进行粘贴（快捷键：Ctrl + V）。等同于在图层面板中各个画板图层组之间进行复制粘贴。

在图层面板中还可按住 Alt 键将图层或图层组复制到另一个画板图层组中。

4、防止在画板和画框内外自动嵌套

启用图层面板上方锁定 Lock行中的按钮（如上图所示），可以禁止在画板内部和外部自动嵌套，或指定给画板内的特定图层以禁止这些特定图层的自动嵌套。

要恢复到正常的自动嵌套行为，请从画板或图层中删除所有自动嵌套锁。

提示：

启用图层面板上方锁定 Lock 行中的“位置”锁定按钮，可将选定的画板的位置锁定。

被位置锁定的画板在画布中的位置保持固定，但是仍然可以照常添加元素、在内部移动元素或删除元素。 

5、按画板过滤图层

从图层面板的“搜索”弹出菜单中，选择“画板”。

选择一个画板或画板中的任何图层。图层面板视图现在仅限于显示选定的画板。

要返回到完整的图层面板视图，请取消选择所有图层，或选择画板外的某项。

6、分解画板

Ps菜单：图层/取消画板编组

Layer/Ungroup Artboards

提示：

（1）可以在画板内使用切片工具，为 Web 设计创建可点击的区域或导出特定部分的图像。

（2）Photoshop 的画板可以与 Adobe XD 进行互操作，可以将设计从 Photoshop 导出并在 XD 中继续进行交互式原型设计。

◆  ◆  ◆

导出画板

1、导出指定的画板

Export/Exports As

也可在图层面板上选定的画板上右击，选择“快速导出为 PNG” Quick Export as PNG。

2、将画板导出为图像资源

通过为图层或画板命名特定的后缀，Photoshop 可以自动导出对应的图像资源，支持多种格式和倍率。

《Ps：直接从图层生成文件（图像资源）》

3、将画板导出为 PDF

可以将所有画板导出为一个多页的 PDF 文件，适用于展示设计稿或提供给客户审阅。

请参阅：

《Ps：将画板导出到 PDF》

4、将画板导出为文件

Ps菜单：文件/导出/画板至文件

Export/Artboards to Files

可将画板导出为各种类型的文件，并提供灵活的选项以控制导出文件的位置和格式。

请参阅：

《Ps：画板至文件》

“点赞有美意，赞赏是鼓励”