Fyra illustrationsstilar, en levererar
Dimesum ritade alla fyra kandidatstilarna innan en valdes, och den avgörande egenskapen var inte skönhet: det var om varje färg i teckningen kunde vara en token.
Fyra illustrationsstilar. En av dem gick att tema. Dimesum valde sin visuella art direction utifrån ett enda mekaniskt test: kan varje färg i teckningen ersättas av en token? Tre kandidater föll, och den vackraste föll hårdast.
De fyra arketyperna finns i docs/design/brand/ART-STYLES.md, en per referens som grundaren samlade in. Vi ritade alla fyra istället för att diskutera dem: de tre motiv Dimesum äger, återgivna en gång i varje arketyps egen hand och palett. make ui-art-styles skriver kontaktkartan på 4x3.
make ui-art-styles till ui/dumplings/styles/: varje arketyps dumpling ovanför sin ångkorg. Paletterna är pixelprovtagna från referenserna, utom kolumnen för Klistermärket, som härleds ur temat.För produktgrafik slår genererbarhet skönhet
Produktgrafik genereras om, marknadsgrafik ritas en gång. Dimesum levererar 18 färgpaletter, och samma dumpling måste hålla vid 24px på en listrad och vid 200px på en introduktionsskärm. En stil som kräver en illustratör för varje ny palett kan inte klara någotdera.
Så grinden är genererbarhet. En jämn kontur med rundade ändar ovanpå en platt fyllning har exakt två färger per form, och båda namnges av en token. Ändra tokenvärdena och varje teckning i produkten byter tema på en gång, utan omritning och utan en andra resurs.
Tre av de fyra arketyperna går sönder, var och en av olika skäl
Ensemblen är varmt måleriskt: en flätad ångkorg med verklig struktur, en bärnstensfärgad botten och dumplingar med armar och ben som klättrar på ätpinnsburken. Den har mest charm av de fyra. Den kan ändå inte levereras. En målad högdager är en gradient med två stopp och en mittposition, inte en hex du kan byta ut, och skuggningen blir gröt vid 24px.
Affischen är platt geometriskt, olivgrönt och guld på en flätad matta. Den har inga konturer alls: former skiljs åt enbart av färg. Vacker, och strukturellt ödesdiger, eftersom ett temabyte flyttar fyllningarna och tar gränserna med sig. Dess ansikten ligger på ungefär 8% av kroppsbredden, så vid de storlekar mellan 24px och 48px som Dimesum använder läses de som tomma.
Uppslaget är modernt redaktionellt och närmast vår egen hand: en tunn jämn mörk kontur ovanpå platt fyllning, med detaljer burna av små upprepade märken snarare än av skuggning. Skillnaden ligger i motivet, inte i konturen. Den ritar ett helt bord uppifrån, och ett bord har ingen enhet du kan lägga på en listrad. Dimesum behöver en karaktärsstil, inte en scenstil.
Klistermärket är ren kawaii-vektor, och det är den vi levererar. Jämn tunn kontur, platta fyllningar, prickögon, stor korallfärgad rodnad, ingen skuggning. Varje färg i den är en token, så alla 18 paletter temar den gratis, den håller vid 24px och vid 200px, och det är samma hand som våra Lucide-ikoner vid 24px med 2px rundade konturer.
| Arketyp | Hur former skiljs åt | Var färgen finns | Håller vid 24px | Utfall |
|---|---|---|---|---|
| Ensemblen varmt måleriskt | Varmgrå kontur plus målad skuggning | Gradienter och högdagrar | Nej, skuggningen blir gröt | Endast marknadsföring |
| Affischen platt geometriskt | Endast färgkontrast, ingen kontur | Fyra platta färger plus svart | Nej, ansikten på 8% blir tomma | Bortvald |
| Uppslaget modernt redaktionellt | Tunn jämn kontur över platt fyllning | Platta fyllningar, detaljer genom upprepade märken | Scenstil, ingen liten enhet | Endast marknadswebbplats |
| Klistermärket ren kawaii-vektor | Jämn tunn kontur över platt fyllning | Tokenfyllningar, en tokenkontur | Ja, kropp, krona, två ögonprickar | Levereras i produkten |
Den avgörande frågan: kan en färg vara en token?
Platt fyllning är det som gör en färg namngivbar, och namngivning är det som gör 18 paletter gratis. Klistermärkets dumpling är en fyllningstoken plus en konturtoken. Rodnaden är rust-600 vid 0.42 opacitet snarare än en platt pastell, så den lånar den varma nyans schemat bär istället för att namnge en egen färg. Bambuångkorgen är en tonstege blandad utifrån varje temas gold-600, så dess ljusa kant är det guldet plus 22% papper och dess botten plus 38% bläck, i varje schema.
Ingen av de bortvalda stilarna överlever den ändringen. Ensemblens högdager är inbakad i ett gradientstopp, så att byta tema på kroppen lämnar en gräddvit klick kvar ovanpå den. Affischen har ingen linje som håller ihop teckningen, så när två fyllningar rör sig mot varandra slutar kanten mellan dem existera.
Tre korrigeringar som bara en jämförelse sida vid sida fångade
En teckning ser alltid bra ut på egen hand. Varje korrigering nedan hittades på samma sätt: rendera kandidaten till PNG, beskär referensen till samma pixelstorlek, klistra sedan in båda i en bild.
Munnen ritades 20u bred och lästes som en smiley i samma stund den låg bredvid referensen. Den kom ner till 10u, en tredjedel av det 28u breda ögonavståndet, och figuren blev en dumpling igen. Ögonskivorna kom ner samtidigt, från r5 till 3.4u ovaler som är högre än de är breda.
En kontur anpassad till referensmasken med IoU fick 0.880, mot 0.781 för det bästa handritade försöket. Den anpassade såg ut som en taggig krona. Ytöverlappning kan inte se mjukhet, så den bättre poängen var den sämre teckningen. Det som levereras är uppmätta proportioner med skapade kurvor: förhållande 1.041 mot referensens 1.039, varje segment en kubik, inget hörn någonstans.
Optimera inte ett mått som inte kan se det du bryr dig om. Poängsätt arbetet, och titta på det också.
Den hopdragna knuten måste bryta konturen. Vår första dumpling var en slät kupol med tre tunna streck målade på toppen, och granskningen kom tillbaka i ett ord: hår. Linjer ritade på en obruten kurva kan bara läsas som hår, eftersom inget i formen säger att omslaget drogs ihop. Loberna skiljer sig bara i de översta 8% av höjden, gräv djupare och du får kaninöron, som levererades två gånger innan det upptäcktes.
Vad vi behöll från de tre vi valde bort
Att välja bort en stil är inte att radera den. Ensemblen behåller sin känsla för iscensättning: rekvisita, spill, figurer som samspelar med föremål, använd där en illustratör är med i loopen och inget byter tema. Uppslaget behåller självförtroendet med röd botten för webbplatsen och friheten att ge ett ansikte åt ett föremål som inte är en figur. Affischen behåller disciplinen med fyra färger per komposition.
Studierna själva levereras aldrig. ui/dumplings/styles/ har samma ställning som refs/: citat, inte källa, och produktlagret får inte importera det. Generatorn tolkar arketyplistan ur dokumentets egna rubriker, så en femte arketyp tillagd i ART-STYLES.md dyker upp i kartan vid nästa bygge, och en rubrik den inte kan rita fäller bygget.
Regeln detta avgör
En stil levereras, de andra är citat. Ta din favoritkandidat och försök färga om den enbart genom att ändra tokenvärden: om ett gradientstopp, en målad högdager eller en gräns gjord av färgkontrast överlever den ändringen behöver stilen en illustratör för varje tema du lägger till. Ditt nästa steg är en kontaktkarta, inte en moodboard. Rita varje kandidat vid 24px och vid 200px, i en bild, och välj den som fortfarande är läsbar vid båda.
Vanliga frågor
Vad avgör vilken illustrationsstil en produkt ska ha?
Genererbarhet avgör det, inte skönhet. Produktgrafik ritas om av en generator för varje tema och varje storlek, så frågan är om varje färg i teckningen namnges av en token som går att byta ut. Dimesum levererar 18 paletter, så en stil som håller en målad gradient skulle behöva en illustratör 18 gånger om.
Varför valde Dimesum bort den varmt måleriska stilen?
En målad högdager är en gradient med två stopp och en mittposition, inte en hex du kan byta ut. Att byta tema på kroppen lämnar den gräddvita högdagern kvar ovanpå den nya färgen, oförändrad. Samma skuggning blir också gröt vid 24px, vilket är storleken en dumpling visas i på en listrad.
Varför klarar en stil utan konturer inte ett temabyte?
Former i en konturlös stil skiljs åt enbart av färgkontrast, så gränsen är inte ritad någonstans. Flytta de två fyllningarna mot varandra för ett mörkt schema och kanten mellan dem slutar existera. En jämn kontur bevarar silhuetten oavsett vad fyllningarna gör, och det är därför Dimesum kräver en.
Hur kontrollerar man att en illustration fungerar i små storlekar?
Rendera varje kandidat i de storlekar produkten faktiskt använder och lägg dem i en bild. Dimesum kontrollerar 24px, 72px och 200px. Ansikten ritade i ungefär 8% av kroppsbredden läses som tomma mellan 24px och 48px, vilket är det som sållade bort en av de fyra arketyperna utifrån visuella bevis snarare än åsikt.
Kan ett automatiskt mått ersätta att titta på teckningen?
Nej. En kontur anpassad till referensmasken med IoU fick 0.880, mot 0.781 för det bästa handritade försöket, och den med högre poäng såg ut som en taggig krona. Ytöverlappning kan inte se mjukhet eller karaktär. Poängsätt arbetet för att fånga proportionsfel, jämför det sedan bredvid referensen i samma pixelstorlek.
Populära inlägg
- Journalen som håller delade utgifter exakta8 min läsning
- Varför en ändrad utgift måste ange delningen på nytt8 min läsning
- Sex pengabuggar i utgiftsdelning med flera valutor8 min läsning
- Gör upp: reglera gruppens utgifter med färre överföringar5 min läsning
- Dela notan när en rätt inte delades9 min läsning