Pencil 高级绘图技巧与自定义图形

路径编辑

Pencil 的路径编辑功能允许你对绘制的形状进行精细调整。

进入路径编辑模式

操作步骤：
1. 选择需要编辑的形状
2. 右键选择「编辑路径」
3. 或双击形状进入编辑模式

路径编辑工具

路径编辑模式下可以：

• 移动锚点：拖动路径上的控制点
• 调整手柄：拖动贝塞尔曲线控制手柄
• 添加锚点：在路径上点击添加新锚点
• 删除锚点：选中锚点后按 Delete

贝塞尔曲线基础

贝塞尔曲线由以下元素组成：
- 锚点 (Anchor Point)：路径上的固定点
- 控制手柄 (Control Handle)：调整曲线弯曲程度

手柄操作：
- 拖动单个手柄：创建不对称曲线
- 拖动两个手柄：保持切线方向
- Alt+拖动手柄：独立调整单个手柄

自定义图形

创建自定义形状

Pencil 允许你保存自定义的图形组件：

# 保存自定义形状
1. 绘制需要的形状
2. 选中形状
3. 菜单：格式 → 保存为可重用形状
4. 输入名称和分类
5. 确定保存

# 使用自定义形状
1. 菜单：插入 → 我的形状
2. 选择保存的形状
3. 在画布上点击放置

手画工具 (P)

手画工具用于自由绘制不规则形状：

# 使用技巧
1. 按 P 切换到手画工具
2. 在画布上按住鼠标绘制
3. 释放完成绘制

# 优化手画路径
1. 选择手画路径
2. 菜单：路径 → 简化路径
3. 调整简化程度
4. 确定完成优化

橡皮擦工具 (X)

橡皮擦用于擦除不需要的部分：

橡皮擦选项：
- 笔触橡皮擦：擦除整条路径
- 像素橡皮擦：擦除部分区域（图像）

渐变填充

创建渐变

Pencil 支持创建漂亮的渐变填充：

# 设置渐变填充
1. 选中形状
2. 在属性面板找到「填充」
3. 选择「渐变」选项
4. 设置渐变类型和颜色

渐变类型

类型	说明	适用场景
线性渐变	直线方向的颜色过渡	按钮、背景
径向渐变	从中心向外扩散	图标、光效
角度渐变	环形颜色变化	复杂背景

渐变编辑器

渐变编辑器面板：
┌─────────────────────────────────┐
│ 类型：[线性 ▼] 角度：[45°]      │
│                                 │
│ ●━━━━━━●━━━━━━●━━━●            │
│ 色标 1   色标 2  色标 3  色标 4  │
│                                 │
│ [添加色标] [删除色标] [反转]     │
└─────────────────────────────────┘

渐变实战技巧

# 1. 按钮渐变
渐变：#4CAF50 → #81C784
角度：180°（从上到下）
应用：CTA 按钮背景

# 2. 卡片阴影渐变
渐变：rgba(0,0,0,0.3) → rgba(0,0,0,0)
角度：90°（从顶到底）
应用：卡片顶部阴影

# 3. 金属质感渐变
渐变：#E0E0E0 → #9E9E9E → #E0E0E0
角度：45°
应用：工具栏背景

高级混合模式

混合模式类型

Pencil 提供多种图层混合模式：

模式	效果
正常	无混合效果
叠加	增强对比度
柔光	柔和增亮/变暗
变暗	只显示比当前像素暗的像素
变亮	只显示比当前像素亮的像素
差值	显示两个图层的差异
颜色减淡	提亮底层颜色

混合模式使用场景

# 1. 叠加模式 - 纹理叠加
背景图片 → 叠加混合 → 50% 透明度
应用：给原型添加真实纹理

# 2. 柔光模式 - 阴影效果
形状阴影 → 柔光混合
应用：创建柔和的投影效果

# 3. 变暗模式 - 剪切蒙版
底层图片 → 变暗混合 → 上层形状
应用：创建形状遮罩

高级路径操作

路径布尔运算

Pencil 支持路径的合并和运算：

布尔操作菜单位置：格式 → 路径操作

可用操作：
├── 合并形状
├── 从形状中减去
├── 与形状相交
└── 排除重叠部分

路径操作实战

# 1. 合并形状 - 创建复杂图标
操作：选中多个圆形
效果：合并成一个连续形状

# 2. 减去形状 - 创建月牙形
操作：选中大圆，按住 Ctrl 再选中月牙形状
效果：从大圆中减去月牙区域

# 3. 相交操作 - 提取重叠区域
操作：选中两个重叠的形状
效果：只保留重叠部分

路径偏移

路径偏移功能：
菜单位置：格式 → 路径操作 → 偏移路径

设置选项：
- 偏移量：-50px 到 50px
- 圆角：0px 到 50px
- 连接类型：尖角、圆角、斜角

变形工具

缩放变形

缩放操作：
- 选中元素后拖动控制点
- 按住 Shift 保持宽高比
- 按住 Alt 从中心缩放

精确缩放：
1. 选择「变换」面板
2. 输入精确的宽度和高度
3. 按 Enter 应用

旋转变形

旋转操作：
- 选中元素后，将鼠标移到角落
- 出现旋转光标后拖动
- 按住 Shift 旋转角度固定为 15° 倍数

精确旋转：
1. 选择「变换」面板
2. 输入旋转角度
3. 按 Enter 应用

翻转

翻转操作：
- 水平翻转：Ctrl+H
- 垂直翻转：Ctrl+Shift+H

应用场景：
- 创建镜像元素
- 对称布局
- 左右手版本切换

标尺与参考线

显示标尺

显示/隐藏标尺：
菜单：视图 → 显示标尺
快捷键：Ctrl+R

添加参考线

# 添加参考线
1. 从标尺上拖动创建水平/垂直参考线
2. 参考线会自动吸附到元素边缘

# 吸附设置
菜单：视图 → 吸附 → 配置吸附
- 吸附到网格
- 吸附到参考线
- 吸附到元素边缘
- 吸附到像素

网格系统

启用网格：
菜单：视图 → 显示网格
快捷键：Ctrl+'

网格设置：
菜单位置：视图 → 配置网格

可设置：
- 网格大小：8px, 10px, 16px 等
- 子网格数：2, 4, 8 等
- 网格颜色：自定义

锁定与隐藏

锁定元素

锁定操作：
- 选中元素后，菜单：格式 → 锁定
- 快捷键：Ctrl+L

锁定效果：
- 元素无法被选中
- 元素无法被移动
- 元素无法被修改
- 元素仍可被复制/删除

隐藏元素

隐藏操作：
- 选中元素后，菜单：格式 → 隐藏
- 快捷键：Ctrl+Shift+H

显示所有：
菜单：视图 → 显示所有元素

快捷键进阶汇总

快捷键	功能
Ctrl+L	锁定选中
Ctrl+Shift+H	隐藏选中
Ctrl+Alt+L	解锁所有
Ctrl+Alt+H	显示所有
Ctrl+R	显示/隐藏标尺
Ctrl+‘	显示/隐藏网格
Ctrl+Shift+E	导出选中元素
Ctrl+Alt+S	存储为模板

实践练习

练习：绘制一个播放按钮图标

目标：使用路径编辑功能绘制播放按钮

步骤：
1. 使用矩形工具绘制一个圆角矩形
2. 右键选择「编辑路径」
3. 将矩形转换为三角形
4. 调整三角形的角度和位置
5. 添加渐变填充
6. 添加投影效果

---

高级绘图技巧让你的原型更加精细和专业，掌握这些技能需要大量练习。