跳到主要内容
博客

Palettely 博客

How to make pixel art when you want to edit it later

A workflow for making pixel art from templates, blank grids, source images, and prompts without losing editability.

2026/05/26maol

There are two kinds of pixel art workflows. One makes a picture. The other makes an asset you can keep editing. Palettely is built for the second one, so the process is a little different from applying a filter and calling it done.

The goal is not to get the first version perfect. The goal is to keep the grid, palette, and export path clean enough that you can fix the piece after the first pass.

Step 1: choose the route

Use the route that matches what you already have:

  • Blank canvas: when you know the size and want full control.
  • Template: when you want a readable starter shape.
  • Image converter: when you have a sketch, logo, screenshot, or reference.
  • AI generator: when you have an idea but not a source image.

The mistake is treating all four as the same. A template gives you structure. A converted image gives you a translation problem. A prompt gives you a draft that needs cleanup.

Four routes, different cleanup workTemplates give structure, scenes need composition, and generated props need palette cleanup.
Template route pixel art previewTemplate routeConverter route pixel art previewConverter routePrompt route pixel art previewPrompt route

Step 2: start from a shape that already works

128x128 templateMarket StallA structured scene where canopy, crates, and lanterns remain separate enough to recolor.Open template

The Market Stall is a useful example because it has clear regions. You can point to the canopy, crates, lantern, and base. That makes editing easier. If a piece has no regions, every palette swap becomes a fight.

Before you draw details, ask:

  • What is the largest shape?
  • What is the focal point?
  • Which color is the outline?
  • Which color should never be used as background?

Those questions prevent most messy grids.

Step 3: clean before you decorate

After generation or conversion, zoom in and remove stray pixels. Do not start by adding highlights. First make the silhouette boringly clear.

Then check the palette. A clean asset usually has roles:

background, outline, shadow, midtone, highlight, accent

If five colors are doing the same job, merge them. If one color appears only once and does not matter, remove it. This is where editable pixel art beats a flat image: you can fix the color system instead of repainting the whole thing.

Clean regions survive palette changesThese templates have separable parts, so recoloring does not turn into repainting.
Canopy and crates pixel art previewCanopy and cratesRoof and window pixel art previewRoof and windowPond and fish pixel art previewPond and fish

Step 4: export for where the asset will live

Use PNG for game engines and previews. Use SVG when the art needs to sit in docs or UI without blurring. Use JSON if the grid matters to your own pipeline. Use CSS variables or Tailwind tokens when the palette is part of a web interface.

Start with 16x16 templates for UI, 32x32 templates for props, image conversion for source art, or the AI generator when you need a first draft.