Etusivu / Blogi / Muotoilu

Neljä kuvitustyyliä, yksi toimitukseen

29. elokuuta 2026 · 6 min lukuaika · Dimesum Engineering

Dimesum piirsi kaikki neljä ehdokastyyliä ennen kuin valitsi yhden, ja ratkaiseva ominaisuus ei ollut kauneus: se oli voiko piirroksen jokainen väri olla token.

Neljä kuvitustyyliä. Yksi niistä oli teemoitettavissa. Dimesum valitsi brändinsä kuvallisen suunnan yhden mekaanisen testin perusteella: voidaanko piirroksen jokainen väri korvata tokenilla? Kolme ehdokasta kaatui, ja kaunein kaatui pahiten.

Neljä arkkityyppiä sijaitsevat tiedostossa docs/design/brand/ART-STYLES.md, yksi kutakin perustajan keräämää referenssiä kohti. Piirsimme kaikki neljä sen sijaan että olisimme väitelleet niistä: kolme aihetta jotka Dimesum omistaa, piirrettyinä kertaalleen kunkin arkkityypin omalla kädenjäljellä ja väripaletilla. make ui-art-styles kirjoittaa 4x3-kontaktiarkin.

Tuotekuvituksessa generoitavuus voittaa kauneuden

Tuotekuvitus generoidaan uudelleen; markkinointikuvitus piirretään kerran. Dimesum toimittaa 18 väripalettia, ja saman nyytin on toimittava kokona 24px listarivillä ja kokona 200px perehdytysnäkymässä. Tyyli joka vaatii kuvittajan jokaiselle uudelle paletille ei sovi kumpaankaan tehtävään.

Portti on siis generoitavuus. Tasainen pyöreäpäätteinen viiva litteän täytön päällä sisältää täsmälleen kaksi väriä muotoa kohti, ja molemmat on nimetty tokenilla. Muuta tokenin arvoja ja jokainen tuotteen piirros teemoittuu uudelleen kerralla, ilman uudelleenpiirtoa ja ilman toista tiedostoa.

Kolme neljästä arkkityypistä hajoaa, kukin eri syystä

Näytelmä on lämmin maalauksellinen: kudottu höyrystin aidolla tekstuurilla, meripihkanvärinen tausta ja nyyttejä joilla on kädet ja jalat kiipeämässä syömäpuikkopurkkiin. Siinä on eniten viehätystä neljästä. Silti sitä ei voi toimittaa. Maalattu korostus on liukuväri jossa on kaksi pysähdyskohtaa ja keskikohta, ei heksa jonka voi vaihtaa, ja varjostus muuttuu puuroksi 24px kohdalla.

Juliste on litteä geometrinen, oliivia ja kultaa kudotulla matolla. Siinä ei ole lainkaan ääriviivoja: muodot erottuvat pelkän värin avulla. Kaunis, ja rakenteellisesti kohtalokas, koska teeman vaihto siirtää täyttöjä ja vie rajat mukanaan. Sen kasvot ovat noin 8% vartalon leveydestä, joten Dimesumin käyttämissä 24px:n ja 48px:n välisissä kokoluokissa ne näyttävät tyhjiltä.

Aukeama on moderni editoriaalinen ja lähimpänä omaa kädenjälkeämme: ohut tasainen tumma ääriviiva litteän täytön päällä, ja yksityiskohdat kannetaan pienillä toistuvilla merkeillä varjostuksen sijaan. Ero on aiheessa, ei viivassa. Se piirtää koko pöydän ylhäältä, ja pöydällä ei ole yksikköä jonka voisi asettaa listariville. Dimesum tarvitsee hahmotyylin, ei kohtaustyyliä.

Tarra on selkeä kawaii-vektori, ja se on se jonka toimitamme. Tasainen ohut ääriviiva, litteät täytöt, pistesilmät, iso koralli poskipuna, ei varjostusta. Jokainen väri siinä on token, joten kaikki 18 palettia teemoittavat sen ilmaiseksi, se toimii kokoina 24px ja 200px, ja se on samaa kädenjälkeä kuin Lucide-ikonimme kokona 24px 2px pyöreillä viivoilla.

Ratkaiseva kysymys: voiko väri olla token?

Litteä täyttö tekee väristä nimettävän, ja nimeäminen tekee 18 paletista ilmaisia. Tarran nyytti on yksi täyttötoken ja yksi viivatoken. Poskipuna on rust-600 0.42 peittävyydellä eikä litteä pastelli, joten se lainaa minkä tahansa lämpimän sävyn jonka teema kantaa sen sijaan että nimeäisi oman värinsä. Bambuhöyrystin on yksi sävyportaikko sekoitettuna kunkin teeman gold-600 väristä, joten sen valaistu reuna on tuo kulta plus 22% paperia ja sen pohja plus 38% mustetta, jokaisessa teemassa.

Kumpikaan hylätty tyyli ei selviä tuosta muokkauksesta. Näytelmän korostus on leivottu liukuvärin pysähdyskohtaan, joten vartalon uudelleenteemoitus jättää kermanvärisen läiskän sen päälle. Julisteella ei ole viivaa joka pitää piirroksen koossa, joten kun kaksi täyttöä liikkuu toisiaan kohti, niiden välinen reuna lakkaa olemasta.

Kolme korjausta jotka vain vierekkäinen vertailu paljasti

Piirros näyttää aina hyvältä yksinään. Jokainen alla oleva korjaus löytyi samalla tavalla: renderöi ehdokas PNG-muotoon, rajaa referenssi samaan pikselikokoon, ja liitä molemmat yhteen kuvaan.

Suu piirrettiin 20u leveäksi ja luki hymynaamana heti kun se asettui referenssin viereen. Se laski 10u:hun, kolmasosaan 28u silmävälistä, ja hahmo palasi nyytiksi. Silmäkiekot laskivat samaan aikaan, arvosta r5 3.4u soikioihin jotka ovat korkeampia kuin leveämpiä.

IoU:n avulla referenssimaskiin sovitettu ääriviiva sai pisteet 0.880, kun paras käsin piirretty yritys sai 0.781. Sovitettu näytti piikkiseltä kruunulta. Pinta-alan päällekkäisyys ei näe pehmeyttä, joten parempi pistemäärä oli huonompi piirros. Se mikä toimitetaan on mitatut mittasuhteet tekijän piirtämillä käyrillä: kuvasuhde 1.041 vasten referenssin 1.039, jokainen segmentti kuutiollinen, ei kulmaa missään.

Rypytetyn solmun on rikottava ääriviiva. Ensimmäinen nyyttimme oli sileä kupoli jonka päälle oli maalattu kolme ohutta viivaa, ja palaute palasi yhdellä sanalla: hiukset. Katkeamattomalle käyrälle piirretyt viivat voivat lukea vain hiuksina, koska mikään muodossa ei kerro että kuori oli rypytetty. Lohkot erottuvat vain korkeuden ylimmässä 8% osassa; leikkaa syvemmälle ja saat pupunkorvat, jotka toimitettiin kahdesti ennen kuin se huomattiin.

Mitä säilytimme kolmesta hylkäämästämme

Tyylin hylkääminen ei ole sen poistamista. Näytelmä säilyttää lavastusvaistonsa: rekvisiitta, valuminen, hahmot jotka ovat vuorovaikutuksessa esineiden kanssa, käytettynä siellä missä kuvittaja on mukana eikä mikään teemoitu uudelleen. Aukeama säilyttää punataustaisen itsevarmuuden sivustolle ja luvan antaa kasvot ei-hahmoiselle esineelle. Juliste säilyttää neljän värin kurin sommitelmaa kohti.

Tutkielmat itsessään eivät koskaan päädy toimitukseen. ui/dumplings/styles/ on samassa asemassa kuin refs/: lainaus, ei lähde, eikä tuotekerros saa tuoda sitä. Generaattori jäsentää arkkityyppilistan dokumentin omista otsikoista, joten viides arkkityyppi lisättynä tiedostoon ART-STYLES.md ilmestyy arkkiin seuraavassa koonnissa, ja otsikko jota se ei osaa piirtää kaataa koonnin.