# Saumaton Instagram-karuselli: yksi kuva monessa diassa

[Canonical HTML page](https://gradiently.design/fi/guide/seamless-carousel)

Pyyhkäiset ja kuva jatkuu: muoto tulee oikealta, teksti jatkaa matkaa ja väri virtaa diasta seuraavaan. Näin rakennat kokonaisuuden ja vältät illuusion rikkovat virheet.

## The short version

- Saumaton Instagram-karuselli on yksi leveä kuva, joka leikataan yhtä suuriksi dioiksi. Sommittelu näyttää jatkuvan pyyhkäisyn mukana.
- Pohja on 1080 pikseliä leveä jokaista diaa kohden ja 1350 pikseliä korkea, joten viiden dian karuselli alkaa koosta 5400×1350.
- Muotojen ja värien tulee ylittää diojen väliset leikkaukset, mutta teksti ei saa osua saumaan ja jakautua kahtia.
- Jokaisen dian tulee toimia myös yksin, sillä ensimmäinen dia näkyy sellaisenaan somevirrassa ja profiiliruudukossa.
- Leveän kuvan jakaminen dioiksi onnistuu yhdellä ImageMagick-komennolla tai muutamassa minuutissa suunnittelutyökalun apuviivoilla.

**Saumaton Instagram-karuselli** on yksi leveä sommittelu leikattuna yhtä suuriksi dioiksi. Tee pohjasta 1080 pikseliä leveä jokaista diaa kohden ja 1350 pikseliä korkea. Kolme diaa tarkoittaa siis kokoa 3240×1350. Suunnittele koko kaistale, leikkaa se 1080 pikselin välein ja lataa osat järjestyksessä. Anna muotojen ja värin ylittää saumat, mutta pidä sanat niistä erossa.

## Panoraamakarusellin pohjakoot

Käytä pystymuotoa, ellei muuhun ole syytä. 4:5 on Instagramin korkein karusellimuoto ja täyttää eniten näyttöä. Neliökarusellissa leveys pysyy 1080 pikselissä diaa kohden ja korkeus on 1080. Jos mittasuhteiden laskeminen on uutta, [kuvasuhteet selitettynä](https://gradiently.design/fi/guide/aspect-ratios-explained) auttaa muutamassa minuutissa.

| Dioja | Pystypohja | Neliöpohja | Leikkaukset (px vasemmalta) |
| --- | --- | --- | --- |
| 2 | 2160×1350 | 2160×1080 | 1080 |
| 3 | 3240×1350 | 3240×1080 | 1080, 2160 |
| 4 | 4320×1350 | 4320×1080 | 1080, 2160, 3240 |
| 5 | 5400×1350 | 5400×1080 | 1080, 2160, 3240, 4320 |

Leveys on aina 1080 kertaa diojen määrä. Merkitse leikkaukset apuviivoin ennen elementtien sijoittelua.

- Kolmen dian kaistale 3240×1350: 3240 × 1350
- Yksi dia 1080×1350: 1080 × 1350

Suunniteltava kaistale ja dia, jonka ihminen kulloinkin näkee. Jokainen dia on täsmälleen kolmasosa kaistaleesta.

Kolmesta viiteen diaa on miellyttävä pituus. Lyhyemmässä tehostetta tuskin huomaa; paljon pidemmässä sommittelu venyy ohueksi ja ajatusten väliin jää pitkiä taustoja. Jos sisältöä on enemmän, tavallinen yhteistaustainen karuselli on helpompi lukea. [Instagram-karusellin koko](https://gradiently.design/fi/guide/instagram-carousel-size) käsittelee tavallista muotoa.

## Saumojen säännöt

Kahden dian välinen leikkaus ratkaisee tehosteen onnistumisen. Jonkin tulee ylittää se, sillä niin katsoja ymmärtää kuvan jatkuvan. Kaiken kokonaisena luettavan tulee kuitenkin pysyä siitä erossa.

### Vältä saumassa

- Mitä tahansa sanaa tai kirjainta
- Kasvoja tai logoa
- Hintaa, päivämäärää tai toimintakehotetta
- Ohutta viivaa, jonka täytyy kohdistua täydellisesti
- Kovia reunoja täsmälleen leikkauskohdassa

### Sopii sauman yli

- Suuret pehmeät muodot ja kaaret
- Jatkuva liukuväri tai tekstuuri
- Katseen oikealle ohjaava nuoli tai polku
- Irrotettu valokuva puoliksi kummallakin dialla
- Suuri taustasana, joka ei muutenkaan mahdu yhdelle dialle

> **Jätä tekstille 60 pikselin suoja** Pidä sanat vähintään 60 pikselin päässä jokaisesta leikkauksesta ja ulkoreunasta. Suoja sallii muutaman pikselin heiton leikkauksessa, eikä tekstirivi näytä puristuvan näytön reunaan.

## Suunnittele virtaus dia kerrallaan

Ajattele kaistaletta lyhyenä vasemmalta oikealle kerrottuna tarinana. Jokaisella dialla on yksi tehtävä, ja sen on näytettävä valmiilta yksin. Ihmiset pysähtyvät pyyhkäisyjen väliin, ja ensimmäinen dia näkyy yksin somevirrassa ja ruudukossa.

1. **Dia 1: koukku** Selkeä otsikko ja oikean reunan yli jatkuva muoto. Katkaistu muoto kutsuu pyyhkäisemään.
2. **Diat 2 ja 3: sisältö** Yksi asia per dia mukavasti oman kehyksensä sisällä. Tausta ja siltaava muoto yhdistävät ne.
3. **Keskimmäinen dia: paljastus** Jos mukana on tuotekuva tai suuri luku, aseta se tähän. Keskitä se dialle, älä leikkauksen yli.
4. **Viimeinen dia: päätös** Virtaus asettuu. Muodot rauhoittuvat ja toimintakehote lepää tyhjässä tilassa ilman ylittäviä elementtejä.

Tausta saa kaistaleen tuntumaan yhdeltä esineeltä. Koko leveyden läpi kulkeva liukuväri tekee enemmän kuin yksikään muoto, koska jokainen dia jatkaa edellisen kohdasta. Vie se pitkittäin vasemmalta oikealle, valon muuttuessa vähitellen.

Yöstä aamunkoittoon viidellä dialla: `linear-gradient(90deg, #0b1d3a 0%, #1e3a8a 25%, #6d28d9 50%, #db2777 75%, #f59e0b 100%)`

5400×1350-pohjalla jokainen dia saa oman värikaistansa: tummansininen, sininen, violetti, pinkki ja meripihka. Pyyhkäisy tuntuu ajan kulumiselta.

Panoraamakarusellin ensimmäinen dia, otsikko Vuosi studiolla ja kehotus pyyhkäistä

Ensimmäinen dia yksin: se toimii kokonaisena julkaisuna ja sopii ruudukkoon.

Karusellin toinen dia, kevään tilausmäärä samalla jatkuvalla taustalla

Toinen dia jatkaa samaa taustaa, luku erossa molemmista leikkauksista.

## Näin jaat leveän kuvan karusellidioiksi

Vie kaistale täysikokoisena ja jaa se sitten. Useimmissa suunnittelutyökaluissa voit piirtää apuviivat 1080 pikselin välein ja viedä jokaisen osan omaksi kuvakseen. Jos ilmainen ImageMagick on asennettu, yksi komento hoitaa kaiken ja tiedostot numeroidaan oikeaan järjestykseen.

```bash
# Cut a 5400×1350 strip into five 1080×1350 slides
magick strip.png -crop 1080x1350 +repage slide_%02d.png

# Result: slide_00.png, slide_01.png ... slide_04.png
# Check one slide's size
magick identify slide_00.png
```

-crop jakaa kuvan laattakoon mukaan vasemmalta oikealle. +repage nollaa kunkin tiedoston sijainnin, jotta lataus toimii siististi.

1. Vie kaistale PNG:nä, jotta liukuvärit ja teksti pysyvät terävinä.
2. Leikkaa 1080 pikseliä leveiksi dioiksi apuviivoilla tai yllä olevalla komennolla.
3. Avaa sovellus, aloita julkaisu ja valitse diat järjestyksessä ensimmäisestä viimeiseen.
4. Tarkista, että ensimmäinen dia on täydessä 4:5-muodossa, ei neliöksi rajattuna.
5. Pyyhkäise esikatselu läpi ja varmista, että kaikki saumat osuvat kohdalleen.

## Yksi Mark koko karusellin läpi

Gradientlyssä voit asettaa mukautetun leveyden jopa 8 000 pikseliin, joten viiden dian 5400×1350-kaistale on yksi sommittelu. Mark piirretään kerran koko leveydelle: väri ja valo virtaavat luonnollisesti diasta toiseen eivätkä ala alusta jokaisella. Se siirtää silti rauhallisimman alueensa jokaisen tekstiryhmän taakse. Lisää teksti diojen turvallisiin keskiosiin, vie ja leikkaa. Ilmaiset viennit pienennetään 720p:hen, joten teräviksi 1080 pikselin dioiksi leikattava täysikokoinen kaistale vaatii Pron.

Ideoita varten [Instagram-karusellin suunnittelu](https://gradiently.design/fi/guide/instagram-carousel-design) käsittelee koukkuja ja diatekstejä. [Instagram-ruudukon estetiikka](https://gradiently.design/fi/guide/instagram-grid-aesthetic) näyttää, miten panoraaman ensimmäinen dia liittyy muihin julkaisuihin.

## FAQ

### Minkä kokoinen saumaton Instagram-karuselli on?

1080 pikseliä leveä diaa kohden ja 1350 korkea. Kolmen dian karuselli alkaa 3240×1350-sommitteluna ja leikataan kolmeksi 1080×1350-kuvaksi.

### Miten jaan kuvan Instagram-karuselliksi?

Leikkaa yhtä leveiksi 1080 pikselin osiksi suunnittelutyökalun apuviivoilla tai ImageMagickin crop-komennolla. Lataa sitten diat järjestyksessä.

### Miksi karusellin diat eivät kohdistu?

Yleensä diat eivät ole täsmälleen 1080 pikseliä leveitä tai ensimmäinen dia on asetettu sovelluksessa neliöksi. Tarkista jokaisen tiedoston koko ja ensimmäinen kehys ennen julkaisua.

### Voiko teksti jatkua diasta seuraavaan?

Vältä sitä. Leikkauksen yli jaetut sanat ovat vaikeita lukea ja näyttävät rikkoutuneilta diojen välissä. Pidä teksti vähintään 60 pikselin päässä jokaisesta leikkauksesta.

### Kuinka monta diaa panoraamakarusellissa kannattaa olla?

Kolmesta viiteen toimii hyvin. Instagram sallii jopa 20, mutta pitkät panoraamat venyttävät sommittelun helposti liian ohueksi.