图层

图层是可以放置在视口中的对象或项目。画板、形状、文本、路径和图形都是图层。下面介绍 Penpot 中可用的不同图层，以及如何充分使用它们。

可用图层

画板

画板是一种图层，可作为内容组织和布局的高级容器。如果你想针对特定屏幕或打印尺寸进行设计，画板非常有用。画板可以包含其他画板。一级画板默认会显示在查看模式中，作为设计中的屏幕或文档中的页面。画板内部的图层也可以被裁剪。画板是 Penpot 中非常强大的元素，为创建和组织设计提供了大量可能性。

创建画板

要创建画板，请使用工具栏中的画板工具，或使用快捷键 B。

选择画板工具后，有两种方式：

• 预先选择画板尺寸：可以从提供的预设中选择常见设备分辨率和标准打印尺寸。使用搜索字段可按名称筛选预设。
• 点击并拖动：绘制一个大致尺寸的框架，然后立即编辑其宽高值以获得精确尺寸。

(视频略)

提示：可以使用菜单中的 “Selection to board” 选项，或快捷键 Ctrl/⌘ + Alt + G，围绕一个或多个选中图层创建画板。

选择画板

选择画板时有两种情况：

• 对于内部至少有一个对象的一级画板，点击画板名称，或按 Ctrl/⌘ 并点击画板区域来选择，然后拖动。
• 对于其他画板（空的一级画板和内部画板），直接点击即可选择。

(视频略)

重命名画板

可以通过多种方式重命名画板：

• 在工作区视口中双击画板名称。
• 在图层面板中双击画板名称。
• 按 Alt/⌥ + N，在图层面板中重命名画板。
• 右键显示菜单并选择 “Rename”。

(视频略)

将画板设为缩略图

在工作区中，可以选择某个画板作为文件缩略图，它会显示在仪表盘的文件卡片中。

要设置自定义缩略图：

1. 选择一个画板。
2. 右键显示菜单并选择 “Set as thumbnail”，或按 Shift T。

(视频略)

复制画板链接

你可以获取每个单独画板的链接，方便与团队成员共享，或在文档中包含直接链接。

有两种复制画板直接链接的方式：

• 使用菜单：选择画板，右键并选择 “Copy link”。
• 使用快捷键：选择画板并按 Shift/⇧ + Alt/⌥ + C。

裁剪内容

画板提供是否裁剪其内容的选项。

(视频略)

在查看模式中显示

画板可以作为查看模式中的独立画板/屏幕显示。使用此设置可以决定哪些画板应作为演示中的独立项目显示。

默认值：

由于第一层级（一级）的看板极有可能被用作屏幕，而其内部的看板则不会，因此对于新创建的看板有不同的默认设置。

• 在第一层级（视口）创建的看板：默认显示。
• 在其他看板内部创建的看板：默认不显示。

在导出中显示填充

有时你并不需要画板成为设计的一部分，而只是把它作为工作的支撑。Penpot 允许你决定画板填充是否在导出中显示；只需勾选或取消填充设置下方的 “Show in exports” 选项。

调整画板尺寸以适配内容

你可以点击设计侧边栏中的图标，让画板尺寸适配其内容。

画板参考线

你可以在画板上设置参考线，以帮助对齐图层。

阅读更多关于参考线的内容。

右键点击画板并选择 Clear artboard guides，可以移除该画板上的所有参考线。

复制为图片

Copy as image 会把画板作为位图复制到系统剪贴板。选择画板，打开上下文菜单，选择 Copy/Paste as…，然后选择 Copy as image。之后可以像普通图片一样粘贴到其他应用中。

原型画板

你可以把画板与其他画板连接起来，创建丰富的交互。

阅读更多关于原型的内容。

矩形和椭圆

矩形和椭圆是两种基本的“原始”几何形状，在开始设计时很有用。

快捷键：椭圆为 E，矩形为 R。

要进一步了解如何编辑和修改这些形状，请查看图层基础操作。

(视频略)

文本

文本图层用于在 Penpot 设计中添加文案。如果你想深入了解字体、排版和高级文本选项，请查看专门的 “文本与排版” 部分。

曲线（自由手绘）

曲线工具允许你以自由手绘模式直接创建路径。点击工具栏图标或按 Shift/⇧ + C 选择曲线工具。

创建的路径会包含很多点，但编辑方式与其他曲线相同。

路径（贝塞尔）

路径由两个或更多节点以及它们之间的线段组成，线段也可以是曲线。要绘制新路径，请点击工具栏中的路径工具，或按 P。创建路径有两种方式：

1. 点击创建新的角点节点。
2. 点击并拖动创建曲线节点。

完成路径：

1. 点击起始节点来闭合路径。
2. 按 Esc 或 Enter 停止编辑，以保持路径开放。然后再次按 Esc 退出编辑模式。

提示：添加节点时按住 Shift/⇧，当前节点与下一个节点之间的角度会以 45 度增量变化。

(视频略)

编辑节点

要编辑节点，请双击路径，或选择路径并按 Enter。你可以编辑单个节点或创建新节点。按 Esc 退出节点编辑。

(视频略)

节点类型

节点有两种类型：曲线或角点（直线）。选中节点的类型可以在贝塞尔菜单中更改。曲线节点具有贝塞尔手柄，可用于修改路径曲率。

(视频略)

图片

插入图片

向 Penpot 文件插入图片有多种方式：

• 使用工具栏中的图片工具，或按 K 从文件系统插入图片。
• 从电脑拖动图片到视口。
• 复制图片并粘贴，或直接从浏览器拖动图片。
• 从 Penpot 库中拖动图片。

图片宽高比

默认情况下，图片会填充图层背景，因此会占满整个图层，同时保持宽高比。这对弹性设计非常有用，因为图片可以适应不同尺寸。

如果你不希望图片在调整尺寸时保持宽高比，只需在图片设置中取消相应选项。

(视频略)

图层操作

创建

要创建图层，需要点击工具栏中的对应工具类型（画板、矩形、椭圆、文本、图片、路径或曲线）。通常随后需要在视口中点击并拖动鼠标。

创建椭圆或矩形时按住 Shift/⇧，可以保持宽高相等。

(视频略)

粘贴并替换

Paste to replace 会用剪贴板内容替换所选形状，并保留选择。可使用上下文菜单，或按 Ctrl/⌘ + Shift/⇧ + V。

复制

复制图层有多种方式：

1. 按 Ctrl/⌘ + D，在所选图层正上方复制一个图层。
2. 在视口或图层面板中右键点击所选图层，使用图层菜单中的选项。
3. 选择图层后按住 Alt/⌥ 并拖动，可以同时复制并拖动新图层。

(视频略)

删除

删除图层有几种方式：

1. 按 Supr/⌫ 删除所选图层。
2. 在视口或图层面板中右键点击所选图层，使用图层菜单中的删除选项。

移动

要在视口中移动一个或多个图层，先选择它们，然后点击并拖动到想放置的位置。你也可以使用设计面板设置相对于视口或画板的精确位置。

(视频略)

选择

选择图层最简单的方式是点击它。确保工具栏中已选择 “移动” 指针。

要选择多个图层，可以在想选择的图层周围点击并拖动。也可以在按住 Shift/⇧ 时点击多个图层。按住 Shift/⇧ 并点击可逐个取消选择图层。

(视频略)

在图层面板中选择图层

1. 点击图层进行单选。
2. 按住 Ctrl/⌘ 并点击两个或多个图层进行多选。
3. 选择两个或多个图层时按住 Shift/⇧，会选择选择区域内的所有图层。

(视频略)

忽略组选择图层（深度选择）

如果某个元素因为位于一组元素下方而难以选中，可以按住 Ctrl/⌘，让选择忽略组区域，并把所有图层视为同一级别。

(视频略)

选择组内图层

要选择组内图层，请双击。第一次点击选择组，第二次点击选择图层。

选择图层菜单

右键图层显示的下拉菜单中有 “Select layer” 选项，允许用户在光标位置下方的多个图层中选择一个。

隐藏和锁定图层

隐藏和显示图层

可以点击图层面板中图层旁边的眼睛图标来控制任何图层的可见性。隐藏图层不会显示在画布上，但仍可在图层面板中选择、调整顺序或修改属性。眼睛图标始终显示图层当前是可见还是隐藏，便于管理复杂设计。

锁定和解锁

锁定图层有助于防止画布上的意外修改或移动。图层锁定后，不能直接在画布区域移动或编辑。不过，你仍然可以在图层面板中选择锁定图层，并调整颜色、效果或名称等属性。图层名称旁的锁图标会显示其锁定状态，帮助你保持设计有序和受保护。

(视频略)

编组

编组图层可以同时移动、变换或设置样式。

• 编组：选择两个或多个图层，然后按 Ctrl/⌘ + G。也可以使用右键打开的图层菜单。
• 取消编组：按 Shift/⇧ + G，或在所选组上右键打开图层菜单并使用对应选项。

(视频略)

蒙版

蒙版是一种执行裁剪的图层，只显示落在其形状范围内的一个或多个图层部分。

• 创建蒙版：选择多个图层或一组图层，然后通过图层菜单或按 Ctrl/⌘ + M 应用蒙版。图层列表中最低层的形状会被用作蒙版。
• 取消蒙版：选择蒙版，然后按 Shift/⇧ + Ctrl/⌘ + M，或使用图层菜单。

(视频略)

调整尺寸

要调整所选图层尺寸，可以使用选择框边缘的控制点。确保光标处于调整尺寸模式。也可以使用设计面板，并可链接宽度和高度。

• 调整图层尺寸时按住 Shift/⇧，可保持宽高比。
• 调整图层尺寸时按住 Alt/⌥，可从中心调整，并同时调整相对两侧。

(视频略)

缩放元素、文本和属性

按 K 或从主文件菜单激活缩放工具，可以在保持视觉外观的同时缩放元素。激活后，你可以调整文本、图层和组的尺寸，并在缩放属性（包括描边、阴影、模糊和圆角）时保持宽高比和比例。

(视频略)

旋转

要旋转所选图层，可以使用选择框边缘的控制点。确保光标处于旋转模式。旋转时按住 Ctrl/⌘，角度会以 45 度增量变化。也可以在设计面板中找到此选项。

(视频略)

翻转

翻转图层选项位于上下文菜单中（选择图层并右键）。也可以使用快捷键：

• 水平翻转图层：选择图层并按 Shift/⇧ + H。
• 垂直翻转图层：选择图层并按 Shift/⇧ + V。

(视频略)

对齐和分布

对齐和分布图层的选项位于 Design 面板顶部。

对齐图层

对齐会把所有所选图层移动到相对于其中一个图层的位置。例如，顶部对齐会让元素与最上方元素的边缘对齐。

(视频略)

分布图层

分布会以相等距离在垂直和水平方向排列图层。

(视频略)

布尔运算

可以使用 “布尔” 运算以不同方式组合组中的形状，从而创建更复杂的图层。布尔运算是非破坏性的，原始形状仍保持分组并可继续编辑。可用的五种布尔操作包括：并集、差集、交集、排除和扁平化。使用布尔运算可以为你的设计带来许多图形选项和可能性。

(视频略)

• Union：结果是形状之和。
• Difference：与并集相反，结果图层会从底部形状中切除顶部形状区域。
• Intersection：创建一个组，其形状为多个形状的重叠区域。
• Exclusion：与交集相反，结果形状是不重叠的区域。
• Flatten：严格来说不是布尔运算，它是把一组形状的路径永久合并为单一路径的方式。

调整尺寸约束

约束允许你决定在调整容器大小时图层如何变化。

应用约束

约束允许你决定在调整父容器大小时图层如何变化。每个图层都可以应用水平和垂直约束。

要应用约束，请选择图层并使用设计面板中的约束图或约束选择器。

(视频略)

约束默认设置为 “Scale”，但也有其他选项。

水平约束

• Left：图层保持相对于父容器左侧的尺寸和位置。
• Right：图层保持相对于父容器右侧的尺寸和位置。
• Left & right：图层调整大小，同时保持到父容器水平两侧的距离。
• Center：图层保持相对于父容器水平中心的尺寸和位置。
• Scale：图层会按父容器尺寸比例水平调整大小。

垂直约束

• Top：图层保持相对于父容器顶部的尺寸和位置。
• Bottom：图层保持相对于父容器底部的尺寸和位置。
• Top & bottom：图层调整大小，同时保持到父容器垂直两侧的距离。
• Center：图层保持相对于父容器垂直中心的尺寸和位置。
• Scale：图层会按父容器尺寸比例垂直调整大小。

设置图层样式

Penpot 为每个图层提供多种属性。选中图层后，选项会显示在右侧设计面板中。

边框圆角

你可以自定义矩形和图片的边框圆角，并且可以单独自定义每个角。

(视频略)

阴影

在设计面板中添加阴影很简单。你可以添加任意数量的阴影。

阴影选项包括：

• 类型：Drop（图层外部）、inner（图层内部）。
• 水平位置（X）。
• 垂直位置（Y）。
• 模糊。
• 扩散。
• 颜色和不透明度。

模糊

Penpot 中每个图层都可以设置模糊。

应用大量或较大的模糊值会影响 Penpot 性能，因为它会消耗大量浏览器资源。

(视频略)

不透明度和混合

可以设置图层的整体不透明度和混合模式。

混合允许你控制图层如何与其下方图层交互，决定当前图层像素如何与底层像素组合。可使用混合实现阴影、高光或创意视觉样式等效果。

可用混合选项：

• Normal
• Darken
• Multiply
• Color burn
• Lighten
• Screen
• Color dodge
• Overlay
• Soft light
• Hard light
• Difference
• Exclusion
• Hue
• Saturation
• Color
• Luminosity

复制/粘贴属性

你可以将填充、描边、阴影等属性从一个图层复制并应用到另一个图层，或通过几次点击应用到多个图层。可以使用图层菜单或快捷键完成。

(视频略)

使用图层菜单：

1. 选择一个图层。
2. 右键显示图层菜单。
3. 按 Copy/Paste as… > Copy properties。
4. 选择一个或多个其他图层。
5. 右键显示图层菜单。
6. 按 Copy/Paste as… > Paste properties。

使用快捷键：

• 复制属性：Ctrl/⌘ + Alt/⌥ + C
• 粘贴属性：Ctrl/⌘ + Alt/⌥ + V