Every design slot in Heartopia has its own pixel count. On top of that, a single item is usually split into several separate faces — front, back, sleeve — and those faces very often differ in size from one another. Start drawing without knowing those dimensions and you hit the same wall at build time: the artwork is too short vertically, or the sleeve is so wide that the picture stretches. Either way you start over. This page lists the real dimension data the tool actually carries — all 27 items and all 61 faces — and then shows how to turn a pixel count into a time estimate and how to set the work up so building goes quickly.
The numbers here are taken from the canvas definitions you can actually select under "Create New" in this tool. If items are added or the game changes its specification, the canvas selection screen in the tool is the more up-to-date source.
The slots where your own design can appear in Heartopia fall into three broad families: canvases (paintings), clothing, and furniture. Of these, clothing and furniture items are each built from several faces. A T-shirt, for example, has four faces — front, back, left sleeve and right sleeve; front and back are 64×80 while the sleeves are 64×48, so the faces are different sizes.
Miss that and you will try to reuse the front artwork on a sleeve, only to find 32 pixels of it hanging off the bottom. When you pick an item in this tool you get tabs for switching between faces, and the basic rule is to design each face as its own separate picture. Even when you want a pattern to run continuously from front to back, work out the per-face dimensions first, then decide where the seam falls.
Decide these three things first and everything is faster: which item, how many faces it has, and the pixel count of each face. Once those are settled, the crop ratio for your source image follows automatically.
Clothing has the most faces, and the aspect ratio can swing wildly even within a single item. Sleeves, hat brims and shoe soles in particular tend to be very wide, so a square picture dropped straight in gets squashed.
| Item | Face | Pixels | Total |
|---|---|---|---|
| T-shirt | Front | 64×80 | 5,120 |
| Back | 64×80 | 5,120 | |
| Left sleeve | 64×48 | 3,072 | |
| Right sleeve | 64×48 | 3,072 | |
| Tank top | Front | 64×64 | 4,096 |
| Back | 64×64 | 4,096 | |
| Sweatshirt | Front | 80×88 | 7,040 |
| Back | 80×88 | 7,040 | |
| Sleeve | 130×70 | 9,100 | |
| Dress | Front | 102×154 | 15,708 |
| Back | 76×154 | 11,704 | |
| Inner | 168×102 | 17,136 | |
| Mini skirt | Front | 128×64 | 8,192 |
| Back | 128×64 | 8,192 | |
| Shorts | Front | 102×64 | 6,528 |
| Back | 102×64 | 6,528 | |
| Trousers | Front | 80×116 | 9,280 |
| Back | 80×116 | 9,280 | |
| Bucket hat | Front brim | 126×78 | 9,828 |
| Rear brim | 126×78 | 9,828 | |
| Crown | 100×100 | 10,000 | |
| Cap | Front | 54×60 | 3,240 |
| Back + sides | 128×62 | 7,936 | |
| Brim | 62×52 | 3,224 | |
| Shoes | Upper | 100×90 | 9,000 |
| Toe & laces | 120×60 | 7,200 | |
| Sole | 60×60 | 3,600 | |
| Mary Janes | Upper | 78×64 | 4,992 |
| Sole | 108×64 | 6,912 |
The heaviest garment is the dress at 44,548 pixels across its three faces. The lightest is the cap at 14,400 — more than a threefold difference between two things that are both "one piece of clothing". A realistic order is to build a cap or a tank top first and move on to the dress once you have the rhythm.
Watch out for the wide faces: the sweatshirt sleeve (130×70), the cap's back + sides (128×62) and the Mary Jane sole (108×64) are all roughly twice as wide as they are tall. A square photo dropped in will be stretched sideways, so either crop wide from the start or pick a subject — a pattern, a logo — that does not care much about aspect ratio.
Furniture faces are larger than clothing faces; a bed is 200–256 pixels wide on a single face. At the other extreme there are strip-shaped faces such as lamp bases and chair backs that are extremely thin.
| Item | Face | Pixels | Total |
|---|---|---|---|
| Single bed | Duvet top | 200×130 | 26,000 |
| Frame | 200×98 | 19,600 | |
| Double bed | Duvet top | 256×128 | 32,768 |
| Bed frame | 256×110 | 28,160 | |
| Two-seat sofa | Backrest | 200×110 | 22,000 |
| Seat | 200×110 | 22,000 | |
| Armchair sofa | Backrest | 60×60 | 3,600 |
| Seat | 60×70 | 4,200 | |
| Wardrobe | Cabinet door | 128×128 | 16,384 |
| Nightstand | Cabinet surface | 128×128 | 16,384 |
| Low table | Table top | 128×128 | 16,384 |
| Chair | Backrest, front | 54×28 | 1,512 |
| Backrest, rear | 54×28 | 1,512 | |
| Seat | 54×54 | 2,916 | |
| Table lamp | Shade front | 80×46 | 3,680 |
| Shade rear | 80×46 | 3,680 | |
| Base rim | 128×28 | 3,584 | |
| Floor lamp | Shade front | 80×52 | 4,160 |
| Shade rear | 80×52 | 4,160 | |
| Base rim | 128×16 | 2,048 |
The double bed comes to 60,928 pixels across two faces, the largest item this tool handles. At the other end, a chair totals only 5,940 pixels across all three faces — lighter than a single T-shirt front. If you want to try furniture but cannot spare much time, starting with a chair or one of the lamps makes it much less likely you give up partway.
What to do with the thin faces: the floor lamp's base rim is only 128×16. Rather than trying to fit a picture in there, treat it with a single color or a two-color stripe. It costs nothing in overall impression and saves a lot of building time. The trick is to accept thin faces as "material" rather than as canvases.
For canvases (paintings) only the aspect ratio is fixed — you choose precision from four levels. Even at the same 1:1 ratio, 30×30 and 150×150 differ by a factor of 25 in total pixels, so this choice affects your build time more than anything else on this page.
| Ratio | Coarsest | Coarse | Fine | Finest |
|---|---|---|---|---|
| 1:1 (square) | 30×30 900 | 50×50 2,500 | 100×100 10,000 | 150×150 22,500 |
| 4:3 (landscape) | 30×24 720 | 50×38 1,900 | 100×76 7,600 | 150×114 17,100 |
| 16:9 (landscape) | 30×18 540 | 50×28 1,400 | 100×56 5,600 | 150×84 12,600 |
| 3:4 (portrait) | 24×30 720 | 38×50 1,900 | 76×100 7,600 | 114×150 17,100 |
| 9:16 (portrait) | 18×30 540 | 28×50 1,400 | 56×100 5,600 | 84×150 12,600 |
Books are a slightly special case: they have two faces, 4:3 (150×114) and 16:9 (150×84). Within each book face, guide lines mark out three zones corresponding to the front cover, spine and back cover. When you place an image on a book in this tool you can choose either to spread one image across the whole face, or to place a separate image in each of the three zones. Pick the latter if you want a different picture on the front and back covers.
Roughly speaking, the time a build takes is total pixel count multiplied by the number of colors in use. Placing an individual pixel is fast; what eats the clock is switching the pen to a different color.
The block work mode in this tool is built to cut down those color switches. It divides the canvas into blocks and has you fill in every pixel of one color within a block before moving to the next color, so the number of color switches per block is just "however many colors appear in that block".
How to work out a rough estimate
Ten colors or fewer puts you at the short end; more than thirty puts you at the long end. Block counts round up when the edges do not divide evenly, so in practice expect slightly more.
| Face | Pixels | 5×5 | 10×10 | 20×20 |
|---|---|---|---|---|
| Chair backrest | 54×28 | 11×6 = 66 | 6×3 = 18 | 3×2 = 6 |
| Tank top front | 64×64 | 13×13 = 169 | 7×7 = 49 | 4×4 = 16 |
| T-shirt front | 64×80 | 13×16 = 208 | 7×8 = 56 | 4×4 = 16 |
| Wardrobe door | 128×128 | 26×26 = 676 | 13×13 = 169 | 7×7 = 49 |
| Dress front | 102×154 | 21×31 = 651 | 11×16 = 176 | 6×8 = 48 |
| Double bed duvet | 256×128 | 52×26 = 1,352 | 26×13 = 338 | 13×7 = 91 |
Look only at the block counts and 20×20 seems overwhelmingly lighter, but each block holds sixteen times as much (25 pixels at 5×5 against 400 at 20×20). Whether it is actually faster depends not on the pixel count but on how the colors are spread out — the subject of the next section.
The block work mode offers three sizes: 5×5, 10×10 and 20×20. Whichever you choose you end up with the same finished piece; what changes is the rhythm of the work.
5×5 — matches the game's own grid lines
This is the same spacing as the dividing lines shown in Heartopia's editing screen, so you can line up your position by eye without counting squares. It is the hardest mode to get lost in and the safest for a first build. The trade-off is that there are many blocks, and because you re-select the same color every time you cross into a new block, this mode has the most color switches of the three.
10×10 — the middle ground between clarity and speed
Two of the game's grid squares make one block. Position is still easy to count, and color switching drops noticeably compared with 5×5. If you cannot decide, choosing this will not steer you far wrong.
20×20 — fastest for designs with few colors
Four grid squares make one block. The blocks are large enough that keeping track of position takes some practice, but on designs where broad areas are filled with a single color, the number of color switches falls dramatically. It shines on a plain background with a big logo, on stripes, and on furniture that is mostly flat fills. Conversely, on a finely graded photo conversion you can end up with twenty or more colors in one block, which is more confusing than helpful.
The criterion is not the pixel count but how many colors land in one block. The size selection screen in this tool shows a preview rendered exactly like the real work screen, so counting the color numbers in that preview is the most reliable way to decide. If three or four numbers fit in a block, 20×20 will be comfortable; if ten or more line up, drop to 5×5 or 10×10.
Switching midway does not lose progress: get halfway through at 10×10, switch to 20×20, and every square you already filled carries over. When you move up to a larger block size, only blocks whose contents are entirely finished are counted as complete. That makes patterns like "start at 5×5 to get used to it, then raise to 20×20 once you reach the plain background" perfectly practical.
Canvas-type slots let you choose precision from four levels. Finer is more faithful to the source image, but build time rises in proportion to area. Comparing at 1:1, 30×30 is 900 pixels against 22,500 for 150×150 — twenty-five times as much.
| Precision | Suits | Does not suit |
|---|---|---|
| Coarsest (around 30 px) |
Icons, symbols, flags, simple shapes, one or two letters | Faces, photos, pictures with many thin lines |
| Coarse (around 50 px) |
Chibi characters, logos, simple illustrations | Landscape photos, fine patterns |
| Fine (around 100 px) |
Illustrations generally, simple photos, landscapes | — |
| Finest (around 150 px) |
Photos, pictures where detail matters | Any case where you cannot spend the time |
When in doubt, finish one piece at the coarse end first. At 30×30 that is 900 pixels, and once you have the hang of it you can go from source image to in-game result in under an hour. Having been through the whole cycle once makes your estimate for a 150×150 attempt far more accurate.
How fast a build goes is in fact largely decided before you place a single pixel. Get the color count and the outlines in order at the conversion stage and the work afterwards becomes visibly lighter.
1. Reduce the color count
The color count translates directly into "how many times you switch the pen". A photo conversion can easily exceed fifty colors, but bringing it down to around twenty with color reduction barely changes how it looks. Every color you remove erases every re-selection of that color at once. See Noise Reduction & Color Reduction for the details.
2. Remove isolated pixels
Photo conversion scatters single pixels of a color that differs from everything around them. They barely register visually, yet during a build you change pens for that one pixel — which is enormously inefficient. Noise reduction sweeps these strays away in one pass.
3. Flatten the background to one color
A faint gradient left in the background splits a large area into many finely divided colors, and the per-block color count jumps. Simply filling the background with a single color can be enough to make 20×20 blocks viable.
4. Assign artwork to every face up front
Clothing and furniture have multiple faces. Starting the build and only then wondering "what goes on the back?" brings you to a halt. Finish the blueprints for every face before you begin building. Undersides and rear faces are often fine as a single flat color, so it pays to settle those early.
Works can be saved to your account, and you can issue a share URL to send to friends or post the piece to "Everyone's Designs". Posted works open as blueprints for anyone, so you can also enjoy rebuilding other players' designs inside your own game.
If you only want to hand out a URL, no publication setting is needed. Enable "publish to the Design Studio" only if you want the piece listed in the gallery. Works set to publish appear in the listing after a check by the administrator.
Please note: do not publish work that uses images, logos or characters whose rights belong to someone else without permission. Published works appear in the gallery after an administrator check.