Blog / Tutorials

Practical walkthroughs for image preparation, sprite animation, palettes, and PDF documents. Each tutorial stands on its own, whether or not you use our tools.

Choose a readable pixel resolution, simplify a busy source, compare color limits and decide when dithering helps. Keep a native PNG and enlarge without blur.

Pixel artBy Dev.SWL6 min read
Read the tutorial →
A blue-roofed cottage with a warm doorway, green hillside and distant blue mountains.

Make a circular PNG with transparent corners, calculate a 4:5 crop, and check each photo before batch download.

Photo editingBy Dev.SWL6 min read
Read the tutorial →
A garden portrait moves from a wide photo to a square selection and a circular profile image.

Choose a transparent logo, check light and dark photos, apply relative placement and review exceptions before exporting a ZIP.

Publishing photosBy Dev.SWL6 min read
Read the tutorial →
Ceramic mug photos show a watermark against light and dark backgrounds and on a portrait composition.

Separate format, file size, and dimension errors; convert HEIC photos in batches and check the downloaded copies before sharing.

Phone photosBy Dev.SWL5 min read
Read the tutorial →
A phone landscape photo in an HEIC file becomes JPG or PNG copies for sharing.

Understand RAW development, distinguish a rendered copy from a thumbnail, and choose JPG or PNG without discarding your DNG.

RAW photographyBy Dev.SWL5 min read
Read the tutorial →
A camera or phone DNG is developed into a JPG or PNG copy while the original is kept separately.

Compare matte correction, faint-pixel removal, and trimming separately, then check the PNG on light and dark backgrounds.

Sprite cleanupBy Dev.SWL4 min read
Read the tutorial →
The same orange fox on dark backgrounds with an unwanted pale fringe on the left and a clean furry edge on the right.

Work through a measured 4 × 3 grid, distinguish borders from gutters, and keep positions after skipping or deduplicating tiles.

TilesetsBy Dev.SWL4 min read
Read the tutorial →
A grass, stone, dirt, and water tileset with arrows distinguishing tile content, outer margin, and spacing.

Diagnose crop origins and frame order before changing FPS; preserve a meaningful anchor while keeping intentional motion.

Animation troubleshootingBy Dev.SWL4 min read
Read the tutorial →
Three misplaced traveler poses above three poses with their boots on a shared dashed baseline.

Why GIF update rectangles can leave trails, how to get complete PNG frames, and when to keep the original frame delays instead of exporting only a grid.

Game developmentBy Dev.SWL5 min read
Read the tutorial →
A pixel-art robot, a partial raised-arm patch, and a complete composited robot frame.

Use frame, spriteSourceSize, and sourceSize from a matching Aseprite export to rebuild aligned full-size PNGs instead of jumpy cropped poses.

Game developmentBy Dev.SWL5 min read
Read the tutorial →
A tightly cropped green-cloaked adventurer beside a padded canvas showing original top and left offsets.

Start from clean pixels, filter faint edge colors, and turn exact color counts into intentional shadow, base, and highlight ramps.

Pixel artBy Dev.SWL5 min read
Read the tutorial →
A blue-jacket pixel-art traveler beside six color roles: outline, shadow, base, highlight, skin, and accent.

Build the final reading order page by page, insert a photographed page, remove unwanted sheets, and verify the download before sharing.

PDF workflowBy Dev.SWL5 min read
Read the tutorial →
Five illustrated document pages in reading order: cover, two proposal pages, price sheet, and approval.

Calculate equal cells, check frame order and alignment, choose playback speed, and understand what GIF does to colors and transparency.

Game developmentBy Dev.SWL5 min read
Read the tutorial →
Eight walking poses of a red-scarf pixel-art adventurer arranged in a sheet, leading to a repeating animation.

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