App你拍摄宽阔的风景,打开帖子屏幕,app给你提供一个切掉两座最好的山的正方形,或者你截图一张图表,饲料作物去掉了使图表值得分享的轴标签,图片精细的框架是错误的形状。
2种出路,可以裁剪图片贴合画面,也可以把全图放在已经有正确形状的背景上,第二种做法叫做哑光,就是那个 哑光生成器 builds:一个方形,肖像或故事形状的画布,里面放置了你的完整图像,在自己或纯色的模糊副本上。本指南解释了哑光何时击败作物,几何形状如何工作,填充,半径和阴影设置在像素中做什么,以及为每个平台选择哪个输出大小。
TL;博士: 哑光是异形照片所在的背景,因此无需裁剪即可发布。您无需将 16:9 图像剪切到 1:1,而是将整个图像放入 1080 x 1080 或 1080 x 1350 帧内,并填充剩余的空间照片的模糊副本或纯色。 Matte Generator 在 HTML 画布上执行此客户端操作,具有 15 个平台预设、从 0 到 25% 的填充、圆角、可选的阴影以及 PNG、JPEG 或 WebP 导出。它是免费的,没有注册,也没有上传任何内容。
什么是哑光照片?
照片哑光是图片与其框架边缘之间的边界。这个词来自图片框架,其中一块带有切割窗户的垫板位于印刷品和玻璃之间,因此图像不会跑到框架边缘。在社交媒体上,这个想法是一样的,没有纸板:"框架"是一个平台想要的纵横比,而哑光是你图片所没有的空间。
Matte 的定义属性是图像中没有任何内容被删除,您组成的每个像素都存活到帖子中,交易是图像不再填充整个图块,因此它在屏幕上的尺寸比同一张照片的裁剪要小。
您应该使用哑光还是裁剪图像?
Crop 当被摄体坐在中间,边缘是偶然的,当边缘带有你不能丢失的信息时使用哑光,那就是整个决定,值得故意而不是接受上传屏幕所做的一切。
| 情况 | 更好的选择 | 为什么 |
|---|---|---|
| 一个人的肖像,背景朴素 | 作物 | 主题填充了更多的图块,并且缩略图大小的读数更好 |
| 宽阔的风景或全景 | 哑光 | 宽度是照片的点 |
| 图表、代码或对话的屏幕截图 | 哑光 | 标签和边缘带有信息 |
| 产品拍摄必须显示整个物体 | 哑光 | 切入产品违背了目的 |
| 两端与人合影 | 哑光 | 农作物会除掉某人 |
| 细节拍摄或纹理 | 作物 | 没有有意义的边缘需要保护 |
| 您希望人们浏览非常宽的全景图 | 两者都没有 | 而是将其分成旋转木马 |
如果你最终决定作物是正确的,那么 社交媒体形象 Cropper 使用相同的平台预设处理决策的那一侧。对于任何一种方法都太宽的全景图, 旋转木马滚动生成器 将其切成可滑动面板。
哑光如何将图像融入正方形?
拟合规则与 CSS 调用相同 object-fit: contain的,定义在 CSS 图像模块第 3 级 specification: 将图像缩放最大因子, 使其宽度和高度都保持在帧内, 然后将其居中, 在代码中计算为三行:
const scale = Math.min(frame.width / image.width, frame.height / image.height)
const width = image.width * scale
const height = image.height * scale
1个维度先击中框边决定刻度,宽图触及左右边,上下留条,高图触及上下,侧面留条,雾面生成器先涂衬垫,缩框,然后将此贴合度运行在剩下的内部。
一个带有实数的工作示例
1920 x 1080的风景照片(16:9),然后将其放在Instagram方块预设上,1080 x 1080,默认有6%的填充。
- 填充是帧的 6%'s 短边:每条边上 1080 x 0.06 = 64.8 像素。
- 图像留下的空间为 1080 - (2 x 64.8) = 950.4 像素平方。
- 拟合比例较小,为 950.4 / 1920 = 0.495 和 950.4 / 1080 = 0.880,因此为 0.495。
- 图像绘制宽度为 1920 x 0.495 = 950.4,高度为 1080 x 0.495 = 534.6。
- 它垂直居中:(950.4 - 534.6)/2 = 207.9,加上 64.8 填充,使其顶部边缘为 272.7 像素。
该工具在预览下报告为 "放置在 1080 x 1080 帧内的 950 x 535 "。您可以以相同的方式检查任何其他情况。
您应该选择哪种输出大小?
Pick你所发的位置大小,并记住,对于宽图像,较高的帧不会使图像变大,宽度是限制它的原因下表运行相同的适合两个源照片,6%的填充,跨越常见的预设。
| 预设 | 框架 | 1920 x 1080 景观绘制于 | 1080 x 1920 电话肖像画于 |
|---|---|---|---|
| Instagram 广场帖子 | 1080×1080×成人电影网800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 950×535×成人电影网站950mm5、 有效工作空间:268×158×150mm6、 可装试样数量:>200冲击试样尺寸 | 535×950×快播电影大全535mm5、 有效工作空间:268×158×150mm6、 可装试样数量:>200冲击试样尺寸 |
| Instagram 肖像帖子 (4:5) | 1080×1350×快播电影大全800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 950×535×成人电影网站950mm5、 有效工作空间:268×158×150mm6、 可装试样数量:>200冲击试样尺寸 | 686×1220×快播电影大全800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 |
| Instagram 故事或卷轴 (9:16) | 1080×1920×快播电影大全800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 950×535×成人电影网站950mm5、 有效工作空间:268×158×150mm6、 可装试样数量:>200冲击试样尺寸 | 950×1690×快播电影大全950mm5、 有效工作空间:268×158×150mm6、 可装试样数量:>200冲击试样尺寸 |
| X 帖子图片 (16:9) | 1600×900×快播电影大全800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 1408×792×成人电影网, 苍井空电影下载800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 446×792×成人电影网站, 苍井空电影下载446mm5、 有效工作空间:268×158×150mm6、 可装试样数量:>200冲击试样尺寸 |
2件事脱颖而出,对于风景照片,正方形和4:5人像给出的图像大小相同;人像框架只增加了更多的哑光,所以对于宽大的图片,正方形是更整洁的选择,对于高大的手机照片,4:5人像给出的图像比正方形高约28%(1220对950像素),这就是为什么纵向拍摄的人像是更好的默认值。
工具中的完整预设列表涵盖 Instagram(正方形、肖像、风景、故事)、Threads(正方形、肖像)、Bluesky(提要图像和正方形)、X(帖子图像和摘要卡)、Facebook feed、LinkedIn feed、YouTube 缩略图、Pinterest 标准引脚和 Open Graph 链接预览。平台更改其作物并重新编码上传,因此将这些视为 "今天适合什么",而不是保证。
哑光应该使用什么背景?
该工具提供四个背景:图像的模糊副本、您选择的纯色、白色或黑色。模糊副本是默认的,通常是照片的最佳选择,因为它在帧中充满了图片'自己的调色板,而无需您选择颜色。
| 背景 | 看起来像 | 最好的 | 小心 |
|---|---|---|---|
| 图像的模糊副本 | 熟悉的Instagram"填充"看 | 照片、旅行、食物,任何色彩缤纷的东西 | 繁忙的图像会产生繁忙的背景 |
| 纯色 | 图像后面的平卡 | 品牌帐户、产品镜头、徽标 | 选择不与照片对抗的颜色 |
| 白色的 | 白色墙上的画廊印刷品 | 最少的提要,光模式下的屏幕截图 | 光边照片失去了边界,没有阴影 |
| 黑 | 电影信箱 | 夜景、电影剧照、黑暗 UI 截图 | 深色边缘的照片失去了边界,没有阴影 |
模糊背景是如何制作的
模煳的背景不是猜测配色,是自己的形象,裁剪填满整幅画面,模煳重重,略微变暗,上面画的是锐利形象,模煳是用画布 filter 财产,记录在案 MDN's 画布渲染上下文2D。过滤器页面并且它的半径与帧一起缩放:较短边的 6%,因此 1080 平方上有 65 个像素。
一个细节对质量很重要。画布边缘附近的模糊从外部平均为透明像素,这会在边框周围留下苍白的边缘。该工具通过绘制每侧比框架大 12% 的背景(1080 方格上的 130 像素透支)来避免这种情况,因此模糊具有真实的图像数据,可以直接采样到边缘。然后进行 12% 黑色洗涤,从而保持锐利的主题阅读作为主题。
填充物、角半径和阴影做什么?
所有三种设置都是成比例的,因此它们在 1080 像素下看起来与在 1600 像素下看起来相同。
填充 0到25%运行,并针对帧's较短的一侧进行测量。在0,宽图像接触两侧边缘,哑光仅显示为上方和下方的条形:纯信箱。在4%到8%之间读取为故意的边框,而不会使图片缩小太多。较大的值适合背景是设计一部分的报价卡风格帖子。在1080的正方形上,每个百分点的填充从图像中删除21.6个像素's可用宽度。
角半径 0到50%运行,并根据放置的图像's较短的一面而不是帧进行测量,有了上面的景观示例,图像是534.6像素高,因此默认的12%半径使每个角大约64像素在50%的短边变成完整的半圆,从而形成丸状。
掉落阴影 on默认情况下,它是一个28%的黑色阴影,模糊度为帧的3%'s较短的一面,向下的偏移量为1%,这在1080帧上意味着32像素的模糊和11像素的下降,它将图像与相似亮度的背景分开,这正是白色或黑色哑光需要帮助的情况。
如何将照片放在哑光上,一步一步
- 打开 免费哑光生成器 并通过掉落文件、单击浏览或从剪贴板粘贴来添加图像。粘贴是屏幕截图最快的路线。
- 从分组的预设列表中选择输出大小。从宽照片的 Instagram 方块开始,高照片的 Instagram 肖像开始。
- 选择背景。保留照片的模糊副本;切换为纯色,键入品牌工作的六角值。
- Adjust padding, 角半径和阴影切换,同时观看预览,预览画布以真实输出大小渲染,所以你看到的是你将得到的文件。
- 选择格式并下载。该文件以您的原始文件命名
-matte补充道,所以beach.jpg变成beach-matte.png。
PNG、JPEG 或 WebP:您应该导出哪种格式?
PNG导出,当结果有透明度或尖锐的文本时,JPEG当你想要一个每个平台都接受的小文件时,WebP当你想要最小的文件和目的地支持它时,JPEG和WebP以92%的质量编码。
| 格式 | 压缩 | 保持透明度 | 典型用途 |
|---|---|---|---|
| 巴布亚新几内亚 | 无损 | 是的 | 屏幕截图、透明哑光上的徽标,将结果存档 |
| JPEG | 有损,质量0.92 | 不,变平至不透明 | 任何平台上的照片帖子 |
| 网络P | 有损,质量0.92 | 是的 | 接受 WebP 的网站和平台 |
无论如何,大多数社交平台都会对您上传的内容进行重新编码,因此导出格式对于 feed 的重要性不如对于您自己的副本的重要性。如果您计划进一步编辑结果,请保留 PNG。如果上传前文件需要更小,则 图像压缩指南 更深入地浏览质量设置。
您可以使用透明的巴布亚新几内亚吗?
是的,它非常适合徽标和剪纸产品拍摄。透明 PNG 干净地放置在纯色复合材料上,因此哑光成为在品牌方块上放置徽标的快速方法。如果需要先删除背景, 背景去除器指南 covers 那一步。将结果导出为 PNG 或 WebP,以保持文件的透明度;JPEG 没有 alpha 通道,会将其压平。
哑光会降低图像质量吗?
No,只要源大于它被画入的空间,输出的预设是1080像素或更宽,而一张典型的手机照片在其长边是3000到4000像素,因此图像缩小,这就失去了一点可见的画布,以高质量的平滑绘制。
一个例外是一个小源,如果将 600 x 400 的图像放入一个 1080 的正方形中,填充率为 6%,则必须将其缩放至 950 x 634,系数约为 1.58,并且由于任何放大都会看起来很柔软,该工具无法添加文件中从未有过的细节,如果您的源很小,请减少填充或选择较小的预设,以便缩放系数保持接近 1。 图像大小指南 解释为什么升级模糊以及何时可以接受。
常见错误和错误消息
有几个问题经常出现,足以一一列举。
- "那个文件不是图片。" 该工具在解码前检查文件's报告的MIME类型。此步骤拒绝错误拖入的PDF或文档。
- "那个图片读不出来。" 该文件声称是图像,但浏览器无法解码。这种情况发生在下载损坏以及特定浏览器不支持的格式的情况下。 dropzone 列出了 PNG、JPEG、WebP、GIF 和 AVIF;来自 iPhone 的 HEIC 照片通常需要首先转换。
- 哑光看起来是灰色的,而不是彩色的。 您可能选择了纯色选项并留下了默认的浅灰色。将背景切换回模糊副本。
- 白色图像消失在白色哑光中。 打开阴影,添加一点填充物,或切换到模糊的背景。
- 这篇文章仍然被裁剪。 您导出的预设与您发布的位置不匹配。将裁剪以 Instagram 提要帖子形式上传的 1200 x 630 Open Graph 图片,因为 1.91:1 仅被接受为景观帖子。
- 下载不会开始。 Downloads 计入每日使用限制,当达到限制时,工具显示的是消息而不是文件。
有上传的吗?
No。图像读取与本地对象URL,合成在HTML上 <canvas> 浏览器选项卡中的元素,并用画布编码到文件 toBlob 中描述的方法 WHATWG HTML 画布规范。没有图像数据发送到服务器,存储或记录,一旦页面加载,它就一直与断开连接的网络一起工作。使用跟踪记录仅您使用哪个预设,背景和格式,永远不会图像。
在线哑光生成器的替代品
浏览器工具是多种途径中的一种。
- 平台'自己的适合选项。 Instagram's中的一些上传屏幕,可以用普通条将照片装入框架内部,而不是裁剪它,它很快,但你很少或根本无法控制背景,填充或阴影。
- 电话照片编辑器。 许多图库应用程序和编辑应用程序都有一个 "fit" 或 "无裁剪"背景模糊的模式。它们非常适合手机上的单张照片,并且结果因应用程序而异。
- 桌面设计软件。 Photoshop、Affinity 或 Figma 完全控制,包括精确的像素位置。它们需要更长的时间并且需要安装软件。
- 命令行。 ImageMagick 可以将图像填充到固定尺寸
-gravity center -extent 1080x1080的,这适合服务器上的批处理作业。
Client-side 方法的优点是不需要安装或帐户,在任何操作系统上都工作相同,并且将照片保存在您的设备上,对于单个帖子或一个小批量通常是最快的选项,对于数百张图像,一个脚本获胜。
的 社交媒体工具中心 将相关公用事业公司列在一个地方,包括 照片卡生成器 用于报价和新闻卡等 图像水印 在发帖前添加徽标或积分。
