Sumberdaya, Tutorial, dan Contoh Situs Web Berbasis Pixel

Merancang antarmuka web menggunakan karya seni bergaya piksel relatif tidak jelas dibandingkan dengan tren modern. Anda benar-benar perlu menggali beberapa situs web di Internet untuk menemukan beberapa contoh yang bagus; sulit tapi bukan tidak mungkin.

Di artikel ini saya sudah kumpulkan kompilasi besar semua yang Anda perlukan untuk desain situs web berbasis piksel. Ada puluhan tutorial sehat untuk pemula dan pakar. Saya juga menyertakan beberapa alat dan sumber daya praktis yang dapat Anda mainkan untuk mengeksplorasi topik lebih lanjut. Jika Anda tertarik pada grafis video game atau karya seni pixel isometrik maka Anda akan menyukai koleksi ini.

Sumber daya

Ini adalah beberapa sumber pengembangan unik untuk skrip web dan grafik digital. Saat Anda mempelajari cara membuat tata letak situs web piksel, Anda tidak akan selalu merasa perlu untuk mengikuti semuanya sampai ke titik. Kumpulan sumber daya berbasis web ini mungkin sangat berguna di waktu dan waktu lagi.

Sangat

Saya sudah terbiasa bekerja dengan kode sumber terbuka. Itu sebabnya menemukan plugin jQuery seperti Spritely selalu merupakan situasi yang menyenangkan. Anda dapat memasukkan skrip ini ke situs web Anda untuk animasi sprite dinamis cepat dan latar belakang gulir.

Seluruh plugin didukung oleh JavaScript dan HTML / CSS; tidak diperlukan Flash atau bahasa backend lainnya. Halaman dokumentasi sederhana namun cukup untuk membantu Anda memulai. Para pengembang memiliki banyak demo sampel yang dapat Anda unduh juga.

Versi rilis stabil saat ini adalah 0.6.1 yang sedang diperbarui. Efek animasi kompatibel dengan Opera, Chrome, Safari, Firefox, dan Internet Explorer 6+. Juga setiap browser smartphone yang berjalan di Android atau iOS harus di-render dengan sempurna.

FatPixels

Ini adalah skrip sprite open source yang kuat yang dikembangkan oleh Matías Martínez. FatPixels hanya membutuhkan pustaka jQuery untuk berjalan dengan benar. Meskipun saya akan mengatakan bahwa Spritely adalah perpustakaan animasi yang lebih kompleks, FatPixels memang memiliki ceruk di pasar untuk pengembang web.

Anda dapat dengan mudah membuat sprite animasi tanpa membuat gambar .gif. Bahkan, Anda dapat mengekspor semua gambar sebagai .jpg, dan membuat antrian sprite untuk satu efek animasi yang panjang. Beranda FatPixels memiliki demo yang sangat baik bersama dengan blok kode jQuery yang digunakan untuk membangunnya. Jika Anda mencari sesuatu yang ringan untuk menghidupkan sprite Anda maka FatPixels adalah cara untuk melakukannya.

SmartSprites

Saat menggunakan kata "sprite" ada beberapa arti berbeda untuk itu. Karakter video game atau sprite animasi umumnya adalah gambar yang lebih kecil yang dibuat dengan piksel yang sangat sedikit. Namun dalam CSS, istilah sprite mengacu pada satu gambar yang bertindak sebagai selembar ikon untuk situs web Anda.

Alasan Anda harus menggunakan sprite sheet tunggal alih-alih gambar individual adalah untuk mengurangi sumber daya server. Jauh lebih cepat untuk mengunduh gambar yang lebih besar dengan memegang semua ikon Anda daripada banyak gambar yang lebih kecil tetapi terpisah. Tetapi menempatkan semua ikon ini bersama-sama di Photoshop bisa menjadi masalah; bahkan belum tentu sulit, hanya berulang dan memakan waktu.

Untungnya Generator SmartSprites CSS adalah sumber daya yang fantastis untuk situasi ini. Anda dapat dengan cepat menghasilkan lembar piksel-sempurna dengan semua gambar Anda dalam format GIF atau PNG. Selain itu Anda dapat dengan cepat menentukan apa yang Anda miliki posisi latar belakang koordinat x / y harus untuk setiap ikon individu.

Pola BG Squidfingers

Mendesain seperangkat gambar latar yang bagus sangat sulit. Diperlukan waktu berhari-hari sebelum Anda dapat membuat gambar tanpa batas. Tapi untungnya ada sumber daya online untuk mengunduh ubin latar belakang gratis.

Galeri Pola Squidfingers adalah salah satu sumber daya tersebut. Ia menawarkan lebih dari 150 pola gaya piksel berbeda yang dapat Anda unduh dan gunakan pada proyek Anda. Gaya sangat dinamis dan berwarna-warni, dan untuk variasi seperti itu, ini merupakan sumber yang bagus untuk tetap berguna. Tautan unduhan dalam format .zip yang membuatnya lebih kecil dan lebih mudah untuk ditransfer antar komputer.

Sumber Daya Spriters

Saya tidak bisa mengatakan cukup banyak hal hebat tentang The Spriters Resource. Ini adalah situs web tempat Anda dapat mencari melalui semua sistem permainan berbagai sprite sheet. Ini dapat mencakup peta, bangunan, layar menu, sprite karakter, ikon, dan hampir semua hal!

Mereka telah online sejak tahun 2001 dan katalog video game telah berkembang pesat. Ada seluruh komunitas di belakang TSR dengan desainer grafis yang dapat merobek sprite permainan yang berbeda ini. Jika Anda tertarik dengan segala bentuk desain video game atau fanites online, Anda harus memeriksa galeri yang luar biasa ini.

Yang lebih menarik adalah beberapa situs web saudara yang menelurkan TSR. Penggemar game juga membantu merobek tekstur dasar dan merender model karakter. Secara keseluruhan itu adalah komunitas yang sangat hebat yang sangat mendukung bekerja dengan sprite dalam karya seni digital.

400 Pixel

Ini adalah aplikasi web yang sangat keren yang tidak memberikan nilai penting, tetapi jelas rapi. 400 Pixels memungkinkan Anda membuat dokumen piksel secara online dan menyimpan gambar dalam kisi-kisi mereka. Situs ini dirancang dengan cara yang mirip dengan beranda juta dolar dengan setiap gambar mengambil blok persegi di gambar keseluruhan.

Anda dapat bermain-main di antarmuka web mereka membuat beberapa karya seni yang benar-benar konyol. Ini bukan sesuatu yang akan Anda ambil segera, tetapi itu menyenangkan untuk dimainkan setelah Anda terbiasa. Dan ini adalah alat yang bagus yang bisa Anda gunakan dari komputer mana pun yang memiliki akses Internet.

Output Besar

Dalam nada yang sama seperti 400 Pixel Anda dapat menggunakan Output Utama sebagai studio online pribadi untuk karya seni piksel. Ini masih dalam tahap awal pengembangan, tetapi semua fungsionalitas pengguna inti sudah tersedia. Anda dapat mendaftar untuk mendapatkan akun gratis dan mulai membuat pixel art segera.

Setiap gambar disimpan secara lokal di server mereka yang dapat Anda hotlink di situs web dan forum. Banyak gambar yang terbuka untuk umum dan Anda dapat memeriksanya dengan mengklik melalui berbagai penulis atau tag. Ada juga kotak pencarian, tetapi saya merasa kualitas hasil pencarian tidak selalu bagus.

Output Besar sepertinya alat komunitas lain yang menyenangkan untuk diketahui, tetapi mungkin tidak bisa menawarkan banyak nilai pendidikan untuk seniman piksel.

Tutorial

Sekarang setelah Anda memiliki sumber daya, mari kita lihat tutorial yang disediakan oleh banyak pusat pendidikan dan posting blog bermanfaat yang tersebar di seluruh Internet. Saya telah mengumpulkan satu set kecil yang benar-benar berguna tutorial seni pixel untuk pemula dan desainer menengah. Banyak tutorial ini berfokus pada Adobe Photoshop, tetapi Anda dapat mengikuti hampir semua editor gambar tingkat lanjut.

Tutorial Pixel Sprite oleh Derek yu

Jelas ada puluhan ratusan tutorial pixel-sprite di Google tetapi tutorial khusus ini di situs web Derek Yu melewati banyak langkah berbeda dalam mendidik bagaimana Anda membuat sprite pixel. Sebagian besar proses telah dirampingkan dan dijelaskan dengan cara yang memungkinkan pemula untuk segera beraksi.

Penggemar gim video akan menyukai tutorial ini karena Anda bisa mengintip dari balik layar untuk membuat grafik khusus ini. Saya suka menemukan tata letak situs web dengan karya seni piksel video game yang berserakan di seluruh desain. Ini memberikan rasa nostalgia yang unik, dan itu adalah sesuatu yang tidak Anda temukan di mana-mana. Siapa pun yang ingin membuat sprite piksel mereka sendiri untuk alasan apa pun dapat mulai dari seri tutorial 10 langkah Derek.

Mengkonfigurasi Photoshop untuk Pixel Art oleh Brandon Treb

Berikut ini adalah tutorial sempurna lainnya yang ditujukan untuk pemula di bidang pixel artwork. Posting blog ditulis oleh Brandon Treb yang merupakan desainer dan pengembang ponsel yang fantastis. Anda dapat menemukan segala macam informasi berguna dalam panduan terperinci ini untuk seni Photoshop berbasis piksel.

Anda harus tahu cara mengatur preferensi di Photoshop sehingga karya seni piksel Anda tidak akan terlihat canggung atau kehilangan kualitas saat Anda mengekspor. Anda mungkin terkejut mengetahui bahwa banyak penyesuaian diperlukan untuk benar-benar mendapatkan kualitas gambar yang bagus.

Menggambar Pixel Buatan Tangan oleh Russell Tate

Berikut ini adalah tutorial luar biasa lainnya yang penuh dengan teknik untuk seni pixel gambar tangan di Photoshop. Kumpulan teknik pixel art ini sangat menakjubkan. Siapa pun yang membaca sekilas konten kemungkinan besar akan menemukan sesuatu yang belum mereka ketahui sebelumnya.

Ada penjelasan rinci tentang membuat tekstur pada rumput dan kulit kayu; juga tentang cara mengkloning pixel artwork yang telah Anda gambar dan mengubahnya menjadi desain ikon. Semuanya bermuara pada praktik dan ketepatan di setiap bidang. Mereka yang benar-benar bersemangat akan bertahan dan dalam beberapa bulan menemukan teknik yang solid untuk ide-ide gaya piksel mereka.

Mengembangkan Portofolio Game CSS / JS oleh Daniel Sternlicht

Berikut ini salah satu tutorial dari Smashing Magazine tentang cara membuat kode portofolio game dengan CSS / JS yang menggunakan banyak sprite dari seri game Pokemon. Penulisnya adalah Daniel Sternlicht yang kebetulan menjalankan portofolio pribadinya pada tata letak berbasis game ini.

Situs web bertindak sebagai dunia RPG tempat Anda mengontrol karakter sprite dengan keyboard. Anda dapat memasukkan berbagai bangunan yang kemudian memunculkan informasi seperti detail kontak dan entri portofolio.

Saya sangat menyukai tutorial ini, dan ini merupakan cara yang menarik untuk menggabungkan karya seni pixel dengan pengembangan situs web. Bahkan jika Anda tidak tahu banyak tentang JavaScript, ini masih merupakan artikel yang sangat menarik. Saya telah membaca beberapa kode dan harus memberikan pujian yang luar biasa kepada Dan untuk tutorial yang begitu kreatif. Setiap fanatik Pokemon pasti akan jatuh cinta dengan ide-idenya.

Tutorial Pixel Isometrik Oleh Matriax

Gas13.ru situs web kecil ini memiliki beberapa tutorial pixel paling eksentrik dan profesional yang pernah saya lihat. Dalam tutorial kumpulan isometrik Anda diperkenalkan untuk membuat balok mengkilap dan tekstur air. Selain itu Anda akan menemukan sumber daya untuk semua tuts piksel isometrik lainnya di sidebar.

Ada begitu banyak yang harus dipelajari: Anda dapat merancang etalase toko, sprite piksel, atau bahkan tekstur detail untuk video game dan latar belakang situs web. Saya tidak yakin apakah penulis ini masih menerbitkan konten secara aktif, tetapi artikel yang ada lebih dari cukup bagi pemula untuk mempelajari dasar-dasarnya.

Tutorial Studio Purloux Pixel Oleh Kevin Chaloux

Sekarang saya mendaftar semua tutorial pixel terbaik, saya pasti akan memasukkan ini ke awal. Seluruh tutorial tentang pixel artwork ini adalah artikel lanjutan yang bagus untuk pemula. Anda akan diperkenalkan dari awal hingga perangkat lunak sumber terbuka seperti GIMP atau Paint.NET.

Anda akan belajar cara mengekspor gambar dan banyak aspek desain piksel seperti dithering dan anti-aliasing. Ada begitu banyak teknik untuk diikuti. Anda harus mengambil beberapa ide desain dengan melihat video game retro 8-bit dan 16-bit.

Penulis Kevin Chaloux memuji tutorial pixel sprite Derek Yu (terdaftar sebelumnya) dan menyebutkan bahwa ini sebagai sumber inspirasi ketika ia pertama kali memulai.

Buat Favicon Lebih Baik Oleh Kayla Knight

Desainer web sering lupa bahwa gambar favicon (ikon favorit) adalah bagian besar dari skema merek apa pun. Semua situs web paling populer dapat dikenali dari favicon 16 × 16 mereka. Ketika Anda bekerja dengan kanvas yang begitu terbatas, Anda terpaksa berurusan dengan karya seni dan ilustrasi yang padat piksel. Tutorial favicon dari OXP ini melakukan pekerjaan yang sangat baik untuk menggabungkan kedua ide.

Dari tut ini, Anda dapat memahami mengapa pixel art sangat bermanfaat saat membuat favicons. Ada juga alat dan teknik yang solid untuk mengekspor file .ico. Juga termasuk sebuah showcase kecil dari favicons populer dari seluruh Web.

Ini adalah sumber lain yang saya rasa dapat menguntungkan semua desainer web. Memberdayakan diri Anda untuk mendidik diri sendiri tentang cara membuat favicon dan bekerja dengan batasan piksel yang ketat.

Galeri Showcase

Saya ingin menutup artikel ini dengan galeri desain situs web bergaya pixel yang bagus. Saya telah menyertakan 40 contoh berbagai tata letak dengan banyak visi artistik yang beragam. Tren karya seni pixelated baru saja mulai muncul kembali dalam situs web utama. Saya harap pameran situs pixel yang berbeda ini dapat menawarkan sumber inspirasi bagi pengembang web di seluruh dunia.

Pusat Bumi

PixelJam

Pemasaran Interaktif Red Rokk

Blog eBoy

Tamago Pixel

pixelHugger

Pixel Deviant Graphics

8-Bit HTML5 Canvas Cycle

Daniel Sternlicht

Pasukan Troll

Aplikasi BlockHead Pix

madPXL

supertott 2.0

ClassicGaming

Tutorial RPG Toolkit

Pencipta Kota

Final Fantasy XIII-2

KawaiiHannah Pixel Art

Kotak Pasir

Tuan Wong

Pixel Freak

Nasc Pixel Art

Paxjah

FoolsTown

Lintang pukang

LOVEPIXEL

Henk Nieborg

Iriescope

iamnotadoll

SweetPIX

Megapont

Mini Metropolis

Hayo van Reek

Studio Pixeltemple

Mahir Vormgeving

Museum Pixel

QuickHoney

Polpo.net

spiv.cz

4 Adonan Sungguhan