Piksel Tabanlı Web Siteleri Kaynakları, Rehberler ve Örnekler
Piksel tarzı resimler kullanarak bir web arayüzü tasarlamak, modern eğilimlere kıyasla nispeten belirsizdir. Gerçekten iyi örnekler bulmak için İnternet'teki birkaç web sitesini incelemeye ihtiyacınız var; zor ama imkansız değil.
Bu yazımda topladım piksel tabanlı web sitesi tasarımı için ihtiyacınız olan her şeyin mega bir derlemesi. Hem yeni başlayanlar hem de uzmanlar için onlarca sağlıklı ders var. Ayrıca, konuyu daha fazla araştırmak için birlikte oynayabileceğiniz bazı kullanışlı araçlar ve kaynaklar da ekledim. Video oyunu grafikleri veya izometrik piksel resimlerle ilgileniyorsanız, bu koleksiyona bayılacaksınız.
kaynaklar
Bunlar web scriptleri ve dijital grafikler için eşsiz geliştirme kaynaklarıdır. Piksel web sitesi mizanpajları oluştururken, her şeyi her noktaya kadar takip etme gereğini hissetmeyeceksiniz. Web tabanlı kaynaklardan oluşan bu koleksiyon tekrar tekrar çok yararlı olabilir..
spritely
Açık kaynak koduyla çalışmaya alışmıştım. Bu yüzden Spritely gibi bir jQuery eklentisi bulmak her zaman heyecan verici bir durumdur. Hızlı dinamik sprite animasyonu ve kayan arka planlar için bu betiği web sitenize ekleyebilirsiniz..
Tüm eklenti JavaScript ve HTML / CSS tarafından desteklenmektedir; Flash veya başka bir arka uç dili gerekmez. Belgelendirme sayfası, başlamanız için yeterli. Geliştiricilerin, indirebileceğiniz çok sayıda örnek demoları vardır..
Mevcut kararlı sürüm sürümü, orta derecede güncellenen 0.6.1'dir. Animasyon efektleri Opera, Chrome, Safari, Firefox ve Internet Explorer 6+ ile uyumludur. Ayrıca Android veya iOS üzerinde çalışan tüm akıllı telefon tarayıcılarının mükemmel şekilde çalışması gerekir.
FatPixels
Bu Matías Martínez tarafından geliştirilen güçlü bir açık kaynaklı sprite betiği. FatPixels sadece jQuery kütüphanesinin düzgün çalışmasını gerektirir. Spritely'nin daha karmaşık bir animasyon kütüphanesi olduğunu söylesem de, FatPixels web geliştiricileri için pazarda bir yere sahip.
Bir .gif resmi oluşturmadan kolayca hareketli sprite oluşturabilirsiniz. Aslında, tüm görüntüleri .jpg olarak dışa aktarabilir ve uzun bir animasyon efekti için bir kuyruk sırası oluşturabilirsiniz. FatPixels ana sayfasında, onu oluşturmak için kullanılan jQuery kod bloğu ile birlikte mükemmel bir demo var. Sprite'larınızı canlandırmak için hafif bir şey arıyorsanız, o zaman FatPixels gitmenin yolu.
SmartSprites
"Sprite" kelimesini kullanırken bunun için birkaç farklı anlam var. Video oyun karakterleri veya hareketli sprite'ler genellikle çok az pikselle oluşturulan daha küçük görüntülerdir. Bununla birlikte, CSS’de, sprite terimi, web siteniz için bir simge sayfası görevi gören tek bir resmi ifade eder..
Tek tek görüntüler yerine tek bir sayfa kullanmak zorunda olmanızın nedeni sunucu kaynaklarını azaltmaktır. Daha küçük ama ayrı görüntüler yerine tüm simgelerinizi tutan daha büyük bir görüntü indirmek çok daha hızlı. Ancak tüm bu ikonları Photoshop'ta bir araya getirmek gerçek bir güçlük olabilir; zorunlu olarak zor bile değil, sadece tekrarlayıcı ve zaman alıcı.
Neyse ki SmartSprites CSS Jeneratör, bu durum için harika bir kaynaktır. Tüm görüntülerinizle GIF veya PNG biçiminde hızla mükemmel bir piksel sayfası oluşturabilirsiniz. Ek olarak, ne istediğinizi hızlı bir şekilde belirleyebilirsiniz. Arka plan konumlu Her bir simge için x / y koordinatları olmalıdır.
Squidfingers BG Desenler
İyi bir tekrar eden arka plan resimleri seti tasarlamak çok zordur. Kusursuz görüntüler oluşturmadan önce günler sürebilir. Ama neyse ki ücretsiz arka plan karoları indirmek için çevrimiçi kaynaklar var.
Squidfingers Patterns galerisi böyle bir kaynaktır. Projelerinizde indirebileceğiniz ve kullanabileceğiniz 150'den fazla farklı piksel tarzı desen sunar. Stiller çok dinamik ve renkli ve böyle bir çeşitlilik için kullanışlı olması için mükemmel bir kaynak. İndirme bağlantıları .zip biçimindedir ve bu sayede bilgisayarlar arasında daha küçük ve kolay aktarılabilir hale gelir..
Spriters Kaynağı
Spriters Resource hakkında yeterince harika şeyler söyleyemem. Sprite levhaları için çeşitli oyun sistemlerinde arama yapabileceğiniz bir web sitesidir. Bu haritalar, binalar, menü ekranları, karakter sprite, simgeler ve hemen hemen her şeyi içerebilir!
Onlar 2001'den beri çevrimiçi ve video oyunları kataloğu muazzam bir şekilde büyüdü. TSR'nin arkasında, bu farklı oyun spritelarını başarabilecek grafik tasarımcılarla dolu bir topluluk var. Herhangi bir video oyunu tasarımı veya çevrimiçi fan sitesiyle ilgileniyorsanız, bu muhteşem galeriye göz atmanız gerekir..
Daha da ilginç olanı, TSR'yi başlatan kardeş sitelerden bazıları. Oyun tutkunları da temel dokuların yırtılmasında ve karakter modellerinin oluşturulmasında yardımcı oldu. Genel olarak, dijital sanat eserlerinde sprite ile çalışmayı destekleyen çok iyi bir topluluk.
400 Piksel
Bu, önemli bir değer sağlamayan gerçekten harika bir web uygulaması, ancak kesinlikle temiz. 400 Piksel, çevrimiçi olarak bir piksel belgesi oluşturmanıza ve görüntüyü ızgaralarında saklamanıza olanak tanır. Site, her bir resim genel görüntüde bir kare blok alarak milyon dolarlık ana sayfaya benzer şekilde tasarlanmıştır.
Bazı gerçekten aptal bir sanat eseri yaratarak kendi web arayüzü etrafında oynayabilirsiniz. Hemen alacağınız bir şey değil, ancak bir kez anladığınızda eğlenceli bir oyun. İnternet erişimi olan herhangi bir bilgisayardan çalışabileceğiniz güzel bir araçtır.
Ana çıkış
400 Piksel'e benzeyen bir damarda Major Output'ı, piksel resimler için kişisel bir çevrimiçi stüdyo olarak kullanabilirsiniz. Hala geliştirmenin erken aşamalarında, ancak tüm temel kullanıcı işlevselliği zaten mevcut. Ücretsiz bir hesaba kaydolabilir ve hemen piksel resmi oluşturmaya başlayabilirsiniz..
Her resim web sitelerinde ve forumlarda hotlink yapabileceğiniz sunucularında yerel olarak depolanır. Resimlerin çoğu halka açık ve farklı yazar veya etiketlere tıklayarak bunları kontrol edebilirsiniz. Ayrıca bir arama kutusu var, ancak arama sonuçlarının kalitesinin her zaman mükemmel olmadığını düşünüyorum.
Major Output, hakkında bilmek eğlenceli, ancak muhtemelen piksel sanatçılar için çok fazla eğitim değeri sunamayan başka bir topluluk aracı gibi görünüyor.
Öğreticiler
Artık kaynaklara sahip olduğunuza göre, birçok eğitim merkezinin sağladığı eğitimlere ve İnternet’e dağılmış faydalı blog yazılarına göz atalım. Küçük bir dizi gerçekten kullanışlı bir araya getirdim yeni başlayanlar ve ara tasarımcılar için piksel sanatı dersleri. Bu eğitimlerin çoğu Adobe Photoshop'a odaklanıyor, ancak neredeyse tüm gelişmiş görüntü düzenleyicileri takip edebilirsiniz..
Derek yu tarafından Pixel Sprite Eğitimi
Açıkçası Google'da onlarca yüzlerce pikselli sprite öğretmeni var ancak Derek Yu'nun web sitesinde yer alan bu özel eğitimde piksel spriteları nasıl oluşturduğunuz konusunda eğitim almak için birçok adım atılıyor. Sürecin çoğu, yeni başlayanların hızla eyleme geçmelerini sağlayacak şekilde düzenlenmiş ve açıklanmıştır..
Video oyunu hayranları bu eğitimi çok sevecekler çünkü bu özel grafikleri yaratırken perde arkasına bakacaksınız. Tasarım boyunca yayılan video oyun piksel sanat eseri ile bir web sitesi düzeni bulmayı çok seviyorum. Benzersiz bir nostalji duygusu sağlar ve her yerde bulamayacağınız bir şeydir. Derek'in 10 aşamalı eğitim programında, herhangi bir sebeple kendi piksel spritelarını oluşturmak isteyen herkes.
Photoshop'u Piksel Sanatı için Yapılandırma Brandon Treb tarafından
İşte piksel sanat alanındaki yeni başlayanlara yönelik mükemmel bir ders. Blog yazısı, fantastik bir tasarımcı ve mobil geliştirici olan Brandon Treb tarafından yazılmıştır. Piksel tabanlı Photoshop sanatıyla ilgili bu ayrıntılı kılavuzda her türlü yararlı bilgiyi bulabilirsiniz..
Photoshop'ta tercihleri nasıl ayarlayacağınızı bilmelisiniz, böylece dışa aktarırken piksel resminiz tuhaf görünmez veya kaliteyi kaybetmez. Gerçekten iyi bir görüntü kalitesi elde etmek için çok fazla özelleştirme gerektiğini öğrenmek için şaşırabilirsiniz..
El yapımı Piksel Çizim Russell Tate tarafından
Photoshop'ta elle çizilmiş piksel sanatına yönelik tekniklerle dolu bir başka şaşırtıcı ders. Bu piksel sanat teknikleri koleksiyonu şaşırtıcı. İçeriği gözden geçiren herkes daha önce bilmediği bir şey bulur..
Çimen ve ağaç kabuğu üzerinde doku oluşturma hakkında ayrıntılı açıklamalar vardır; ayrıca, çizdiğiniz piksel sanat eserinin nasıl klonlanacağı ve bir simge tasarımına dönüştürüleceği konusunda. Her şey pratikte ve her alanda hassas oluyor. Gerçekten tutkulu olanlar, birkaç ay içinde ve arasında yapışacaklar, piksel tarzı fikirleri için sağlam bir teknik bulacaklar.
Daniel Sternlicht tarafından CSS / JS Oyun Portföyü Geliştirilmesi
İşte Smashing Magazine'den Pokemon oyun serisinden birçok sprite kullanan bir oyun portföyünü CSS / JS ile nasıl kodlayacağınızla ilgili bir eğitim. Yazar, aynı zamanda kişisel oyun portföyünü bu oyun temelli düzende yöneten Daniel Sternlicht'dir..
Web sitesi, klavyeyle bir karakter sprite kontrol ettiğiniz bir RPG dünyası olarak hareket eder. Daha sonra iletişim bilgileri ve portföy girişleri gibi bilgileri getiren farklı binalara girebilirsiniz..
Bu eğitimi gerçekten çok seviyorum ve piksel resimlerini web sitesi geliştirme ile birleştirmenin heyecan verici bir yolu. JavaScript hakkında fazla bir şey bilmeseniz bile, bu hala çok ilginç bir makale. Bazı kodları okudum ve böyle yaratıcı bir eğitim için Dan'e muazzam iltifatlar vermeliyim. Herhangi bir Pokemon fanatiği kesinlikle fikirlerine aşık olacak.
Matriax İzometrik Piksel Öğreticiler
Bu küçük web sitesi gas13.ru, bugüne kadar gördüğüm en eksantrik ve profesyonel piksel derslerinden bazılarına sahip. İzometrik havuz dersinde, parlak bloklar ve su dokusu oluşturmaya başladınız. Ek olarak, kenar çubuğundaki diğer tüm izometrik piksel tutumu için kaynaklar bulacaksınız..
Öğrenecek çok şey var: video oyunları ve web sitesi arka planları için bir vitrin, piksel sprite veya hatta ayrıntılı dokular tasarlayabilirsiniz. Bu yazar hala aktif olarak içerik yayınlıyor mu emin değilim, ancak mevcut makaleler yeni başlayanların temellerini öğrenmesi için fazlasıyla yeterli.
Studio Purloux Piksel Öğreticisi Kevin Chaloux tarafından
Şimdi en iyi piksel eğiticilerini listelediğime göre, kesinlikle bu hakkı en başa ekleyeceğim. Piksel sanatıyla ilgili bu öğretici yazı, yeni başlayanlar için mükemmel bir makale. En baştan GIMP veya Paint.NET gibi açık kaynaklı yazılımlar ile tanışacaksınız..
Görüntülerin nasıl aktarılacağını ve titreme ve kenar yumuşatma gibi birçok piksel tasarımının dışa aktarılmasını öğreneceksiniz. Birlikte izlenecek çok farklı teknikler var. Retro 8 bit ve 16 bit video oyunlarına bakarak bazı tasarım fikirlerini almalısınız..
Yazar Kevin Chaloux, Derek Yu'nun piksel sprite öğreticisini (daha önce listelendi) kredilendiriyor ve bunun ilk başladığında ilham kaynağı olduğunu söylüyor.
Kayla Knight'dan Daha İyi Bir Favicon Yaratın
Web tasarımcıları, bir favicon (favori simgesi) görüntüsünün herhangi bir markalaşma planının büyük bir parçası olduğunu sıklıkla unuturlar. En popüler tüm web siteleri 16 × 16 faviconları ile tanınabilir. Bu kadar sınırlı bir tuvalle çalışırken piksel yoğunluğu yüksek resimler ve resimlerle uğraşmak zorunda kalırsınız. OXP'den gelen bu favicon dersi, her iki fikri birleştiren mükemmel bir iş çıkarıyor.
Bu tutmadan, piksel sanatının neden piksel sanatının yaratılmasının bu kadar yararlı olduğunu anlayabilirsiniz. Bir .ico dosyasını dışa aktarmak için araçlar ve sağlam teknikler de vardır. Ayrıca, Web’in dört bir yanından popüler favorilere ait küçük bir vitrin var..
Bu, tüm web tasarımcılarına fayda sağlayabileceğini düşündüğüm başka bir kaynak. Kendinizi bir favicon oluşturmak ve katı piksel sınırlamaları ile çalışmak konusunda eğitmek için güçlendiricidir..
Vitrin Galerisi
Makaleyi, piksel tarzı web sitesi tasarımlarından oluşan hoş bir galeriyle kapatmak istiyorum. Çok çeşitli sanatsal vizyonlara sahip 40 farklı mizanpaj örneğini dahil ettim. Pikselleştirilmiş sanat çalışmalarının eğilimi, yeni web sitelerinde yeniden ortaya çıkmaya yeni başlıyor. Bu farklı piksel sitelerinin vitrini, dünyanın her yerindeki web geliştiricileri için bir ilham kaynağı sunabileceğini umuyorum..
Dünya Merkezinde
PixelJam
Red Rokk İnteraktif Pazarlama
eBoy Blogu
Tamago Pixel
pixelHugger
Piksel Deviant Graphics
8-Bit HTML5 Tuval Döngüsü
Daniel Sternlicht
Trol Ordusu
BlockHead Pix Uygulaması
madPXL
supertott 2.0
ClassicGaming
RPG Araç Takımı Dersleri
Şehir Yaratıcısı
Final Fantasy XIII-2
KawaiiHannah Piksel Sanatı
Sandbox
Bay wong
Piksel ucube
Nasc Piksel Sanatı
Paxjah
FoolsTown
Topuklu Top
LOVEPIXEL
Henk Nieborg
Iriescope
iamnotadoll
SweetPIX
Megapont
Mini Metropolis
Hayo van Reek
Pixeltemple Studio
Usta Vormgeving
Piksel Müzesi
QuickHoney
Polpo.net
spiv.cz
4 Gerçek Hamur
