暗色模式
基础工具指南
本章介绍 MasterGo 中各种绘图和设计基础工具的使用方法，包括形状、钢笔、图片、蒙版、布尔运算等核心工具。
容器与组
容器
容器通常用来表示创作界面的屏幕，MasterGo 中的容器工具更加强大，除了可以划定界面范围，还可以添加布局网格、圆角填充等属性，也可以在容器中嵌套另一容器。
创建容器： 在工具栏中选择容器工具或使用快捷键 F，可以在右侧属性面板选择预设屏幕尺寸，或在画布中点击/拖拽创建。
编辑容器尺寸的方式：
- 鼠标拖拽容器四角进行尺寸修改
- 在右侧属性面板中修改容器的宽和高
- 在容器下拉菜单中选择预设尺寸
适应内容大小： 点击"适应内容大小"，自动使容器调整为适应内容的尺寸。
裁剪超出内容： 打开"裁剪超出内容"开关后，超出容器部分的内容会被隐藏。
删除容器： 选中容器后按删除键。如果不想删除容器内的图层，可以使用快捷键 Shift + Command + G 取消编组。
容器也可以作为矩形使用，可添加填充、描边、圆角和特效等属性。
组
默认情况下，组的边界由子元素决定。
| 操作 | 快捷键 |
|---|---|
| 创建分组 | Command + G |
| 取消分组 | Shift + Command + G |
| 穿透选择子图层 | 按住 Command 单击 |
| 移动图层移入/移出组 | 在左侧图层栏中拖拽 |
当组内的图层移动时，组的边界将调整以适合其中的图层。
区域工具
区域工具是一种画布设计元素的组织工具，可以帮助将画布中的一组画板或元素组织进一个区域并命名。
创建区域
- 点击顶部工具栏中区域工具或使用快捷键 Q
- 按住鼠标左键在画布上拖拽绘制区域
添加设计到区域
- 拖动设计到区域范围内
- 调整区域的大小和位置以包含想要添加的设计
编辑区域
- 标题：双击画布中区域的标题部分进行编辑
- 填充和描边：在右侧属性栏中修改区域的填充和描边颜色
可开发状态 (Ready For Dev)
允许编辑者将某一区域标记为"可开发状态"，被标记的区域在研发模式中有单独的展示区域。
- 选中区域图层，点击"开启可开发状态"
- 点击"移除状态"可取消可开发状态
删除区域
- 删除区域及内容：选中区域，按 Delete / Backspace
- 仅删除区域不删内容：Command + Shift + G (Mac) / Ctrl + Shift + G (Windows)
等比缩放工具
选择等比缩放工具，或按 K 键激活。拖拽缩放图像或修改属性栏中的宽高属性，可保证图层的原始比例不变。支持多选图层。
形状工具
你可以使用形状工具绘制需要的图形。
常用形状
| 形状 | 快捷键 | 说明 |
|---|---|---|
| 矩形 | R | 正方形和矩形，支持独立调整四个圆角 |
| 圆 | O | 圆形和椭圆形 |
| 直线 | L | 任意位置绘制线条，支持虚线和箭头 |
| 多边形 | - | 默认三角形，可调整边数 |
| 星形 | - | 默认五角星，可调整角数、圆角和内点距离 |
拖动创建技巧
- 按住 Shift：创建等边图层，或以 45° 角为轴创建直线
- 按住 Option：从中心创建形状并调整大小
- 按住 Shift + Option：同时执行以上两项
矩形圆角
单击矩形，在矩形内出现四个点。把光标放置任意一点上可看到圆角度数（默认 0）。拖动任意点向矩形中心可以让角变圆。按住 Option 键可单独拖拽某一个圆角点。
创建半圆
- 双击圆形进入编辑模式
- 单击选中其中一个点，按 Delete 键
- 单击钢笔工具图标（P），连接两个点闭合半圆
星形编辑
- 拖动最上方圆点：调整星星内点与中心的距离
- 拖动中间圆点：调整星星圆角角度
- 拖动最右边圆点：调整星星角的数量
钢笔工具
钢笔工具用于创建由点和线构成的矢量图形。与位图不同，矢量图形可以无限缩放而不失真。
基本概念
- 锚点：钢笔图形路径上的每个节点，用于定义图形的形状和结构
- 路径：连接锚点之间的线段，形成图形的轮廓和形状
使用钢笔工具
快捷键：P，在顶部工具栏点击钢笔工具图标。
编辑模式
进入编辑模式：
- 双击任意图层
- 选中图层后点击顶部工具栏的编辑模式图标
退出编辑模式：
- 快捷键：ESC
- 点击右侧属性栏"退出编辑模式"按钮
创建曲线
方式一：使用钢笔工具绘制曲线
- 点击画布，创建锚点
- 在曲线弯曲处，点击鼠标拖出控制杆，通过控制柄调整曲线弧度和方向
- 双击曲线终点或按 Enter 键结束绘制
方式二：将直线修改为曲线
- 进入编辑模式，点击矢量图形中的锚点
- 在右侧属性栏中选择曲线类型：直角、完全对称、角度对称、不对称
- 或双击选中锚点直接修改为对称曲线
- 或使用曲线工具（Command / Ctrl）拖动控制杆
删除操作
| 操作 | 快捷键 |
|---|---|
| 删除锚点和相连路径 | 双击选中锚点，按 Delete |
| 删除锚点并修复路径 | Shift + Delete |
| 裁剪工具删除路径 | X |
复制路径
- 进入编辑模式，选中路径或锚点
- 按住 Option 键拖动复制
- 或使用 Command + C 复制
矢量网格
与传统矢量工具不同，MasterGo 的钢笔工具采用矢量网格设计。它不受方向限制，每个锚点都可以连接多条路径，无需创建新的对象，大幅提高了绘图速度。
连接线工具
连接线可在不同组件和页面之间创建连线并添加文字说明，直观展示交互逻辑，使产品设计思路更加清晰和可视化。
连接线工具优势
- 可为多类图层添加连线：支持图形、图片、路径、组件与实例、容器与组等多种图层类型
- 连接线跟随图层移动：支持自动跟随页面、图层移动，无需手动调整
- 自由调整连线路径：通过拖动连线手柄调整路径，双击手柄可恢复初始状态
- 便捷添加连线说明：双击连接线添加注释说明，文本框自动保持在连接线上
使用方法
| 操作 | 说明 |
|---|---|
| 添加连接线 | 快捷键 X，点击工具栏连接线按钮 |
| 调整连接点 | 拖动连接点，自由调整起始点位置 |
| 改变路径 | 拖动连接线上的蓝色手柄 |
| 修改文字效果 | 在右侧属性面板中调整文本样式 |
| 改变形状样式 | 在右侧属性面板调整粗细、起始点形状、虚线或实线 |
图片
MasterGo 的图片工具支持 PNG、JPEG、WEBP、GIF 格式的图像。
添加图像
1. 向工作台添加图像：
- 将图像文件拖入工作台
- 在工作台右上角选择"导入文件"
- 以上方法会新建一个设计文件，并创建矩形图像，尺寸与原始尺寸相同（宽或高最大 4096px，超过等比缩放）
2. 向画布添加图像：
- 将图像直接拖入画布
- 复制图像粘贴到画布：Command + V (Mac) / Ctrl + V (Windows)
- 点击形状工具旁的下拉箭头选择图片：Shift + Command + K (Mac) / Shift + Ctrl + K (Windows)
3. 向容器添加图像：
- 复制粘贴或拖入容器，图像以新图层形式添加
- 选中容器在填充栏中选择图片填充，图像可成为容器自身的填充
4. 向已有图层添加图像填充：
- 选中图层，在填充栏中选择图片填充
- 复制图像粘贴至形状或路径图层时，以填充形式粘贴
图像属性
选中图片后，在右侧属性面板的填充栏中可以设置图片属性。
编辑图像
双击图像或点击填充栏中的图片可唤起编辑弹窗。
| 填充类型 | 说明 |
|---|---|
| 充满 | 图像按原比例充满整个图层，比例不一致则显示局部 |
| 适应 | 图像按原比例填充，比例不一致则出现两端空白 |
| 拉伸 | 图像完整填充进图层，比例不一致则拉伸 |
| 裁剪 | 拖动蓝色手柄更改边界，双击内部确认裁剪 |
| 平铺 | 拖动平铺框修改缩放百分比 |
图像调整参数：
- 曝光：曝光程度
- 对比度：图像亮部和暗部之间的对比度
- 饱和度：图像中颜色的强度
- 色温：从冷色（蓝）到暖色（红）
- 色调：图像的相对明暗程度
- 高光：图像中高光区域的亮度
- 阴影：图像中阴影区域的亮度
添加样式
点击样式图标，在颜色样式弹窗内选择右上角的 + 号，编辑名称选择保存，即可将图片创建为样式。
蒙版
蒙版工具主要用于创建视觉效果和控制元素的可见性，如隐藏部分内容、创建剪裁效果或应用各种形状的蒙版。
创建蒙版
- 快捷键：Control + Command + M (Mac) / Alt + Ctrl + M (Windows)
- 选择图层后单击工具栏中"设为蒙版图层"的按钮
使用形状作为蒙版时，该蒙版会应用于图层面板中处于其下方的同级图层。如果已是蒙版的图层，再次点击图标会转为普通图层。
布尔运算
布尔运算功能用于创建和编辑复杂形状，通过不同的运算规则组合或分割形状，生成新的图形。
五种模式
| 模式 | 说明 |
|---|---|
| 联集 | 合并多个形状为一个整体，删除重叠区域的路径 |
| 减去顶层 | 从基础形状中减去顶层形状，保留剩余部分 |
| 交集 | 保留所选形状的重叠区域，删除其他部分 |
| 差集 | 删除所选形状的重叠区域，保留其他部分 |
| 拼合 | 合并多个形状为一个整体，保留所有路径 |
使用方法
- 选择图层后，将鼠标悬停在顶部工具栏的布尔运算图标上
- 点击所需的布尔运算模式
- 将图层从左侧图层栏的布尔运算组中拖出，可取消布尔运算
拼合与轮廓化
拼合
拼合功能将选择的任何对象或图层合并为一个矢量图层。使用效果：
- 合并多个图层为一个矢量图层
- 显示图层的真实边界
- 将文字图层转换为矢量图层
- 将布尔运算图层合并为一个矢量路径
使用方式：
- 右键点击选择"拼合"
- 快捷键：Command + E (Mac) / Ctrl + E (Windows)
- 点击工具栏布尔运算，选择"拼合"
轮廓化
使用方式：
- 右键单击选择"轮廓化"
- 快捷键：Option + Command + O (Mac) / Alt + Ctrl + O (Windows)
效果：
- 对形状使用轮廓化：将描边转化为带填充的矢量图形，有填充则同时将填充转化为矢量路径
- 对布尔运算图层使用轮廓化：描边转化为带填充的矢量图形，并拼合为一个矢量图层
- 对文字使用轮廓化：文字图层变为矢量图层
视图控制工具
使用工具栏上小手的图标，可任意拖动画布查看所有图像而不改变图像位置。或按住空格键拖拽画布也可达到相同效果。
快捷键： H
颜色选择器
颜色选择器可用于设置图层填充、描边或画布的背景颜色，支持纯色填充、渐变或图像，还可控制颜色色调、饱和度或不透明度。
打开颜色选择器
- 在画布中选择图层
- 在右侧属性栏中，点击填充或描边功能右侧的 + 按钮
- 点击填充设置，打开颜色选择器
颜色选择器功能
| 功能 | 说明 |
|---|---|
| 填充类型 | 纯色、渐变（线性、径向、旋转、菱形）、图像 |
| 混合模式 | 预览并应用混合模式 |
| 调色板 | 选择颜色，下方呈现色值信息 |
| 吸管工具 | 从画布中吸取任意颜色使用 |
| 色调 | 单击拖动调整 |
| 透明度 | 调整颜色的透明度 |
| 颜色模式 | HEX、CSS、RGB、HSL、HSB 之间切换 |
| 通用色库 | 快速选择颜色绘图 |
色彩模式
| 模式 | 说明 |
|---|---|
| HEX | 通过六位十六进制代码定义颜色，常用于网页设计 |
| CSS | 支持命名颜色、HEX、RGB、HSL 等表示方式 |
| RGB | 通过红、绿、蓝三色光混合定义颜色 |
| HSL | 基于色相、饱和度和亮度定义颜色 |
| HSB | 与 HSL 相似，使用亮度调整明暗度 |
吸管工具
吸管工具可提取画布中任何对象的颜色并应用到目标图层中。
- 快捷键：I
- 选择要编辑的图层，打开颜色选择器，选择吸管工具图标
- 鼠标悬停在画布上，右侧放大镜窗口显示颜色及其十六进制代码
- 单击将采样颜色应用于所选对象
渐变色工具
MasterGo 支持四种主流的渐变模式：
| 渐变类型 | 视觉效果 |
|---|---|
| 线性渐变 | 颜色沿直线从一个点平滑过渡到另一个点 |
| 径向渐变 | 颜色从中心点向外呈圆形或椭圆形扩散 |
| 角度渐变 | 颜色围绕中心点进行 360 度扇形渐变 |
| 菱形渐变 | 颜色从中心点向外呈菱形扩散 |
渐变色操作技巧：
- 添加色标：在渐变色条空白区域点击，即可新增色标
- 删除色标：选中色标按 Delete，或拖拽出面板
- 画布直操：在画布渐变控制线上点击可快速添加色标
- 角度锁定：按住 Shift 可将旋转角度锁定在 15° 的倍数上
常见问题：
- 导出为 SVG 时，角度渐变和菱形渐变会自动重映射为径向渐变以保持兼容性
- 如需完美还原复杂渐变，建议以 PNG 或 JPG 格式导出
色彩管理
颜色配置文件（ICC 配置文件）用于确保在不同设备和媒介之间颜色的一致性和准确性。
sRGB 与 Display P3
| 配置文件 | 适用场景 |
|---|---|
| sRGB | 主要为网页设计或在各种显示器上展示的内容 |
| Display P3 | 为 iOS 设备或视网膜屏幕设计的内容，色彩更鲜艳 |
Display P3 的色彩范围比 sRGB 大约 49%。需确认显示器是否支持所选颜色配置文件。
设置默认颜色配置文件
- 打开可编辑的文件
- 点击左上角主菜单 -> 偏好设置 -> 显示效果
- 从颜色配置文件模式中选择 sRGB 或 Display P3
更改文件的颜色配置文件
- 打开可编辑的文件
- 点击左上角主菜单 -> 文件 -> 颜色配置文件
- 从菜单中选择 sRGB 或 Display P3
注意：更改颜色配置文件时，颜色在视觉上会变化，但色值（如十六进制代码或 HSB 值）保持不变。
导出内容
导出时会根据文件的颜色配置文件导出内容。文件为 Display P3 时，导出内容也是 Display P3。
客户端颜色配置设置
客户端支持 sRGB 和系统设置。当选择系统设置时，客户端的颜色配置文件跟随当前显示器保持一致。浏览器（以 Chrome 为例）默认跟随显示器颜色配置文件。