一、三剑客定位
写技术博客、教程、工单复盘、UI 反馈都离不开截屏工具。Windows 系统自带的 PrintScreen + SnippingTool 只能解决"有图"，无法解决"专业"。
| 工具 | 主战场 | 杀手锏 |
|---|
| Captura | 录屏（视频/GIF） | 鼠标点击高亮、按键显示、FFmpeg 后端 |
| ScreenToGif | GIF 动图 | 帧级编辑、光标轨迹、字幕 |
| PicPick | 截图 + 标注 | 取色器、量角器、屏幕标尺 |
本文把它们的工作流串起来，从"录一段演示"到"导出 GIF 教程"完整跑一遍。
二、ScreenToGif：录 GIF 的瑞士军刀
2.1 下载
screentogif.com 下载 ScreenToGif.2.x.x.Setup.msi（带安装器）或 ScreenToGif.2.x.x.Portable.zip（绿色版）。
绿色版解压到 D:\portable\sys\screentogif\，运行 ScreenToGif.exe。
2.2 三种录制模式
1
2
3
4
| 录像机 : 录一段视频，可导出 mp4 / gif / avi
摄像机 : 录摄像头画面（适合做"主播"风格）
适合录"我说你做"风格
剪辑板 : 直接从剪贴板图片生成动画（适合复现报错）
|
2.3 完整工作流：录制 → 编辑 → 导出
1
2
3
4
5
6
7
8
| 1. 录像机 → 拖框选录制区域
2. 开始录制 → 演示操作 → 停止（Ctrl+Shift+F5 默认快捷键）
3. 编辑器:
- 删除重复帧
- 鼠标光标轨迹效果（右键 → 光标 → 高亮）
- 加字幕：选中多帧 → 标题帧 → 输入文字
- 加按键提示：编辑 → 启用按键
4. 文件 → 另存为 → GIF
|
2.4 帧编辑高级用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| # 抽帧
编辑 → 删除帧（Ctrl+Del）
# 重复帧（让关键步骤多停留 0.5s）
编辑 → 复制帧（Ctrl+Insert）
# 鼠标点击效果
编辑 → 选择帧 → 右键 → 鼠标光标 → 显示点击圈
选项：颜色、点击半径、动画时长
# 文本注释
标题帧 → 拖到关键步骤前 → 文本框
字体：Arial 14 加粗
背景：半透明黑
|
2.5 导出设置
1
2
3
4
5
6
7
8
9
10
| # GIF 编码器选择
FFmpeg : 文件最小，CPU 重
.NET 默认 : 平衡
ScreenToGif : 颜色最准
# 推荐配置
编码器: FFmpeg
FPS : 10-15 (教程类) 20+ (操作流畅类)
质量 : 75-85
循环 : 无限
|
实战经验：把"鼠标移动 → 点击"这种关键操作手动加 0.3s 停顿（用复制帧实现），比裸录的 GIF 易读 3 倍。
三、Captura：录屏 + 截屏双修
3.1 下载
MathewSachin/Captura/releases 下载 Captura-x.x.x.zip（绿色版）。Captura 8+ 已停更，社区有 fork Captura-Localization。
3.2 录屏为 MP4
1
2
3
4
5
6
7
| 1. 设置 → 视频：FFmpeg
2. 输出格式：mp4
3. 帧率：30
4. 视频比特率：4 Mbps
5. 录音：选麦克风 / 系统声音（默认静音）
6. 录制区域：全屏 / 窗口 / 自定义矩形
7. 点击录制按钮 → 演示 → 停止
|
3.3 鼠标点击高亮
1
2
3
4
| 设置 → 鼠标：
☑ 显示鼠标光标
☑ 高亮鼠标点击（颜色 / 半径 / 时长）
☑ 显示按键
|
效果：鼠标点击时，屏幕上一个彩色圆圈扩散 + 屏幕角落弹出按键提示。对教程类视频帮助巨大。
3.4 截屏为 PNG
1
2
3
4
5
| # 单次截屏
Ctrl+Shift+S → 拖框 → 保存 PNG
# 滚动截长图（适合截网页）
Ctrl+Shift+R → 自动滚动捕获
|
3.5 输出格式
| 格式 | 用途 |
|---|
| MP4 (H.264) | 视频教程、上传 B 站 |
| GIF | 嵌入 README、博客 |
| WebM | 小体积 HTML5 视频 |
| AVI | 老格式兼容 |
| PNG 序列 | 后期剪辑 |
3.6 命令行无 UI 录制
1
2
3
4
5
| # 安装命令行版本
Captura.Setup.exe /passive /features=CommandLine
# 后台录屏 60s
captura-cli.exe --source screen --encoder ffmpeg --output demo.mp4 --duration 60
|
四、PicPick：截图 + 标注全能选手
4.1 下载
picpick.app/zh/download 下载免费个人版安装器。安装后可选择 Portable Mode（设置 → 通用 → 启用）。
4.2 11 种截屏模式
1
2
3
4
5
6
| 全屏截屏 F11
活动窗口截屏 Alt+PrtSc
窗口控件截屏 Ctrl+Alt+PrtSc
矩形区域截屏 Shift+Ctrl+Alt+A
手绘区域截屏 Shift+Ctrl+Alt+D
滚动窗口截屏 Shift+Ctrl+Alt+R
|
4.3 标注工具栏
1
2
3
4
5
| 矩形 / 椭圆 / 直线 / 箭头
文字（多种字体 / 大小 / 颜色）
马赛克 / 模糊（打码敏感信息）
序号标号（步骤 1, 2, 3）
图章（✓ ✗ ⚠ 等）
|
4.4 杀手锏：取色器
1
2
| F8 → 鼠标移到屏幕任意位置 → 显示 HEX / RGB
例如：#264653 操作系统 category 蓝色
|
写博客配色的秘密：看到喜欢的颜色 → F8 取色 → 记下来 → CSS 用 background: #264653;。
4.5 量角器与屏幕标尺
1
2
3
4
5
6
7
| # 量角器
Ctrl+Alt+P → 测屏幕上任意角度
适合做：UI 评审指出"这个 30° 斜了"
# 屏幕标尺
Ctrl+Alt+R → 测任意两点像素距离
适合做：UI 走查标注按钮间距
|
4.6 共享工作区（PicPick 独有）
1
2
3
| 共享屏幕 → 选"屏幕" → 生成临时 URL
30 分钟内任何浏览器访问该 URL 可看你的桌面
适合：远程 pair debug
|
五、组合工作流：录教程 → 出 GIF → 写博客
5.1 场景：写一篇 “Git rebase 实战” 博客
1
2
3
4
5
6
7
8
9
10
11
12
| # Step 1：Captura 录完整视频
启动 Captura → 录 5 分钟 git rebase 实操 → 导出 demo.mp4
# Step 2：ScreenToGif 截关键步骤
把 mp4 拖到 ScreenToGif 编辑器 → 抽帧出关键 3 个动作：
- "git rebase -i HEAD~3" 弹出编辑界面
- 把 pick 改成 squash
- ":wq 后弹出 commit 信息编辑器"
每个动作单独导出 GIF
# Step 3：PicPick 截终端截图
打开终端 → 滚动到目标位置 → Ctrl+Alt+R 滚动截图 → 标注箭头
|
5.2 场景：UI 走查邮件
1
2
| # PicPick 截全屏
F11 → 标注红框/箭头/序号 → Ctrl+C 复制到剪贴板 → 粘贴到 Outlook
|
5.3 场景：录报错复现
1
2
3
4
5
| # ScreenToGif 录 30 秒
# 帧编辑：删多余空帧
# 加字幕："打开菜单 → 点击 X → 报红框错误"
# 加马赛克：把账号/邮箱打码
# 导出 800KB 内的 GIF
|
六、效率对比
| 任务 | 工具 | 时间 | 输出 |
|---|
| 截一张图发 IM | Win+Shift+S | 5s | PNG |
| 截一张图加标注 | PicPick | 30s | PNG |
| 截长网页 | PicPick 滚动 | 1min | PNG |
| 录 30s 教程 | Captura | 30s | MP4 |
| 录 30s → 出 GIF | ScreenToGif | 2min | GIF |
| 录 → 抽帧 → 字幕 → GIF | ScreenToGif | 5min | GIF |
| 测 UI 像素距离 | PicPick 标尺 | 1min | 数字 |
| 取屏幕色值 | PicPick 取色器 | 1s | HEX |
七、进阶：FFmpeg 后端
ScreenToGif 和 Captura 都可以用 FFmpeg 作为视频后端：
1
2
3
4
5
6
7
8
| # ScreenToGif
设置 → 编码器 → FFmpeg
ffmpeg.exe 路径：D:\portable\dev\ffmpeg\bin\ffmpeg.exe
→ 输出文件最小、CPU 最重
# Captura
设置 → 视频 → FFmpeg
→ 同上
|
没装 FFmpeg 时用默认 .NET 编码器，文件大约 1.5 倍大。
八、常见坑
| 现象 | 原因 | 对策 |
|---|
| ScreenToGif 录出来全黑 | Windows 10 GPU 加速问题 | 设置 → 屏幕捕获模式 → GDI |
| Captura 录音没声音 | 麦克风权限 | Win10 设置 → 隐私 → 麦克风 → 允许 |
| PicPick 截不到高 DPI | 缩放比例 | 设置 → 高级 → 关闭 DPI 缩放 |
| ScreenToGif GIF 文件超大 | FPS 太高 / 编码器错 | FPS 降到 10-15，换 FFmpeg |
| Captura 启动后崩溃 | .NET 版本 | 装 .NET 6 Desktop Runtime |
九、文件管理与归档
1
2
3
4
5
6
7
8
9
10
11
| D:\portable\sys\
├── screentogif\ # ScreenToGif 2.x
├── captura\ # Captura 8.x
└── picpick\ # PicPick 7.x
# 录完的文件
D:\workspace\github\blogSource\images\
├── 2024-git-rebase\ # 博客专用
│ ├── 01-rebase-open.png
│ ├── 02-squash.gif
│ └── 03-commit.gif
|
最佳实践：截图和录屏立刻归档到博客仓库的 images/<文章名>/ 下，不要在桌面堆积。三个月后想找一张图你会感谢现在的自己。
十、下一步
- GIF 进阶：用 FFmpeg 抽 mp4 中的关键帧成 GIF（
ffmpeg -i demo.mp4 -vf "fps=15,scale=800:-1" out.gif） - 截图进阶：用 Snipaste 替代 PicPick（更现代的悬浮贴图）
- 录屏进阶：用 OBS Studio 录带摄像头、画中画的专业教程
- 视频进阶：用 DaVinci Resolve（免费）剪辑后导出
十一、参考资料
