Instagram上以单张图片发布的全景图在提要中变成一条细条纹,相同的全景图切成三四张幻灯片并作为旋转木马发布,填充屏幕,在图片上滑动就像平移相机一样,效果描述简单,很容易出现轻微错误:一张幻灯片离开一个像素,或者最后一张幻灯片比其他幻灯片窄,滑动跳跃。
本指南解释了无缝转盘的工作原理、给定全景需要多少张幻灯片、真实像素计数的切割算术是什么样子以及如何使用 旋转木马滚动生成器 toolz 上,在浏览器中进行切片。
TL;博士: 无缝转盘是切成完全共享边缘的相等幻灯片的一张宽图像,按顺序张贴,以便滑动滚动图片幻灯片计数是全景图's长宽比除以幻灯片's长宽比:3:1全景图是3张正方形幻灯片或4张人像(4:5)幻灯片 旋转木马滚动生成器 建议计数,将图像裁剪为恰好那么多幻灯片'宽度值,切割全像素边界,并以 JPEG、PNG 或 WebP 的形式导出 1080 px 宽的幻灯片,在编号的 zip 中运行客户端,无需上传任何内容,免费,无需注册。
什么是无缝 Instagram 旋转木马?
无缝旋转木马是一种旋转木马帖子,其幻灯片是一张图像的连续片段,观众不再从一张照片走到下一张照片,而是滑动,图片继续跨越差距。风景摄影师将其用于全景,设计师将其用于长插图,品牌将其用于跨越多个帧的时间线或产品阵容。
它的工作原理是,转盘在条带中并排显示幻灯片,并且柱子中的每张幻灯片具有相同的尺寸。如果幻灯片 1 结束于原件的像素列 1,200,幻灯片 2 开始于列 1,200,则连接不可见。如果幻灯片 2 开始于列 1,198 或 1,203,则图片的一小部分重复或消失,并且在直线地平线或建筑物边缘上显示为可见步骤。
2个平台规则塑造其他一切,截至撰写本文时,Instagram在一个转盘中接受多达20张幻灯片,而一个帖子中的所有幻灯片共享第一个的宽高比;一个不同形状的幻灯片被裁剪以匹配平台,不时改变这些细节,因此将其视为当前行为而不是固定的规范。
您应该选择哪种幻灯片形状?
Portrait 4:5是通常的选择,因为它是Instagram提要显示的最高形状,并且在手机上占据最多的屏幕,当构图适合他们时,方形和风景就在那里。
生成器提供三种转盘形状,每种转盘宽度为 1080 px:
| 滑动形状 | 输出大小 | 比(宽度/高度) | 3:1全景的幻灯片 | 4:1全景的幻灯片 |
|---|---|---|---|---|
| 像(默认) | 1080×1350×快播电影大全800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 0.8 | 4锛屽湪娴欐睙鏉 | 5锛屽湪娴欐睙鏉 |
| 广场 | 1080×1080×成人电影网800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 1.0 | 3 | 4锛屽湪娴欐睙鏉 |
| 风景 | 1080×566×成人电影网站800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 1.91 | 2 | 2 |
表中的幻灯片数量来自一个部分,覆盖在下一部分。要注意的图案是较窄的幻灯片需要更多的幻灯片来覆盖相同的宽度。人像幻灯片显示每张幻灯片全景图的高度最高,这通常会让风景照片感觉很大,但它们需要更多的滑动。风景幻灯片显示全景图的帧更少、更短,并且适合非常宽、浅的图像,例如天际线。
全景需要多少张幻灯片?
将全景图's长宽比除以幻灯片's长宽比,然后四舍五入到最接近的整张幻灯片。
slides = round( (image width / image height) / (slide width / slide height) )
3:1全景的人像幻灯片:3 / 0.8 = 3.75,四舍五入到4。在方形幻灯片:3 / 1 = 3。在风景幻灯片:3 / 1.908 = 1.57,四舍五入到2。
4:1的全景,例如6000 x 1500的图像:4 / 0.8 = 5张人像幻灯片,4 / 1 = 4张方形幻灯片,以及4 / 1.908 = 2.1,因此有2张风景幻灯片。
的 全景转播工具 10之间夹紧答案,并设置幻灯片滑块到它的一行,如"4最接近匹配你的图像's比例。"滑块本身从2运行到10。一旦你移动它,建议停止压倒你的选择;添加一个新的图像或选择不同的幻灯片形状,使建议回来。
计数很少完美划分,因此必须给出一些东西。从全景图的顶部和底部向上舍入到更多的幻灯片修剪。从左侧和右侧向下舍入到更少的幻灯片修剪。生成器在切割之前将该修剪一次、居中,这就是为什么每张幻灯片都显示相同的尺寸。
工具如何在没有接缝的情况下切割滑块?
它分三个步骤工作,每个步骤都用于阻止特定类型的接缝。
步骤 1:裁剪条带。 1张长条,其比例为滑动比乘以滑动数,对于4张1080 x 4 / 1350 = 3.2的人像滑动,工具取正好该比例的图像最大中心区域,如果图像比条宽,则修剪边;如果更高,则修剪顶部和底部。
步骤 2:将条带分成全像素列。 条带宽度四舍五入为整数像素,除以幻灯片计数,将任何剩余像素一次分发给前导幻灯片。3 张幻灯片中 3,199 px 的条带变为 1,067 + 1,066 + 1,066。列是连续的,因此每张幻灯片恰好在前一张结束后的像素上开始。没有列被计数两次,也没有跳过。
步骤 3:将每张幻灯片缩放到输出大小。 每列均以完整的预设尺寸绘制在画布上,1080 x 1350 用于肖像,使用浏览器's 画布 drawImage 中定义的操作 WHATWG HTML 标准、具有高质量的图像平滑性。
为什么不独立地对每张幻灯片进行四舍五入's位置?因为分数边界漂移如果一条条带宽 3,201 px,4 张幻灯片每张计算为 800.25 px,则将每个开始和宽度自行四舍五入可以使一张幻灯片's右边缘经过下一张幻灯片's左边缘。将剩余部分分布在前导幻灯片上,使每个边界都保持一个整数,并且每张幻灯片都位于其他幻灯片的一个源像素内。在 1,067 对 1,066 的情况下,该额外一个源像素会使输出的水平比例变化小于 0.1%,这是不可见的。
具有真实像素计数的工作示例
4000 x 1333的全景,长宽比为3.0008,然后选择人像幻灯片。
建议计数。 3.0008 / 0.8 = 3.751,四舍五入到 4 张幻灯片。
4张幻灯片的条带。 3.2的条形比,3.0008的图像比小于,所以图像比条形相对高一些,工具保持完整的4000 px宽度,修剪高度:4000 / 3.2 = 1,250 px,那就去掉了83 px,从顶部大约41.5 px,从底部41.5 px。
的幻灯片。 4000 / 4 = 1,000 px 每个没有余数,因此四个 1000 x 1250 的切片,每个切片按 1.08 到 1080 x 1350 的比例放大。
4000 x 1333 panorama, portrait, 4 slides
strip: x 0-4000, y 41.5-1291.5 (4000 x 1250)
slide 1: columns 0-999 -> 1080 x 1350
slide 2: columns 1000-1999 -> 1080 x 1350
slide 3: columns 2000-2999 -> 1080 x 1350
slide 4: columns 3000-3999 -> 1080 x 1350
选择 3 张幻灯片。 3拖动滑块,条带比降至2.4,现在图像比条带宽,所以工具保持完整的1,333 px高度和修剪宽度:1,333 x 2.4 = 3,199.2 px,四舍五入到3,199,每边大约400 px分成3,即1,067 + 1,066 + 1,066 px,所以第一张幻灯片得到剩下的一个像素。
把它推得太远了。 6张幻灯片时,条带比将为0.8 x 6 = 4.8,远比图像宽。生成器显示警告,当图像's比低于条带比的75%。对于该图像,0.8 x 6 x 0.75 = 3.6,而3.0小于3.6,因此页面上说:"该图像在该形状下不够宽6张幻灯片,因此每张幻灯片将在顶部和底部硬裁。"在5张幻灯片时阈值为3.0,图像刚刚清除它。
第二个例子显示了一个完全适合的全景图。 6000 x 1500 图像是 4:1。在纵向幻灯片中,建议为 4 / 0.8 = 5,条带比为 5 x 0.8 = 4.0,并且根本没有修剪:五片 1200 x 1500,每片缩小 0.9 至 1080 x 1350。切换到方形幻灯片,建议为 4,同样没有修剪:四片 1500 x 1500,缩小为 1080 x 1080。
如何一步一步制作旋转木马?
- 添加全景图。 打开 Instagram 旋转木马分割器 add 一张图片,点击浏览,或者从剪贴板粘贴一张,浏览器可以解码的任何图片都可以工作,实际上就是 PNG、JPEG、WebP、GIF 和 AVIF。
- 选择幻灯片形状。 Portrait 4:5 是默认值,拾取器下方的音符重述了形状的用途。
- 检查幻灯片计数。 接受建议或移动滑块。预览条立即重绘,标头显示输出,例如"4 x 1080x1350"。
- 选择格式并下载。 按 "将所有 4 个下载为 zip"对于整个集合,或使用 "Slide 1", "Slide 2"按钮保存单张幻灯片。
文件以您的原始文件名命名,并带有零填充编号: harbor.jpg 变成 harbor-01.jpeg、 harbor-02.jpeg 里面等等 harbor-carousel.zip。填充物使幻灯片在任何文件管理器中保持滑动顺序,当您在手机上全部选择它们时,这很重要。只有当您按下 zip 按钮时,zip 库才会加载,因此页面本身保持清淡。
Instagram上传幻灯片,按照数字顺序作为单个旋转木马帖子,不按顺序发布是正确的幻灯片组最终看起来破损的最常见方式。
您应该导出 JPEG、PNG 还是 WebP?
JPEG是照片的默认和正确选择,Instagram无论如何都将上传重新编码为JPEG,因此无损文件购买更大的上传,并且在最后看不到任何可见,JPEG压缩定义在 ITU-T 建议 T。81的,而生成器编码的质量为0.92。
PNG 是无损的,由指定 W3C 巴布亚新几内亚推荐并且适合作为插图、图表或包含文本的全景图,其中硬边周围的 JPEG 工件将在 Instagram 之前显示'自己的压缩添加更多。
WebP以相似的质量给出最小的文件,并且还使用0.92进行有损编码,对于以Instagram以外的其他地方为首的幻灯片来说,这是一个明智的选择,例如网站图库。
如果您之后需要其他格式的幻灯片或批量转换的文件夹,请参阅指南 图像格式转换 涵盖 JPG、PNG 和 WebP 之间的哪些变化以及每种变化何时值得。
分裂会降低图像质量吗?
Cutting 不行;缩放可以。每张幻灯片均以全分辨率从源头取出,然后缩放至 1080 px 宽。
1080 px 宽时,如 6000 x 1500 示例中每个切片为 1200 px,幻灯片按比例缩小,这不会失去任何可见的细节,当切片比 1080 px 窄时,幻灯片按比例缩小,看起来更柔和。4 张人像幻灯片中的 4000 x 1333 图像给出 1000 px 切片,轻度放大 1.08x。将 2000 px 宽的图像分割成 5 张幻灯片,得到 400 px 切片,放大 2.7x,在手机上看起来很柔和。
从算术中得出经验法则:对于清晰的幻灯片,每张幻灯片的来源至少应为 1080 px 宽,因此 4 张幻灯片应为 4,320 px,5 张幻灯片应为 5,400 px。如果全景图小于此,则更少的幻灯片看起来更清晰。更多关于为什么放大不能增加细节的信息,请参阅指南 调整图像大小而不损失质量的,它走过降尺度、升尺度和重采样。
是什么导致了可见接缝?如何修复它?
大多数接缝来自五个原因之一,生成器去除前两个原因。
| 症状 | 可能的原因 | 修复 |
|---|---|---|
| 连接处有一条重复或缺失的细条带 | 分数切片边界独立舍入 | 使用全像素切片,就像生成器所做的那样 |
| 最后一张幻灯片看起来被拉伸或缩短 | 剩余像素倾倒在一张幻灯片上 | 将剩余部分铺在前面的幻灯片上 |
| 滑出顺序 | 以错误的顺序上传 | 按文件号顺序发布,先 01 |
| 一张幻灯片的裁剪方式与其他幻灯片不同 | 一篇文章中的混合纵横比 | 导出相同形状的每张幻灯片 |
| 受试者切穿面部或标志的中间 | 滑动边界落在主题上 | 更改幻灯片计数,使边界移动 |
最后一行是一个构图问题,而不是一个技术问题。有 4 张幻灯片,边界位于条带的 25%、50% 和 75%;有 3 张幻灯片,边界位于条带的 33% 和 67%。如果一个人's 脸正好落在连接处,则一张或多或少的幻灯片通常会将切口移动到无害的地方。连接上的脸和文字在滑动中幸存下来,但每当观看者在单个幻灯片上停下来时,看起来就会很尴尬。
该工具的极限是什么?
2到10张幻灯片,Instagram允许更多,但过去十张典型的全景图已经没有足够的宽度来给每张幻灯片真正的细节,每张幻灯片都变成一条窄条,停止作为图片阅读。
作物始终居中,如果全景图的重要部分位于顶部或底部边缘附近,并且所选计数修剪高度,请先更改计数或裁剪源 社交媒体图片裁剪者的,这可以让你选择焦点。
Input 必须是浏览器标识为图片的文件,并且可以解码,一个不是图片的文件被拒绝,并用消息命名,并且浏览器无法读取的损坏的图片或格式的图片得到"该图片无法读取"来自iPhone的HEIC照片没有被大多数浏览器解码,所以首先转换它们。
站点上的每个工具一样,下载量计入每日使用限制。没有水印,也不需要帐户。
全景图是否上传到任何地方?
No。图像在浏览器中的HTML画布上解码,裁剪,切片和编码,zip在本地组装。没有发送到服务器,存储或记录,页面一旦加载就与断开连接的网络保持联系。这对于尚未发布的产品镜头或您尚未发布的客户端工作很重要。
旋转木马帖子的相关工具
滚动生成器与为社交帖子构建的一些其他图像工具并存,所有这些工具都是客户端的。
的 社交媒体图片裁剪者 将单个图像裁剪为十五个平台大小,并带有九点焦网格。 哑光生成器 将非正方形图像放在正方形或肖像哑光上,以便整个图片在动态中保留下来,这适合在旋转木马之前显示完整全景的封面帖子。 照片卡生成器 从模板构建报价卡和新闻风格的图形,以及 水印 po文前在角落或瓷砖处添加logo或签名水印, 套装中的每个工具都列在 社交图像工具中心。
