Metlivi Blog

24×24 Piksel Sınırı İçinde Okunaklı Bir Hayvan Sprite'ı Nasıl Oluşturulur?

Bir hayvanı 24×24 pikselde tanınabilir kılmak için onu tanımlayan özellikleri belirleyin, bu özelliklere siluette net bir alan tanıyın ve yalnızca sprite'ın hedeflenen görüntüleme boyutunda kaybolmayacak ayrıntıları ekleyin. Basit bir şekille başlayın, iç renk veya ayrıntı olmadan test edin, ardından az sayıda kontrast renk grubu ekleyin ve sprite'ı gerçek arka planına karşı kontrol edin. 24×24 boyutundaki bir tuval 576 piksele sahiptir, bu nedenle her işaret alan için rekabet eder.

15 Ekim 20266 dakikalık okumaYazan: Metlivi Editorial Team
Bölüm 1

Tek bir bakış açısı ve bir tanımlayıcı özellik seçin

Çizim yapmadan önce bir bakış açısı belirleyin: yan görünüm, ön görünüm veya dörtte üçlük (çapraz) görünüm. İlk sprite çalışması için yan görünüm; kuyruk, kulaklar, gaga veya burnu gövdeden ayırmayı genellikle daha kolay hale getirir. Bu bir kuraldan ziyade pratik bir tasarım tercihidir; okuyucuların fark etmesini istediğiniz özelliği en iyi gösteren açıyı seçin.

Bir birincil tanımlayıcı ve en fazla bir destekleyici özellik belirleyin. Bir kedi için bunlar sivri kulaklar ve bir kuyruk olabilir; bir kuş için gaga ve kompakt bir gövde; bir kaplumbağa içinse kabuk şekli. Bu sınır yararlı bir çalışma kısıtlamasıdır, zorunlu bir standart değildir. Hayvanın kimliği netleşmeden önce tasarımın genel dokular için piksel harcamasını önlemeye yardımcı olur.

Bölüm 2

Pikselleri yerleştirmeden önce tuvali planlayın

24×24 boyutunda bir tuval açın ve çizim yaparken piksel ızgarasını görünür tutun. Aseprite gibi bir sprite düzenleyicisi, belgeye piksel boyutunda bir görüntü olarak yaklaşır ve belgelerinde indeksli rengi, palet girdilerine atıfta bulunan pikseller olarak tanımlar. Izgara, bir özelliğin kaç satır veya sütun kapladığını değerlendirmeyi kolaylaştırır. Aseprite'ın sprite belgeleri ve renk modu kılavuzu

Özellikle kulakların, boynuzların veya bir kuyruğun kesilebileceği kenarlarda biraz boşluk bırakın. Ardından en büyük kütleleri kabaca yerleştirin: gövde, kafa ve belirgin uzantılar. Örnek bir başlangıç dağılımı olarak, gövde ve kafa için birlikte yaklaşık 15×10 piksel ayırabilir, ardından kuyruk, bacaklar ve kulakları kalan alana sığdırabilirsiniz. Bu sayılar bir şablon değildir; uzun bir hayvan, yuvarlak bir hayvan ve öne bakan bir hayvan farklı oranlar gerektirir.

Bölüm 3

Önce silueti çizin ve test edin

Kontrast oluşturan bir arka plana karşı tek bir renk kullanarak hayvanı tek ve yekpare bir şekil olarak doldurun. Gözleri, desenleri ve gölgelendirmeyi görmezden gelin. Bu aşamada, hedeflenen hayvanın belirsiz bir şekilden ayırt edilip edilemediğini sorgulayın. Edilemiyorsa ana hatları değiştirin: burnu uzatın, kulakları ayırın, sırt kıvrımını değiştirin veya kuyruğa belirgin bir yön verin.

Dar boşluklara dikkat edin. Bir piksellik bir açıklık, bir kulağı kafadan veya bir bacağı karından ayırmak için yeterli olabilir; ancak sprite küçük görüntülendiğinde veya karmaşık bir arka plana yerleştirildiğinde bu boşluk kaybolabilir. İki özellik birbirine karışıyorsa, bir dış hat rengi eklemeden önce açılarını veya siluetlerini değiştirmeyi deneyin. Lospec'in giriş kılavuzu piksel piksel kontrolü vurgular ve öğrenenleri sprite yapım eğitimlerine yönlendirir; buradaki pratik çıkarım, otomatik yumuşatmaya güvenmek yerine bireysel piksel tercihlerini değerlendirmektir. Lospec, “Pixel Art: Where to Start”

Bölüm 4

Kimliği taşıyan özellikleri ekleyin

Siluet net bir şekilde anlaşıldığında, yüzü ve ayırt edici özelliği yerleştirin. Minik bir sprite'ta tek bir koyu göz yeterli olabilir. Bir burun, gaga, boynuz veya kabuk kenarı, ayrıntılı bir çizimden ziyade genellikle şekil veya renkteki küçük bir değişiklikle hissettirilebilir. Dış hatta temas etmesi kafa şeklinin okunmasını zorlaştıracaksa yüz işaretlerini dış hattan uzak tutun.

Hızlı bir silme testi uygulayın: her küçük işareti geçici olarak gizleyin. Bunu kaldırmak hayvanın daha az tanınabilir olmasına veya duruşunun daha az netleşmesine neden olmuyorsa, dışarıda bırakın. Bu evrensel bir sanat kuralı değil, pratik bir düzenleme yöntemidir. En çok önem taşıyan özellikler için alanın korunmasına yardımcı olur.

Bölüm 5

Kullanışlı kontrasta sahip kompakt bir palet seçin

Birkaç temel rolle başlayın: şeffaf arka plan, ana gövde rengi, ayrım veya gölge için daha koyu bir ton ve tek bir vurgu için daha açık bir ton. Yalnızca hayvanı tanımlamaya yardımcı oluyorsa ekstra bir vurgu rengi ekleyin. 24×24'lük bir sprite için zorunlu bir renk sayısı yoktur. Rollerin daha az olması, rengin şekli netleştirip netleştirmediğini veya görsel parazit yaratıp yaratmadığını görmeyi kolaylaştırır.

Renk tonlarının yanı sıra parlaklık değerlerini de kontrol edin. İki rengin tonu farklı olabilir ancak parlaklıkları birbirine yakınsa, bu durum küçük boyutta bir alanın ayırt edilmesini zorlaştırır. Gövdenin, yüzün ve kilit özelliğin hâlâ birbirinden ayrılıp ayrılmadığını kontrol etmek için sprite'ı geçici olarak gri tonlamalı olarak görüntüleyin veya düz orta gri bir arka plana geçin. Pinnguaq'ın hazırladığı bir sprite oluşturma eğitimi de örnek tuvali 24×24'ten büyük olmasına rağmen renk kontrastını ve görünürlüğü birden fazla arka planda değerlendirmeyi önermektedir. Pinnguaq, “Pixel Power: Sprite Creation”

Aseprite'ta RGB modu her pikselin kendi rengini barındırmasını sağlarken, indeksli mod pikselleri palet girdilerine bağlar ve palet düzenlemelerinin bu girdileri kullanan pikselleri etkilemesini sağlar. İndeksli mod, küçük bir paleti tutarlı tutmaya yardımcı olabilir; RGB modu ise renkleri keşfederken pratiktir. Her ikisi de bu görev için işe yarayabilir. Aseprite renk modu kılavuzu

Bölüm 6

Şekli bozmadan gölgelendirin

Gölgelendirmeyi yalnızca siluet ve tanımlayıcı özellik başarıyla oturduktan sonra ekleyin. Bir gölge alanını her yüzeyin dış hattını çizmek için değil, bir formu betimlemek veya birbiri üzerine binen parçaları ayırmak için kullanın. Geniş ve tutarlı bir gölge alanı, dağınık tek piksellere göre genellikle daha kolay okunur. Parlak vurguları idareli kullanın; bu boyutta birkaç parlak leke dokudan ziyade istenmeyen parazit gibi görünebilir.

Gölgeli bir kenar bir bacağın, kuyruğun veya kulağın gövdeye karışmasına neden oluyorsa, gölgeyi kaldırın veya yerini değiştirin. Silueti belirleyici referans olarak koruyun: iç renkler ana hatla rekabet etmemeli, onu desteklemelidir.

Bölüm 7

Sprite'ı gerçek boyutunda kontrol edin

Yakınlaştırmak pikselleri yerleştirmeye yardımcı olur, ancak normal boyutta ortaya çıkan sorunları gizleyebilir. Sprite'ı hem büyütülmüş haliyle hem de oyunda veya arayüzde kaplayacağı gerçek boyutta inceleyin. Gerçek boyutta üç şeyi kontrol edin: Hayvanı tanımlayabiliyor musunuz? Hangi yöne baktığını anlayabiliyor musunuz? Hedeflenen arka planında duruş hâlâ net mi?

Sprite farklı sahnelerde görünebilecekse, onu birden fazla düz arka planda da test edin. Koyu bir dış hat belirli bir arka planda kayboluyorsa dış hattı ayarlayın veya küçük bir ayırma rengi ekleyin. Hayvan yalnızca büyütüldüğünde anlaşılabiliyorsa bir ayrıntıyı basitleştirin veya kimliğini ileten özelliği büyütün. Bu kontroller pratik tespit yöntemleridir, her izleyicinin görüntüyü aynı şekilde yorumlayacağının garantisi değildir.

Bölüm 8

Kısa bir revizyon sırası

Revizyonları şu sırayla uygulayın: siluet, duruş, tanımlayıcı özellik, değer ayrımı ve ardından süslemeler. Düzenlemenin işe yarayıp yaramadığını anlayabilmek için her seferinde tek bir noktayı değiştirin. Hayvan hâlâ belirsiz görünüyorsa, onu imza niteliğindeki özelliğini abartan basitleştirilmiş ikinci bir taslakla karşılaştırın. Gerçek boyutta hangisi daha net okunuyorsa o taslakla devam edin.

Tamamlanan sprite'ın mevcut 576 pikselin tamamını veya bir paletteki her rengi kullanması gerekmez. Hayvan, baktığı yön ve en önemli özelliği hedeflenen boyutta net olarak okunduğunda ve eklenen yeni işaretler bu kontrolleri artık daha iyi hale getirmediğinde çalışmayı tamamlayın.

Bölüm 9

Kaynaklar

İlgili okumalar

Bu konuyu keşfetmeye devam et