"Selam Youtube'dan geldiysen bu eski kaldı ama artık videolar üretiyorum. Oradan detaylı dinleyebilirsin. https://www.youtube.com/@PixelChi_Youtube/videos"

[Aseprite Nedir?]

Aseprite bir grafik düzenleyicidir. Her türlü şeyi yapmanıza olanak sağlar. Gifler oluşturabilir ;hayalinizi dökebilir ; oyunlarınız için materyal oluşturabilirsiniz. Sınır sadece sizin hayal gücünüzdür.

[Aseprite'ı neden tercih etmeliyim?]

Aseprite aktif olarak çalışılan bir sanat yazılımıdır. Özel olarak pixel alanına dayalı yapıldığından photoshop , microsoft paint vb. uygulamaların aksine bu konuda daha ağır söz sahibidir.
Uygulama indirime girdiği zamanlar oluyor. Kendi sitesinde 20 d-dolar . Burada 150 TL şuanlık indirim zamanı 105 TL ye düşmektedir.

[Aseprite Çalışma Alanı]

Aseprite ilk açtığınızda sizi böyle bir menü karşılıyacak.



[New File] diyerek başlıyalım.

Açılan sayfada [Size/Boyut] ile tuvaliniz için bir boyut ayarlamanız isteniyor.

Width : Yatay eksende kaç pixel olacağı
Height Dikey eksende kaç pixel olacağı

Color Mode: Renk Modu
[RBGA] modunu seçeceğiz.

Background : Arkaplan
Tuvalimizin rengini seçiyoruz. Önerim seçili olan [Transparent] ile devam etmeniz.

64x64 olacak şekilde bir sayfa açalım.

Açılan sayfada
sağ tarafınızda araçlarınız

Üstte genel barımız


Sol tarafta renk paletlerimiz

[RENK PALETLERİ]



Renk palet kısmımızın üstünde
Edit Color
Var olan paletimizin kilitidir. Kiliti açarsak renk ekliyebiliriz. Kilitlersek sabit kalır.

Short Gradients
Renklerimizin sıralamasını değiştirmek istersek kullanabiliriz.

Presets
Var olan sistem paletlerini sunar. Open Folder diyerek kaynak klosöre ulaşabiliriz. Eklemek istediğimiz dıştan bir palet varsa buraya da GPL dosyasını ekleyebiliriz. Daha kolayı Options dan Load Pallette diyerek yapabiliriz.

Options
Menülerinden oluşan bir yapımız var.

[RENK PALETİ , PALET EKLEME , SICAK-SOĞUK RENKLER , KONTRAST]

Renk paletlerinizde 2-25 arası renk sınırlamanız olsun. Renk sınırlamasında çalışmak sizin performansını arttırır. Renkler daha etkili kullanmanızı ve karışıklığı önler. Renkleri seçerken tasarımınıza göre sıcak-soğuk renkler kullanın.



Renk paleti önerisi ve linki isterseniz şu şekilde listeleyebilirim.

Yeni başlayanlar için bu ikisini önerebilirim.
Apollo


Duel-8X



Bunlar hoşuna gitmediyse buradan detaylı inceleyebilirsin : https://lospec.com/palette-list

Paleti nasıl ekleyebilirim?

Options dan Load Palette ile indirdiğin png dosyasını seçip ekliyebilirsin.

Ctrl + Mouse Scroll ile büyütüp veya küçültüp sıra uygunluğu yapmanı öneririm.
Bu şekilde:




[ÇERÇEVE VE KENAR YUMUŞATMA]
Ink da seçili olan simple ınkı shaders yaparsanız sizden nesnede kullandığınız renk paletini seçmenizi ister.
Seçtiğin zaman o renklerin olduğu nesne dışına çıkılmadan resminizi çizebilirsiniz. Gölgelendirme de kullanabilirsiniz.



Paletten Shift ile beraber seçin.



Shift + O ile



Açılan pencerede çizilen nesnenin kenarlarına renk uygulayabilirsiniz.
Kenarları nasıl yapmalıyız? Daha belirgin olsun diye siyah mı? Hayır hayır hayır


[İlla bu pencereyi kullanıcaz diye bir kaide yok eliniz ile de çizebilirsiniz.Hatta böylesi daha iyidir. Bu sadece bir araçtır. Bahsetmek istedim.]

Evet kenarları siyah yapmak daha belirginleştirmeye yarıyabiliyor lakin çiziminiz sert ve düz oluyor.
Biz çizimlerimizin daha canlı ve akıcı sanki 3D andırır misali çizilmesini ve kullanıcının gözünden hoş görünmesini istiyoruz. Direk siyah yerine kullanılan rengin biraz daha koyusunu kullanarak ona hem gölge hem de ayrıntı ekleyebiliriz. Her renk için bir dizi ton kullanmak önemlidir. Bu, daha fazla renk ve detay eklemek için kısıtlı kaynakları en iyi şekilde kullanmanıza yardımcı olur.

Düz ve Sert Kenarlardan Kaçınma: Piksel sanatının doğasında, objeler ve karakterler gibi şekiller sert ve ♥♥♥ kenarlara sahip olma eğilimindedir. Bu durum, bazen tasarımları düz ve yapay görünmesine neden olabilir. Kullanılan rengin kapalı tonu, bu sert kenarları yumuşatarak, nesnelerin daha doğal ve gerçekçi görünmesini sağlar.

Görsel Bütünlük: Kullanılan rengin kapalı tonunu kenarlarda kullanmak, görüntünün bütünlüğünü ve tutarlılığını artırır. Renk geçişleri daha yumuşak ve hoş bir şekilde birbirine bağlanır, böylece tasarımın dengeli ve harmonik bir görünümü oluşur.

Gölge ve Işık Efektleri: Kapalı tonlar, nesnelerin üzerindeki gölge ve ışık efektlerini oluşturmak için kullanılır. Sadece siyah kullanmak, gölge ve ışık efektlerinin yüzeyin gerçekçi yapısını yansıtmasına yardımcı olmaz. Kapalı tonlar, nesnelerin 3 boyutlu bir izlenim yaratmasına katkıda bulunur.

Not: Ctrl + Mouse Scroll ile kullandığınız toolu büyütüp küçültebilirsiniz.

Brush Tool (Fırça/Kalem)

Bizim kullanacağımız kalemimizdir. Kısayol = B

Spray Tool (Sprey)

Brush Tool ile aynı kutucukdadır. Kısayol = Shift+B

Eraser (Silgi)

Silgimiz. Kısayol = E

Eyedropper Tool (Damlalık Aracı)

Var olan rengi almamızı sağlar. Sol tıkla alırsak sola kaydeder. Sağ tıkla alırsak sağa kayıt eder.

Kısayol = I (ı)

Sol alt kısımda sol ve sağ tıklamaya kayıt aldığımız renkleri görebiliriz.



Zoom ve Hand Tool (Yakınlaştırma ve El)


Zoom toolun ile aynı kutucukta hand tool bulunur.

Zoom anlıyacağınız gibi yakınlaştırma(yakınlaştırmak için sol , uzaklaşmak için sağ tık) , hand ise hareket için kullanılır. Mouse Scroll u ile de yakınlaştırıp uzaklaştırabilirsiniz.

Kısayol = Z ve H

Move Tool ve Slice Tool (Hareket ve Kesme)

Kısayol = V ve Shift + C

Paint Bucket Tool ve Gradient Tool

Kova aracı belli ayrılmış alana veya belli reng grubuna hangi renk mevcut var ise tıklandığında seçili grubu o renge çevirir.


İlla seçili olmasına gerek yok. Eğer belirli bir renk varsa diğer renklerle sınırları eksiksiz ise yine değiştirilebilir.





Gradient Tool ise Renk geçişi aracımızdır. Kullanılan yerde 2 renk arasında geçiş yapılmasına ve ton farkı oluşmasını sağlar.

Örnek:

Kullandığımız renkler

Sağ alt taraftan kullandığımızda altındaki renk ne olursa olsun
şeklinde olacaktır.

Oldukça kullanışlıdır.

Blur ve Humble Tool

Blur anlaşılacağı üzere bulanıklaştırma ve humble ise karıştırma aracıdır.

Eğer yazı yazmak istiyorsak T (text) tuşuna basılınca açılan pencerede Font(yazı tipi) yükleyerek size ile büyüklüğü color ile rengini ayarlayabilirsiniz.


Tekrar eden bir background yapacak iseniz işinizi kolaylaştırmak adına wiew > tile mode dan tiled in x axis seçeneğini seçerseniz sağ ve sola merkez çalışmanızı kopyalayacak şekilde ayarlıyabilirsiniz.

Aynı şekil üstten gelen bir oyun için tiled in y axis seçeneği işinizi görecektir.

Aynalama (symmetry / mirror) kullanmak istiyorsanız : View > Symmetry Options menu ve üstteki buttonlardan kullanabileceksiniz.

Burası gördüğüm kadarıyla çizimlerde kullanılan pixel sayılarıdır. 2'nin katları şeklindedir.

Character size 8x8 , 16x16 , 32x32 , 48x48, 64x64

Boss size 128x128 ,

Townhall 320x224

Tower or ecs 320x600

Manzara(Landscape) 640x360 , 320x180 ,

Bunlara bakarak giriş için bir fikriniz olabilir.

Katmanları Oluşturma:
Aseprite'da bir tasarım oluştururken, farklı grafik öğelerini farklı katmanlara yerleştirmek için katmanlar oluşturabilirsiniz. Yeni bir katman oluşturmak için sol alt köşede bulunan "Katmanlar" bölmesindeki artı (+) simgesine tıklamanız veya "Katman" menüsünden "Yeni Katman" seçeneğini seçmeniz yeterlidir.

Katman Sırasını Değiştirme:
Katmanlar, üst üste binmiş bir yığın gibi çalışır, yani üstteki katmanlar, alttaki katmanları örter. Katman sırasını değiştirmek için, katmanları sürükleyip bırakarak istediğiniz sıraya taşıyabilirsiniz.
Katmanları sol tık ile aşağı veya yukarı alabilirsiniz. Başka bir seçenek katmanlara sağ tıklayarak "Katmanı Taşı" seçeneğini kullanarak da sırasını değiştirebilirsiniz.

Katmanları Gösterme/Gizleme:
Katmanları görüntülemek veya gizlemek, tasarımınızı düzenlerken işleri kolaylaştırır. Katmanı görüntülemek veya gizlemek için, katmanın yanındaki göz simgesine tıklayabilirsiniz. Böylece o katmanın içeriği görünmez veya görünür olur.

Katmanları Kilitleme:
Bir katmanı kilitleyerek, üzerinde değişiklik yapmayı engelleyebilirsiniz. Örneğin, arka plan katmanını kilitleyebilir ve sadece üstündeki katmanları düzenleyebilirsiniz. Katmanı kilitlemek için, katmanın yanındaki kilit simgesine tıklamanız yeterlidir.

Katmanları Birleştirme:
Farklı katmanları tek bir katman haline getirerek tasarımınızı basitleştirebilirsiniz. İki katmanı birleştirmek için, birleştirmek istediğiniz katmanları seçin, sağ tıklayın ve "Katmanları Birleştir" seçeneğini seçin.

Katmanların Opaklığını Ayarlama:
Katmanların opaklığını ayarlamak, katmanın görünürlüğünü düzenlemek için kullanışlıdır. Seçili katmanın opaklığını "Katmanlar" bölmesindeki kaydırıcıyla ayarlayabilirsiniz.

Katmanları birbirine bağlayıp aynı değişiklikleri sağlıyabilirsiniz. Kopyalayabilirsiniz.

FRAME DÜZENLEME

2-4-8-16 Pixel arası frame hızı kullanın. Yani pixeller yavaştan hızlıya geçiş yapmalı. Boyutuna göre ayarlamalısınız.

Her frame de hızlar eşit mi olmalı? Hayır böyle bir ihtiyaç yok. Bazı kısımlarda yavaş bazı kısımlarda hızlandırmalısınız. Bunu nasıl değiştireceğimiz ise seçili hücremize 2 kere tıklayarak
Duration(milliseconds) : kısmını hızlı olarak 50 , 100 , 150 yapabilirsiniz. Yavaşlatmakta ise sayıyı gecikmeyi arttırmak faydalı olucaktır.

Belirli bir ayrıntıya göre katmanları ayarlamalısınız. Örnek resim


Animasyonlu Katmanlar:
Aseprite, 2D animasyonlar oluşturmak için özel olarak tasarlanmıştır. Animasyonlu bir iş oluşturmak için farklı kareler için farklı katmanlar kullanabilir ve ardından "Animasyon" bölmesini kullanarak kareler arasında geçiş yapabilirsiniz. Kısayol "Enter".

Seçili bir öğeniz varsa ve bu seçim bir kümenin parçası olarak görünüyorsa , kümenin tamanında işlemler gerçekleştirebilirsiniz. Yani seçili grup değişimi yapabilirsiniz.

Belli bir rengi komple değiştirebilirsiniz.

Belli bir seçtiğiniz bölgeyi komple
değiştirebilirsiniz

İlk önce ne çizeceğinize karar verin. Bu bir ağaç olabilir , bir karakter olabilir ve daha fazlası belkide bir ejderha ha ne dersin?

Adım 1 : Çözünürlük belirleyin. İlk önce taslağını çizin.
Adım 2 : Gölgelendirin.
Adım 3 : Renklendirin.
Adım 4 : Ayrıntı ekleyin , detayları arttırın.

Bu sektörde çanavar gibi çizenler var gözünüzü korkutmasın. Pratikleştikçe sizde onlar gibi çizebileceksiniz. Gerçek hayattan referans alabilirsiniz veya online platformlardan diğer çizerlerin yaptıklarından öğrenebilirsiniz. Youtube, Pinterest gibi kaynaklarda yeterince pixel art örneği ve animasyonu bulunmakta. Bunlardan faydalabilirsiniz.

Çıktı almaya kadar geldiğine göre baya hızlısın. Tebrikler sona yaklaştık.

Projemizde artık daha fazla eklentiye gerek kalmadığını onu paylaşmak veya kullanmak istiyoruz.Peki çıktı nasıl alırız?

Çalışmamızı dışarı çıkarmanın 2 yolu vardır.

1.Yol =


Buradan Export seçeneği ile çıktı alma penceresine giderek ,



Sizi böyle bir ekran karşılıyacak. Export diyerek çıktı alabilirsiniz. Şayet görüntü küçük yani az pixel sınırlamasında ise açılan pencerede küçük görünebilir. Oto doğrusal ölçeklendirme ile büyütüldüğünde ise bulanık çıkabilir. Küçük görünme problem olmıyabilir çalıştığınız pixele göre fakat siz böyle istemiyorsanız Resize ile çıktı almadan yeniden ölçeklendirebilirsiniz.

Yükseltmek bulanıklığı giderecektir.

Ama oyunuz için yani assets olarak çıkaracaksınız bunu değiştirmenize gerek yok. Oyun motoru kendi halledicektir. Ölçeğini değiştirmeyin kullandığınız mesela 16x16 lık görüntüde kalsın.

Ölçek değiştirmeyi sadece internette paylaşacak iseniz değiştirmelisiniz.

Frames de seçtiğiniz frame mi yoksa tümünü yani animasyonuyla beraber çıkarabilirsiniz.

Dosya türünü değiştirebilirsiniz. Gif seçeneği burada mevcut. Değiştirmediğinizde PNG olarak çıkarır.
PNG 0*1*2 olarak frame leri kayıt eder. Eğer biz hareketli bir grafik sayfası istiyor ve oyunumuzda kullanmak istiyorsak CTRL + E basarak Sprite Sheet Çıktısı olan 2. çıktı alma yolumuzu uygulamalıyız.

Böylelikle tüm çıktı alma işlemlerini işledik. Yaptıklarınızı benimle paylaşabilirsiniz :)

Youtube'da Unity anlatımını yapıyorum. ^^

Kanal Linkimiz : https://www.youtube.com/@PixelChi_Youtube/videos