Ana sayfa / Blog / Tasarım

Dört illüstrasyon stili, teslim edilen tek stil

29 Ağustos 2026 · 7 dakika okuma · Dimesum Engineering

Dimesum, birini seçmeden önce dört aday stilin dördünü de çizdi ve belirleyici özellik güzellik değil, çizimdeki her rengin bir token olup olamayacağıydı.

Dört illüstrasyon stili. Bunlardan yalnızca biri temalandırılabiliyordu. Dimesum, marka sanat yönünü tek bir mekanik teste göre seçti: çizimdeki her renk bir token ile değiştirilebiliyor mu? Üç aday başarısız oldu ve en güzeli en sert şekilde başarısız oldu.

Dört arketip docs/design/brand/ART-STYLES.md dosyasında yaşıyor, kurucunun topladığı her referans için bir tane. Bunları tartışmak yerine dördünü de çizdik: Dimesum'un sahip olduğu üç özne, her arketipin kendi çizgisi ve paletiyle birer kez işlendi. make ui-art-styles, 4x3 kontak sayfasını yazıyor.

Ürün görselinde üretilebilirlik güzelliği yener

Ürün görseli yeniden üretilir; pazarlama görseli bir kez çizilir. Dimesum 18 renk paleti sunuyor ve aynı mantının hem bir liste satırında 24px'te hem de bir tanıtım ekranında 200px'te ayakta durması gerekiyor. Her yeni palet için bir illüstratöre ihtiyaç duyan bir stil, bu işlerin ikisini de göremez.

Yani eşik üretilebilirliktir. Düz bir dolgu üzerindeki tek tip yuvarlak uçlu bir kontur, her biçim için tam olarak iki renk taşır ve ikisi de bir token ile adlandırılır. Token değerlerini değiştirin, üründeki her çizim tek seferde yeniden temalanır, yeniden çizim olmadan ve ikinci bir varlık olmadan.

Dört arketipten üçü kırılıyor, her biri farklı bir nedenle

Kadro sıcak resimsi: gerçek dokusu olan örgü bir buhar sepeti, kehribar bir zemin ve çubuk kavanozuna tırmanan, kolları ve bacakları olan mantılar. Dördü arasında en fazla cazibeye sahip olan bu. Yine de teslim edilemez. Boyanmış bir parlaklık, değiştirebileceğiniz bir hex değil, iki duraklı ve bir merkez konumu olan bir gradyandır ve gölgeleme 24px'te bulamaca dönüşür.

Afiş düz geometrik, örgü bir hasır üzerinde zeytin yeşili ve altın. Hiç kontur taşımıyor: biçimler yalnızca renkle ayrılıyor. Güzel ve yapısal olarak ölümcül, çünkü bir tema değişimi dolguları hareket ettirir ve sınırları da beraberinde götürür. Yüzleri gövde genişliğinin kabaca %8'inde duruyor, bu yüzden Dimesum'un kullandığı 24px ile 48px arasındaki boyutlarda boş okunuyorlar.

Serim modern editoryal ve bizim kendi çizgimize en yakını: düz dolgu üzerinde ince, tek tip koyu bir kontur, ayrıntı gölgeleme yerine küçük tekrarlanan izlerle taşınıyor. Fark özne, kontur değil. Bütün bir masayı yukarıdan çiziyor ve bir masanın bir liste satırına koyabileceğiniz bir birimi yok. Dimesum'un bir sahne stiline değil, bir karakter stiline ihtiyacı var.

Çıkartma temiz kawaii vektör ve teslim ettiğimiz stil bu. Tek tip ince kontur, düz dolgular, nokta gözler, iri mercan pembesi allık, gölgeleme yok. İçindeki her renk bir token, bu yüzden 18 paletin hepsi onu bedelsiz temalandırıyor, 24px'te ve 200px'te ayakta duruyor ve 24px'te 2px yuvarlak konturlu Lucide ikonlarımızla aynı çizgi.

Belirleyici soru: bir renk token olabilir mi?

Bir rengi adlandırılabilir kılan düz dolgudur ve 18 paleti bedelsiz kılan da adlandırmadır. Çıkartma'nın mantısı bir dolgu token'ı artı bir kontur token'ıdır. Allık, düz bir pastel yerine 0.42 opaklıkta rust-600, bu yüzden kendine ait bir renk adlandırmak yerine şemanın taşıdığı sıcak tonu ödünç alıyor. Bambu buhar sepeti, her temanın gold-600 renginden karıştırılan tek bir ton merdivenidir, bu yüzden aydınlık kenarı her şemada o altın artı %22 kağıt ve tabanı artı %38 mürekkeptir.

Reddedilen iki stilin ikisi de bu düzenlemeye dayanamıyor. Kadro'nun parlaklığı bir gradyan durağına pişirilmiş, bu yüzden gövdeyi yeniden temalandırmak üstünde oturan krem rengi bir leke bırakıyor. Afiş'in çizimi bir arada tutan bir çizgisi yok, bu yüzden iki dolgu birbirine yaklaştığında aralarındaki kenar var olmaktan çıkıyor.

Yalnızca yan yana karşılaştırmanın yakaladığı üç düzeltme

Bir çizim kendi başına her zaman iyi görünür. Aşağıdaki her düzeltme aynı yolla bulundu: adayı PNG'ye işleyin, referansı aynı piksel boyutuna kırpın, sonra ikisini tek bir görsele yapıştırın.

Ağız 20u genişliğinde çizilmişti ve referansın yanına oturduğu anda bir gülen yüz gibi okundu. 10u'ya indi, 28u'luk göz aralığının üçte biri kadar, ve karakter yeniden bir mantı oldu. Göz diskleri de aynı anda indi, r5'ten enlerinden uzun 3.4u oval biçimlere.

Referans maskesine IoU ile oturtulan bir kontur 0.880 aldı, en iyi elle çizilmiş denemenin 0.781'ine karşı. Oturtulan olan dikenli bir taç gibi görünüyordu. Alan örtüşmesi pürüzsüzlüğü göremez, bu yüzden daha yüksek puan daha kötü çizimdi. Teslim edilen şey, elle yazılmış eğrilerle ölçülmüş oranlardır: referansın 1.039'una karşı 1.041 en boy oranı, her segment bir kübik, hiçbir yerde köşe yok.

Büzülmüş düğümün konturu kırması gerekir. İlk mantımız, tepesine üç ince kontur boyanmış pürüzsüz bir kubbeydi ve değerlendirme tek kelimeyle geri geldi: saç. Kırılmamış bir eğri üzerine çizilen çizgiler yalnızca saç olarak okunabilir, çünkü biçimde hamurun büzüldüğünü söyleyen hiçbir şey yok. Loblar yalnızca yüksekliğin üst %8'inde ayrılıyor; daha derin kesin, tavşan kulakları elde edersiniz, ki bu yakalanmadan önce iki kez teslim edildi.

Reddettiğimiz üçünden neyi sakladık

Bir stili reddetmek onu silmek değildir. Kadro sahneleme içgüdüsünü koruyor: aksesuarlar, taşmalar, nesnelerle etkileşen karakterler, bir illüstratörün döngüde olduğu ve hiçbir şeyin yeniden temalanmadığı yerde kullanılıyor. Serim, site için kırmızı zemin özgüvenini ve karakter olmayan bir nesneye yüz verme iznini koruyor. Afiş, kompozisyon başına dört renk disiplinini koruyor.

Çalışmaların kendileri hiçbir zaman teslim edilmez. ui/dumplings/styles/, refs/ ile aynı konumdadır: kaynak değil alıntıdır ve ürün katmanı onu içe aktaramaz. Üretici, arketip listesini belgenin kendi başlıklarından ayrıştırır, bu yüzden ART-STYLES.md dosyasına eklenen beşinci bir arketip bir sonraki derlemede sayfada görünür ve çizemediği bir başlık derlemeyi başarısız kılar.