<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: black binbin</title>
    <description>The latest articles on DEV Community by black binbin (@black_binbin_ec9e9628a7e0).</description>
    <link>https://dev.to/black_binbin_ec9e9628a7e0</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4184388%2F8a7e3643-c318-4ee2-bf92-fb0cc3e68074.png</url>
      <title>DEV Community: black binbin</title>
      <link>https://dev.to/black_binbin_ec9e9628a7e0</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/black_binbin_ec9e9628a7e0"/>
    <language>en</language>
    <item>
      <title>I Built a 43,520-Bead Izakaya Pattern to Test Whether My Pixel Art Maker Is Actually Usable</title>
      <dc:creator>black binbin</dc:creator>
      <pubDate>Wed, 14 Oct 2026 10:44:46 +0000</pubDate>
      <link>https://dev.to/black_binbin_ec9e9628a7e0/i-built-a-43520-bead-izakaya-pattern-to-test-whether-my-pixel-art-maker-is-actually-usable-3keh</link>
      <guid>https://dev.to/black_binbin_ec9e9628a7e0/i-built-a-43520-bead-izakaya-pattern-to-test-whether-my-pixel-art-maker-is-actually-usable-3keh</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;A first-hand test of PixelArtSuite's Pixel Art Maker: an AI-generated&lt;br&gt;
architectural reference, a 170×256 grid, 83 MARD colors, and the practical&lt;br&gt;
checks that decide whether a bead pattern is buildable or merely pretty.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h1&gt;
  
  
  I Built a 43,520-Bead Izakaya Pattern to Test Whether My Pixel Art Maker Is Actually Usable
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Short answer:&lt;/strong&gt; the editor handled a 170×256 storefront pattern with&lt;br&gt;
&lt;strong&gt;43,520 cells&lt;/strong&gt; and &lt;strong&gt;83 MARD colors&lt;/strong&gt;, including a live material count,&lt;br&gt;
per-color highlighting, cell-level color codes, and printable export.&lt;/p&gt;

&lt;p&gt;But it also exposed an important limit: this is a wall-sized pattern, not a&lt;br&gt;
normal weekend Perler project. At 5 mm per bead, it would be roughly&lt;br&gt;
&lt;strong&gt;85 × 128 cm&lt;/strong&gt; and need about &lt;strong&gt;54 interlocking 29×29 pegboards&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;I am the person building &lt;a href="https://pixelartsuite.com/" rel="noopener noreferrer"&gt;PixelArtSuite&lt;/a&gt;, so this&lt;br&gt;
is not an independent review. It is a documented first-hand product test,&lt;br&gt;
published on &lt;strong&gt;October 14, 2026&lt;/strong&gt;, with the actual files and screenshots used&lt;br&gt;
during the test.&lt;/p&gt;

&lt;h2&gt;
  
  
  What did I test?
&lt;/h2&gt;

&lt;p&gt;I started with an &lt;strong&gt;AI-generated architectural reference&lt;/strong&gt; of a narrow Japanese&lt;br&gt;
izakaya storefront. I chose it for one reason: it has the kind of visual&lt;br&gt;
problems that make image-to-grid conversions fail quietly.&lt;/p&gt;

&lt;p&gt;The reference includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;roof layers and dark window framing;&lt;/li&gt;
&lt;li&gt;small windows, exterior pipes, and AC units;&lt;/li&gt;
&lt;li&gt;plants, a bicycle, and storefront fixtures;&lt;/li&gt;
&lt;li&gt;several similar browns and blue-greys;&lt;/li&gt;
&lt;li&gt;small warm accents that can disappear after downscaling.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I did not treat the initial reference as finished pixel art. It was a source&lt;br&gt;
for composition and color decisions. The useful test was whether the final&lt;br&gt;
grid could be inspected and followed by a person.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3d7vkl4mtsxlj1cnfzg0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3d7vkl4mtsxlj1cnfzg0.png" alt="Finished izakaya pixel art pattern" width="688" height="1032"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Result:&lt;/strong&gt; 170×256 cells, 43,520 filled cells, and 83 MARD palette colors.&lt;/p&gt;

&lt;h2&gt;
  
  
  What makes a large bead pattern usable?
&lt;/h2&gt;

&lt;p&gt;A large image becomes a usable bead pattern only if it answers four practical&lt;br&gt;
questions before someone starts placing beads:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;How many beads of each color are needed?&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Where does a selected color appear in the full design?&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Can each cell be read at working zoom?&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Can the pattern be exported in a format usable away from the browser?&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;A colored preview answers none of those reliably. For this test, I checked each&lt;br&gt;
one inside PixelArtSuite's Pixel Art Maker.&lt;/p&gt;

&lt;h2&gt;
  
  
  Check 1: can the material list be trusted?
&lt;/h2&gt;

&lt;p&gt;The editor counted every filled cell by MARD color while I worked. The final&lt;br&gt;
canvas total was &lt;strong&gt;43,520&lt;/strong&gt;, which matches &lt;code&gt;170 × 256&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;That simple equality is worth checking: if the grid is intended to be fully&lt;br&gt;
filled, the sum of all listed color counts must equal width × height. If it&lt;br&gt;
does not, the exported shopping list is not reliable.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F63qxsfxjoco4plakd2ie.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F63qxsfxjoco4plakd2ie.png" alt="Live materials list alongside the full grid" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The pattern used &lt;strong&gt;83 colors&lt;/strong&gt;. That is intentionally high for a bead project.&lt;br&gt;
For context, I would not recommend this palette size to a first-time builder;&lt;br&gt;
a practical first version would usually be closer to 20–30 colors.&lt;/p&gt;

&lt;h2&gt;
  
  
  Check 2: can I find a color without manually scanning 43,520 cells?
&lt;/h2&gt;

&lt;p&gt;I selected &lt;code&gt;G04&lt;/code&gt;, the copper/orange pipe color. The editor dimmed all other&lt;br&gt;
cells and highlighted every G04 cell on the canvas.&lt;/p&gt;

&lt;p&gt;That made two errors obvious: isolated single-cell noise is easy to spot, and&lt;br&gt;
the pipe can be checked as a connected shape instead of as a list of codes.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fd9s4y35it81b1haduxq3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fd9s4y35it81b1haduxq3.png" alt="G04 color highlighting across the storefront" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For a large pattern, this is more useful than a simple palette swatch. It turns&lt;br&gt;
a color list into an inspection tool.&lt;/p&gt;

&lt;h2&gt;
  
  
  Check 3: are the cell codes legible at build zoom?
&lt;/h2&gt;

&lt;p&gt;At &lt;strong&gt;450% zoom&lt;/strong&gt;, each cell displays its MARD code. I used this view to inspect&lt;br&gt;
the dark curtain, lanterns, and storefront signage area—the places where nearby&lt;br&gt;
colors were most likely to be confused.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fc0zaf646cnt4tpgky8l9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fc0zaf646cnt4tpgky8l9.png" alt="450 percent zoom showing per-cell MARD codes" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;My rule for this check was simple: if I could not distinguish two adjacent&lt;br&gt;
colors at build zoom, the pattern needed a color merge before export. This&lt;br&gt;
piece passed the visual check, but the number of colors is still a trade-off,&lt;br&gt;
not an automatic recommendation.&lt;/p&gt;

&lt;h2&gt;
  
  
  Check 4: can the same canvas serve as artwork and a build sheet?
&lt;/h2&gt;

&lt;p&gt;I exported two versions from the same canvas:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;a clean PNG without grid lines for sharing the pixel artwork;&lt;/li&gt;
&lt;li&gt;a grid/PDF-oriented version with codes and material information for building.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fb6smwc2ubdqz2s8b1nup.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fb6smwc2ubdqz2s8b1nup.png" alt="Pattern export options" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That split matters. The clean render is for looking at; the gridded version is&lt;br&gt;
for following. Mixing both jobs into one export usually makes one of them worse.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I would change before actually building it
&lt;/h2&gt;

&lt;p&gt;I would not build this exact version without simplifying it first.&lt;/p&gt;

&lt;p&gt;My next practical version would:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;reduce the palette from 83 colors to about 32–48;&lt;/li&gt;
&lt;li&gt;remove low-contrast background noise;&lt;/li&gt;
&lt;li&gt;simplify the smallest plants and façade texture;&lt;/li&gt;
&lt;li&gt;preserve the roof silhouette, orange pipes, lanterns, and main windows;&lt;/li&gt;
&lt;li&gt;test a smaller 64–96 cell wide version before committing to a mural.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The point of the test was not “more colors are better.” It was to verify that&lt;br&gt;
the editor makes the cost of detail visible before a user buys beads.&lt;/p&gt;

&lt;h2&gt;
  
  
  Reproduce the test
&lt;/h2&gt;

&lt;p&gt;You can repeat the same workflow in the browser:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Open the &lt;a href="https://pixelartsuite.com/pixel-art-maker?utm_source=devto&amp;amp;utm_medium=article&amp;amp;utm_campaign=izakaya_case_study&amp;amp;utm_content=reproduce_test" rel="noopener noreferrer"&gt;Pixel Art Maker&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Create a canvas at the intended bead dimensions.&lt;/li&gt;
&lt;li&gt;Import a reference image or draw directly on the layered canvas.&lt;/li&gt;
&lt;li&gt;Check the live materials list; for a fully filled grid, its total should
equal the grid width × height.&lt;/li&gt;
&lt;li&gt;Select frequently used colors to inspect their distribution.&lt;/li&gt;
&lt;li&gt;Zoom until cell codes are readable and merge confusing colors.&lt;/li&gt;
&lt;li&gt;Export a clean PNG for sharing and a gridded/PDF version for building.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;PixelArt Maker is free, runs in the browser, requires no account, and processes&lt;br&gt;
the working image locally in the browser.&lt;/p&gt;

&lt;h2&gt;
  
  
  Who is this workflow for?
&lt;/h2&gt;

&lt;p&gt;This workflow is useful for people who want to make:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Perler, Hama, or Artkal fuse bead patterns;&lt;/li&gt;
&lt;li&gt;pixel-art references with a real material count;&lt;/li&gt;
&lt;li&gt;large printable grid projects;&lt;/li&gt;
&lt;li&gt;building façades, game assets, or images that need manual cleanup after
pixelation.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It is less useful if you only want a fast social-media image. In that case,&lt;br&gt;
a simple image-to-pixel converter is faster. The editor earns its complexity&lt;br&gt;
when you need to inspect, edit, count, and export a grid someone can actually&lt;br&gt;
follow.&lt;/p&gt;

&lt;h2&gt;
  
  
  Disclosure
&lt;/h2&gt;

&lt;p&gt;I built PixelArtSuite and used my own product for this test. The architectural&lt;br&gt;
reference was AI-generated; the grid design, color review, cleanup decisions,&lt;br&gt;
and exports shown here were made and checked in PixelArtSuite.&lt;/p&gt;

&lt;p&gt;If you build large bead patterns, I would be interested in one practical answer:&lt;br&gt;
would you reduce &lt;strong&gt;color count&lt;/strong&gt;, &lt;strong&gt;grid size&lt;/strong&gt;, or &lt;strong&gt;small detail&lt;/strong&gt; first?&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fa5t7k2qfqgc9viig1d3x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fa5t7k2qfqgc9viig1d3x.png" alt=" " width="688" height="1032"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>buildinpublic</category>
      <category>design</category>
      <category>tools</category>
    </item>
  </channel>
</rss>
