在 Instagram 上發布的一張全景圖作為單一圖像在提要中變成了一條細條紋。相同的全景圖被切成三到四張幻燈片,並發佈為旋轉木馬填滿屏幕,然後像平移相機一樣在圖片上滑動。效果很容易描述,很容易出錯:一張幻燈片偏離一個像素,或者最後一張幻燈片比其他幻燈片窄,然後滑動就會跳躍。
本指南解釋了無縫旋轉木馬的工作原理、給定全景需要多少張幻燈片、實際像素計數的切割算術是什麼樣子以及如何使用 旋轉木馬滾動產生器 在 Toolz 上在瀏覽器中進行切片。
TL;DR: 無縫旋轉木馬是將一張寬圖像切成相等的幻燈片,這些幻燈片精確地共享其邊緣,並按順序發布,以便滑動滾動圖片。幻燈片計數是全景圖'長寬比除以幻燈片'長寬比:3:1 全景圖是 3 張方形幻燈片或 4 張肖像 (4:5) 幻燈片。這 旋轉木馬滾動產生器 建議計數,將影像精確地裁剪到那麼多幻燈片'寬度值,切割全像素邊界,並將 1080 px 寬的幻燈片匯出為編號 zip 中的 JPEG、PNG 或 WebP。它運行客戶端,沒有上傳任何內容,免費,沒有註冊。
什麼是無縫的 Instagram 旋轉木馬?
無縫旋轉木馬是一種旋轉木馬柱,其幻燈片是一張圖像的連續片段。觀眾不是從一張照片走到下一張照片,而是滑動,圖片繼續穿過間隙。風景攝影師將其用於全景圖,設計師將其用於長插圖,品牌將其用於跨多個框架的時間軸或產品陣容。
它之所以有效,是因為旋轉木馬在條帶中並排顯示幻燈片,並且柱子中的每個幻燈片都具有相同的大小。如果幻燈片 1 終止於原始像素列 1,200,幻燈片 2 終止於列 1,200,則連接是不可見的。如果幻燈片 2 從第 1,198 或 1,203 列開始,則圖片的一小部分會重複或消失,並且位於直地平線或顯示為可見步驟的建築邊緣。
兩個平台規則塑造其他一切。截至撰寫本文時,Instagram 在一個輪播中接受最多 20 張幻燈片,並且貼文中的所有幻燈片都共享第一張幻燈片的寬高比;不同形狀的幻燈片會被裁剪以匹配。平台會不時更改這些細節,因此將它們視為當前行為而不是固定規範。
您應該選擇哪種滑梯形狀?
肖像 4:5 是通常的選擇,因為它是 Instagram feed 顯示的最高形狀,並且在手機上顯示最多的螢幕。當構圖適合時,正方形和風景就在那裡。
產生器提供三種轉盤形狀,每種形狀輸出 1080 px 寬:
| 滑動形狀 | 輸出大小 | 比率(寬/高) | 3:1 全景幻燈片 | 4:1 全景幻燈片 |
|---|---|---|---|---|
| 肖像(預設) | 1080 x 1350 | 0.8 | 4 | 5 |
| 廣場 | 1080 x 1080 | 1.0 | 3 | 4 |
| 風景 | 1080 x 566 | 1.91 | 2 | 2 |
表中計數的幻燈片來自一個部分,在下一節中介紹。值得注意的是,較窄的幻燈片需要更多幻燈片才能覆蓋相同的寬度。肖像幻燈片顯示每張幻燈片全景的最高高度,這通常是風景照片感覺很大的原因,但它們需要更多的滑動。風景幻燈片以更少、更短的畫面顯示全景,並適合非常寬、淺的圖像,例如天際線。
全景需要多少張投影片?
將全景圖和#39; 的縱橫比除以幻燈片和#39; 的縱橫比,然後四捨五入到最接近的整個幻燈片。
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 張橫向幻燈片。
的 全景轉輪盤工具 新增圖像後立即執行此計算,將答案夾在 1 到 10 之間,並將幻燈片滑桿設為 "4 與您的圖像和#39;s 比例最接近。"滑桿本身從 2 運行到 10。一旦您移動它,建議就不再凌駕於您的選擇之上;新增圖像或選擇不同的幻燈片形狀會使建議回歸。
計數很少能完美劃分,所以必須給出一些東西。從全景的頂部和底部稍微四捨五入到更多的幻燈片。從左右向下舍入到更少的幻燈片修剪。產生器在切割之前對中心進行一次修剪,這就是為什麼每個幻燈片的尺寸相同。
工具如何切割無接縫的滑塊?
它分三個步驟工作,每個步驟的存在都是為了阻止特定類型的接縫。
步驟 1:裁剪條帶。 幻燈片一起形成一條長條,其比率為幻燈片比率乘以幻燈片計數。對於 4 張縱向幻燈片,比例為 1080 x 4 /1350 = 3.2。該工具採用正好具有該比率的影像的最大中心區域。如果影像比條帶寬,則修剪側面;如果較高,則修剪頂部和底部。
步驟 2:將條帶分割成全像素列。 將條帶寬度四捨五入為整數像素,除以幻燈片數量,並將任何剩餘的像素一次一個地分配給前面的幻燈片。 3 張投影片中的 3,199 px 條變成 1,067 + 1,066 + 1,066。這些列是連續的,因此每張投影片都在上一張投影片結束後的像素上開始。沒有列被計數兩次,也沒有列被跳過。
步驟 3:將每張投影片縮放至輸出大小。 使用瀏覽器和#39;s 畫布,將每一列以完整的預設尺寸繪製在畫布上,肖像尺寸為 1080 x 1350 drawImage 中定義的操作 WHATWG HTML 標準,具有高品質的影像平滑。
為什麼不圍繞每張幻燈片'獨立位置?因為分數邊界會漂移。如果一條條帶寬 3,201 px,並且 4 個幻燈片計算為每張 800.25 px,則單獨對每個起始點和寬度進行舍入可以放置一張幻燈片'右邊緣一個像素經過下一個幻燈片'左邊緣。將剩餘部分散佈在前導幻燈片上,每個邊界都保持一個整數,並且每個幻燈片都位於其他幻燈片的一個來源像素內。在 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,遠比影像寬。當影像#39時,產生器會顯示警告; 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 旋轉木馬分配器 然後丟棄圖像,點擊瀏覽,或從剪貼簿貼上圖像。瀏覽器可以解碼的任何圖像都可以,這實際上意味著 PNG、JPEG、WebP、GIF 和 AVIF。
- 選擇幻燈片形狀。 肖像 4:5 是預設值。拾取器下方的註釋重申了形狀的用途。
- 檢查投影片數量。 接受建議或移動滑桿。預覽條立即重新繪製,標題顯示輸出,例如 "4 x 1080x1350"。
- 選擇格式並下載。 按&報價;將所有 4 作為 zip" 下載;對於整套,或使用 "幻燈片 1", "幻燈片 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 PNG 建議並且適合插圖、圖表或包含文字的全景圖,其中硬邊緣周圍的 JPEG 工件將在 Instagram 和#39 之前顯示;自己的壓縮增加了更多內容。
WebP 以類似的品質提供最小的文件,並且還使用 0.92 進行有損編碼。對於指向 Instagram 以外的地方(例如網站圖庫)的幻燈片來說,這是一個明智的選擇。
如果您隨後需要其他格式的幻燈片,或大量轉換幻燈片的資料夾,則指南 圖像格式轉換 涵蓋 JPG、PNG 和 WebP 之間的哪些變化以及每個變化何時值得。
分裂會降低影像品質嗎?
切割則不然;縮放可以。每張投影片均以全解析度從來源拍攝,然後縮放至 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%。如果一個人'臉部恰好落在連接處,一張或多張或更少的投影片通常會將切口移動到無害的地方。連接上的臉部和文字會在滑動後倖存下來,但每當觀看者停在一張投影片上時,它們就會看起來很尷尬。
該工具的限制是什麼?
滑桿運行 2 到 10 張滑桿。 Instagram 允許更多,但十點以後,典型的全景不再有足夠的寬度來為每個幻燈片提供真實的細節,並且每張幻燈片都變成一條窄條,不再以圖片形式閱讀。
裁剪始終居中。如果全景圖的重要部分位於頂部或底部邊緣附近,並且所選計數修剪高度,請先更改計數或裁剪來源 社群媒體圖片裁剪器,這可以讓你選擇焦點。
輸入必須是瀏覽器標識為圖像並且可以解碼的文件。非圖像的文件將被拒絕,並帶有命名它的訊息,並且損壞的圖像或瀏覽器無法讀取的格式的圖像將被"無法讀取該圖像。"大多數瀏覽器不會解碼 iPhone 上的 HEIC 照片,因此請先轉換它們。
與網站上的每個工具一樣,下載量也計入每日使用限制。沒有浮水印,也不需要帳戶。
全景圖上傳到哪裡了嗎?
不。圖像在瀏覽器中的 HTML 畫布上進行解碼、裁剪、切片和編碼,並且 zip 在本機組裝。沒有任何內容被發送到伺服器、儲存或記錄,並且頁面在載入後繼續工作,網路斷開連接。這對於您尚未發布的未發布的產品鏡頭或客戶端工作很重要。
旋轉木馬柱的相關工具
滾動產生器與一些為社交貼文構建的其他圖像工具並排,所有這些工具都是客戶端。
的 社群媒體圖片裁剪器 將單一影像裁剪為具有九點焦點網格的十五種平台尺寸。這 霧面產生器 將非方形影像放在正方形或肖像遮罩上,以便整張圖片在提要中倖存下來,這適合顯示旋轉木馬前小全景的封面柱。這 照片卡產生器 從模板建立報價卡和新聞風格的圖形,以及 水印 在發布之前,在角落或瓷磚上添加徽標或簽名浮水印。該集中的每個工具都列在 社交圖像工具中心.
