CodeKitHubCo je tento nástroj?
Rozdělovač obrázků dělí jeden zdrojový obrázek na mřížku menších dlaždic stejné velikosti, nejčastěji pro instagramový trend "grid layout", kde je jedna široká fotka nebo ilustrace zveřejněna jako sekvence jednotlivých čtvercových obrázků, které se po zobrazení pohromadě na profilovém gridu složí zpátky do originálu.
Samotná technika je jednoduchá geometrie — šířka a výška zdrojového obrázku se dělí počtem sloupců a řádků a každý výsledný obdélník se vystřihne jako vlastní soubor — ale dělat to přesně ručně v běžném editoru fotek je nešikovné a náchylné k chybám, zvláště u mřížky 3x3 nebo větší, kde drobná nesrovnalost u jedné dlaždice pokazí celou sekvenci.
Tento nástroj vypočítá hranice mřížky přesně ze skutečných pixelových rozměrů obrázku a vykreslí každou dlaždici pomocí HTML5 Canvas API zcela ve vašem prohlížeči, takže se každá dlaždice přesně srovná a samotný obrázek nikdy neopustí vaše zařízení.
Proč ho používat?
- Právě jste dokončili širokou ilustraci nebo fotku, kterou chcete odhalit jako mřížku 3x3 na svém instagramovém profilu, a potřebujete všech devět dlaždic vystřižených pixel přesně, aby švy seděly, když je diváci procházejí.
- Spouštíte produkt a chcete panoramatický banner rozvinutý přes čtyřpříspěvkový karusel místo trapně vmáčknutého do jednoho čtvercového ořezu.
- Zkusili jste jednou rozdělit grid obrázek ručně v běžném editoru fotek, dlaždice úplně neseděly a nechcete tu chybu opakovat u mřížky s 9 díly, kde jeden špatný ořez pokazí celou sekvenci.
- Potřebujete všech devět (nebo čtyři, nebo šest) dlaždic připravených, než začnete plánovat příspěvky, ne stříhaných jednu po druhé mezi jednotlivými uploady — jedno stažení ZIP vám dá celou dávku najednou.
- Chcete si přesně předběžně zobrazit, jak bude mřížka vypadat poskládaná dohromady, dřív než se zavážete k pořadí zveřejnění, abyste odhalili nepříjemnou linii ořezu nebo mimostředový objekt dřív, než to bude živé na profilu.
- 100% lokálně: váš obrázek se zpracovává výhradně ve vašem prohlížeči pomocí Canvas a nikdy se nenahrává na server.
Jak se používá
- Klikněte na oblast pro přetažení (nebo přetáhněte myší) a vyberte obrázek ze svého zařízení.
- Vyberte velikost mřížky — 1x2, 1x3, 2x2, 3x3 nebo 1x4 — z rozbalovacího menu.
- Prohlédněte si výsledné dlaždice okamžitě pod ovládacími prvky.
- Klikněte na "Stáhnout vše (ZIP)" a získáte každou dlaždici jako číslovaný PNG soubor v jednom ZIP archivu.
Příklad
Vstup
Čtvercová fotka 1200×1200px, mřížka: 3x3Výstup
9 dlaždic o velikosti 400×400px, tile-1.png až tile-9.pngDlaždice jsou číslované zleva doprava, shora dolů — stejné pořadí, v jakém byste je nahrávali na Instagram (počínaje pravou dolní dlaždicí a postupujíce zpětně, aby se mřížka po zveřejnění nových příspěvků správně skládala).
Běžné velikosti mřížky a jejich využití
Různé velikosti mřížky se hodí pro různé typy příspěvků a odhalení.
| Mřížka | Dlaždice | Typické využití |
|---|---|---|
| 1x2 | 2 | Jednoduché před/po nebo dvoudílné odhalení |
| 2x2 | 4 | Malé čtvercové odhalení, rychlé na zveřejnění |
| 1x3 | 3 | Jeden řádek napříč třemi po sobě jdoucími příspěvky |
| 3x3 | 9 | Kompletní převzetí profilového gridu — klasický instagramový grid layout |
| 1x4 | 4 | Široké panorama rozdělené na čtyři příspěvky v řadě |
Související nástroje
Pro další lokální úpravu obrázků vyzkoušejte tyto nástroje.
Jak dosáhnout čistého odhalení: tipy na zdrojový obrázek
Samotné rozdělení je přesná matematika, ale to, jak dobře finální mřížka vypadá, silně závisí na zdrojovém obrázku, který do nástroje vložíte — pár návyků před nahráním ušetří spoustu frustrace potom.
Začněte čtvercovým (nebo téměř čtvercovým) zdrojovým obrázkem pro mřížku 3x3 nebo 2x2, protože Instagram vaše dlaždice při zveřejňování stejně ořízne na čtverec, což by mohlo useknout obsah, který rozdělovač zachoval. Držte důležité detaily objektu mimo místa, kde budou padat linie mřížky — obličej nebo ohnisko, které přesně dopadne na hranici dlaždice, vypadá vizuálně rozbitě i když je ořez matematicky dokonalý. A exportujte v nejvyšším rozlišení, jaké máte k dispozici před rozdělením; Instagram beztak komprimuje při nahrávání, takže začínat s větším zdrojovým obrázkem dá každé jednotlivé dlaždici víc detailů, které přežijí kompresi.
Časté dotazy
Jakou velikost mřížky použít pro instagramový profilový grid?
3x3 (9 dlaždic) je nejběžnější volba, protože přesně jednou vyplní standardní třísloupcové zobrazení instagramového profilu. Menší 2x2 nebo 1x3 rozdělení funguje pro menší odhalení, které nepřevezme celý váš nedávný grid.
V jakém pořadí mám dlaždice zveřejňovat?
Protože instagramový grid zobrazuje nejnovější příspěvky jako první (vlevo nahoře), obecně musíte publikovat dlaždice v obráceném pořadí — počínaje pravou dolní dlaždicí vaší mřížky a konče levou horní —, aby se poté, co jsou všechny dlaždice zveřejněné, četly správně zleva doprava a shora dolů.
Musí být obrázek dokonalý čtverec?
Ne, ale pro symetrický grid layout (jako 3x3) dá čtvercový zdrojový obrázek čtvercové dlaždice, což odpovídá tomu, jak Instagram ořezává příspěvky se čtvercovým gridem. Nečtvercový obrázek se stále rozdělí rovnoměrně, jen na obdélníkové místo čtvercových dlaždic.
V jakém formátu se dlaždice ukládají?
Každá dlaždice se exportuje jako PNG soubor uvnitř staženého ZIP archivu, což zachovává kvalitu bez ztrátové rekomprese.
Nahrává se můj obrázek někam?
Ne. Obrázek se čte přímo do vašeho prohlížeče a rozděluje se pomocí Canvas API zcela na straně klienta. Nic se neposílá na server — i ZIP soubor se sestavuje lokálně ve vašem prohlížeči.
Ztratí rozdělení kvalitu oproti mému originálnímu obrázku?
Kromě exportního kroku se neděje žádná rekomprese — každá dlaždice se ořezává přímo z pixelových dat zdroje a exportuje jako PNG, bezztrátový formát, takže jediná změna kvality přichází z vlastní komprese Instagramu při nahrávání, stejné jako u jakékoli fotky, kterou tam zveřejníte.
Rozměry mého zdrojového obrázku se nedělí rovnoměrně podle mřížky — co se stane se zbylými pixely?
Nástroj počítá hranice dlaždic ze skutečné šířky a výšky obrázku dělené počtem sloupců a řádků, takže se jakýkoli zbytek rozloží napříč hranicemi dlaždic, ne ořízne úplně — neztratíte pruh obrázku, ale dlaždice se mohou o pixel nebo dva lišit velikostí, když se rozměry nedělí přesně.
Můžu použít rozdělení mřížkou pro něco jiného než Instagram, třeba webový banner nebo tištěný plakát?
Ano — základní operace je jen ořezání obrázku na stejné dlaždice, což funguje pro jakýkoli případ, kdy je velký obrázek potřeba rozbít na kusy, včetně vícepanelového tiskového layoutu, dlaždicového webového hero banneru nebo panelů pro fyzickou fotostěnu. Instagramový trend gridu je jednoduše nejběžnější důvod, proč lidé po tomto nástroji sahají.
Proč nástroj čísluje dlaždice zleva doprava, shora dolů místo skutečného pořadí zveřejnění na Instagramu?
Číslování sleduje přirozený pořádek čtení kvůli přehlednosti a snadné orientaci při prohlížení náhledu, ne obrácené pořadí, ve kterém byste skutečně nahrávali — protože instagramový grid zobrazuje nejnovější příspěvky jako první, budete muset začít od nejvyšší číslované (pravé dolní) dlaždice a postupovat zpět k dlaždici 1, aby se hotová mřížka po zveřejnění všech dlaždic četla správně.