Бесшовная карусель: как сделать панораму, которая не рвётся на стыках
В бесшовной карусели слайды складываются в одну длинную картинку: рука, линия или фото переходят с одного слайда на другой, и палец сам тянется листать дальше. Красиво — пока шов не разрезал слово или лицо.
Что это и почему работает
Бесшовная, или панорамная, карусель — одна длинная картинка, разрезанная на слайды одного размера. Когда человек листает, края соседних слайдов совпадают, и лента выглядит непрерывной.
Она работает на любопытстве. Предмет, обрезанный краем экрана, хочется увидеть целиком: рука тянется из-за края, линия уходит вправо, фигура выглядывает с соседнего слайда. Читатель свайпает не потому, что его попросили, а потому что картинка не закончена.
Когда бесшовность уместна, а когда нет
Бесшовная карусель хороша там, где у материала есть движение:
- история или путь: от проблемы к решению, от «было» к «стало»;
- инструкция, где шаги связаны одной линией;
- портфолио и подборки, где важна атмосфера;
- обложка с предметом, который «выезжает» на второй слайд, даже если дальше обычные слайды.
И мешает там, где каждый слайд должен жить отдельно: в чек-листах и шпаргалках, которые сохраняют и пересылают по одной картинке. Кусок панорамы без соседей выглядит обрывком.
В Telegram эффект слабее: альбом в канале сначала показывается мозаикой, и панорама собирается только при пролистывании. Бесшовные карусели — в первую очередь история про Instagram.
Как рассчитать холст
Холст — это ширина одного слайда, умноженная на их количество. Для формата 4:5:
| Слайдов | Холст, px | Стыки, px |
|---|---|---|
| 3 | 3240 × 1350 | 1080, 2160 |
| 5 | 5400 × 1350 | каждые 1080 |
| 7 | 7560 × 1350 | каждые 1080 |
| 10 | 10 800 × 1350 | каждые 1080 |
Поставьте вертикальные направляющие на каждом стыке и режьте строго по ним. Сдвиг даже на несколько пикселей при свайпе превращается в заметную ступеньку. Почему именно 1080 × 1350, читайте в шпаргалке по размерам.
Правила стыков
Почти все испорченные бесшовные карусели ломаются в одном и том же месте: на шве.
- Текст не пересекает стык. Слово, разрезанное пополам, читается как ошибка вёрстки. Отступайте от шва хотя бы на 60–80 px.
- Лица — не на шве. Глаз, поделённый между двумя слайдами, выглядит жутковато. Через шов идут руки, предметы, тени, линии — то, что не страшно увидеть по частям.
- Фон без скачков. Если один слайд белый, а соседний чёрный, шов станет границей, а не переходом. Меняйте цвет плавно или на объекте, который пересекает стык.
- Первый слайд — самостоятельный. В ленте его видят отдельно, поэтому заголовок и смысл должны читаться без продолжения.
- Второй — тоже. Instagram иногда показывает карусель повторно, начиная со второго слайда. На нём тоже нужна мысль, а не только хвост картинки с обложки.
Как сделать в графическом редакторе
- Создайте холст по таблице выше, например 5400 × 1350 для пяти слайдов.
- Поставьте вертикальные направляющие каждые 1080 px.
- Соберите композицию: фон, фото, линии через стыки. Текст держите внутри слайдов, с отступом от швов.
- Нарежьте холст: в Figma фреймами 1080 × 1350 по направляющим, в Photoshop инструментом «Раскройка».
- Экспортируйте слайды в PNG, проверьте порядок и опубликуйте одной каруселью.
Способ надёжный, но вёрстка каждого слайда, тексты и нарезка — на вас. И каждая правка текста означает ещё один проход по всем слайдам.
Как сделать во Вжухе
Во Вжухе бесшовность включается поверх обычной карусели, поэтому тексты и вёрстка уже готовы:
- Соберите карусель из мысли или своего текста: структуру и слайды Вжух предложит сам.
- В редакторе нажмите ножницы: слайды встанут рядом и превратятся в одну ленту.
- Добавьте фото поверх стыка и подвиньте его так, чтобы оно переходило на соседний слайд.
- Скачайте карусель: каждый слайд сохранится отдельной картинкой нужного размера, с той частью фото, которая на нём оказалась.
Коротко о главном
Что такое бесшовная карусель?
Это одна длинная картинка, разрезанная на слайды одинакового размера. При пролистывании стыки совпадают, и карусель выглядит как непрерывная панорама.
Какой размер холста нужен для бесшовной карусели?
Ширина слайда, умноженная на число слайдов. Для формата 4:5 слайд — 1080 × 1350 px, значит, для пяти слайдов холст 5400 × 1350 px.
Почему на стыке видна ступенька или полоса?
Чаще всего из-за неточной нарезки: режьте строго по 1080 px. Ещё одна причина — разный фон по краям соседних слайдов. Сжатие JPG тоже может оставить след на однотонном фоне, поэтому для таких каруселей лучше PNG.
Соберите бесшовную карусель
Тексты и вёрстку слайдов Вжух предложит сам, а ножницы в редакторе соединят их в одну ленту.
Сделать карусельInstagram — продукт Meta Platforms Inc., деятельность которой по реализации Instagram и Facebook признана экстремистской и запрещена в России.