# 截图美化教程：圆角阴影加标注，三步做出高颜值截图

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/screenshot-beautifier-guide


![图片](/api/file/download?path=article/202607/1783912903926_5513.png)

![图片](/api/file/download?path=article/202607/1783912916671_9532.png)

![图片](/api/file/download?path=article/202607/1783912929491_4226.png)

## 一、工具简介

截图美化是一款让普通截图秒变"设计稿"的在线工具。上传一张平平无奇的截图，它可以帮你：

- **美化外观**：自动添加圆角、阴影和边距，背景可选渐变、纯色或透明，还能按 1:1、4:3、16:9、9:16 等比例重新构图；
- **专业标注**：内置箭头、矩形、圆形、三角形、星形、序号、文字、画笔、马赛克等十几种标注工具，颜色、线宽、字号、虚实线随意调整；
- **高清导出**：支持 PNG 和 JPG 两种格式，1x、2x、4x 三档分辨率，写文档、做 PPT、发教程都够用。

所有处理都在浏览器本地完成，截图不会上传到服务器，隐私有保障。

## 二、第一步：上传截图进入编辑器

打开工具后，点击上传区域选择图片，或直接把截图拖拽到页面中，也可以复制截图后按 Ctrl+V 粘贴，支持 JPG、PNG、WebP、GIF 格式。

上传成功后页面变成左右两栏：左侧是工具栏（导出、标注工具、样式、美化效果），右侧画布会实时预览美化效果——默认已经加上了渐变背景、圆角和阴影，截图立刻好看了不少。

![第一步：上传截图进入编辑器](/api/file/download?path=article/202607/1783912903926_5513.png)

## 三、第二步：添加箭头与文字标注

在左侧「标注工具」中点选需要的工具，然后在画布上拖拽即可绘制。以箭头为例：选中箭头工具后，从要标注的位置按住鼠标拖到目标位置松开，一条带箭头的红线就画好了。

绘制前可以在「样式」区域调整标注的颜色、线宽、字号，线条还可选实线或虚线。画错了也不怕：点「撤销」回退一步，点「清空」移除所有标注（原图不受影响）。涉及隐私信息时，用马赛克工具涂抹即可打码。

![第二步：添加箭头与文字标注](/api/file/download?path=article/202607/1783912916671_9532.png)

## 四、参数说明

| 参数/控件 | 类型 | 说明 |
| --- | --- | --- |
| 上传区 | 文件选择器 | 点击选择、拖拽或 Ctrl+V 粘贴，支持 JPG/PNG/WebP/GIF |
| 标注工具 | 图标按钮组 | 箭头、矩形、圆形、三角形、星形、直线、文字、序号、画笔、马赛克等 |
| 颜色 | 颜色选择器 | 标注主色，另有文字背景色可配 |
| 线宽/字号 | 滑块 | 控制标注线条粗细和文字大小 |
| 线型 | 单选 | 实线或虚线 |
| 圆角/边距/阴影/旋转 | 滑块 | 美化效果，实时预览 |
| 背景 | 单选+颜色 | 渐变（双色+角度）、纯色或透明 |
| 比例 | 单选按钮组 | 原图、1:1、4:3、16:9、9:16 |
| 导出 | 按钮+分辨率 | PNG 或 JPG，1x/2x/4x 三档清晰度 |
| 撤销/重做/清空 | 操作按钮 | 管理标注步骤 |

## 五、第三步：导出美化后的图片

标注和美化都满意后，在左上方选择导出格式（PNG 保留透明背景，JPG 体积更小）和分辨率（发网页选 1x，做印刷或高清演示选 2x/4x），点击「导出 PNG」或「导出 JPG」，浏览器会自动下载美化后的图片。

实测一张 1920px 的截图，选 2x 导出 PNG 后得到 2000×1294 的 RGBA 高清图，渐变背景、圆角阴影和箭头标注全部完整保留。

![第三步：导出美化后的图片](/api/file/download?path=article/202607/1783912929491_4226.png)

## 六、常见问题

**Q1：导出的图片背景是透明的吗？**
PNG 导出时如果背景选了「透明」，导出图就是透明背景；选渐变或纯色则会带上对应背景。JPG 不支持透明。

**Q2：标注画错了怎么改？**
点「撤销」可以逐步回退，「重做」恢复撤销的步骤，「清空」一次移除全部标注，原图始终不受影响。

**Q3：上传的截图会上传到服务器吗？**
不会。美化和标注都在浏览器本地 canvas 上完成，图片不会离开你的电脑。

**Q4：可以同时画多个标注吗？**
可以。箭头、文字、马赛克等标注可以叠加绘制，数量不限，全部会一起导出。

## 七、总结与相关工具

截图美化把"加背景边框 + 专业标注 + 高清导出"三件事合成一个页面，从上传到下载不到一分钟，是写教程、做演示、发周报时的效率利器。本文的配图就是用它和标注流程配合做出来的。

相关工具推荐：

- [图片压缩](/tools/image_compress)：导出的高清图太大？压一压再发
- [图片拼接](/tools/image_stitch)：多张美化后的截图拼成长图
- [电子签名](/tools/esignature)：手写签名生成透明 PNG，可贴到截图上
- [图片 Base64 互转](/tools/image_base64)：把美化后的图转成 Data URL 嵌入代码

现在就[立即使用截图美化工具](/tools/screenshot_beautifier)，让你的截图颜值翻倍！