Strona główna / Blog / Design

Cztery style ilustracji, jeden wdrożony

29 sierpnia 2026 · 7 min czytania · Dimesum Engineering

Dimesum narysował wszystkie cztery kandydujące style, zanim wybrał jeden, a rozstrzygającą cechą nie była uroda, lecz to, czy każdy kolor rysunku może być tokenem.

Cztery style ilustracji. Tylko jeden z nich dawało się otematować. Dimesum wybrał kierunek artystyczny marki na podstawie jednego mechanicznego testu: czy każdy kolor rysunku można zastąpić tokenem? Trzy propozycje nie przeszły testu, a najładniejsza wypadła najgorzej.

Cztery archetypy znajdują się w pliku docs/design/brand/ART-STYLES.md, po jednym na każdą referencję zebraną przez założyciela. Narysowaliśmy wszystkie cztery, zamiast się o nie spierać: trzy motywy należące do Dimesum, każdy oddany raz w charakterystycznej kresce i palecie danego archetypu. make ui-art-styles zapisuje arkusz stykowy 4x3.

W grafice produktowej generowalność wygrywa z urodą

Grafika produktowa jest generowana na nowo, grafika marketingowa rysowana raz. Dimesum udostępnia 18 palet kolorów, a ten sam pierożek musi się bronić przy 24px w wierszu listy i przy 200px na ekranie wprowadzającym. Styl, który przy każdej nowej palecie wymaga ilustratora, nie sprawdzi się w żadnym z tych zadań.

Bramką jest więc generowalność. Jednolita kreska z zaokrąglonymi końcami na płaskim wypełnieniu ma dokładnie dwa kolory na kształt, a oba są nazwane tokenem. Zmień wartości tokenów, a każdy rysunek w produkcie od razu zmienia motyw, bez przerysowywania i bez drugiego zasobu.

Trzy z czterech archetypów zawodzą, każdy z innego powodu

Obsada jest ciepła i malarska: pleciony koszyk z prawdziwą fakturą, bursztynowe tło i pierożki z rękami i nogami wspinające się na słoik z pałeczkami. Ma najwięcej uroku z całej czwórki. Mimo to nie nadaje się do wdrożenia. Malowane rozświetlenie to gradient z dwoma punktami i pozycją środka, a nie kod heks, który da się podmienić, a cieniowanie zamienia się w papkę przy 24px.

Plakat jest płaski i geometryczny, oliwka i złoto na plecionej macie. Nie ma żadnych konturów: formy oddziela wyłącznie kolor. Piękne i strukturalnie zgubne, bo zmiana motywu przesuwa wypełnienia i zabiera ze sobą granice. Twarze mają około 8% szerokości ciała, więc przy rozmiarach od 24px do 48px, których używa Dimesum, odczytuje się je jako puste.

Rozkładówka jest nowoczesna i redakcyjna, najbliższa naszej własnej kresce: cienki, jednolity ciemny kontur na płaskim wypełnieniu, ze szczegółami niesionymi przez małe powtarzane znaki, a nie przez cieniowanie. Różnica leży w temacie, nie w kresce. Rysuje cały stół z góry, a stół nie ma jednostki, którą dałoby się umieścić w wierszu listy. Dimesum potrzebuje stylu postaci, nie stylu sceny.

Naklejka to czysty wektor kawaii i to ją wdrażamy. Jednolity cienki kontur, płaskie wypełnienia, oczy w postaci kropek, duży koralowy rumieniec, brak cieniowania. Każdy kolor w niej jest tokenem, więc wszystkie 18 palet otematowuje ją za darmo, broni się przy 24px i przy 200px, i jest tą samą kreską co nasze ikony Lucide przy 24px z zaokrąglonymi kreskami 2px.

Pytanie rozstrzygające: czy kolor może być tokenem?

To płaskie wypełnienie sprawia, że kolor da się nazwać, a nazwanie sprawia, że 18 palet jest za darmo. Pierożek Naklejki to jeden token wypełnienia plus jeden token kreski. Rumieniec to rust-600 przy kryciu 0,42, a nie płaski pastel, więc pożycza dowolny ciepły odcień niesiony przez schemat, zamiast nazywać własny kolor. Bambusowy koszyk to jedna drabina tonalna mieszana na bazie gold-600 każdego motywu, więc jego oświetlony brzeg to to złoto plus 22% papieru, a jego dno plus 38% atramentu, w każdym schemacie.

Żaden z odrzuconych stylów nie przetrwa tej edycji. Rozświetlenie Obsady jest wtopione w punkt gradientu, więc zmiana motywu ciała pozostawia na wierzchu kremową plamę. Plakat nie ma linii spajającej rysunek, więc gdy dwa wypełnienia zbliżą się do siebie, krawędź między nimi przestaje istnieć.

Trzy poprawki, które wychwyciło dopiero porównanie obok siebie

Rysunek zawsze wygląda dobrze sam z siebie. Każdą z poniższych poprawek znaleziono tak samo: wyrenderuj kandydata do PNG, przytnij referencję do tego samego rozmiaru w pikselach, a potem wklej oba do jednego obrazu.

Usta narysowano na szerokość 20u i odczytywały się jak uśmieszek w chwili, gdy stanęły obok referencji. Zeszły do 10u, jednej trzeciej odstępu między oczami wynoszącego 28u, i postać znów stała się pierożkiem. Krążki oczu zmniejszyły się w tym samym czasie, z r5 do owali 3,4u, które są wyższe niż szersze.

Kontur dopasowany do maski referencyjnej metodą IoU uzyskał 0,880, wobec 0,781 dla najlepszej próby narysowanej ręcznie. Dopasowany wyglądał jak kolczasta korona. Nakładanie się powierzchni nie widzi gładkości, więc lepszy wynik należał do gorszego rysunku. Wdrażane są zmierzone proporcje z autorskimi krzywymi: proporcja 1,041 wobec 1,039 referencji, każdy segment sześcienny, nigdzie żadnego rogu.

Zebrany zawijas musi przełamać kontur. Nasz pierwszy pierożek był gładką kopułą z trzema cienkimi kreskami namalowanymi na górze, a recenzja wróciła w jednym słowie: włosy. Linie narysowane na nieprzerwanej krzywej mogą się czytać tylko jako włosy, bo nic w kształcie nie mówi, że ciasto zostało zebrane. Płatki rozdzielają się tylko w górnych 8% wysokości; wetnij głębiej, a dostaniesz zajęcze uszy, które trafiły do produktu dwa razy, zanim to wychwycono.

Co zachowaliśmy z trzech odrzuconych

Odrzucenie stylu to nie jego usunięcie. Obsada zachowuje instynkt inscenizacji: rekwizyty, rozsypywanie, postacie wchodzące w interakcję z przedmiotami, używane tam, gdzie w grę wchodzi ilustrator i nic nie zmienia motywu. Rozkładówka zachowuje pewność czerwonego tła dla strony i przyzwolenie na nadanie twarzy przedmiotowi niebędącemu postacią. Plakat zachowuje dyscyplinę czterech kolorów na kompozycję.

Same studia nigdy nie trafiają do produktu. ui/dumplings/styles/ ma ten sam status co refs/: cytat, nie źródło, a warstwa produktu nie może go importować. Generator parsuje listę archetypów z samych nagłówków dokumentu, więc piąty archetyp dodany do ART-STYLES.md pojawia się w arkuszu przy następnym buildzie, a nagłówek, którego nie potrafi narysować, wywala build.