İçerik
- 1. Şeffaflık
- 2. Anahatlar
- 3. Önce kafa
- 4. Eski okul
- 5. Gölgeleme
- 6. 8 bitlik efekt
- 7. Tweaks
- 8. Ayrıntılar
- 9. Vücut parçaları
- 10. Ekstremite katmanları
- 11. Lehçe ekleyin
- 12. Başlama konumu
- 13. Grup katmanları
- 14. Hareket halinde
- 15. Pozisyon ekleyin
- 16. PNG'leri dışa aktarma
- 17. Çerçeveleri düzenleyin
- 18. Stiller ekleyin
- 19. Anahtar Kareler
- 20. kabadayı
- 21. Zemin çalışması
- 22. Canlandırın
- 23. Paralaks
- 24. Gökyüzü sınırdır
- 25. Test süresi
- 26. Tapu
- 27. Hayata geçirin
- 28. Sonraki adımlar
- Bilgi gerekli: Grafik düzenleme, CSS, temel HTML
- Gerektirir: CSS3 uyumlu tarayıcı (Safari, Chrome, Firefox, IE10 +), Photoshop veya başka bir resim düzenleyici
- Proje zamanı: 6 saat
- Kaynak dosyaları indirin
Bu makale ilk olarak web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi olan .net dergisinin 229. sayısında yayınlandı.
Web tasarımcıları yeni CSS3 özellikleriyle uğraşırken, web tasarımı keşfedilmeyi ve geliştirilmeyi bekleyen birçok yeni teknikle keşfedilmemiş bir sınır haline geldi. Taslak belirtimin en heyecan verici yönlerinden biri, komut dosyası oluşturmaya gerek kalmadan canlandırma yeteneğidir. Bu çok büyük bir fırsat sunsa da, eski moda önceden oluşturulmuş grafikler için hala bir yer var. Aslında, sayfa yükleme süresini azaltmak için yaygın bir teknik olan CSS sprite, orijinal anlama yakın bir şeye geri döndürülebilir ve karmaşık flipbook tarzı animasyonlar oluşturmak için kullanılabilir.
- Creative Bloq'ta bu Photoshop CS6 incelemesine göz atmayı unutmayın
Sprite, terime aşina değilseniz, tek bir harici dosyada depolanan bir dizi grafiği ifade eder. Birçok büyük web sitesi, her grafiği doğru yere yerleştirmek için arka plan konumu CSS özelliğine güvenerek, tüm grafiklerini yüklemek için tek bir arka plan görüntüsü kullanır. Sprite terimi, 8 bitlik oyunlardan kaynaklanır ve grafiklerin bir oyun içinde bir animasyonu sunmak için yüklenme ve kullanma biçimine atıfta bulunur. Bu eğitimde, öncü oyun tasarımcıları ile aynı yaklaşımı kullanacağız, retro esintili bir karakter yaratacağız ve altı farklı karakter pozisyonuna sahip bir sprite kullanarak onu canlandıracağız.
Farklı pozisyonlar arasında geçiş yaparak, hareket izlenimi yaratacağız ve karakterimizi canlandıracağız. Son olarak, onu uygun paralaks kaydırma ile tamamlanmış, sürekli animasyonlu bir arka plana yerleştireceğiz. Tüm bunları yalnızca resim düzenleyicimizi (Photoshop kullandık, ancak herhangi bir bitmap düzenleyici kullanacaktır) ve CSS kullanarak yapacağız - komut dosyası gerekmez.
1. Şeffaflık
Photoshop veya başka bir görüntü düzenleyicide bir belge oluşturun. Dik duran bir karaktere uyması için genişliğinden daha uzun yapın; 300 piksel uzunluğunda ve 200 piksel genişliğinde seçtik. Belgenizin şeffaf bir arka planı olduğundan emin olun - daha sonra karakterin arkasını görmemiz gerekecek.
2. Anahatlar
Her vücut parçasını farklı bir katmana ayırarak karakterinizin temel hatlarını çizin. Ayrıntılar için endişelenmeyin - ya önce kağıt üzerinde taslak oluşturun, resmi tarayın ve onu kılavuz olarak kullanın ya da temel bir gövde oluşturmak için döndürülmüş dolu ovallerle başlayarak kendi yolunuzu hissedin.
3. Önce kafa
Baş üzerinde çalışarak başlayın. Burada bir ninja karakteri seçtik, bu yüzden siyah oval karakterin kafasında olduğu gibi çalışıyor. Kement aracıyla çizerek ve ten rengiyle doldurarak bir göz yarığı ekleyin. Canlı görünmelerini sağlamak için gözbebekleri, öğrenciler ekleyin ve ışıkları yakalayın.
4. Eski okul
Retro bir his için gidiyoruz, bu yüzden mükemmel gradyanlar ve yumuşak geçişler hakkında çok fazla endişelenmeyin - hatta kalem aracını seçip tasarımınızdaki her bir öğeye kasıtlı olarak pikselli bir efekt eklemek isteyebilirsiniz. En iyi olduğunu düşündüğün şeyi yap.
5. Gölgeleme
Karakterin daha 3 boyutlu görünmesini sağlamak için bazı basit gölgelendirmeler kullanabiliriz. Her yüz öğesi için Damlalık aracını kullanarak kaynak rengi örnekleyin; Gölgeler için çarpmak üzere bir fırça kullanarak üstüne boyayın ve vurgular için Ekran olarak ayarlayın.
6. 8 bitlik efekt
Tam 8 bitlik bir efekt için, her bir öğenizin konturu 1px olarak ayarlanmış bir katman stili kullanarak ana hatlarını belirleyin. Konturun Çarp olarak ayarlandığından emin olun ve etkinin opaklığını, aşırı güçlenmemesi için katman stilleri iletişim kutusunda azaltın.
7. Tweaks
Biraz daha genel gölgeleme ekleyin ve bir 2D sprite içinde yaşayan bir 3D karakter hissine sahip olduğunuz için mutlu olana kadar ince ayar yapmaya devam edin. Bu işlem birkaç saat sürebilir, bu yüzden kalbinizi kaybetmeyin ve işe yarayan bir şey bulana kadar buna devam edin.
8. Ayrıntılar
Bağlı bandana, kulaklar ve ekstra kaş gölgelendirme gibi son ayrıntıları ekleyin. Karakterinizin kafasına farklı bir bakış açısı getirmek için düzenli olarak yakınlaştırıp uzaklaştırdığınızdan emin olun. Tasarımınızın son görünümü hakkında fikir sahibi olmak için düzenli olarak% 100 görüntülemeniz çok önemlidir.
9. Vücut parçaları
İşlemi vücut elemanlarının her biri için tekrarlayın. Beyaz ayarı Ekran olarak kullanarak vücut gölgelemesini oluşturduk ve pikselli bir kas efekti oluşturmak için Kalem aracıyla hafifçe vurduk. Bu, vücudun çok hafif görünmesine neden olur, ancak buna daha sonra karşı koyacağız.
10. Ekstremite katmanları
Karakterinizi doğru bir şekilde düzenlemeniz çok önemlidir. Ninjamız için, sağ bacak ve kol kameraya en yakın, sol kollar vücudun arkasındadır. Katmanlarınızı, uzuvlar vücudun arkasında hareket ederken doğru bir şekilde gizlenecek şekilde konumlandırın. Daha sonra baş ağrısından kurtulmak için hemen şimdi alın!
11. Lehçe ekleyin
Tasarımınızı iyileştirin, tüm tek tek öğelerin birlikte çalışmasını ve tutarlı bir bütün oluşturmasını sağlayın. Son animasyon karelerini konumlandırmaya başladığınızda, genel tasarımda düzenlemeler yapmak zor olacaktır, bu nedenle sonraki adımlara geçmeden önce mutlu olduğunuzdan emin olun.
12. Başlama konumu
Bir yürüme animasyonu için uzuvları, elleri ve ayakları, vücudu ve başı ilk pozisyona yerleştirin. Sol ayakla ilerlemeye karar verdik, böylece sağ ayak sağ kolla birlikte geri çekilir ve sol ayak ve kol da öne doğru çekilir. Gövdeyi eşleşecek şekilde eğin.
13. Grup katmanları
Baş hariç gövdeyi oluşturan tüm katmanları seçin ve gruplayın. Bu konumu adlandırın 1. Grubu çoğaltın, kopyalama konumunu yeniden adlandırın 2 ve ilk grubun opaklığını yaklaşık% 20'ye düşürün, böylece başlangıç karesini ikinci kare ile karşılaştırabilirsiniz.
14. Hareket halinde
Harekete izin vermek için başın, kolların ve bacakların konumunu biraz değiştirin. Tam bir döngü oluşturmak için ileriye ve geriye doğru oynayacağımız altı kare boyunca tek bir tam adımı canlandırıyoruz. Bu nedenle, 4. pozisyona geldiğimizde bacaklarımızı çaprazlamış olmalıydık.
15. Pozisyon ekleyin
Her biri animasyonda farklı bir kare gösteren altı farklı vücut pozisyonuna sahip olana kadar dört kez daha kopyalayın ve yeniden konumlandırın. En iyi etkiyi elde etmek için daha sonra geri gelip uzuv pozisyonlarını ayarlamanız gerekebilir, bu nedenle belgenizi kaydedin!
16. PNG'leri dışa aktarma
Altı farklı gövdeyi, kafa ile birlikte şeffaf PNG olarak dışa aktarın. Her kare için kafayı biraz hareket ettirdiğinizden emin olun - bu, animasyonun satılmasına yardımcı olacaktır! Bu animasyonun döngü yapacağını unutmayın, bu nedenle her karenin baş konumu bir öncekine yakın olmalıdır.
17. Çerçeveleri düzenleyin
Ana karakter belgenizden altı kat daha geniş yeni bir belge oluşturun. Altı karenizi bu tek görüntüye içe aktarın ve ayarlayın, seti mükemmel şekilde hizalayıncaya kadar yerleştirin. Bunu doğru yapmak için Photoshop'un Yatay merkezleri dağıt işlevini kullanın.
18. Stiller ekleyin
Ninja'nızın genişliğini, yüksekliğini ve arka plan resmini tanımlayan bir dizi stil ekleyerek başlangıç dosyasını açın. İlk animasyonu başlangıç HTML belgesine ekledik; Değerleri karakterinizin boyutlarına göre ayarlamanız gerekebilir. Zevkinize göre tasarım ve animasyonu ayarlayın.
19. Anahtar Kareler
Temel karakter özelliklerini atamak için bir dizi stilimiz ve ana karakter stili bildirimi tarafından kullanılan bir dizi animasyon ana karesi olması koşuluyla, kodda fark edeceksiniz. Bunlar arka plan görüntüsünü aralıklarla konumlandırır, böylece bir flipbook efekti elde ederiz.
20. kabadayı
Varsayılan olarak tarayıcı, değerler arasındaki arka plan konumu özelliğini sorunsuz bir şekilde canlandırır; bunu istemiyoruz, bu nedenle her anahtardan önce "anahtar kareleri tutan" oluşturduk. Bunlar, titremeyi ve kusurları önlemek için sonraki kareye göre 1/1000 oranında daha az kullanılarak ayarlanır.
21. Zemin çalışması
Photoshop'ta arka plan ve ön plan için öğeler oluşturun. Bir görüntüde çimenli bir alan, diğerinde büyük bitkiler, üçte birinde daha küçük bitkiler ve dördüncüsünde dünyanın enine kesitini oluşturmak için bazı Illustrator sembollerini kullandık. Bunlar kesintisiz görüntüler olmalıdır.
22. Canlandırın
HTML ve CSS'nize geri dönün. Arka planı 0px 0px - 0px –1200px arasında hareketlendirmek için anahtar kareler ekleyin. Kameranın yakınlığına göre değişen hızlarda anahtar kareler yerleştirerek ve uygulayarak her zemin öğesi için stiller oluşturun. Bir paralaks etkisi hedefliyoruz.
23. Paralaks
Erken video oyunlarında derinliği ima etmek için kullanılan bir başka teknik, bu, kameraya daha yakın nesnelerin uzaktaki nesnelerden daha hızlı hareket ettiği temelinde çalışır. Zemin öğelerimizi farklı hızlarda ekleyip kaydırarak, paralaks oluşturabilir ve derinlik önerebiliriz.
24. Gökyüzü sınırdır
Arka plan gökyüzü (bunu canlandırmanıza gerek yoktur) ve paralaks efektini tamamlamak için biri kameraya diğerinden daha yakın konumlandırılmış iki bulut katmanı için bu işlemi tekrarlayın. Bunları sayfanıza yerleştirmek için HTML ve CSS kodunu ekleyin.
25. Test süresi
Sayfanızı iyice deneyin ve en iyi etkiyi elde etmek için zamanlamaları ayarlayın. Ninjanın üzerinde yürüdüğü çimlerin hızına özellikle dikkat edin - ninjanın ayak seslerinin doğru görünmesi için çimlerin uygun hızda hareket etmesi için eşleşmesi gerekir.
26. Tapu
Bir Ninja başlığı ile oyundan ilham alan temaya son bir güzelleşme ekleyin ve başınızı sallayın. Ücretsiz bir Ninja yazı tipi (eğitim dosyalarına dahil) indirdik ve çizimimizin geri kalanını tamamlamak için Illustrator'da güzel bir 3B efektli bir başlık oluşturduk. Bunu sayfanıza aktarmak için CSS oluşturun.
27. Hayata geçirin
Karakter animasyonuyla aynı yaklaşımı kullanarak başlık öğesinin ölçeğini ve opaklığını canlandırın. Ölçeği ve opaklığı% 80'e kadar 0'a ayarlayın, ardından her iki özellik için% 100'e ölçekleyin. Uygun zamanlamalarla denemeler yapın - altı ila 10 saniye bizim için işe yarar!
28. Sonraki adımlar
CSS3 destekli animasyonu tamamladınız, ancak burada durmanıza gerek yok - her ikisini de kullanabilirsiniz. :hedef Bu animasyonu basit bir platform oyununa dönüştürmek için seçici veya komut dosyası veya benzer bir animasyon yaklaşımını kullanarak zaman içinde ince bir şekilde değişen basit etkileşimli videogram görüntüleri oluşturun. Deneyin ve sınırları zorlamayı deneyin!
