CodeKitHubMikä tämä työkalu on?
Kuvan pilkkoja jakaa yhden lähdekuvan pienempien, samankokoisten palojen ruudukoksi, useimmiten Instagramin "ruudukkolayout"-trendiä varten, jossa yksi leveä valokuva tai kuvitus julkaistaan sarjana yksittäisiä neliömäisiä kuvia jotka yhdistyvät takaisin alkuperäiseksi kun niitä katsotaan yhdessä profiiliruudukossa.
Tekniikka itsessään on yksinkertaista geometriaa — lähdekuvan leveys ja korkeus jaetaan kumpikin sarakkeiden ja rivien määrällä, ja jokainen syntyvä suorakulmio leikataan omaksi tiedostokseen — mutta sen tekeminen tarkasti käsin yleiskäyttöisessä kuvanmuokkaimessa on näpertelevää ja virhealtista, etenkin 3x3- tai suuremmassa ruudukossa jossa pieni virheellinen kohdistus yhdessä palassa sotkee koko sarjan.
Tämä työkalu laskee ruudukon rajat tarkasti kuvan todellisten pikselimittojen perusteella ja piirtää jokaisen palan HTML5 Canvas API:lla kokonaan selaimessasi, joten jokainen pala kohdistuu tarkalleen eikä kuva itse koskaan poistu laitteeltasi.
Miksi käyttää sitä?
- Sait juuri valmiiksi leveän kuvituksen tai valokuvan jonka haluat paljastaa 3x3-ruudukkohaltuunottona Instagram-profiilissasi, ja tarvitset kaikki yhdeksän palaa pikselintarkasti leikattuina jotta saumat kohdistuvat kun katsojat vierittävät ohi.
- Julkaiset tuotetta ja haluat panoraamamaisen bannerikuvan avautuvan neljän postauksen karusellin yli sen sijaan että se puristuisi hankalasti yhteen neliöleikkaukseen.
- Kokeilit kerran jakaa ruudukkokuvan käsin yleiskäyttöisessä kuvanmuokkaimessa, palat eivät ihan kohdistuneet, etkä halua toistaa sitä virhettä 9-palaisessa ruudukossa jossa yksi huono leikkaus sotkee koko sarjan.
- Tarvitset kaikki yhdeksän (tai neljä, tai kuusi) palaa valmiina ennen kuin alat aikatauluttaa postauksia, et yksi kerrallaan leikattuna latausten välissä — yksi ZIP-lataus antaa koko erän kerralla.
- Haluat esikatsella tarkalleen miltä ruudukko näyttää palasista koottuna ennen kuin sitoudut postausjärjestykseen, jotta huomaat hankalan leikkauslinjan tai keskittämättömän kohteen ennen kuin se on julkinen profiilissasi.
- 100 % paikallinen: kuvasi käsitellään kokonaan selaimessasi Canvas-tekniikalla eikä sitä koskaan ladata palvelimelle.
Käyttöohje
- Napsauta pudotusaluetta (tai vedä ja pudota) valitaksesi kuvan laitteeltasi.
- Valitse ruudukon koko — 1x2, 1x3, 2x2, 3x3 tai 1x4 — pudotusvalikosta.
- Esikatsele syntyviä paloja heti hallintaelementtien alla.
- Paina "Lataa kaikki (ZIP)" saadaksesi jokaisen palan numeroituna PNG-tiedostona yhdessä ZIP-arkistossa.
Esimerkki
Syöte
1200×1200px neliönmuotoinen valokuva, ruudukko: 3x3Tuloste
9 palaa, kukin 400×400px, tile-1.png aina tile-9.png:hen astiPalat numeroidaan vasemmalta oikealle, ylhäältä alas — samassa järjestyksessä kuin lataisit ne Instagramiin (aloittaen oikeasta alakulmasta ja edeten taaksepäin, jotta uusien postausten julkaisemisen myötä vanhemmat palat työntyvät alaspäin ja ruudukko kokoontuu oikein).
Yleiset ruudukkokoot ja niiden käyttötarkoitukset
Eri ruudukkokoot sopivat erilaisiin postauksiin ja paljastuksiin.
| Ruudukko | Palat | Tyypillinen käyttö |
|---|---|---|
| 1x2 | 2 | Yksinkertainen ennen/jälkeen tai kaksiosainen paljastus |
| 2x2 | 4 | Pieni neliömäinen paljastus, nopea julkaista |
| 1x3 | 3 | Yksi rivi kolmen peräkkäisen postauksen yli |
| 3x3 | 9 | Täysi profiiliruudukon haltuunotto — klassinen Instagram-ruudukkolayout |
| 1x4 | 4 | Leveä panoraama jaettuna neljän postauksen riville |
Muut työkalut
Muita paikallisia kuvanmuokkaustyökaluja löydät näistä.
→ Kuvan Koon Muuttaja · Kuvan Pakkaaja · Kuvan Rajaustyökalu
Siistin paljastuksen saaminen: vinkkejä lähdekuvaan
Itse jako on tarkkaa matematiikkaa, mutta se kuinka hyvältä lopullinen ruudukko näyttää riippuu suuresti syöttämästäsi lähdekuvasta — muutama tapa ennen lataamista säästää paljon turhautumista jälkeenpäin.
Aloita neliönmuotoisella (tai lähes neliönmuotoisella) lähdekuvalla 3x3- tai 2x2-ruudukkoa varten, koska muuten Instagram itse leikkaa palasi neliöiksi kun julkaiset ne, mikä saattaa leikata pois sisältöä jonka pilkkoja säilytti. Pidä kohteesi tärkeät yksityiskohdat poissa siitä missä ruudukon linjat kulkevat — kasvot tai kiintopiste joka osuu tarkalleen palan rajalle näyttää visuaalisesti rikkinäiseltä vaikka leikkaus olisi matemaattisesti täydellinen. Ja vie kuva korkeimmalla käytettävissä olevalla resoluutiolla ennen jakamista; Instagram pakkaa kuvan latauksessa joka tapauksessa, joten suuremmasta lähdekuvasta aloittaminen antaa jokaiselle yksittäiselle palalle enemmän yksityiskohtia selviytyä siitä pakkauksesta kuin aloittaminen kuvasta joka on jo mitoitettu yhtä postausta varten.
Usein kysytyt kysymykset
Mitä ruudukon kokoa minun pitäisi käyttää Instagram-profiiliruudukolle?
3x3 (9 palaa) on yleisin valinta koska se täyttää standardin kolmisarakkeisen Instagram-profiilinäkymän tarkalleen kerran. 2x2- tai 1x3-jako toimii pienemmälle paljastukselle joka ei valtaa koko tuoretta ruudukkoasi.
Missä järjestyksessä minun pitäisi julkaista palat?
Koska Instagramin ruudukko näyttää uusimmat postaukset ensin (vasemmalla ylhäällä), palat täytyy yleensä julkaista käänteisessä järjestyksessä — aloittaen ruudukon oikeasta alakulmasta ja päättäen vasempaan yläkulmaan — jotta kun kaikki palat on julkaistu, ne näkyvät oikein vasemmalta oikealle, ylhäältä alas.
Täytyykö kuvan olla täysin neliönmuotoinen?
Ei, mutta symmetriselle ruudukkolayoutille (kuten 3x3) neliönmuotoinen lähdekuva antaa neliönmuotoisia paloja, mikä vastaa sitä miten Instagram leikkaa neliöruudukkopostaukset. Ei-neliönmuotoinen kuva jakautuu silti tasaisesti, mutta suorakulmaisiksi eikä neliönmuotoisiksi paloiksi.
Missä tiedostomuodossa palat tallennetaan?
Jokainen pala viedään PNG-tiedostona ladatun ZIP-arkiston sisällä, mikä säilyttää laadun ilman häviöllistä uudelleenpakkausta.
Ladataanko kuvani minnekään?
Ei. Kuva luetaan suoraan selaimeesi ja jaetaan Canvas API:lla kokonaan selainpuolella. Mitään ei lähetetä palvelimelle — myös ZIP-tiedosto kootaan paikallisesti selaimessasi.
Menettääkö jakaminen laatua alkuperäiseen kuvaani verrattuna?
Mitään uudelleenpakkausta ei tapahdu vientivaiheen lisäksi — jokainen pala leikataan suoraan lähdekuvan pikselidatasta ja viedään PNG-muodossa, häviöttömässä formaatissa, joten ainoa laatumuutos tulee Instagramin omasta latauspakkauksesta, samasta joka tapahtuu kaikille sinne postaamillesi valokuville.
Lähdekuvani mitat eivät jaa tasan ruudukolla — mitä tapahtuu jäljelle jääville pikseleille?
Työkalu laskee palojen rajat kuvan todellisesta leveydestä ja korkeudesta jaettuna sarakkeiden ja rivien määrällä, joten mahdollinen jäännös jaetaan palojen rajojen kesken sen sijaan että se leikattaisiin kokonaan pois — et menetä kuvan kaistaletta, mutta palat voivat erota koossa parilla pikselillä kun mitat eivät jaa täysin tasan.
Voinko käyttää ruudukkojakoa johonkin muuhun kuin Instagramiin, kuten verkkosivun banneriin tai painettuun julisteeseen?
Kyllä — taustalla oleva toiminto on yksinkertaisesti kuvan leikkaaminen yhtä suuriksi paloiksi, mikä toimii mihin tahansa tarpeeseen jossa suuri kuva täytyy jakaa osiin, mukaan lukien monipaneelinen tulostuslayout, laatoitettu verkkosivun herobanneri tai paneelit fyysiselle valokuvaseinälle. Instagramin ruudukkotrendi on yksinkertaisesti yleisin syy tarttua juuri tähän työkaluun.
Miksi työkalu numeroi palat vasemmalta oikealle, ylhäältä alas, eikä Instagramin todellisessa julkaisujärjestyksessä?
Numerointi noudattaa luonnollista lukujärjestystä selkeyden ja helpon viittaamisen vuoksi kun katsot esikatselua, ei käänteistä järjestystä jossa oikeasti lataisit ne — koska Instagramin ruudukko näyttää uusimmat postaukset ensin, sinun täytyy aloittaa korkeimmalla numeroidusta (oikea ala) palasta ja edetä taaksepäin palaan 1, jotta valmis ruudukko näkyy oikein kun jokainen pala on julkaistu.