Risorse, esercitazioni ed esempi sui siti Web basati su pixel

Progettare un'interfaccia web usando l'artwork in stile pixel è relativamente oscuro rispetto alle tendenze moderne. Hai davvero bisogno di scavare attraverso una manciata di siti web su Internet per trovare alcuni buoni esempi; è difficile ma non impossibile.

In questo articolo ho raccolto una mega-compilazione di tutto ciò che ti servirà per la progettazione di siti Web basati su pixel. Ci sono dozzine di tutorial salutari per principianti ed esperti. Ho anche incluso alcuni strumenti e risorse utili con cui puoi giocare per esplorare ulteriormente l'argomento. Se sei interessato alla grafica dei videogiochi o alla grafica con pixel isometrici, allora amerai questa collezione.

risorse

Queste sono alcune risorse di sviluppo uniche per gli script Web e la grafica digitale. Mentre approfondisci la creazione di layout di pixel per siti Web, non sentirai sempre la necessità di seguire tutto fino al punto. Questa raccolta di risorse basate sul web può benissimo tornare utile nel tempo.

spritely

Mi sono abituato a lavorare con il codice open source. Ecco perché trovare un plugin jQuery come Spritely è sempre una situazione eccitante. Puoi includere questo script nel tuo sito web per animazioni dinamiche di sprite dinamiche e sfondi a scorrimento.

L'intero plugin è supportato da JavaScript e HTML / CSS; non è richiesto alcun Flash o altra lingua di back-end. La pagina della documentazione è semplice ma sufficiente per iniziare. Gli sviluppatori hanno un sacco di demo di esempio che puoi scaricare.

La versione corrente della versione stabile è 0.6.1, che è moderatamente aggiornata. Gli effetti di animazione sono compatibili con Opera, Chrome, Safari, Firefox e Internet Explorer 6+. Anche i browser per smartphone che funzionano su Android o iOS dovrebbero funzionare perfettamente.

FatPixels

Questo è un potente script di sprite open source sviluppato da Matías Martínez. FatPixels richiede solo la libreria jQuery per funzionare correttamente. Anche se direi che Spritely è una libreria di animazione più complessa, FatPixels ha una nicchia nel mercato per gli sviluppatori web.

Puoi facilmente creare sprite animati senza creare un'immagine .gif. In effetti, sarai in grado di esportare tutte le immagini come .jpg e creare una coda di sprite per un lungo effetto animato. La homepage di FatPixels ha una demo eccellente insieme al blocco del codice jQuery usato per costruirlo. Se stai cercando qualcosa di leggero per animare i tuoi sprite, allora FatPixels è la strada da percorrere.

SmartSprites

Quando si usa la parola "sprite" ci sono un paio di significati diversi ad esso. I personaggi dei videogiochi o gli sprite animati sono generalmente immagini più piccole rese con pochissimi pixel. Tuttavia, in CSS, il termine sprite si riferisce a una singola immagine che funge da foglio di icone per il tuo sito web.

La ragione per cui dovresti usare un singolo foglio sprite invece delle singole immagini è ridurre le risorse del server. È molto più veloce scaricare un'immagine più grande che contiene tutte le tue icone invece di molte immagini più piccole ma separate. Ma mettere insieme tutte queste icone in Photoshop può essere una vera seccatura; non è nemmeno necessariamente difficile, solo ripetitivo e richiede tempo.

Per fortuna lo SmartSprites CSS Generator è una risorsa fantastica per questa situazione. Puoi generare rapidamente un foglio pixel-perfetto con tutte le tue immagini in formato GIF o PNG. Inoltre puoi determinare rapidamente quali sono i tuoi background-position le coordinate x / y dovrebbero essere per ogni singola icona.

Squidfingers BG Patterns

Progettare un buon set di immagini di sfondo ripetute è molto difficile. Potrebbero essere necessari giorni prima di poter creare immagini senza soluzione di continuità. Ma per fortuna ci sono risorse online per il download di tessere di sfondo gratuite.

La galleria Patterns Squidfingers è una di queste risorse. Offre oltre 150 diversi pattern in stile pixel che puoi scaricare e utilizzare sui tuoi progetti. Gli stili sono molto dinamici e colorati e, per una tale varietà, è un'ottima risorsa da tenere a portata di mano. I link per il download sono in formato .zip che li rende più piccoli e più facili da trasferire tra computer.

La risorsa degli Spriters

Non posso dire abbastanza grandi cose su The Spriters Resource. È un sito Web in cui è possibile cercare tra tutti i vari sistemi di gioco per i fogli sprite. Questi possono includere mappe, edifici, schermate di menu, sprite di personaggi, icone e praticamente qualsiasi cosa!

Sono online dal 2001 e il catalogo dei videogiochi è cresciuto enormemente. C'è un'intera comunità dietro la TSR con i grafici che possono strappare questi diversi folletti di gioco. Se sei interessato a qualsiasi forma di progettazione di videogiochi o di fansite online, dovrai dare un'occhiata a questa fantastica galleria.

Ancora più interessanti sono alcuni dei siti web gemelli che hanno generato il TSR. I fan del gioco hanno anche aiutato a rippare le trame di base e il rendering dei modelli di personaggi. Nel complesso, è davvero una grande community a supportare gli sprites nella grafica digitale.

400 pixel

Questa è un'app web davvero fantastica che non fornisce un valore essenziale, ma è decisamente pulita. 400 Pixel ti consente di creare un documento pixel online e di archiviare l'immagine nella loro griglia. Il sito è progettato in modo simile alla homepage di milioni di dollari con ogni immagine che occupa un blocco quadrato nell'immagine complessiva.

Puoi giocare nella loro interfaccia web creando delle opere davvero stupide. Non è qualcosa che raccoglierai subito, ma è divertente giocarci una volta capito. Ed è uno strumento piacevole con cui puoi lavorare da qualsiasi computer che abbia accesso a Internet.

Uscita principale

Analogamente a 400 pixel, puoi utilizzare Major Output come studio online personale per pixel art. È ancora nelle prime fasi di sviluppo, ma tutte le funzionalità dell'utente principale sono già disponibili. Puoi registrarti per un account gratuito e iniziare subito a creare pixel art.

Ogni immagine viene memorizzata localmente sui propri server, che è possibile collegarsi a siti Web e forum. Molte delle immagini sono aperte al pubblico e puoi verificarle facendo clic su diversi autori o tag. C'è anche una casella di ricerca, ma ritengo che la qualità dei risultati di ricerca non sia sempre ottima.

Major Output sembra un altro strumento di community che è divertente da conoscere, ma probabilmente non può offrire molto valore educativo per i pixel artist.

Esercitazioni

Ora che disponi delle risorse, diamo un'occhiata ai tutorial forniti dai numerosi centri di formazione e ai post dei blog utili sparsi su Internet. Ho messo insieme un piccolo set di veramente a portata di mano tutorial di pixel art per principianti e designer intermedi. Molti di questi tutorial si focalizzano su Adobe Photoshop, ma puoi seguire quasi tutti gli editor di immagini avanzati.

Il tutorial Pixel Sprite di Derek yu

Ovviamente ci sono decine di centinaia di tutorial di pixel-sprite su Google, ma questo particolare tutorial sul sito web di Derek Yu passa attraverso diversi passaggi nell'educare come creare pixel sprites. Gran parte del processo è stato snellito e spiegato in modo da consentire ai principianti di saltare rapidamente all'azione.

Gli appassionati di videogiochi apprezzeranno questo tutorial poiché si ha una sbirciatina dietro le quinte nella creazione di questi elementi grafici specifici. Mi piace trovare un layout di un sito web con materiale illustrativo in pixel per videogiochi disseminato nel progetto. Fornisce un senso unico di nostalgia, ed è qualcosa che non trovi ovunque. Chiunque stia cercando di creare i propri pixel sprite per qualsiasi motivo può iniziare con la serie di tutorial in 10 fasi di Derek.

Configurazione di Photoshop per Pixel Art di Brandon Treb

Ecco un altro tutorial perfetto rivolto ai principianti nel campo della grafica pixel. Il post del blog è stato scritto da Brandon Treb, un fantastico designer e sviluppatore mobile. Puoi trovare tutti i tipi di informazioni utili in questa guida dettagliata all'arte Photoshop basata su pixel.

È necessario sapere come configurare le preferenze in Photoshop in modo che la grafica del pixel non appaia scomoda o che perda quando si esporta. Potresti essere sorpreso di apprendere che è necessaria molta personalizzazione per ottenere una buona qualità dell'immagine.

Disegno di pixel fatti a mano di Russell Tate

Ecco un altro fantastico tutorial completo di tecniche per pixel art disegnati a mano in Photoshop. Questa raccolta di tecniche di pixel art è semplicemente sorprendente. Qualcuno che sfoglia il contenuto molto probabilmente troverà qualcosa che prima non conosceva.

Ci sono spiegazioni dettagliate sulla creazione di texture su erba e corteccia; anche su come clonare i disegni pixel che hai disegnato e trasformarli in un design di icone. Tutto si riduce alla pratica e alla precisione in ogni area. Coloro che sono veramente appassionati passeranno e in pochi mesi troveranno una solida tecnica per le loro idee in stile pixel.

Sviluppo di un portfolio di giochi CSS / JS di Daniel Sternlicht

Ecco un tutorial di Smashing Magazine su come codificare un portfolio di giochi con CSS / JS che utilizzava molti sprite della serie di giochi Pokemon. L'autore è Daniel Sternlicht che ha anche la possibilità di gestire il suo portfolio personale su questo layout basato sui giochi.

Il sito web agisce come un mondo di giochi di ruolo in cui controlli uno sprite personaggio con la tastiera. È possibile inserire diversi edifici che poi riportano informazioni come i dettagli di contatto e le voci del portfolio.

Adoro questo tutorial ed è un modo entusiasmante per combinare la grafica pixel con lo sviluppo di siti web. Anche se non sai molto di JavaScript, questo è comunque un articolo molto interessante. Ho esaminato parte del codice e devo dare enormi complimenti a Dan per un tutorial così creativo. Qualsiasi fan di Pokemon si innamorerà sicuramente delle sue idee.

Esercitazioni sui pixel isometrici di Matriax

Questo piccolo sito web gas13.ru ha alcuni dei tutorial di pixel più eccentrici e professionali che abbia mai visto. Nel tutorial sul pool isometrico ti viene presentata la creazione di blocchi lucidi e texture dell'acqua. Inoltre troverai risorse per tutti gli altri tuts isometrici dei pixel nella barra laterale.

C'è così tanto da imparare: puoi progettare una vetrina, un pixel sprite o persino trame dettagliate per i videogiochi e gli sfondi del sito web. Non sono sicuro che questo autore stia ancora pubblicando attivamente contenuti, ma gli articoli esistenti sono più che sufficienti per i principianti per imparare le basi.

Studio Purloux Pixel Tutorial di Kevin Chaloux

Ora che sto elencando tutti i migliori tutorial di pixel, includerei sicuramente questo diritto all'inizio. L'intero tutorial su pixel art è un ottimo articolo di follow-up per i neofiti. Sarai introdotto sin dall'inizio al software open source come GIMP o Paint.NET.

Imparerai come esportare le immagini e le molte sfaccettature del design dei pixel come il dithering e l'anti-aliasing. Ci sono così tante tecniche diverse da seguire insieme. Dovresti raccogliere alcune idee di progettazione esaminando i videogiochi a 8 bit e 16 bit.

L'autore Kevin Chaloux attribuisce il tutorial su pixel sprite di Derek Yu (elencato in precedenza) e menziona che questo come fonte di ispirazione quando è iniziato.

Crea un favicon migliore di Kayla Knight

I web designer spesso dimenticano che un'immagine favicon (icona preferita) è una parte enorme di qualsiasi schema di branding. Tutti i siti Web più popolari possono essere riconosciuti dalla loro favicon 16 × 16. Quando lavori con una tela così limitata, sei costretto ad occuparti di illustrazioni e illustrazioni ad alta densità di pixel. Questo tutorial favicon di OXP fa un ottimo lavoro nel combinare entrambe le idee.

Da questo tut, puoi capire perché la pixel art è così utile nella creazione di favicon. Esistono anche strumenti e solide tecniche per esportare un file .ico. Inoltre è inclusa una piccola vetrina di favicon popolari da tutto il Web.

Questa è un'altra risorsa che ritengo possa avvantaggiare tutti i web designer. È in grado di educare te stesso alla creazione di una favicon e di lavorare con limitazioni rigorose dei pixel.

Mostra la galleria

Mi piacerebbe chiudere l'articolo con una bella galleria di design di siti web in stile pixel. Ho incluso 40 esempi di vari layout con molte visioni artistiche diverse. La tendenza delle opere d'arte pixelate sta appena cominciando a riemergere all'interno dei siti web tradizionali. Spero che questa distinta vetrina di siti pixel possa offrire una fonte di ispirazione per gli sviluppatori web di tutto il mondo.

Earthbound Central

PixelJam

Red Rokk Interactive Marketing

Blog eBoy

Tamago Pixel

pixelHugger

Pixel Deviant Graphics

Ciclo di tela HTML5 a 8 bit

Daniel Sternlicht

Esercito di troll

BlockHead Pix App

madPXL

supertott 2.0

ClassicGaming

Tutorial degli strumenti RPG

Città Creatore

Final Fantasy XIII-2

KawaiiHannah Pixel Art

La sandbox

Mr. Wong

Pixel Freak

Nasc Pixel Art

Paxjah

FoolsTown

Head Over Heels

LOVEPIXEL

Henk Nieborg

Iriescope

iamnotadoll

SweetPIX

Megapont

Mini Metropolis

Hayo van Reek

Pixeltemple Studio

Adepto Vormgeving

Museo Pixel

QuickHoney

Polpo.net

spiv.cz

4 Real Dough