Instagram grids: profile read order runs opposite the post timeline—slice for the finished mosaic, not folder sort order
`instagram-grid-cut` is for profile-canvas storytelling: nine posts become one macro image, yet each tile is compressed and cropped independently in feed context. Seams through eyes or hero type look fine in Figma but fail at thumbnail scale; dark mode can flatten pastel tiles; the deadliest issue is upload order—new posts anchor bottom-right and shove older tiles up-left, reversing naive chronological filenames. The splitter only handles geometry; narrative belongs in a spreadsheet brief that maps each publish click to source coordinates.
`instagram-grid-cut`: map publish timeline → final grid cells first, then cut 3×3 and rename ZIP files to that table
- Outside the tool, write the campaign read order: from the viewer’s first glance backward to which source row/column each publish click should use. After choosing 3×3, confirm width and height divide by three so no tail column is off by one pixel. Keep profile safe margins for rounded avatars and thumbnail crops—never pin faces or titles to the outer bleed.
- Overlay the grid and inspect every cell: eyes, mouth corners, logos, and hero copy should sit at least one line height away from blades; zoom vector marks to 200% to see anti-aliasing hugging a seam. Capture light and dark profile skins on a phone to confirm thumbnails still read.
- Sort the ZIP in true upload order and print or screenshot a checklist; note internal ids per post for postmortems. If one cell is replaced, bump the bundle version and archive the old ZIP—mixing generations permanently skews the mosaic.
Instagram grid FAQ: read order, blade lines, thumbnail contrast, replacement policy
A grid line always bisects a face or headline—barely visible in preview but embarrassing once posted. How do we preflight systematically instead of nudging by feel?
Bake the grid into a locked reference layer and measure pixel distance from eye centers to the nearest horizontal seam; keep headline baselines farther than one line height. Maintain a shared 3×3 PSD template with safe rails before dropping art—cheaper than fixing in the mobile client later.
Some tiles are neon, others empty, and the profile canvas looks chaotic—the splitter does not grade color; fix before or after slicing?
Grade and balance the master before cutting or visible banding appears at tile borders. If contrast is intentional, place the loudest tiles diagonally and separate them with neutral buffers; verify dark mode so colors do not mud together. Do not expect Instagram filters to rescue a broken palette.
Operators sorted filenames alphabetically but the narrative reads backward—bad naming or misunderstanding Instagram’s grid physics?
Usually physics: newest posts pin bottom-right and push older tiles up-left, opposite many ascending filename habits. Name by publish attempt and attach a mock with cell coordinates. Dry-run three posts on a private account before the full campaign.
Light-brand tiles turn gray on system dark theme and melt into the chrome—how do we build contrast at slice time instead of per-tile filters later?
Validate thumbnail contrast under dark skin: add a subtle outer keyline or shadow, or place key art on a mid-gray card. Avoid white backgrounds with pale yellow type—illegible on dark UI—and ship an alternate set if a dark-mode promo window is required.
Body copy is tiny but the grid is “just vibe”—can we rely on users opening each tile for details, and what risks does that create?
Most users never expand thumbnails; tiny disclaimers hurt conversion and can be screenshotted as misleading claims. Put legal copy, pricing, and caveats in readable tiles, captions, or landing links—not only in micro-type hidden in thumbnails.