CodeKitHubMi ez az eszköz?
A kép feldarabolása egyetlen forrásképet oszt fel kisebb, egyenlő méretű csempék rácsára, leggyakrabban az Instagram "rács elrendezés" trendjéhez, ahol egy széles fotót vagy illusztrációt egyedi négyzetes képek sorozataként posztolnak, amelyek a profilrácson együtt megnézve visszaállnak az eredetivé.
Maga a technika egyszerű geometria — a forráskép szélessége és magassága elosztódik az oszlopok és sorok számával, és minden kapott téglalapot saját fájlként vágnak ki —, de ezt kézzel, pontosan elvégezni egy általános fotószerkesztőben körülményes és hibalehetőségekkel teli, különösen egy 3x3-as vagy nagyobb rács esetén, ahol egyetlen csempe kis eltolódása elrontja az egész sorozatot.
Ez az eszköz pontosan kiszámítja a rács határait a kép valódi pixelméretéből, és minden csempét a HTML5 Canvas API-val jelenít meg, teljesen a böngésződben, így minden csempe pontosan illeszkedik, és maga a kép soha nem hagyja el az eszközödet.
Miért érdemes használni?
- Épp befejeztél egy széles illusztrációt vagy fotót, amit 3x3-as rácsos feltárásként szeretnél megjeleníteni az Instagram-profilodon, és mind a kilenc csempét pixelpontosan ki kell vágnod, hogy az illesztések passzoljanak, amikor a nézők végigpörgetik.
- Terméket indítasz, és egy panorámás bannert szeretnél négy posztos karuszelben kibontani, ahelyett hogy kínosan egyetlen négyzetes vágásba préselnéd.
- Egyszer megpróbáltál kézzel rács képet felosztani egy általános fotószerkesztőben, a csempék nem egészen passzoltak, és nem szeretnéd megismételni ezt a hibát egy 9 csempés rácsnál, ahol egyetlen rossz vágás elrontja az egész sorozatot.
- Mind a kilenc (vagy négy, vagy hat) csempére szükséged van, mielőtt elkezdenéd ütemezni a posztokat, nem egyenként vágva minden feltöltés között — az egyetlen ZIP letöltés az egész adagot egyszerre adja.
- Pontosan meg akarod nézni előre, hogyan fog kinézni a rács összerakva, mielőtt elköteleződnél a posztolási sorrend mellett, hogy még élesítés előtt észrevedd a kínos vágásvonalat vagy a középpontból kicsúszott témát.
- 100% helyi feldolgozás: a képed teljes egészében a böngésződben dolgozódik fel a Canvas segítségével, és soha nem kerül fel szerverre.
Használati útmutató
- Kattints a húzd-ide zónára (vagy húzd be) a kép kiválasztásához az eszközödről.
- Válassz rácsméretet — 1x2, 1x3, 2x2, 3x3 vagy 1x4 — a legördülő menüből.
- Nézd meg a kapott csempéket azonnal a vezérlők alatt.
- Kattints a "Mind letöltése (ZIP)" gombra, hogy minden csempét számozott PNG fájlként kapj egyetlen ZIP archívumban.
Példa
Bemenet
Egy 1200×1200px-es négyzetes fotó, rács: 3x3Kimenet
9 csempe, egyenként 400×400px, tile-1.png-től tile-9.png-igA csempék balról jobbra, fentről lefelé számozottak — ugyanaz a sorrend, amiben Instagramra feltöltenéd őket (a jobb alsó csempével kezdve és visszafelé haladva, hogy az új posztok közzétételekor a régebbi csempék lejjebb tolódjanak, és a rács helyesen álljon össze).
Gyakori rácsméretek és felhasználásuk
Különböző rácsméretek különböző posztokhoz és feltárásokhoz illenek.
| Rács | Csempék | Tipikus felhasználás |
|---|---|---|
| 1x2 | 2 | Egyszerű előtte/utána vagy kétrészes feltárás |
| 2x2 | 4 | Kis négyzetes feltárás, gyorsan posztolható |
| 1x3 | 3 | Egy sor három egymást követő poszton át |
| 3x3 | 9 | Teljes profilrács-átvétel — a klasszikus Instagram rács elrendezés |
| 1x4 | 4 | Széles panoráma négy egymást követő posztra bontva |
Kapcsolódó eszközök
Más helyi képszerkesztéshez próbáld ki ezeket az eszközöket.
Tiszta feltárás elérése: forráskép tippek
Maga a felosztás pontos matematika, de hogy a végleges rács mennyire jól néz ki, erősen függ attól a forrásképtől, amit betöltesz — néhány szokás feltöltés előtt sok bosszúságot spórol meg utólag.
Kezdj négyzetes (vagy közel négyzetes) forrásképpel egy 3x3-as vagy 2x2-es rácshoz, mivel az Instagram amúgy is négyzetre vágja a csempéidet posztoláskor, ami levághatja azt a tartalmat, amit a felosztó megőrzött. Tartsd a téma fontos részleteit távol azoktól a helyektől, ahová a rácsvonalak esnek — egy arc vagy fókuszpont, ami pontosan egy csempehatárra esik, vizuálisan töröttnek hat, még ha a vágás matematikailag tökéletes is. És exportálj a lehető legnagyobb felbontásban, ami rendelkezésedre áll a felosztás előtt; az Instagram úgyis tömörít feltöltéskor, tehát egy nagyobb forrásképpel kezdve minden egyes csempe több részletet kap, ami túléli a tömörítést.
Gyakori kérdések
Milyen rácsméretet használjak Instagram profilrácshoz?
A 3x3 (9 csempe) a leggyakoribb választás, mivel pontosan egyszer tölti ki a standard háromoszlopos Instagram profilnézetet. A 2x2 vagy 1x3 felosztás kisebb feltáráshoz jó, amely nem veszi át a teljes friss rácsodat.
Milyen sorrendben posztoljam a csempéket?
Mivel az Instagram rácsa a legújabb posztokat mutatja először (bal felül), általában fordított sorrendben kell publikálnod a csempéket — a rács jobb alsó csempéjével kezdve, a bal felsővel befejezve —, hogy mire minden csempe él, balról jobbra, fentről lefelé helyesen olvashatók legyenek.
A képnek tökéletes négyzetnek kell lennie?
Nem, de egy szimmetrikus rács elrendezéshez (mint a 3x3) egy négyzetes forráskép négyzetes csempéket ad, ami megfelel annak, ahogyan az Instagram vágja a négyzetes rács posztokat. Egy nem négyzetes kép is egyenletesen felosztódik, csak téglalap alakú csempékre négyzetes helyett.
Milyen fájlformátumban mentődnek a csempék?
Minden csempe PNG fájlként exportálódik a letöltött ZIP archívumon belül, ami megőrzi a minőséget veszteséges újratömörítés nélkül.
Feltöltődik valahova a képem?
Nem. A kép közvetlenül a böngésződbe töltődik be, és a Canvas API-val, teljesen kliensoldalon lesz felosztva. Semmi nem kerül szerverre — még a ZIP fájl is helyben, a böngésződben áll össze.
Veszít minőségéből a felosztás az eredeti képemhez képest?
Az export lépésen kívül nem történik újratömörítés — minden csempe közvetlenül a forrás pixeladataiból van kivágva, és PNG-ként exportálva, ami veszteségmentes formátum, tehát az egyetlen minőségváltozás az Instagram saját feltöltési tömörítéséből ered, ugyanúgy, mint bármelyik oda posztolt fotónál.
A forrásképem méretei nem oszthatók egyenletesen a rács szerint — mi történik a maradék pixelekkel?
Az eszköz a csempehatárokat a kép tényleges szélességéből és magasságából számítja ki, elosztva az oszlopok és sorok számával, így bármilyen maradék a csempehatárok között oszlik el ahelyett, hogy teljesen levágódna — nem veszítesz el egy sávot a képből, de a csempék egy-két pixellel eltérhetnek méretben, ha a méretek nem oszthatók teljesen egyenletesen.
Használhatom a rácsos felosztást másra, mint Instagramra, például weboldal bannerhez vagy nyomtatott poszterhez?
Igen — az alapművelet csak egy kép egyenlő csempékre vágása, ami bármilyen olyan felhasználási esetre működik, ahol egy nagy képet darabokra kell bontani, beleértve egy többpaneles nyomtatott elrendezést, egy csempézett weboldal hero bannert, vagy egy fizikai fotófal paneleit. Az Instagram rács trendje egyszerűen a leggyakoribb ok, amiért az emberek ehhez az eszközhöz nyúlnak.
Miért számozza az eszköz a csempéket balról jobbra, fentről lefelé az Instagram tényleges posztolási sorrendje helyett?
A számozás a természetes olvasási sorrendet követi az áttekinthetőség és a könnyű hivatkozás miatt, amikor az előnézetet nézed, nem a fordított sorrendet, amiben ténylegesen feltöltenél — mivel az Instagram rácsa a legújabb posztokat mutatja először, a legmagasabb számú (jobb alsó) csempétől kell kezdened, és visszafelé haladnod az 1-es csempéig, hogy a kész rács helyesen olvasható legyen, amint minden csempe élesben van.