• 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 - Lezione 1 - Questione di punti

Ignazio96

Utente Guru
Autore del topic
User Legend
9 Marzo 2008
10.985
155
Miglior risposta
0
pixel-art-heart.png


1.0 Introduzione


Salve a tutti, benvenuti in questa prima lezione di pixel art. Da oggi inizierò a spiegarvi come iniziare a realizzare qualcosa in questa particolarissima tecnica di disegno digitale in pixel.
Ho deciso di fare questa serie di lezioni in quanto trovo che questa forma di arte sia accessibile a tutti coloro che hanno un pò di fantasia , pazienza ed ovviamente un personal computer.

Non sono certamente un esperto di pixel art ma magari con queste lezioni oltre ad imparare qualcosa sarete anche voi ad insegnare qualcosa a me con i vostri commenti.

Bene, incominciamo! :emoji_slight_smile:


1.1 Definizione di Pixel e Pixel art

Prima di iniziare con le lezioni ci chiariremo le idee sul significato di pixel e la storia della pixel art

Il
pixel è un'unità logica che rappresenta la più piccola parte visualizzata da un monitor , il significato della parola è l'unione dei due sostantivi inglesi ' Picture ' ed ' Element ' ( Immagine ed Elemento ).
La dimensione di un pixel varia da monitor a monitor e sono decise dalle case produttrici.
Il colore di un pixel è determinato da combinazioni di
Rosso,Verde,Blu. ( Red , Green , Blue da cui deriva l'acronimo RGB ).

Possiamo immaginare i pixel come atomi o punti che , messi vicini , compongono un'immagine unica , la tecnica che accosta i pixel è detta , appunto , Pixel Art.

Vediamo un esempio di pixel art

Honda_Pixel_Art_by_tancleon.jpg


Autore:
Perfavore, Entra oppure Registrati per vedere i Link!


La pixel art venne creata negli anni '80 come grafica per videogiochi , le tecnologie d'allora ( Dette ad 8 bit ) permettevano immagini semplici composte da pochi colori e con pochi dettagli.


petelavadigger_super-mario-pixel.png



( Il nostro amato Super Mario non è altro che un agglomerato di pixel! )


Fisicamente potremmo pensare la pixel art come una sorta di ' puntinismo ' , come quello di Georges Seurat.

1.2 Gli strumenti

Essendo , come detto prima , la pixel art accessibile a tutti anche gli strumenti che andremo ad utilizzare saranno accessibili a tutti.

Per realizzare le vostre opere potrete utilizzare più o meno qualsiasi programma di grafica , anche il celeberrimo MS PAINT.

Per comodità userò in questa serie di lezioni il programma
freeware Paint .NET , è molto leggero e maneggevole , ed è scaricabile gratuitamente a questa pagina:
Perfavore, Entra oppure Registrati per vedere i Link!

Perfavore, Entra oppure Registrati per vedere i Link!



1.3 Creiamo una favicon

Passiamo subito alla parte pratica creando una favicon , che è un esempio semplicistico di pixel art in formato 16x16 px.

Le favicon di solito si trovano nel browser internet vicino al link del sito nella barra degli indirizzi o vicino al titolo della scheda ( Cambia da browser e browser ) , per esempio la favicon di sciax2 è questa:
0410a-a17feaea-7be7-4f66-992b-64d0badc45a1.png


Date le limitate dimensioni su cui lavorare ( Un quadrato di 16 x 16 pixel ) la favicon necessita di essere creata in pixel art e deve essere composta da un disegno semplice , niente di meglio per iniziare a lavorare con la pixel art!

Andremo adesso a disegnare la lettera I in pixel art , la contorneremo con un bel bordo nero , lo sfondo dovrà essere verde e la lettera blu.

Apriamo il nostro programma di grafica , creiamo un nuovo foglio 16 x 16 PIXEL e prendiamo lo strumento matita impostando la grandezza 1 px.

0410a-f08058d7-db1e-4390-aebf-12abffa63175.png


Ingrandiamo quanto più possibile con lo zoom , adesso il nostro quadratino ci sembrerà gigante.

Iniziamo a prendere il colore che vogliamo utilizzare come sfondo e con lo strumento matita ( o in questo caso andrebbe bene anche il secchiello ) andiamo a riempire lo sfondo del colore che abbiamo scelto in precedenza.

0410a-0d002cb6-69bc-4d73-aa46-282f5fb5aeb2.png


Adesso andiamo a fare il contorno di 1 pixel nero con lo strumento matita.

0410a-532b3641-a4c8-4e80-8498-e5f1a78c6b9f.png


Adesso andiamo a creare la nostra I di colore Blu pixel per pixel.

0410a-afdcec6f-da5a-4038-a968-125638bd1070.png


Adesso salvate , aprite e notate quanto sia piccola e ben realizzata ( si spera :emoji_relieved: ) la vostra favicon!

Complimenti, avete creato la vostra prima ' pixel art ' !

1.4 Conclusione , compiti


Siamo arrivati alla fine di questa prima lezione , spero vi sia piaciuta questa introduzione e che vi stiate incominciando ad appassionare alla pixel art leggendo ciò questa lezione.

Se avete preso a cuore questa forma d'arte e volete migliorare , aspettando la lezione successiva potreste svolgere i compiti che man mano assegnerò.
Ovviamente postateli come commenti , commentate anche se avete qualche dubbio! :emoji_slight_smile:

COMPITI LEZIONE 1

- Creare una Favicon 16 x 16 px
- Creare una Favicon 32 x 32 px

Nella favicon potrete inserirci ciò che volete, siate fantasiosi! :emoji_slight_smile:

Ciao, alla prossima lezione!

 
Queste piccole "lezioni" sembrerebbero inutili ma in realtà si può fare davvero tanto. Basti prendere in considerazione la Pixel Art di Tancleon... è una cosa spettacolare!

Vai avanti così ;)