标准裁剪只能得到矩形。但有时候你需要圆形头像、正方形的 Instagram 图片,或者圆角矩形做现代感设计。这些形状裁剪需要不同的方法——通常涉及透明度处理。
本文介绍如何将图片裁剪成不同形状、每种形状的适用场景,以及如何正确处理透明度,让形状裁剪在任何背景上都好看。
方形裁剪
方形裁剪(1:1 比例)是最常需要的非标准形状,用于:
- Instagram 信息流帖子(1080x1080)
- 大多数平台的头像
- 电商网格的产品缩略图
- 应用图标
如何裁剪方形
- 打开 BestPNG 裁剪工具
- 上传图片
- 选择 1:1 宽高比
- 将裁剪区域定位到你想保留的部分
- 下载方形图片
技巧: 将人像裁剪为方形时,让人物的眼睛大约在画面上方三分之一处——这符合自然观看习惯,比居中放置更有吸引力。
圆形裁剪
圆形裁剪主要用于:
- 头像(大多数社交媒体平台都以圆形显示头像)
- "关于我们"页面的团队成员照片
- 联系人名片和通讯录
- 应用头像
圆形裁剪的原理
"圆形裁剪"并不会真正改变图片文件的形状——图片文件始终是矩形的。实际过程是:
- 用圆形边界遮罩图片
- 将圆形外的所有区域变为透明
- 保存为 PNG(因为 PNG 支持透明度)
输出文件本质上是一个带透明角落的正方形 PNG,但视觉上呈现为圆形。
如何创建圆形裁剪
使用 BestPNG 圆角工具:
- 打开 bestpng.com/tools/round-corners
- 上传图片
- 将圆角半径设到最大值(对正方形图片会产生完整的圆形效果)
- 下载 PNG 结果
注意: 要得到完美圆形,源图片必须是正方形(1:1)。如果是长方形,先裁剪成正方形,再应用圆角。
圆形裁剪技巧
- 居中面部 — 做头像时,确保脸部在圆形区域的中心
- 留出边距 — 不要裁得太紧以至于圆形边缘切到头顶或下巴
- 使用高分辨率源文件 — 圆形头像可能在各种尺寸下显示,所以从大图开始
- 保存为 PNG — JPG 无法保留透明度,圆形效果会消失
圆角矩形裁剪
圆角让图片看起来更现代精致,广泛用于:
- 应用界面 — iOS 和 Android 都大量使用圆角矩形
- 卡片布局 — 博客帖子卡、产品卡、推荐卡
- 演示文稿 — 带圆角的截图看起来更专业
- 社交媒体图形 — 给普通图片增添设计感
如何添加圆角
- 打开 BestPNG 圆角工具
- 上传图片
- 调整圆角半径——较小的值产生微妙的圆润效果,较大的值产生更明显的弧度
- 预览并下载 PNG
透明角落意味着你可以把图片放在任何背景上,圆角形状都会正确显示。
透明度处理
形状裁剪依赖透明度才能正确呈现。以下是你需要了解的:
必须用 PNG
JPG 不支持透明度。如果把圆形裁剪的图片保存为 JPG,透明区域会变成白色(或其他纯色)。形状裁剪的图片务必使用 PNG。
透明背景 vs 白色背景
| 格式 | 透明区域处理 | 最适合 |
|---|---|---|
| PNG | 真正透明 | 网页、叠加、任何背景 |
| JPG | 填充白色 | 印刷、简单背景 |
| WEBP | 真正透明 | 网页(现代浏览器) |
检查透明度
大多数图片查看器用棋盘格图案(灰白相间的方格)显示透明区域。如果在圆形裁剪后面看到棋盘格,说明透明度正常。
常见形状裁剪场景
社交媒体头像
大多数平台会自动将头像裁剪成圆形。最佳做法:
- 用 裁剪工具 将照片裁剪为 1:1 方形,脸部居中
- 上传到平台——它会自动应用圆形遮罩
- 除非图片要在社交媒体之外使用,否则不需要预先裁剪成圆形
电商产品图
电商网格通常以统一的方形展示产品:
网站团队照片
"关于我们"页面经常用圆形展示团队成员:
博客文章截图
博客文章中的截图配上圆角更整洁:
- 截取屏幕截图
- 上传到 BestPNG 圆角工具
- 设置适中的圆角半径(8-16 像素通常效果不错)
- 下载 PNG 用于博客文章
超越圆形和方形的自定义形状
对于圆形、方形和圆角矩形之外的形状——如星形、六角形或自定义轮廓——需要支持自定义裁剪路径的工具:
- Figma(免费)— 用任意形状做框架遮罩
- Photoshop — 用任意矢量路径做剪贴蒙版
- CSS clip-path — 在网页端,可以用 CSS 将任何 HTML 元素裁剪为自定义形状,无需修改图片文件本身
实际使用中,圆形、方形和圆角矩形已经覆盖了绝大多数形状裁剪需求。
常见问题
为什么圆形裁剪后显示白色背景而不是透明?
图片可能被保存为了 JPG,它不支持透明度。重新保存为 PNG 即可。如果在白色网页上查看,透明度可能在生效但不可见——试着放在有色背景上验证。
非正方形的图片能裁成圆形吗?
可以,但结果会是椭圆而非正圆。要得到真正的圆形,先将图片裁剪为 1:1 方形,再应用圆形遮罩。
圆形头像应该用多大尺寸?
大多数平台建议头像至少 400x400 像素。上传最大的版本——平台会自动缩放。常见显示尺寸在 150x150 到 400x400 像素之间。
怎么把圆形裁剪的图片放在有色背景上?
如果圆形裁剪以带透明度的 PNG 保存,直接放在设计工具或 HTML 中的任何背景上即可。透明区域会显示背景颜色。如果背景显示为白色,PNG 可能没有 Alpha 通道——重新导出时启用透明度。
总结
形状裁剪在头像、社交媒体图形和现代网页设计中不可或缺。关键是理解形状图片需要透明度(PNG 格式),而圆形裁剪需要正方形的源图片。
BestPNG 提供你需要的工具:图片裁剪工具 用于方形和标准比例,圆角工具 用于圆形和圆角矩形。两者都在浏览器中免费使用。