Sumber-sumber, Tutorial, dan Contoh Laman Web berasaskan Pixel

Merekabentuk antara muka web dengan menggunakan karya seni pixel agak tidak jelas berbanding tren moden. Anda benar-benar perlu menggali beberapa laman web di Internet untuk mencari contoh yang baik; ia sukar tetapi tidak mustahil.

Dalam artikel ini saya telah mengumpul sebuah kompilasi mega dari semua yang anda perlukan untuk reka bentuk laman web berasaskan pixel. Terdapat puluhan tutorial yang sihat untuk pemula dan pakar sama. Saya juga telah memasukkan beberapa alat dan sumber berguna yang boleh anda mainkan untuk meneroka topik seterusnya. Jika anda sama-sama berminat dengan grafik permainan video atau karya seni pixel isometrik maka anda akan menyukai koleksi ini.

Sumber

Ini adalah beberapa sumber pembangunan yang unik untuk skrip web dan grafik digital. Apabila anda menyelidiki membuat susun atur laman web pixel, anda tidak akan selalu merasakan keperluan untuk mengikuti segala sesuatu pada titik. Koleksi sumber-sumber berasaskan web ini boleh menjadi sangat berguna dalam masa dan masa lagi.

Spritely

Saya telah terbiasa bekerja dengan kod sumber terbuka. Itulah sebabnya mencari plugin jQuery seperti Spritely sentiasa merupakan keadaan yang menarik. Anda boleh memasukkan skrip ini ke laman web anda untuk animasi sprite dinamik cepat dan latar belakang bergulir.

Seluruh plugin dikuasakan oleh JavaScript dan HTML / CSS; tiada Flash atau mana-mana bahasa backend lain diperlukan. Halaman dokumentasi adalah mudah namun cukup untuk memulakan anda. Pemaju mempunyai banyak demo sampel yang boleh dimuat turun juga.

Versi pelepasan stabil semasa adalah 0.6.1 yang dikemas kini sederhana. Kesan animasi serasi dengan Opera, Chrome, Safari, Firefox, dan Internet Explorer 6+. Juga mana-mana pelayar telefon pintar yang berjalan pada Android atau iOS harus menjadi sempurna.

FatPixels

Ini adalah skrip sprite sumber terbuka yang dibangunkan oleh Matías Martínez. FatPixels hanya memerlukan perpustakaan jQuery untuk berjalan dengan betul. Walaupun saya akan mengatakan bahawa Spritely adalah perpustakaan animasi yang lebih kompleks, FatPixels mempunyai bidang khusus di pasaran untuk pemaju web.

Anda boleh dengan mudah membina sprite animasi tanpa membuat imej .gif. Malah, anda boleh mengeksport semua imej sebagai .jpg, dan membuat barisan sprite untuk satu kesan animasi yang panjang. Laman web FatPixels mempunyai demo yang sangat baik bersama-sama dengan blok kod jQuery yang digunakan untuk membinanya. Jika anda mencari sesuatu yang ringan untuk menghidupkan sprite anda maka FatPixels adalah cara untuk pergi.

SmartSprites

Apabila menggunakan perkataan "sprite" terdapat beberapa makna yang berbeza kepadanya. Watak-watak permainan video atau sprite animasi pada umumnya imej yang lebih kecil diberikan dengan sangat sedikit piksel. Walau bagaimanapun dalam CSS, istilah sprite merujuk kepada satu imej yang bertindak sebagai hela ikon untuk laman web anda.

Alasan anda harus menggunakan lembaran sprite tunggal bukan imej individu untuk mengurangkan sumber pelayan. Ia lebih cepat untuk memuat turun imej yang lebih besar memegang semua ikon anda dan bukan imej yang lebih kecil tetapi berasingan. Tetapi meletakkan semua ikon ini bersama-sama di Photoshop boleh menjadi kerumitan yang sebenar; tidak semestinya sukar, hanya berulang-ulang dan memakan masa.

Syukurlah SmartSprites CSS Generator adalah sumber yang hebat untuk keadaan ini. Anda dengan cepat boleh menghasilkan lembaran piksel yang sempurna dengan semua imej anda dalam format GIF atau PNG. Di samping itu anda boleh dengan cepat menentukan apa yang anda kedudukan latar belakang koordinat x / y mestilah untuk setiap ikon individu.

Squidfingers BG Patterns

Merekabentuk satu set imej latar belakang yang mengulangi sangat sukar. Ia boleh mengambil masa beberapa hari sebelum anda boleh membuat imej yang lancar. Tetapi syukurlah terdapat sumber dalam talian untuk memuat turun jubin latar belakang percuma.

Galeri Corak Squidfingers adalah satu sumber seperti itu. Ia menawarkan lebih daripada 150 corak gaya piksel yang berbeza yang boleh anda muat turun dan gunakan pada projek anda. Gaya-gaya ini sangat dinamik dan berwarna-warni, dan untuk apa-apa pelbagai, itu adalah sumber yang sangat baik untuk terus berguna. Pautan muat turun adalah dalam format .zip yang menjadikannya lebih kecil dan lebih mudah untuk dipindahkan antara komputer.

Sumber Spriters

Saya tidak boleh mengatakan perkara-perkara hebat yang cukup mengenai Sumber Spiteri. Ini adalah laman web di mana anda boleh mencari melalui semua sistem permainan untuk helaian sprite. Ini termasuk peta, bangunan, skrin menu, sprite watak, ikon, dan apa saja!

Mereka telah dimulakan sejak 2001 dan katalog permainan video telah berkembang dengan pesat. Terdapat satu komuniti di sebalik TSR dengan pereka grafik yang boleh merobek sprites permainan yang berbeza ini. Jika anda berminat dengan sebarang bentuk reka bentuk permainan video atau peminat dalam talian, anda perlu menyemak galeri yang menakjubkan ini.

Malah lebih menarik ialah beberapa laman web kakak yang mengeluarkan TSR. Kipas permainan juga membantu dengan tekstur asas yang merobek dan memaparkan model watak. Secara keseluruhan, ia adalah komuniti yang sangat hebat yang sangat menyokong bekerja dengan sprite dalam karya seni digital.

400 piksel

Ini adalah aplikasi web yang sangat keren yang tidak memberikan nilai penting, tetapi ia pasti kemas. 400 Pixel membolehkan anda membuat dokumen piksel dalam talian dan menyimpan imej dalam grid mereka. Laman web ini direka dengan cara yang sama dengan laman web juta dolar dengan setiap gambar mengambil blok persegi dalam imej keseluruhan.

Anda boleh bermain-main di antara muka web mereka yang membuat beberapa karya seni yang benar-benar bodoh. Ia bukan sesuatu yang akan anda ambil segera, tetapi ia adalah menyeronokkan untuk bermain dengan sebaik sahaja anda mendapat hang itu. Dan ini alat yang bagus yang boleh anda bekerjasama dari mana-mana komputer yang mempunyai akses Internet.

Output Utama

Dalam vein yang sama dengan 400 piksel, anda boleh menggunakan Output Utama sebagai studio dalam talian peribadi untuk karya seni pixel. Ia masih dalam peringkat awal pembangunan, tetapi semua fungsi pengguna teras sudah tersedia. Anda boleh mendaftar untuk akaun percuma dan mula membuat seni pixel dengan serta-merta.

Setiap imej disimpan secara setempat di pelayan mereka yang boleh anda hubungkan di laman web dan forum. Banyak imej yang terbuka kepada orang ramai dan anda boleh menyemaknya dengan mengklik melalui pengarang atau tag yang berlainan. Terdapat juga kotak carian, tetapi saya rasa kualiti hasil carian tidak selalu hebat.

Output Utama kelihatan seperti alat komuniti lain yang menyeronokkan untuk diketahui, tetapi mungkin tidak dapat menawarkan nilai pendidikan untuk artis pixel.

Tutorial

Sekarang bahawa anda mempunyai sumber, mari kita lihat tutorial yang disediakan oleh banyak pusat pendidikan dan catatan blog berguna yang tersebar di seluruh Internet. Saya telah mengumpulkan satu set kecil yang sangat berguna tutorial seni pixel untuk pemula dan pereka perantaraan. Banyak gear tutorial ini memberi tumpuan ke arah Adobe Photoshop, tetapi anda boleh mengikuti bersama dengan hampir mana-mana editor imej canggih.

Tutorial Pixel Sprite oleh Derek yu

Jelas terdapat beratus-ratus beratus-ratus tutorial teka-teki piksel di Google tetapi tutorial khusus mengenai laman web Derek Yu ini melangkaui banyak langkah yang berbeza dalam mendidik bagaimana anda membuat sprite piksel. Kebanyakan proses telah diperkemas dan dijelaskan dengan cara yang membolehkan para pemula dapat dengan pantas melompat ke tindakan.

Peminat permainan video akan menyukai tutorial ini kerana anda mendapat pemandangan di belakang untuk mencipta grafik khusus ini. Saya suka mencari susun atur laman web dengan karya seni pixel permainan video disusun sepanjang reka bentuk. Ia memberikan rasa nostalgia yang unik, dan ia adalah sesuatu yang anda tidak dapati di mana-mana. Sesiapa sahaja yang ingin membuat sprite pixel mereka sendiri untuk alasan apa pun boleh bermula pada siri tutorial 10 langkah Derek.

Mengkonfigurasi Photoshop untuk Seni Piksel oleh Brandon Treb

Berikut adalah satu lagi tutorial sempurna yang diarahkan kepada pemula dalam bidang karya seni piksel. Jawatan blog ditulis oleh Brandon Treb yang merupakan pereka hebat dan pemaju mudah alih. Anda boleh mencari pelbagai maklumat berguna dalam panduan terperinci ini untuk seni Photoshop berasaskan pixel.

Anda mesti tahu bagaimana untuk menetapkan pilihan di Photoshop supaya karya seni pixel anda tidak akan kelihatan janggal atau kehilangan kualiti apabila anda mengeksport. Anda mungkin terkejut untuk mengetahui banyak penyesuaian diperlukan untuk benar-benar mendapatkan kualiti gambar yang bagus.

Melukis Piksel Tangan yang Dilancarkan oleh Russell Tate

Berikut adalah satu lagi tutorial menakjubkan yang penuh dengan teknik untuk seni piksel yang ditarik tangan di Photoshop. Koleksi teknik pixel ini hanya menakjubkan. Sesiapa yang melayari kandungan itu kemungkinan besar akan mencari sesuatu yang tidak diketahui sebelumnya.

Terdapat penjelasan terperinci tentang membuat tekstur pada rumput dan kulit; juga tentang bagaimana untuk mengklon karya seni piksel yang telah anda tarik dan menjadikannya reka bentuk ikon. Semuanya datang untuk berlatih dan tepat di setiap kawasan. Mereka yang benar-benar bersemangat akan menerimanya dan dalam beberapa bulan mencari teknik yang solid untuk idea gaya piksel mereka.

Membangunkan Portfolio Permainan CSS / JS oleh Daniel Sternlicht

Berikut adalah satu tutorial dari Smashing Magazine mengenai cara untuk memasukkan portfolio permainan dengan CSS / JS yang menggunakan banyak sprite dari siri permainan Pokemon. Penulis Daniel Sternlicht yang juga berlaku untuk menjalankan portfolio peribadinya pada susunatur berasaskan permainan ini.

Laman web itu bertindak sebagai dunia RPG di mana anda mengawal sprite karakter dengan papan kekunci. Anda boleh memasukkan bangunan yang berbeza yang kemudiannya membawa maklumat seperti butiran perhubungan dan penyertaan portfolio.

Saya benar-benar suka tutorial ini, dan ini cara yang menarik untuk menggabungkan karya seni pixel dengan pembangunan laman web. Walaupun anda tidak tahu banyak mengenai JavaScript ini masih menjadi artikel yang menarik. Saya telah melalui beberapa kod dan mesti memberikan pujian yang luar biasa kepada Dan untuk tutorial kreatif seperti itu. Mana-mana fanatik Pokemon pasti akan jatuh cinta dengan idea-ideanya.

Tutorial Pixel Isometric Oleh Matriax

Laman web kecil ini gas13.ru mempunyai beberapa tutorial piksel yang paling eksentrik dan profesional yang pernah saya lihat. Dalam tutorial kolam isometrik, anda diperkenalkan untuk menghasilkan blok berkilat dan tekstur air. Di samping itu, anda akan mencari sumber untuk semua piksel piksel isometrik yang lain di bar sisi.

Terdapat banyak perkara yang perlu dipelajari: anda boleh merancang latar belakang, sprit piksel, atau tekstur terperinci untuk permainan video dan latar belakang laman web. Saya tidak pasti jika pengarang ini masih aktif menerbitkan kandungan, tetapi artikel yang ada lebih daripada cukup untuk pemula untuk mempelajari asas-asas.

Studio Purloux Pixel Tutorial Oleh Kevin Chaloux

Sekarang saya menyenaraikan semua tutorial piksel yang terbaik saya pasti akan memasukkan hak ini ke arah permulaan. Tutorial keseluruhan mengenai karya seni piksel ini adalah artikel susulan yang baik untuk pemula. Anda akan diperkenalkan sejak mula lagi untuk membuka perisian sumber seperti GIMP atau Paint.NET.

Anda akan belajar bagaimana untuk mengeksport imej dan banyak aspek reka bentuk piksel seperti dithering dan anti-aliasing. Terdapat banyak teknik yang berbeza untuk diikuti. Anda perlu mengambil beberapa idea reka bentuk dengan melihat ke dalam permainan video 8-bit dan 16-bit retro.

Pengarang Kevin Chaloux mengkredit tutorial sprit pixel Derek Yu (disenaraikan sebelum ini) dan menyebut bahawa ini sebagai sumber inspirasi ketika dia mula dimulakan.

Buat Favicon Lebih Baik Oleh Kayla Knight

Pereka web sering lupa bahawa imej favicon (ikon kegemaran) adalah sebahagian besar daripada skema penjenamaan mana-mana. Semua laman web yang paling popular boleh diiktiraf oleh favicon 16 × 16 mereka. Apabila anda bekerja dengan kanvas yang terhad, anda terpaksa berurusan dengan karya seni dan ilustrasi pixel-padat. Tutorial favicon ini dari OXP melakukan kerja yang baik untuk menggabungkan kedua-dua idea.

Dari tut ini, anda dapat memahami mengapa seni piksel sangat bermanfaat apabila membuat favicons. Terdapat juga alat dan teknik padat untuk mengeksport fail .ico. Juga disertakan adalah pameran kecil favicons popular dari seluruh Web.

Ini adalah sumber lain yang saya rasa dapat memberi manfaat kepada semua pereka web. Ia memberi kuasa untuk mendidik diri anda untuk mencipta favicon dan bekerja dengan batasan piksel yang ketat.

Galeri Pameran

Saya ingin menutup artikel tersebut dengan reka bentuk laman web bergaya pixel yang bagus. Saya telah memasukkan 40 contoh pelbagai susun atur dengan banyak visi artistik yang pelbagai. Trend karya seni pixelated hanya bermula untuk muncul semula dalam laman web utama. Saya berharap laman web piksel yang berbeza ini dapat menawarkan sumber inspirasi untuk pemaju web di seluruh dunia.

Earthbound Central

PixelJam

Pemasaran Interaktif Red Rokk

Blog eBoy

Tamago Pixel

pixelHugger

Pixel Deviant Graphics

Kitaran Kanun HTML5 8-Bit

Daniel Sternlicht

Tentera Trolls

BlockHead Pix App

madPXL

supertott 2.0

ClassicGaming

Tutorial Alat RPG

Pencipta Bandar

Final Fantasy XIII-2

KawaiiHannah Pixel Art

Peti Sandbox

Encik Wong

Pixel Freak

Seni Pixel Nasc

Paxjah

FoolsTown

Tenggelam

LOVEPIXEL

Henk Nieborg

Iriescope

iamnotadoll

SweetPIX

Megapont

Mini Metropolis

Hayo van Reek

Pixeltemple Studio

Vormgeving yang Adept

Muzium Pixel

QuickHoney

Polpo.net

spiv.cz

4 adunan sebenar