• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Guida PIXEL ART E DIGITAL ART: quando i due mondi si incontrano nel web-design

Ragazzo_Devil

Utente Attivo
Autore del topic
8 Marzo 2010
262
0
Miglior risposta
0
PIXEL ART E DIGITAL ART
quando i due mondi si incontrano nel web-design​

INDICE

- PREFAZIONE


  • Premessa
  • A chi si rivolge la guida
  • Aggiornamenti ed errata

- CAPITOLO 1: La pixel art

- CAPITOLO 2 : Il filtro anti-aliasing

- CAPITOLO 3: Grafica vettoriale e raster

- CAPITOLO 4: C'è un software per tutto

- CAPITOLO 5: L'unione fa la forza

- CAPITOLO 6: Il CSS è tuo amico

- EPILOGO


[anc="A"]PREFAZIONE[/anc]

La digital art, o più comunemente conosciuta come arte digitale, è una forma d'arte iniziata con l'avvento dell'era informatica a partire dalla fine del XX secolo fino ad arrivare ai giorni nostri. Il suo principale vettore di diffusione è la computer grafica, ossia la disciplina che studia le tecniche e gli algoritmi per la visualizzazione di informazioni numeriche prodotte da un elaboratore (cit. Wikipedia).
Come qualsiasi forma d'arte, anche la digital art ha le sue correnti, nate da contesti e modi di comunicare differenti per soddisfare esigenze sempre più numerose con l'aumentare del traffico di internet, della pubblicità e del business; una di queste è proprio la pixel art.

[anc="B"]Premessa[/anc]

Questa guida vuole rivolgersi a un ampio pubblico interessato al web-design, in particolar modo tiene un occhio di riguardo per tutte quelle persone interessate ai MMORPG come Habbo che usufruiscono abbondantemente della pixel art. Nonostante la guida si incentrerà particolarmente su quest'ultimo, ritengo che postarla nella categoria del Web Design sia la scelta più adatta visto che può essere uno spunto di riflessione decisamente più ampio ai soliti fansite, retro e qualsivoglia community aderente a Habbo.

[anc="C"]A chi si rivolge la guida[/anc]

La guida è rivolta a un pubblico non necessariamente maturo ai concetti basilari del web-design anzi, servirà per spiegarli e rafforzarli nel limite delle mie possibilità e dell'argomento trattato senza andare troppo off-topic. Non è necessario conoscere appieno i principali linguaggi di markup come HTML o CSS visto che si parlerà sostanzialmente di concetti visivi, tuttavia nel corso della guida si troveranno alcuni semplici esempi di codice utili ad applicare sul campo quanto spiegato nella guida.

[anc="D"]Aggiornamenti ed errata[/anc]

La guida è scritta e aggiornata al 04/02/2015 seguendo i principali standard del web i quali HTML5 e CSS3. Tuttavia nel futuro potranno esserci probabili incompatibilità con l'uscita di nuove versioni dell'HTML e del CSS. Ancora, la guida è scritta da un essere umano e come tale può presentare errori sia strutturali che di battitura. Se sei un utente attento e ti accorgi di qualche errore, segnalalo con un commento, l'aiuto sarà premiato. Inoltre cercherò di tenere il più possibile questa guida aggiornata.

[anc="1"]CAPITOLO 1
La pixel art[/anc]

“La pixel art è una forma di arte digitale. Si tratta di una tecnica per costruire immagini che segue le orme della corrente del divisionismo (pointillisme), il cui maggior esponente fu Georges Seurat. La differenza più evidente è che, invece di utilizzare un pennello, si utilizza il mouse e un software di grafica raster. Questa tecnica trova sostenitori tra i nostalgici dei giochi anni ottanta (dove i primi esempi di pixel art appaiono per necessità, date le limitate risorse grafiche a disposizione) ma soprattutto nel Web, in quanto permette di creare belle illustrazioni con pochi colori e quindi molto veloci da caricare in una pagina web.”
da Wikipedia.​

Come si può evincere dalla dettagliata definizione di Wikipedia, la pixel art nasce come esigenza visto le limitate risorse grafiche a disposizione negli anni '80. Come nel puntinismo (dal francese pointillisme) la pixel art si serve di punti ben definiti, rappresentati dai pixel, che nell'insieme danno un senso di immagine e colore. Avendo, negli anni '80, le console desktop e portatili schermi in bianco e nero con diagonali ampie e definizioni molto basse, con la loro PPI (densità di pixel per pollice quadro dall'inglese Pixel per Inch) i pixel erano ben visibili a occhio nudo, dunque proiettare immagini su tali dispositivi comportava inevitabilmente la visione di queste ultime in pixel art.

h7Je7Pq.png

Screenshot di Pokémon Oro, un chiaro esempio
di gioco che sfrutta la pixel art

I nostalgici di questi giochi ben presto hanno iniziato a simulare questo effetto andando a creare delle vere e proprie opere d'arte, ed è proprio da qui che inizia veramente la corrente della pixel art. Col passare degli anni è diventata tanto famosa da essere utilizzata in molti campi, soprattutto quello del gaming online. Ad oggi possiamo trovare ancora di tendenza applicazioni in questo stile in sistemi operativi come Android e iOS, un esempio chiaro e lampante può essere Flabby Bird.
Sul web invece il maggior esponente di questa forma d'arte può essere ritenuto all'unanimità Habbo. Ma cosa è Habbo? Habbo è un MMORPG nato nel 2000 dalla Sulake in Finlandia. Ben presto, proprio per la sua idea di gioco e community ma anche per la sua grafica accattivante e in pixel art, è diventato famoso in tutto il mondo fino ad arrivare a coprire quasi l'intero globo. Originariamente si basava su una grafica completamente in pixel art sia nel sito che nel client, tuttavia ora si sta sempre di più uniformando alla digital art moderna seppur conservatorio della pixel art nel lato client, il cuore del gioco.
Nel gioco è possibile creare e arredare le proprie stanze, ed è proprio in questo sistema che gli artisti creano le migliori opere d'arte in pixel art che si possano trovare. I grafici e i dipendenti della Sulake rinnovano periodicamente il catalogo dove acquistare i furni (gli arredamenti e non solo) creando immagini sempre più complesse e belle da vedere, ma sempre in pixel art.

E5KmWla.png

Furno raro Bruco in Habbo Hotel

4UeUsjD.png

Ecco come si presentava la Home di Habbo del 2005

[anc="2"]CAPITOLO 2
Il filtro anti-aliasing[/anc]

Come già precedentemente detto, col passare degli anni l'evoluzione tecnologica ha avuto una crescita esponenziale: i computer erano sempre più performanti, le componentistiche interne sempre più piccole, i display con risoluzioni sempre maggiori. Risoluzioni maggiori comportavano la possibilità di trasmettere a video immagini sempre più dettagliate e da qui è nata la necessità di creare un filtro anti-alias per visualizzare le immagini al meglio. Ma di cosa si tratta? Se per semplici giochi la pixel art si sposa alla perfezione, tutt'altro lo è con foto, video e grafica vettoriale, nasce quindi l'esigenza di eliminare l'effetto “scalettatura” che viene creato quando i pixel sono ben definiti e delineati come accade nella pixel art: il filtro anti-alias.

ECLjGTI.png

A sinistra una scacchiera con l'effetto scalettatura (alias) prodotto dai pixel, a destra la stessa immagine con un filtro anti-aliasing. Immagine presa da Wikipedia

Se vogliamo dare uno sguardo più tecnico alla definizione di anti-aliasing:

“Le schede video lavorano con triangoli e linee che, per essere mostrati, devono essere campionati (sampling). Questa è la fase dove vengono stabiliti i colori dei singoli pixel e che produce le scalinature tra gli oggetti finali.

Durante la campionatura al pixel viene assegnato un solo colore prendendo come riferimento il suo centro; se un pixel appartiene ad una linea che delimita due campi, anche in questo caso prevale il colore del campo a cui appartiene il centro del pixel. Per questo motivo su linee oblique, zone con alta differenza di colore o sui bordi netti si forma l'effetto alias. Per questo nella maggior parte dei casi (generalmente a livello hardware), l'immagine viene campionata come se invece di un singolo pixel ce ne fossero di più e al pixel finale viene assegnato il colore medio (supersampling).

L'attivazione dell'effetto, nei videogiochi, comporta (nella maggioranza dei casi) una diminuzione del frame rate sviluppato dalla scheda video, proprio a causa della grande quantità di dati che quest'ultima si trova a gestire.”

da Wikipedia​

[anc="3"]CAPITOLO 3
Grafica vettoriale e raster[/anc]

Una volta superato l'ostacolo della visualizzazione delle immagini senza effetto scalettatura, è sorto un altro problema. Le immagini a risoluzione fissa, infatti, se venivano zoomate o ingrandite perdevano di definizione. Ma come mai accade? Ovviamente un'immagine digitale è un insieme di informazioni in bit, quando si chiede alla macchina di visualizzarla a dimensioni maggiori, si sta chiedendo alla macchina di compilare più bit di quanti ne abbia l'immagine stessa, ragion per cui non trovandoli deve interpolarli automaticamente con una serie di algoritmi. La macchina cercherà di mantenere il più possibile il rapporto dei pixel, scalandone semplicemente la loro dimensione. Quando ciò avviene, a ingrandimenti elevati si cominceranno a vedere i pixel che formano l'immagine: questa è la grafica raster. Ovviamente questo metodo di visualizzare le immagini non ha reali benefici, purtroppo l'avvento della grafica vettoriale è nato molti anni dopo dunque tutt'oggi il metodo predefinito di visualizzazione delle immagini è ancora questo. Come abbiamo risolto questo “piccolo” impiccio? Ebbene, l'abbiamo nominata già molte volte ma non abbiamo ancora spiegato cosa sia e come funzioni: la grafica vettoriale. A differenza di quella raster, che è composta di pixel, la grafica vettoriale è composta di punti, linee e curve, o più propriamente detti vettori. Sebbene la differenza possa sembrare irrilevante, è proprio grazie a questo che un'immagine composta da vettori può essere ingrandita a proprio piacimento senza perdita di qualità e risoluzione. Il software che si occupa di gestire i vettori, infatti, utilizza algoritmi per ricreare i vettori a dimensioni maggiori ogni volta che l'immagine viene ingrandita.

75qdrE1.jpg

Confronto tra un'immagine raster e una vettoriale ingrandita.
a) immagine originale
b) immagine vettoriale ingrandita 8x
c) immagine raster ingrandita 8x
Immagine presa da Wikipedia

Come già detto in precedenza, i file in grado di contenere le informazioni dei vettori (come quello di Adobe Illustrator .ai), non sono supportati dai principali riproduttori di immagini, ragion per cui in genere si crea prima l'immagine vettoriale, poi si ridimensiona fino alle dimensioni desiderate e si salva in raster. Una volta salvata in raster, l'immagine, non potrà più essere ridimensionata senza perdita di qualità, tuttavia se si conserva il file vettoriale si potrà ripetere tutte le volte che si vuole questo passaggio, per tutte le risoluzioni desiderate. Nonostante ciò, ci sono diversi file in grado di contenere vettori che sono supportati nativamente dalle macchine, un chiaro esempio di questi file è il font. In pochi si soffermano abbastanza a rifletterci, eppure non ci rendiamo quasi mai conto che i caratteri che scriviamo sul browser, su un editor di testo e qualsivoglia testo nel nostro computer sono vettoriali. Se prendiamo una pagina web qualsiasi, per esempio, e zoomiamo la pagina a nostro piacimento, ci accorgeremo che le immagini che compongono il sito, che sono raster, perderanno qualità mentre il testo rimarrà invariato. Un altro formato in vettoriale supportato dai principali browser, per esempio, è l'svg. Sempre rimanendo nel campo di internet, anche tutto ciò che è renderizzato dal browser tramite CSS e HTML è vettoriale, ragion per cui se si è in grado di fare a meno di una immagine creando una classe CSS che la simuli allo stesso modo, è sempre preferibile. Ma di questo è ancora presto per parlarne.

FKU2UTf.png

Immagine presa da Wikipedia

[anc="4"]CAPITOLO 4
C'è un software per tutto[/anc]

Ora che abbiamo dato uno sguardo complessivo alle principali forme d'arte digitale e le conseguenze che causano, possiamo iniziare a parlare di quale software usare per lavorare. Ovviamente questo è un argomento molto ampio, io mi soffermerò sui programmi che ritengo migliori a seconda di cosa vogliamo realizzare. Se partiamo dalla pixel art non possiamo non citare il programma più semplice, e alla portata di chiunque abbia Windows, che possa esistere per realizzare immagini di questa corrente artistica: Paint. Seppure è risaputo che Paint non è un programma avanzato di computer grafica (pecca infatti di totale assenza di livelli, maschere, filtri ecc.) offre tutto, o quasi, quello di cui abbiamo bisogno per realizzare opere d'arte in pixel art. Basta infatti aprire un nuovo documento, armarsi di matita (strumento che a un click riempie un pixel preciso del colore scelto) e iniziare a disegnare. Purtroppo l'assenza di livelli e di controllo di opacità degli elementi penalizza questo programma. In genere, i grafici alle prime armi, una volta realizzata l'immagine lasciano lo sfondo bianco per esempio. Chi è un po' più furbo, realizza dapprima l'immagine su paint e successivamente tramite Photoshop rimuove lo sfondo. Chi invece è più esperto, lavora direttamente su Photoshop. Ma quali vantaggi offre realmente Photoshop rispetto a Paint nella pixel art? Ebbene, contrariamente a quanto si possa credere, il segreto di un'opera ben riuscita nella pixel art non è necessariamente quello di saper disegnare a mano libera, ma l'abilità nel saper sfruttare gli elementi a propria disposizione per ottenere un risultato che sia più che soddisfacente. Se è vero che chi lo fa totalmente a mano libera ottenendo risultati egregi è meritevole, è vero anche che tramite Photoshop hai a disposizione una valanga di strumenti per ottenere risultati professionali risparmiando tempo e fatica. Allora uno potrebbe chiedersi perché preferire Paint a Photoshop? Bene, Adobe Photoshop risulta più difficile da utilizzare, sia in generale per uno che è alle prime armi con la computer grafica, sia nello specifico per la pixel art. Infatti, su Photoshop, il pennello non lavora sui pixel singoli e questo è penalizzante. Per porre rimedio a questo problema bisogna settare su metodo di colore il metodo “scala di colore”, in modo da limitare la palette di colori a 256 e lavorare con i pixel quadrati e non tondi. Una volta fatto questo però, risulterà più difficile lavorare su Photoshop in pixel art. Ecco perché Paint per certi aspetti è migliore, perché offre una semplicità d'uso a discapito della qualità finale del lavoro. Se vogliamo fare un piccolo paragone, è come la differenza tra iOS e Android, il primo è da preferire per la sua semplicità d'uso e stabilità, il secondo è da preferire per la fruibilità e la personalizzazione.
Photshop inoltre, e non è un dettaglio da poco, è a pagamento e alla modica cifra di €12,19 al mese per il piano base e €60,99 al mese per il piano avanzato. Se vogliamo possiamo citare anche Gimp, un programma molto simile a Photoshop anche se meno professionale, col vantaggio di essere completamente gratuito!

zgx95Wb.png

Schermata di Paint

H7GK0Dj.png

Schermata di Photoshop

[anc="5"]CAPITOLO 5
L'unione fa la forza[/anc]

Ora che sappiamo qualcosa di più sulla pixel art e sull'arte digitale in generale, possiamo procedere con l'applicazione di quanto abbiamo appreso nel mondo del web-design. Come avrete notato prima, ho condiviso con voi lo screenshot della home di Habbo nel 2005. Senza un particolare occhio attento, vi sarete resi conto che la home è tutta in pixel art, fuorché il testo che non utilizza un font analogo (volter goldfish per esempio). Stessa cosa potremo dire dei fansite di Habbo, che da sempre la migliore grafica aspira alla quasi totalità degli elementi del layout in pixel art. Bene, se è vero che un tempo era bello e innovativo, ora non si potrebbe commettere errore più grave nella realizzazione di un layout in pixel art.

6r5aNbt.png

Screenshot di un famoso fansite Habbo. Notare la quasi totalità egli elementi in pixel art

Come fare allora per tenere il passo con la moderna grafica computerizzata? Ebbene, potrà sembrare difficile da immagine eppure l'unione tra il moderno e il classico è la carta vincente per realizzare un layout in pixel art. Un consiglio che do sempre io è quello di distinguere gli elementi di impaginazione della pagina, dagli elementi di decoro. Seguendo questa pratica suddivisione, bisogna realizzare quasi sempre i primi con il CSS e una grafica moderna, mentre i secondi con la pixel art. Ovviamente il tutto dipende dalle proprie scelte e dell'idea di layout che si vuole realizzare, tuttavia seguendo queste pratiche regole si crea già una buona base di partenza. Ma a cosa mi riferisco realmente quando parlo di elementi di impaginazione e quando parlo di elementi di decoro? Mettiamo che vogliamo realizzare, all'interno della nostra pagina, un box per gli utenti loggati, dove è possibile visualizzare il nostro avatar, le nostre informazioni e vari link. Seguendo il nostro criterio di valutazione degli elementi, un elemento di impaginazione potrebbe essere il contenitore dell'avatar, così come quello dei link, mentre l'avatar stesso è l'elemento di decoro. Proviamo ora a prendere come esempio un box per gli utenti loggati realizzato in pixel art e confrontiamolo con uno di un pannello amministrazione più moderno:

KXLf276.png


cgHUwo9.png

Come potrete notare, il primo ha sia il box, che i link che le informazioni utili che i contenuti in pixel art, mentre il secondo utilizza gli elementi di impaginazione con un filtro-antialias e grafica moderna, mentre l'avatar è in pixel art. Potrà sembrare una sciocchezza, ma anche Habbo stesso ha intrapeso questa tendenza e non è una cosa da poco. Ecco infatti come si presenta al 2015 la home di Habbo:

vvQTV2m.png

Elementi grafici come logo, immagini ecc. sono in pixel art, eppure campi di testo, bottoni, box ecc. presentano gradienti lineari, filtro-antialiasing ecc. Provate ora a confrontare la home del 2015 con quella 2005, vi renderete conto voi stessi della differenza. Una volta imparato questo semplice concetto, incomincerete a capire come realizzare layout in pixel art belli da vedere e efficaci. Ovviamente non bisogna mettere da parte la creatività e trasgredire le regole intelligentemente non è un reato!

[anc="6"]CAPITOLO 6
Il CSS è tuo amico[/anc]

Abbiamo dunque capito che utilizzare solo immagini e per giunta in pixel art è sbagliato, anzi realizzare elementi di impaginazione in grafica moderna può essere una carta vincente. Tuttavia non abbiamo sprecato un intero articolo sul vettoriale per poi non applicarci nel campo, ecco perché il CSS è nostro amico. Molti non ne sono a conoscenza, ma tutto ciò che è renderizzato dal browser è vettoriale. Se, per esempio, nella pixel art siamo costretti a utilizzare immagini (visto anche la loro immensa complessità visiva) per gli elementi dell'impaginazione potremo, anzi dovremo, farne a meno, soprattutto quando sono molto semplici. Un utente poco esperto di CSS, infatti, per realizzare un cerchio come lo vedete nell'esempio del pannello di amministrazione mostrato nel capitolo precedente, utilizzerebbe un'immagine, mentre un professionista lo realizzerebbe solamente in CSS. A questo punto vi starete sicuramente chiedendo che differenza faccia. Oltre a una questione estetica (un elemento in CSS può essere infatti sia vettoriale che dinamico se settato in percentuale) sorge il problema del caricamento della pagina. Una pagina efficace, infatti, carica nel minor tempo possibile e mira a consumare il minor possibile delle risorse disposte dal visitatore. Per fare un cerchio basterebbero pochissime righe di codice e l'utente dovrà scaricare solo quei pochissimi bit, mentre se lo realizzi tramite un'immagine l'utente dovrà scaricare molti più bit di informazioni, tanti quanto è grande e complesso il cerchio. Sembrerà un problema da niente, eppure con le offerte limitate dei nostri carrier telefonici, soprattutto nel mobile, risparmiare il traffico dati è la prima necessità. Ecco un esempio di un cerchio in immagine e in CSS affiancati (provate anche a zoomare abbondantemente la pagina per vedere cosa succede):

Perfavore, Entra oppure Registrati per vedere i Link!

Naturalmente in questa guida non posso spiegarvi come realizzare il più possibile delle cose in CSS al posto che utilizzare immagini, ci sono web-designer che impiegano anni della loro vita per imparare a fare ciò. Quello che posso dirvi è che studiare attentamente tutte le proprietà del CSS e i selettori, facilmente fruibili dal sito di W3Schools, aiuta molto nella realizzazione. Un occhio di riguardo va soprattutto al CSS3, che ha migliorato non di poco questo aspetto.

[anc="E"]EPILOGO[/anc]

Bene, spero che arrivati a questo punto vi abbia fornito le basi necessarie per realizzare layout in pixel art semplici, belli ed efficaci. Purtroppo non ho potuto spiegarvi tutto, e mai potrò farlo, però sono fiducioso che questo possa essere un buon inizio. Molti degli accorgimenti segnalati in questa guida sono frutto di anni di mia attenta osservazione, studi e miglioramenti e nonostante ciò anche io ho ancora molto da imparare. Se per voi la guida non è stato abbastanza, rimanete connessi perché più in là allegherò guide supplementari per completare la formazione artistica in questo campo, come per esempio una guida dedicata interamente alle migliori tecniche per realizzare elementi interamente in CSS3, comprese animazioni e quant'altro; oppure una guida dedicata alle regole della comunicazione visiva per la realizzazione di layout efficaci e visivamente piacevoli da guardare. Con questo per ora chiudo, sperando di avervi lasciato un piccolo pezzo di cultura e di interesse del mondo del web-design!
 
Ultima modifica da un moderatore:
  • Like
Reactions: 3 people