Pixel Art'a Girişiyoruz

Bugün sizlerle pixel art yapmak için gerekli en beleş ortamı hazırlıyoruz, sonra da ufak bir karakter çiziyoruz.

Türlü türlü görüntü editörleri mevcut, halk arasında fotoşap (sana margarini der gibi) diye adlandırılan bu programlar arasından pixel art için basit bir şeyler bize yeterli olacaktır.

Manyağım ya da puristim diyorsanız MS Paint ile girişebilirsiniz. Fakat katmanlı (layer) çizim gibi bir nimetten mahrum kalacaksınız.

İşleri bir nebze kolaylaştırmak için bugün size Paint.NET (www.getpaint.net) denen arkadaştan bahsedeceğim. Ücretsiz, akarı kokarı olmayan bir yazılımdır. Bu yazı piksel art'tan çok Paint.NET dersi kıvamında, benim kullandığım araç var zaten diyorsanız aşağıdaki bir şeyler çiz başlığına atlayın hemen.

Adobe Potoshop tabii ki kullanılabilir, ama aynı birazdan anlatacağım gibi Paint.NET için yapacağınız ayarlara PS'de de dikkat etmeniz lazım olacak. PS kullanacaklar da şu aşağıyı okuyuversin, benzer ayarları uygulayabilirsiniz.

Bir de Asperite diye de bir uygulama var. O da popüler ve sırf pixel art için özel yazılmış ama ben çok hakim değilim, bununla uğraşacağınıza ona da bakabilirsiniz. Neyse hadi, ben anlatmaktan vazgeçmeden gidin Paint.NET'i kurun gelin, bekliyorum.

... (bekliyorum, hadi, indirme linkini bulamadıysanız <şurada> tam olarak) ...

Ayarları Verelim

Şimdi pixel art'ın doğası gereği mozaik gibi tek tek işleme yapacağımızdan pikseller üzerindeki kontrolümüzü arttıracak bir takım ayarlar yapacağız.

Paint.NET'in garip bir özelliği aletlerin ayarlarının ortak olması. Açıyoruz hemen sağ üstten "ayarları"

Burada kontrolümüz dışında piksel hesabı yapacak şeyleri kapatıyoruz, amacımız kalemimizde ne renk seçili ise direk o rengi istediğimiz piksele işlemek. Bu amaçta anti-aliasing ya da yumuşatma gibi işlemleri kapatıyoruz. Kısacası ayarları aşağıdaki gibi yapıyoruz, onların ne olduğunu açıklayacağım birazdan, takılmayın:

Bana Ayırdığın Bu Kalbin Kadar Temiz Sayfa için Teşekkür Ederim

Pixel art'ın geçmişi oyun grafikleri olduğundan genelde çizimler belli bir "tile" (kutu kutululuk, kutucuklar, fayans döşeme?) ölçeğinde yapılır. Mecburi değil tabi ama oyunumsu bir iş çıkarmak istiyorsanız öncelikle bir tile (kutu desek iyi) boyutu seçiyorsunuz. Bu boyutlar piksel biriminde olacak. Eski bilgisayarlarda hafıza optimizasyonu için resimler 2'nin katları (2 üzeri x) boyutlarda saklanırdı. Biz şimdi yaygın olan 16x16 piksel ile devam edeceğiz.

Öncelikle yeni bir sayfa açalım, 16x16'lık bir ölçeğimiz olacağından 16'nın bir katı ile (128) sayfa açalım. Sadece Width ve Height'ı pixel birimi ile ayarlamanız yeterli, diğer ayarlar önemli değil.

Şimdi Yerlere Fayans Döşüyoruz

Şimdi çizim için kendimize bir kutu kutu arkaplan hazırlayalım, çizimlerimizde 16x16'yı görelim.
Önce boş bir layer açalım; Layers penceresinden sol altındaki tuşa basıp Add New Layer diyelim.

Sonra Tools'un en altından Shapes seçelim. Seçili aracın özellikleri üst barın altında gözükecek. Oradan dikdörtgen (Rectangle) ve içi dolu çizimi (Draw Filled Shape) seçelim.

Sonra güzel bir renk seçip shift'e basılı tutup (shift'e basılı tutmak boyu ve eni eşitler) ilk karemizi çiziyoruz. Basılı tutarken sağ alt köşeye bakarsanız karenin piksel boyutunu göreceksiniz. 16x16 olduğunda sürüklemeyi bırakıyoruz.

Rengi biraz değiştirip ikinci bir kareyi dibine çiziyoruz. Ctrl + Mouse tekeri ile görüntüyü yaklaştırabilirsiniz. İkinci kareyi çizdikten sonra Tools'ta sol üstten Rectangle Select adıdnaki seçim aracını açıyoruz. iki kareyi tam olarak içine alacak şekilde seçim yapıyoruz.

Bu seçimi tüm resmin en üst köşesine taşıyoruz. Hazır iki kutumuz seçili iken Ctrl+C ve Ctrl+V ile kopyala yapıştır yapıyoruz. Yapıştrımayı tekrar edip yeni gelen parçaları yan yana dizerek ilk satırımızı elde ediyoruz. Son parçanın alana cuk oturduğuna dikkat edin, 16 x 8 = 128 hesap hatası olmasın. Şöyle bir durum olacak en son:

Şimdi bu satırı kopyalayıp ikinci satırı yapcağız, Layer penceresinden Duplicate Layer diyelim:

Sonra bu yeni Layer seçili iken Tools'da sağ üstteki mavi ok ile (Move Selected Pixels) bu yeni satırı aşağı ve bir yana olacak şekilde kaydıralım. Bu işlemden sonra kareleri dizerken bir hata yapıp yapmadığınız ortaya çıkar, çizgiler muntazam mı ona bakın. (muntazam dedim, evet)

İlk kareyi yaptığımız gibi baştaki boşluğa bir kare daha çizin. (İlk rengi geri bulmak için Color Picker aracını kullanabilirsiniz.) Layer penceresinde ortadaki "Merge Layer Down" tuşu ile son katman ile bir altındakini birleştirin. Bundan sonra önceden yaptığımız gibi ilk iki satırı kopyala yapıştır ve aşağıya oynat işlemleri ile ekranı doldurun. Sonuç olarak şöyle bir şey olacak: (burada hazır yapılmışı var)

Esas çalışmanız için yeni bir katman açın, bu (Grid) katmanınız çalışmalarınız boyunca arkada dursun böyle. Gerektiği zaman Layer ayarlarından grid'in opaklığını değiştirerek silinik hale getirebilir, dikkat dağıtmasını azaltabilirsiniz. Bir de bunun altında düz beyaz bir layer (Adı Background olan) kalsın, onu silmeyin.

Hadi Sıkıldım, Bir Şeyler Çiz

Evet, eğlenceli kısma geldik. Shapes aracını seçelim, seçeneklerden Rounded Rectangle ve Corner Size 2px seçelim. Hemen buradayken pixel-art'ta anti-aliasing'i (AA) neden sevmiyoruz onu da göstereyim. Çizdiğimiz küçük bir şeklin AA kapalı (solda) ve AA açık (sağda) hallerini aşağıda görebilirsiniz:

AA açık iken yumuşatma amaçlı köşelerde ara renklerde silik doldurmalar oluyor. Biz bunu istemiyoruz. Neyse çizime dönersek. Öncelikle çizmek istediğimiz şeklin silüeti ile başlayalım, koyu bir gri seçelim. Fanus kafalı basit bir karakter çizeceğiz. Karakterler için iki Tile alan planlayalım. 16x32 px alanımız olsun. Pencil aracını 1px kalınlığında seçip silüetimizin vücudunu çizelim:

Hemen de taşırdık, neyse. Bir koyu renk ile biraz hacim verelim. Bu esnada silmek istediğimiz pikselleri de silgi aracı ile siliyoruz fakat silginin Hardness değerinin %100 olduğuna dikkat edin, yoksa pikseli tam olarak silemezsiniz, AA'daki gibi silik, gözle görülmeyen ama sonra sorun çıkaracak pikselleriniz kalır ortalıkta.

Şimdi o taşan kolları içeri sokalım. Select aracı ile kolu seçelim, seçimi bırakmadan mavi ok aracını seçelim (move selected pixels) ve seçimin yanındaki yuvarlaktan tutup sola sürüklerek kolu küçültelim.

Bunu yaparken de ayarlarda "Nearest Neighbor (NN)" diye bir şey seçmiştik, ona değinelim. Bu seçenek uygulamanın boyutlandırma işlemlerini nasıl yapacağıdır. NN yerine Bilinear (Smooth diye de geçer bazı yerlerde) gibi bir şey seçseydik boyutlandırmada yine AA'da olduğu gibi istenmeyen piksel yumuşatmaları olacaktı. NN bu yumuşatmayı engelliyor. Örnek, solda NN ile, sağda da Bilinear ile resize ettik, yarı saydam garip garip pikseller oldu aralarda:

Diğer kolu da resize edip biraz temizlik yapalım. Şu altta temizlik konusunda güzel bir referans var, bizim yöntem çizgi değil, hacim üzerine ama mantık yakın.

Bizimki de ilk temizlikten sonra şu şekilde, ani kesilen gölge hattı olmamasına, yalnız kalan pikseller olmamasına dikkat ediyoruz, biraz da detay ekliyoruz:

Biraz renk atalım, karakterin farklı bölümlerini ortaya çıkaralım. Önce Adjustments menüsünde Sepia atalım ki nostalji bi hava versin, şaka bir yana Sepia'nın gerçekten işe yaradığı nadir bir adımdır, gri çalışmamıza bir renk katıp daha sonra kullanacağımız Hue aracı için renk zemini hazırlıyor.

Sepia ile karakteri gri'den kahve tonlarına çevirdikten sonra Seçim aracı ile kafayı seçelim. Shift'e basılı tutup seçimimize eklemeler, alt'a basılı tutup çıkartmalar yapabiliriz. Böylece sadece dikdörtgen seçmemiz gerekmez. Ayrıca Lasso Select ile de seçeceğimiz yeri çizerek belirtebiliriz. Kafayı ve biraz altını seçtikten sonra yine Adjsutments menüsünden Hue/Saturation penceresini açıyoruz. Burada Hue renk seçimi, Saturation da o rengi ne kadar uygulayacağımızı seçer. Lightness değerine çok dokunmamanızı öneririm, böylece karakterin genel renk Value'su belli bir uyum içinde kalacaktır. Value dengesi ne diyorsanız iyi bir şey, lazım.

Dokunmayın dedim ama kollarda Lightness değiştirdim. Kıyafetten farklı bir vurguda olacağı için sorun olmadı. Şöyle bir şey elde ettik:

Bundan sonrası deneme yanılmalar ile detaylar ekleme üzerine gideceğiz. Yakın çalışıp (%1000) arada genel duruma bakmak için %300'e geri zoom out yaparak kontrol edin. (Ctrl+Mouse Tekeri)

Detayları çalışırken bacakları da tamir ettim. Dengeyi sağlamak için, iki bacakta aynı satırda denk gelen kesitlerin eşit pikselde olmasına dikkat ettik. nano piksel art (space invaders gibin) uygulayarak tişörte detay iliştirdik, bir de "gariplik unsuru" olması için kafasına anten taktık. Gariplik unsuru pixel art için önemlidir. Benim teorim bu, yeni uydurdum ama mantıklı aslında biraz düşünürseniz.