CodeKitHubČo je tento nástroj?
Rozdeľovač obrázkov rozdeľuje jeden zdrojový obrázok do mriežky menších dielikov rovnakej veľkosti, najčastejšie pre trend „grid layoutu“ na Instagrame, kde je jedna široká fotka alebo ilustrácia zverejnená ako postupnosť jednotlivých štvorcových obrázkov, ktoré sa pri spoločnom pohľade na profilovej mriežke znova poskladajú do pôvodného obrazu.
Samotná technika je jednoduchá geometria — šírka a výška zdrojového obrázka sa vydelia počtom stĺpcov a riadkov, a každý výsledný obdĺžnik sa vyreže ako samostatný súbor — no urobiť to presne ručne vo všeobecnom fotoeditore je zdĺhavé a náchylné na chyby, najmä pri mriežke 3x3 alebo väčšej, kde malé nezarovnanie jedného dielika pokazí celú sekvenciu.
Tento nástroj presne vypočíta hranice mriežky zo skutočných rozmerov obrázka v pixeloch a vykreslí každý dielik pomocou HTML5 Canvas API úplne v tvojom prehliadači, takže sa každý dielik presne zarovná a obrázok nikdy neopustí tvoje zariadenie.
Prečo ho používať?
- Práve si dokončil širokú ilustráciu alebo fotku, ktorú chceš odhaliť ako prevzatie mriežky 3x3 na svojom Instagram profile, a potrebuješ, aby bolo všetkých deväť dielikov orezaných presne na pixel, aby sa švy zarovnali pri prechádzaní profilom.
- Spúšťaš produkt a chceš panoramatický banner, ktorý sa rozvinie na karusele štyroch príspevkov, namiesto toho, aby bol nešikovne stlačený do jedného štvorcového orezu.
- Raz si skúšal rozdeliť mriežkový obrázok ručne vo všeobecnom fotoeditore, dieliky sa presne nezarovnali, a nechceš tú chybu zopakovať na mriežke s 9 dielikmi, kde jeden zlý orez pokazí celú sekvenciu.
- Potrebuješ mať pripravených všetkých deväť (alebo štyri, alebo šesť) dielikov skôr, než začneš plánovať príspevky, nie orezávať jeden po druhom medzi nahrávaním — stiahnutie jedného ZIP súboru ti dá celú dávku naraz.
- Chceš si presne prezrieť, ako bude mriežka vyzerať poskladaná, ešte pred rozhodnutím o poradí zverejňovania, aby si odhalil nešikovnú orezovú líniu alebo mimostredný objekt skôr, než to bude živé na profile.
- 100 % lokálne: tvoj obrázok sa spracúva výhradne v tvojom prehliadači pomocou Canvasu a nikdy sa nenahráva na server.
Ako sa používa
- Klikni na oblasť pre vloženie (alebo pretiahni myšou) a vyber obrázok zo svojho zariadenia.
- Vyber veľkosť mriežky — 1x2, 1x3, 2x2, 3x3 alebo 1x4 — z rozbaľovacieho zoznamu.
- Okamžite si prezri výsledné dieliky pod ovládacími prvkami.
- Klikni na „Stiahnuť všetko (ZIP)“ a získaš každý dielik ako očíslovaný PNG súbor v jednom ZIP archíve.
Príklad
Vstup
Štvorcová fotka 1200×1200px, mriežka: 3x3Výstup
9 dielikov po 400×400px, tile-1.png až tile-9.pngDieliky sú očíslované zľava doprava, zhora nadol — v rovnakom poradí, v akom by si ich nahrával na Instagram (počnúc dielikom vpravo dole a pokračujúc dozadu, aby sa pri publikovaní nových príspevkov staršie dieliky posúvali nadol a mriežka sa správne poskladala).
Bežné veľkosti mriežky a ich využitie
Rôzne veľkosti mriežky sa hodia pre rôzne druhy príspevkov a odhalení.
| Mriežka | Dieliky | Typické použitie |
|---|---|---|
| 1x2 | 2 | Jednoduché pred/po alebo dvojdielne odhalenie |
| 2x2 | 4 | Malé štvorcové odhalenie, rýchle na zverejnenie |
| 1x3 | 3 | Jeden riadok naprieč tromi po sebe idúcimi príspevkami |
| 3x3 | 9 | Úplné prevzatie profilovej mriežky — klasický Instagram grid layout |
| 1x4 | 4 | Široká panoráma rozdelená na štyri príspevky v rade |
Súvisiace nástroje
Pre ďalšie lokálne úpravy obrázkov vyskúšaj tieto nástroje.
→ Zmena Veľkosti Obrázka · Kompresor Obrázkov · Orezávač Obrázkov
Ako dosiahnuť čisté odhalenie: tipy pre zdrojový obrázok
Samotné rozdelenie je presná matematika, ale to, ako dobre bude výsledná mriežka vyzerať, veľmi závisí od zdrojového obrázka, ktorý do nej vložíš — pár návykov pred nahratím ušetrí veľa frustrácie potom.
Začni so štvorcovým (alebo takmer štvorcovým) zdrojovým obrázkom pre mriežku 3x3 alebo 2x2, keďže inak ti Instagram sám oreže dieliky na štvorec pri zverejnení, čo môže odrezať obsah, ktorý rozdeľovač zachoval. Drž dôležité detaily objektu ďalej od miest, kam padnú mriežkové čiary — tvár alebo ohnisko, ktoré pristane presne na hranici dielika, pôsobí vizuálne rozbito, aj keď je orez matematicky dokonalý. A exportuj v najvyššom dostupnom rozlíšení pred rozdelením; Instagram aj tak komprimuje pri nahrávaní, takže začatie od väčšieho zdrojového obrázka dá každému jednotlivému dielika viac detailov, ktoré prežijú túto kompresiu, než začatie od obrázka už zmenšeného na veľkosť jedného príspevku.
Časté otázky
Akú veľkosť mriežky by som mal použiť pre profilovú mriežku na Instagrame?
3x3 (9 dielikov) je najbežnejšia voľba, keďže presne raz vyplní štandardné zobrazenie profilu Instagram s tromi stĺpcami. Rozdelenie 2x2 alebo 1x3 funguje pre menšie odhalenie, ktoré neprevezme celú nedávnu mriežku.
V akom poradí mám dieliky zverejňovať?
Keďže mriežka Instagramu zobrazuje najnovšie príspevky ako prvé (vľavo hore), zvyčajne musíš dieliky publikovať v opačnom poradí — začínajúc dielikom vpravo dole zo svojej mriežky a končiac tým vľavo hore — aby sa po zverejnení všetkých dielikov čítali správne zľava doprava, zhora nadol.
Musí byť obrázok dokonale štvorcový?
Nie, ale pre symetrický grid layout (ako 3x3) dá štvorcový zdrojový obrázok štvorcové dieliky, čo zodpovedá tomu, ako Instagram oreže štvorcové grid príspevky. Neštvorcový obrázok sa rovnako rovnomerne rozdelí, len na obdĺžnikové, nie štvorcové dieliky.
V akom formáte sa dieliky ukladajú?
Každý dielik sa exportuje ako PNG súbor vnútri stiahnutého ZIP archívu, čo zachováva kvalitu bez stratovej rekompresie.
Nahráva sa môj obrázok niekam?
Nie. Obrázok sa načíta priamo do tvojho prehliadača a rozdelí pomocou Canvas API úplne na strane klienta. Nič sa neodosiela na server — ZIP súbor sa tiež zostavuje lokálne v prehliadači.
Stratí sa pri rozdelení kvalita oproti pôvodnému obrázku?
Okrem exportného kroku neprebieha žiadna rekompresia — každý dielik sa orezáva priamo z pixelových dát zdrojového obrázka a exportuje ako PNG, bezstratový formát, takže jediná zmena kvality prichádza z vlastnej kompresie pri nahrávaní na Instagram, rovnakej, akej podlieha akákoľvek tam zverejnená fotka.
Rozmery môjho zdrojového obrázka sa nedelia rovnomerne veľkosťou mriežky — čo sa stane so zvyšnými pixelmi?
Nástroj počíta hranice dielikov zo skutočnej šírky a výšky obrázka vydelenej počtom stĺpcov a riadkov, takže akýkoľvek zvyšok sa rozloží medzi hranice dielikov namiesto úplného odrezania — nestratíš pás obrázka, ale dieliky sa môžu líšiť o pixel či dva vo veľkosti, keď sa rozmery nedelia dokonale rovnomerne.
Môžem rozdelenie do mriežky použiť na niečo iné než Instagram, napríklad webový banner alebo tlačený plagát?
Áno — základná operácia je jednoducho orezanie obrázka na rovnaké dieliky, čo funguje pre akékoľvek použitie, ktoré potrebuje veľký obrázok rozbitý na časti, vrátane viacpanelového tlačového rozloženia, dlaždicového hero bannera webu alebo panelov pre fyzickú fotostenu. Trend mriežky na Instagrame je jednoducho najbežnejší dôvod, prečo ľudia siahajú po tomto konkrétnom nástroji.
Prečo nástroj čísluje dieliky zľava doprava, zhora nadol, namiesto skutočného poradia zverejňovania na Instagrame?
Číslovanie sleduje prirodzené poradie čítania kvôli prehľadnosti a jednoduchému odkazovaniu pri pohľade na náhľad, nie opačné poradie, v akom by si skutočne nahrával — keďže mriežka Instagramu zobrazuje najnovšie príspevky ako prvé, budeš musieť postovať počnúc dielikom s najvyšším číslom (vpravo dole) a postupovať späť k dieliku 1, aby sa hotová mriežka po zverejnení všetkých dielikov čítala správne.