Pencil 基础图形与文本操作详解

图形工具详解

Pencil 提供了丰富的图形绘制工具，本篇详细介绍每个工具的使用方法和技巧。

工具栏概览

┌────────────────────────────────────────────────────┐
│ [V] [Pg] [R] [O] [L] [T] [I] [P] [C] [S] [X]  │
│  ↑   ↑   ↑  ↑  ↑  ↑  ↑  ↑  ↑  ↑  ↑  ↑         │
│ 选 页面 矩形 椭圆 直线 文本 图片 手画 链接 选择 橡皮     │
└────────────────────────────────────────────────────┘

基础绘图工具

1. 选择工具 (V)

选择工具是最常用的工具，用于：

选中元素：点击画布上的元素
多选：按住 Shift 点击多个元素
框选：在空白区域拖动创建选框
移动：拖动选中的元素

快捷操作：
- Delete: 删除选中元素
- Ctrl+C: 复制
- Ctrl+V: 粘贴
- Ctrl+D: 原位复制
- Ctrl+A: 全选

2. 矩形工具 (R)

绘制矩形、按钮、卡片等方形元素：

# 绘制步骤
1. 按 R 切换到矩形工具
2. 在画布上点击并拖动
3. 释放完成绘制

# 调整技巧
- 按住 Shift: 绘制正方形
- 按住 Alt: 从中心开始绘制
- 按住 Shift+Alt: 从中心绘制正方形

3. 椭圆工具 (O)

绘制椭圆和圆形：

# 绘制步骤
1. 按 O 切换到椭圆工具
2. 在画布上点击并拖动

# 调整技巧
- 按住 Shift: 绘制正圆
- 按住 Alt: 从中心开始绘制

4. 直线工具 (L)

绘制直线、箭头、分隔线：

# 绘制类型
- 直线：无端点装饰
- 箭头：可以设置箭头样式
- 分隔线：带装饰的线条

# 属性设置
- 线型：实线、虚线、点线
- 线宽：1px - 10px
- 颜色：任意颜色
- 端点：箭头、圆点、无

文本操作

添加文本 (T)

文本工具用于添加标签、说明文字：

# 使用方法
1. 按 T 切换到文本工具
2. 在画布上点击创建文本框
3. 输入文字内容
4. 在属性面板设置样式

文本属性设置

属性	说明	常用值
字体	文字字体	系统字体、Web 字体
字号	文字大小	12px - 48px
颜色	文字颜色	#333, #666
对齐	文本对齐	左/中/右
行高	行间距	1.2 - 1.8

常用字体设置

/* 推荐字体组合 */
标题: "PingFang SC", "Microsoft YaHei", sans-serif
正文: "PingFang SC", "Microsoft YaHei", sans-serif
代码: "SF Mono", "Consolas", monospace

颜色与填充

填充设置

Pencil 支持多种填充方式：

填充类型：
├── 无填充
├── 纯色填充
├── 渐变填充
│   ├── 线性渐变
│   └── 径向渐变
└── 图片填充

颜色选择器

颜色设置面板位置：属性面板 → 填充颜色

使用方法：
1. 点击颜色方块
2. 在颜色面板选择
3. 或直接输入十六进制值

常用颜色快捷键：
- Ctrl+1: 黑色 (#000000)
- Ctrl+2: 白色 (#FFFFFF)
- Ctrl+3: 灰色 (#CCCCCC)
- Ctrl+4: 蓝色 (#0066CC)

常用颜色规范

# Material Design 色彩系统

主色：
- 蓝色: #2196F3
- 绿色: #4CAF50
- 红色: #F44336
- 黄色: #FFEB3B

中性色：
- 深灰: #333333
- 中灰: #666666
- 浅灰: #CCCCCC
- 背景: #F5F5F5

边框与阴影

边框设置

边框属性：
- 宽度：0px - 10px
- 颜色：任意颜色
- 样式：实线、虚线、点线
- 圆角：0px - 50px

阴影效果

Pencil 支持多种阴影效果：

# 可用阴影类型
1. 外阴影
   - X偏移: 0-20px
   - Y偏移: 0-20px
   - 模糊: 0-30px
   - 颜色: rgba(0,0,0,0.2)

2. 内阴影
   - 同上设置

3. 无阴影

图层管理

图层面板

打开方式：视图 → 面板 → 图层
快捷键：F7

图层操作

操作	说明
新建图层	点击 ”+” 或 Ctrl+Shift+N
删除图层	选中后按 Delete
重命名	双击图层名称
锁定	点击锁图标
隐藏/显示	点击眼睛图标
合并图层	Ctrl+E

图层顺序

调整图层顺序：
- 置于顶层: Ctrl+Shift+]
- 置于底层: Ctrl+Shift+[
- 上移一层: Ctrl+]
- 下移一层: Ctrl+[

图层命名规范

# 推荐的图层命名方式

✅ 良好命名：
- "导航栏"
- "搜索框"
- "用户头像"
- "提交按钮"

❌ 不推荐：
- "矩形 1"
- "组合 2"
- "未命名"

对齐与分布

对齐工具

选中多个元素后，可以使用对齐工具：

对齐选项：
├── 左对齐 (Ctrl+Alt+L)
├── 水平居中 (Ctrl+Alt+C)
├── 右对齐 (Ctrl+Alt+R)
├── 顶对齐 (Ctrl+Alt+T)
├── 垂直居中 (Ctrl+Alt+M)
└── 底对齐 (Ctrl+Alt+B)

分布工具

均匀分布元素：

分布选项：
├── 水平等距分布
└── 垂直等距分布

组合与拆分

创建组合 (Ctrl+G)

将多个元素组合成一个整体：

# 适用场景
- 经常需要一起移动的元素
- 完整的 UI 组件
- 需要保持相对位置的元素

取消组合 (Ctrl+Shift+G)

将组合拆分为独立元素：

# 注意事项
- 取消组合后，各元素保持原有位置
- 取消组合不会删除任何内容
- 组合可以嵌套

快捷键汇总

快捷键	功能
V	选择工具
R	矩形工具
O	椭圆工具
L	直线工具
T	文本工具
P	手画工具
Delete	删除选中
Ctrl+C/V	复制/粘贴
Ctrl+G	创建组合
Ctrl+Shift+G	取消组合
Ctrl+Z	撤销
Ctrl+Y	重做

实践练习

练习：绘制一个登录界面

目标：绘制一个简单的登录界面原型

步骤：
1. 绘制页面背景 (1920×1080)
2. 添加 Logo 区域 (矩形+文本)
3. 添加用户名输入框 (矩形+文本)
4. 添加密码输入框 (矩形+文本)
5. 添加登录按钮 (圆角矩形)
6. 添加"记住密码"复选框 (矩形+文本)
7. 调整对齐和间距
8. 设置适当的颜色和字体

掌握图形绘制和文本操作是原型设计的基础，这些技能将伴随你的整个设计生涯。

加载中...