使用指南

形状和工具

Pixso中的容器

在Pixso中,您可以直接将图层添加到画布中。如果要针对特定设备或屏幕尺寸进行设计,则可能需要为设计创建一个专有的区域,这就是容器的作用。

如果您以前使用过设计工具,那么您将十分熟悉容器,选择画布的某个区域来进行设计。

与传统画板不同,您还可以在其他容器中嵌套容器,以创建更复杂的设计。

在容器内,您可以使用其他功能,如布局网格、自动布局、约束和原型设计。

创建容器

使用容器工具在画布中创建容器。有几种方法可以选择容器工具:

  • 使用键盘快捷键 A 或 F
  • 在工具栏中选择【容器】工具:

创建容器操作界面

您可以在画布中创建各种容器大小:

  • 在画布中单击以创建具有 100 x 100 尺寸的默认画板
  • 在画布中单击并拖动以创建具有自定义尺寸的容器
  • 使用右侧边栏中的下拉列表选择容器预设值

创建容器操作界面

  • 在现有对象周围创建容器,选中单个或多个对象,点击鼠标右键,选中“创建为容器”,或使用键盘快捷键Ctrl + Alt + G(或 Option + Command + G)

创建容器操作界面

容器属性

容器支持以下属性:

圆角半径:将容器的拐角倒圆角以创建更柔和的边缘。

超出画板不显示:隐藏容器中超出画板边界的任何对象。

布局网格:创建布局网格以帮助设计可视化结构。

约束:定义子对象在调整容器大小时的响应方式,将约束应用于容器中的对象。

自动布局:创建响应其内容的动态容器,进行自动排版。

填充:将纯色填充、渐变、图像(PNG、JPEG、SVG)应用于容器。

描边:向"容器"添加描边以创建边框或轮廓。

效果:向容器添加阴影或模糊。

原型设计:创建在画布中的容器之间移动的交互式原型。

容器中的快捷键

  • 选择子对象:Enter 或 Return
  • 选择下一个同级:Tab
  • 选择上一个同级:Shift + Tab
  • 选择父级:Shift + Enter
将容器进行嵌套

您可以在其他容器内创建容器,这将创建新的层次结构或关系:

1. 顶层容器:直接位于画布上的任何画板。要使容器成为顶层容器,不能将其嵌套在另一个容器、组或对象中。

Pixso 在"图层"面板中加粗顶层容器,并在画布上显示任何顶层容器的名称:

将容器进行嵌套操作界面

2. 嵌套画板:放置在另一个容器中的任何容器。可以将容器放置在顶层容器中,也可以放置在其他嵌套容器中。嵌套容器既是父容器,也是子容器。

3. 孩子:容器内的任何对象。

调整容器大小

您可以像与画布上的任何其他对象一样与容器进行交互,包括更改容器的大小或比例。有几种方法可以更改容器的大小:

1. 拖动容器调整大小:选中画布中的容器,或左侧边栏中的容器,拖动容器中的一个角或一条边以调整大小。如果要忽略对子对象的任何约束,请按住 Ctrl 键拖动(或 Command 键)。

2. 调整属性容器属性值:

使用右侧边栏中的"容器"面板调整容器的"宽度"和"高度",支持输入“+、-、*、/、%”以进行数学运算,快速调整数值

调整容器大小操作界面

3. 环抱内容:

可以将容器的大小适应到子图层的大小,使用快捷键:

  • Windows: Ctrl + Alt + Shift + R 或
  • macOS: Option + Command + Shift + R 或
  • 点击按钮

调整容器大小操作界面

容器和组合

组合和容器允许您将图层组合在一起,以便可以将它们视为单个图层。

容器

  • 要向此组添加图层,只需将其拖入即可。
  • 要从此组中删除图层,只需将其拖出即可。
  • 要取消分组,请选择该容器,右键并选择"取消组合",或使用快捷键:
  • Windows: Ctrl + Shift + G
  • macOS: Command + Shift + G

组合

  • 要创建组合,请选择一些图层,右键点击并选择"组合",或使用快捷键:
  • Windows: Ctrl + G
  • macOS: Command + G
  • 首次单击此组中的图层时,将选择整个组。
  • 要选择此组中的单个图层,请双击该对象,或从图层面板中选择该对象。
  • 当组合中的图层四处移动时,组合的边界将进行调整以适合其中的图层。
  • 您可以通过在图层面板中拖动图层来将内容移入和移出此组合。
  • 允许您在其他组合中嵌套组合。
  • 要取消分组,请选择该组并选择"取消分组",或使用快捷键:
  • Windows: Ctrl + Shift + G
  • macOS: Command + Shift + G

矢量

创建矢量图层

1. 通过使用钢笔工具创建矢量图层;

2. 通过使用形状工具,创建矢量图层,在创建形状时按住Shift,以将形状的纵横比锁定为 1 : 1

编辑矢量图层

矢量编辑模式允许您选择、调整或更改单个点、线或整个形状的属性。编辑对象时,可以与现有点及其之间的线进行交互,您还可以使用钢笔工具绘制其他点并操作这些点。

要进入矢量编辑模式:

1. 选择一个路径,然后按 Return / Enter;

2. 选择一个路径,然后从工具栏中单击以下图标。

编辑矢量图层操作界面

要退出矢量编辑模式,请再次按 Return/Enter,或单击工具栏中的完成。

编辑矢量图层操作界面

填充

选择矢量图层,进入矢量编辑模式,单击工具栏中的油漆桶或按下以选择油漆桶工具快捷键 B,单击封闭矢量网络的区域以添加填充。

填充操作界面

您可以将不同的填充添加到矢量网络的单独区域,只要它们是单独的封闭区域。

填充操作界面

如果您要修改某个封闭区域的颜色,使用光标工具,点击区域,从填充色板中完成颜色调整。

填充操作界面

贝塞尔曲线

选择矢量图层,进入编辑模式,如果是曲线,则手柄已显示。如果是没有手柄的拐角,请按工具栏弯曲工具或使用快捷键 (Ctrl 或 Command) 单击该点以显示手柄并创建贝塞尔曲线。

贝塞尔曲线操作界面

单击并拖动控制滑块以调整路径的曲线。

贝塞尔曲线操作界面

圆角

图形上的任何顶点,都可以通过右侧边栏中的圆角半径属性进行倒圆角。如果选择整个路径,则会将所有角进行圆角设置,如果进入编辑模式,则可以选择单个点并单独对其进行设置。

端点样式

将样式添加到任何开放路径的终点。

具有两个端点的矢量路径

如果选择了只有两个端点的矢量路径,右侧面板中将显示端点样式属性,可以独立设置每个端点的样式。

端点样式操作界面

具有两个以上端点的矢量路径

如果选择了具有两个以上端点的矢量路径,在右侧面板的高级描边属性中显示端点样式属性。

端点样式操作界面

选择整个矢量路径时,不能单独设置结束样式,要独立设置结束样式,可以在矢量编辑下单选矢量点设置。

端点样式操作界面

使用钢笔工具

1. 默认情况下,首次进入使用 1px 宽度的钢笔工具进行绘制。

2. 进入钢笔工具的方式,点击钢笔按钮,或使用快捷键 (P) 。

使用钢笔工具操作界面

3. 从右侧描边处调整颜色、宽度和端点样式。

4. 钢笔工具将一直保持活跃状态,直到您选取其他工具或按下 ESC 键

5. 钢笔工具下,使用 Shift 可以绘制直线

使用形状工具

Pixso 提供 6 种初始图形形状:矩形、直线、箭头、原型、多边形、星型,可以在形状工具中进行访问。

使用形状工具操作界面

1. 矩形

从【形状工具】中选择【矩形】工具,或使用快捷键 "R"

1. 矩形操作界面

2. 直线

从【形状工具】中选择【直线】工具,或使用快捷键 "L";

创建之后,可以从右侧面板中描边,调整直线属性。

2. 直线操作界面

2. 直线操作界面

3. 箭头

从【形状工具】中选择【箭头】工具,或使用快捷键 "Shift + L";

与直线一样,可以通过右侧描边属性修改箭头属性

3. 箭头操作界面

4. 椭圆工具

从【形状工具】中选择【圆形】工具,或使用快捷键 "O";

可以通过圆形工具创建其他形状,如饼图、环和折断环;

  • 使用圆形工具绘制圆形
  • 将鼠标停留在圆上时,显示扇形比例控制点

4. 椭圆工具操作界面


拖动控制点向上或向下移动,圆圈中出现缺口,此时圆圈上出现三个控制点:扇形比例、开始角度、内经比

  • 拖拽扇形比例,可以调整扇形大小
  • 拖拽开始角度,可以调整开口位置
  • 拖拽内经比,可以设置内部圆环

4. 椭圆工具操作界面

4. 椭圆工具操作界面

4. 椭圆工具操作界面

5. 多边形工具

从【形状工具】中选择【多边形】工具

多边形工具中,有两个控制点:

  • 圆角:拖动可以调整多边形的圆角度数

5. 多边形工具操作界面5. 多边形工具操作界面

  • 角数:拖动可以调整多边形的角的个数

5. 多边形工具操作界面5. 多边形工具操作界面

使用缩放工具调整图层大小

在启用移动工具的情况下打开文件,单击下拉图标(或使用 "K" 快捷方式),您将找到缩放工具。

使用缩放工具,图层中的内容将一起进行缩放,缩放适用于:画板、组合、组件、组件示例、文本对象、模糊效果、矢量。

布尔运算

布尔运算通过以下四个公式之一组合任意一组形状图层:联集、减去顶层、交集和差集。

布尔组被视为单个形状图层,并共享填充和描边属性,并且可以通过后续布尔运算与其他布尔组组合,以两个部分重合的矩形为例:

联集

  • 联集将所选形状合并到一个布尔组中。如果对象重叠,则新形状的外部路径由其子图层路径的复合减去任何重叠的线段组成,矢量路径将应用于该外部路径,忽略任何相互重叠的路径段。

联集操作界面

减去顶层

  • 减去与联合相反。减去从基本形状中删除一个形状或一组形状的面积。只有底部形状层是实心的,其余的从中减去。

减去顶层操作界面

交集

  • 相交创建一个布尔组,其形状仅由其子图层的重叠部分组成。

交集操作界面

差集

差集与交集相反,差集仅显示其子图层中不重叠的区域。

差集操作界面

使用蒙版

创建蒙版

1. 选择要用作蒙版的对象,并将其放在所有对象的后面

2. 选择将成为蒙版一部分的所有图层

3. 点击右键,选择创建蒙版、点击顶部栏创建蒙版或使用快捷键:

  • Windows: Ctrl + Alt + M 或
  • macOS: Command + Option + M

创建蒙版操作界面

4. 根据图层顺序,生成蒙版成功,显示效果如下,用户可以通过左侧面板调整图层顺序,以调整蒙版在不同图层上的效果

创建蒙版操作界面

5. 使用蒙版不透明度必须大于 0% 才能正常显示效果和蒙版对象

删除蒙版

对蒙版的取消,首先应选中蒙版,可以通过左侧栏判断是否选中了蒙版,通过以下几种方式可以取消蒙版

删除蒙版操作界面

1. 选择蒙版后,单击顶部栏中的设为蒙版按钮,可以取消蒙版

删除蒙版操作界面

2. 选中蒙版后,鼠标右键点击蒙版图层,在菜单栏中,点击取消蒙版选项

删除蒙版操作界面