Tutorials

Practical, in-depth walkthroughs for slicing, splitting, and exporting images. Each tutorial stands on its own, whether or not you use our tools.

Instagram fits your photo into one of a few supported aspect ratios and crops the rest away from the centre, which is why the top of the shot keeps disappearing. This guide covers the ratios that survive, the carousel trap, Story safe areas, and why a 4K upload buys you nothing.

Social mediaBy Dev.SWL11 min read
Read the tutorial →
Instagram feed, Story and profile frames shown side by side with a photo centre-cropped to fit each one

Colour-based removal, AI segmentation, and manual selection solve different problems, and picking the wrong one is why your cut-out has a halo or a hole in it. This guide explains what each method really does and how to tell which one your image needs.

Image formatsBy Dev.SWL10 min read
Read the tutorial →
The same subject cut out three ways: by colour threshold, by AI segmentation, and by hand-drawn selection

HTTP/2 removed the request-count argument that CSS sprites were invented for, so most guides on them are arguing for a problem you no longer have. This one covers what genuinely still justifies a sprite, the background-position and retina background-size math, and when an SVG sprite is the better answer.

Web developmentBy Dev.SWL11 min read
Read the tutorial →
A sprite sheet of eight icons in a 4 by 2 grid with one icon outlined, beside a small element showing that icon alone via background-position

AI image generators rarely place sprites on an even grid, so a plain rows-and-columns cut clips heads and feet. This guide explains why the spacing drifts, how content-based detection fixes it, and how to get clean frames into Unity or Godot.

Game developmentBy Dev.SWL9 min read
Read the tutorial →
A sprite sheet whose poses sit at uneven sizes and offsets

A nine-tile grid post turns one image into a banner across your profile. This guide covers sizing your source image, cutting it into nine equal tiles, and the reverse upload order that keeps the picture from coming out scrambled.

Social mediaBy Dev.SWL7 min read
Read the tutorial →
A photo split into nine numbered tiles beside a reversed upload queue

That thin white halo around a cut-out is almost never a bug in the cut-out itself. This guide explains where anti-aliased edge pixels pick up the wrong color, which formats keep alpha, and how to remove a fringe that has already been baked in.

Image formatsBy Dev.SWL8 min read
Read the tutorial →
A fox sprite sheet on a solid opaque white background before removal

Texture Type, Sprite Mode, Pixels Per Unit, Filter Mode, and compression all have defaults that are wrong for 2D art. This guide explains what each setting does, how to slice in the Sprite Editor, and when pre-slicing the sheet beats Unity auto-slice.

Game developmentBy Dev.SWL10 min read
Read the tutorial →
An evenly spaced four by four ranger sprite sheet on a transparent background

Godot 4 reads a sprite sheet three different ways: AnimatedSprite2D with SpriteFrames, AtlasTexture regions, and hframes/vframes on a Sprite2D. This guide covers which to use, the pixel-art filter settings, and why an uneven sheet breaks all three.

Game developmentBy Dev.SWL10 min read
Read the tutorial →
A rigid frame lattice fitting an even sheet but cutting through an uneven one

Most AI sprite sheets arrive with drifting grids, baked-in backgrounds, and garbled text labels. This guide gives the specific prompt wording that fixes each problem, two complete example prompts, and the workflow that follows generation.

AI workflowsBy Dev.SWL11 min read
Read the tutorial →
Real transparency compared with a checkerboard pattern baked into the image

"Use WebP for everything" is wrong often enough to matter. This guide covers how each format compresses, which keep an alpha channel, and the common case where a lossy WebP comes out larger than a palette PNG.

Image formatsBy Dev.SWL9 min read
Read the tutorial →
Three columns comparing JPG, PNG and WebP capabilities

Three levers control file size: dimensions, format, and quality setting. This guide works through them in priority order, with quality sweet spots, palette quantization, metadata stripping, and recipes for common size targets.

Image formatsBy Dev.SWL9 min read
Read the tutorial →
Three numbered blocks: dimensions, format, then quality

Standard resizing turns pixel art into mud because it blends colors that were never meant to touch. This guide covers nearest-neighbor scaling, why the scale factor has to be a whole number, and what CSS pixelated rendering, engine point filters, and hqx-style algorithms actually do.

Pixel artBy Dev.SWL9 min read
Read the tutorial →
Bilinear scaling leaving blurred edges beside nearest-neighbor scaling keeping hard pixel blocks

Atlases cut draw calls by packing many sprites into one texture, but packing them edge to edge makes neighbouring colors bleed across the seams. This guide covers bin packing, padding and extrusion, when power-of-two dimensions still matter, and how trimming affects pivots.

Game developmentBy Dev.SWL10 min read
Read the tutorial →
Sprites packed edge to edge showing color bleeding, beside the same sprites separated by padding

A blank link preview almost always traces to one of a few specific causes: wrong dimensions, an unsupported format, a relative URL, or a stale cache. This guide covers the 1200x630 standard, safe-area cropping, why WebP is the wrong choice here, and how to force each platform to re-scrape.

Image formatsBy Dev.SWL9 min read
Read the tutorial →
A 1200 by 630 card with its safe area marked, surrounded by three platform previews cropping it differently

A tileset is harder than a sprite sheet because the seams have to line up when tiles sit side by side. This guide covers picking a tile size, finding the grid offset when the art does not start at pixel zero, handling zero-gap bleeding, and importing into Unity or Godot.

Game developmentBy Dev.SWL11 min read
Read the tutorial →
A misaligned grid overlay splitting tiles into quarters, beside a correctly offset grid holding one tile per cell

Frame count and playback speed are separate decisions, and conflating them is why animations end up either sluggish or expensive to draw. This guide covers how 8, 12, and 24fps actually feel, rates by action type, hold frames, and keeping animation fps independent of game fps.

Game developmentBy Dev.SWL10 min read
Read the tutorial →
The same walk cycle shown as three filmstrips at 8, 12, and 24 frames per second

Favicons stayed complicated long after the rest of the web moved on, and most guides list far more files than you need. This guide covers the minimum real set, what each platform actually requests, site.webmanifest, designing a mark that reads at 16 pixels, and beating the cache.

Image formatsBy Dev.SWL9 min read
Read the tutorial →
A detailed logo becoming illegible at 16 pixels beside a simplified mark that stays readable

Ask a model for the same character twice and the armor changes color, the cape appears, the proportions shift. This guide covers what seed locking does and where it stops helping, pinning color and material in the prompt, image-to-image with a reference, and fixing drift afterwards.

AI workflowsBy Dev.SWL10 min read
Read the tutorial →
A character drifting in color and build across four generations, beside four consistent versions