Pixel art (pixel art): i migliori lavori e illustratori. Che cos'è l'arte dei pixel? Esempi e come impararlo Pixel art funziona meglio

28.06.2020

Pixel Art è molto popolare per i giochi anche in questi giorni e ci sono diversi motivi per questo!

Quindi, cosa affascina Pixel Art:

Percezione. La pixel art sembra incredibile! C'è molto da dire su ogni singolo pixel in uno sprite.
Nostalgia. Pixel Art riporta un grande sentimento nostalgico per i giocatori che sono cresciuti giocando a Nintendo, Super Nintendo o Genesis (come me!)
Facilità di apprendimento. La pixel art è una delle arti digitali più facili da imparare, soprattutto se sei più un programmatore che un artista ;]

Quindi, vuoi cimentarti con Pixel Art? Allora seguimi e ti mostrerò come creare un personaggio giocabile semplice ma efficace che puoi usare nel tuo gioco! Inoltre, come bonus, vedremo come integrarlo nei giochi per iPhone!

Per un apprendimento di successo, avrai bisogno di Adobe Photoshop. Se non ce l'hai, puoi scaricare una versione di prova gratuita dal sito Web di Adobe o torrent.

Che cos'è l'arte dei pixel?

Prima di iniziare, chiariamo cos'è la Pixel Art, non è così scontato come si potrebbe pensare. Il modo più semplice per definire cosa è Pixel Art è specificare cosa non è, ovvero: tutto ciò in cui i pixel vengono creati automaticamente. Ecco alcuni esempi:

Pendenza: selezionare due colori e calcolare il colore dei pixel intermedi. Sembra bello, ma non è Pixel Art!

Strumento sfocatura: rilevare i pixel e replicarli/modificarli per creare una nuova versione dell'immagine precedente. Ancora una volta, non un grafico a pixel.

Strumento levigante(principalmente generando nuovi pixel in diversi colori per rendere qualcosa di "liscio"). Devi evitarli!

Alcuni diranno che anche i colori generati automaticamente non sono Pixel Art, poiché richiedono un livello per gli effetti di fusione (fusione di pixel tra due livelli secondo un determinato algoritmo). Ma poiché la maggior parte dei dispositivi attualmente gestisce milioni di colori, questa affermazione può essere ignorata. Tuttavia, l'utilizzo di un numero ridotto di colori è una buona pratica in Pixel Art.

Altri strumenti come (linea) o strumento di riempimento(Paint Bucket) genera automaticamente anche i pixel, ma poiché puoi impostarli in modo da non smussare la curva dei pixel riempiti, questi strumenti sono considerati compatibili con Pixel Art.

Pertanto, abbiamo scoperto che Pixel Art richiede molta attenzione quando si posiziona ogni pixel in uno sprite, il più delle volte a mano e con una tavolozza di colori limitata. Mettiamoci al lavoro ora!

Inizio dei lavori

Prima di iniziare a creare la tua prima risorsa Pixel Art, dovresti sapere che Pixel Art non può essere ridimensionato. Se provi a ridurlo, tutto sembrerà sfocato. Se provi a ridimensionarlo, tutto sembrerà accettabile fintanto che utilizzi un ridimensionamento multiplo di due (ma, ovviamente, non ci sarà chiarezza).

Per evitare questo problema, devi prima capire quanto dovrebbe essere grande il tuo personaggio di gioco, o elemento di gioco, e poi metterti al lavoro. Molto spesso questo si basa sulle dimensioni dello schermo del dispositivo che stai prendendo di mira e su quanti "pixel" vuoi vedere.

Ad esempio, se vuoi che il tuo gioco appaia due volte più grande su un iPhone 3GS ("Sì, voglio davvero dare al mio gioco un aspetto retrò pixelato!"), che ha una risoluzione dello schermo di 480x320 pixel, allora devi lavorare a metà della risoluzione in questo caso sarà di 240x160 pixel.

Apri un nuovo documento Photoshop ( File → Nuovo...) e imposta la dimensione in modo che corrisponda alla dimensione della schermata di gioco, quindi seleziona la dimensione del tuo personaggio.

Ogni cella è di 32x32 pixel!

Ho scelto 32x32px non solo perché è ottimo per le dimensioni dello schermo che ho scelto, ma anche perché 32x32px è anche un multiplo di 2, utile per i motori giocattolo (le dimensioni dei riquadri sono spesso multipli di 2, le trame si allineano). eccetera.

Anche se il motore che stai utilizzando supporta qualsiasi dimensione dell'immagine, puoi sempre provare a lavorare con un numero pari di pixel. In questo caso, se l'immagine deve essere ridimensionata, la dimensione sarà meglio suddivisa, con conseguente migliore performance.

Come disegnare un personaggio Pixel Art

Pixel Art è noto per essere una grafica nitida e di facile lettura: puoi definire tratti del viso, occhi, capelli, parti del corpo con pochi punti. Tuttavia, la dimensione dell'immagine complica il compito: più piccolo è il tuo personaggio, più difficile è disegnarlo. Per affrontare il compito in modo più pratico, scegli quale sarà la dimensione più piccola dei tratti caratteriali. Scelgo sempre gli occhi perché sono uno dei modi migliori per dare vita a un personaggio.

In Photoshop selezionare strumento matita(Strumento matita). Se non riesci a trovarlo, tieni premuto lo strumento strumento pennello(Strumento pennello) e lo vedrai immediatamente (dovrebbe essere il secondo nell'elenco). Dovrai solo ridimensionarlo a 1px (puoi fare clic nella barra delle opzioni dello strumento e ridimensionarlo, o semplicemente tenere premuto il tasto [).

Inoltre avrai bisogno Strumento Cancella(Strumento gomma), quindi fai clic su di esso (o premi il tasto E) e modifica le sue impostazioni selezionando dall'elenco a discesa Modalità:(Modalità:) Matita(Matita) (poiché non c'è dithering in questa modalità).

Ora iniziamo a pixelare! Disegna le sopracciglia e gli occhi come mostrato nell'immagine qui sotto:

ehi! sono pixelata!!

Potresti già iniziare con Lineart (dove il disegno è fatto con linee), ma un modo più pratico è disegnare la sagoma di un personaggio. La buona notizia è che non è necessario essere dei professionisti in questa fase, basta provare a immaginare le dimensioni delle parti del corpo (testa, corpo, braccia, gambe) e la posa iniziale del personaggio. Prova a fare qualcosa di simile in grigio:

Non è necessario essere un professionista in questa fase

Nota che ho anche lasciato uno spazio vuoto. Non hai davvero bisogno di riempire l'intera tela, lascia spazio per fotogrammi futuri. In questo caso, sarà molto utile mantenere la stessa dimensione della tela per tutti.

Una volta completata la silhouette, è il momento di farlo . Ora devi stare più attento con il posizionamento dei pixel, quindi per ora non preoccuparti di vestiti, armature, ecc.. Per essere al sicuro, puoi aggiungere un nuovo livello in modo da non perdere mai la tua silhouette originale.

Se ritieni che lo strumento Matita sia troppo lento per disegnare, puoi sempre usarlo (Strumento Linea), ricorda solo che non sarai in grado di posizionare i pixel con la stessa precisione con cui faresti con una matita. Dovrai configurare come di seguito:

Selezionare tenendo premuto Strumento rettangolo(Strumento rettangolo)

Vai al pannello delle opzioni dello strumento, nell'elenco a discesa Scegli la modalità strumento(Modalità disegno contorno) seleziona Pixel , cambia Peso(Larghezza) di 1px (se non è già stato fatto) e deseleziona Antialiasing(Levigante). Ecco come dovresti essere:

Si prega di notare che non ho creato il contorno inferiore per i piedi. Questo è facoltativo, poiché i piedi non sono una parte così importante delle gambe per farli risaltare e salvi una riga di pixel sulla tela.

Applicazione di colori e ombre

Ora sei pronto per iniziare a colorare il nostro personaggio. Non preoccuparti di scegliere i colori giusti, sarà molto facile cambiarli in seguito, assicurati solo che ognuno abbia il "suo colore". Usa i colori predefiniti nella scheda Campioni(Finestra → Campioni).

Colora il tuo personaggio come mostrato di seguito (ma sentiti libero di essere creativo e usa i tuoi colori!)

Un buon colore contrastante migliora la leggibilità della tua risorsa!

Nota che non ho ancora tracciato alcun contorno per i vestiti o per i capelli. Ricorda sempre: salva quanti più pixel possibile dai contorni non necessari!

Non perdere tempo a dipingere ogni pixel. Per velocizzare le cose, usa le linee per lo stesso colore o strumento di riempimento(Strumento Secchio di vernice) per riempire gli spazi vuoti. A proposito, dovrà anche essere configurato. Selezionare strumento di riempimento nella barra degli strumenti (o semplicemente premi il tasto G) e cambia tolleranza(Tolleranza) su 0 e deselezionare Antialiasing(Levigante).

Se hai mai bisogno di usare Strumento bacchetta magica(Strumento bacchetta magica) - uno strumento molto utile che seleziona tutti i pixel con lo stesso colore, quindi lo imposta allo stesso modo dello strumento "Secchiello" - nessuna tolleranza e anti-aliasing.

Il passaggio successivo, che richiederà una certa conoscenza da parte tua, è schiarire e sfumare. Se non sai come mostrare i lati chiari e oscuri, di seguito ti darò una piccola istruzione. Se non hai il tempo o l'inclinazione per impararlo, puoi saltare questo passaggio e andare alla sezione Ravviva la tua tavolozza, perché dopo tutto, puoi semplicemente far sembrare la tua sfumatura come il mio esempio!

Usa la stessa fonte di luce per l'intera risorsa

Prova a dare i contorni come vuoi / puoi, perché dopo ciò la risorsa inizia a sembrare più interessante. Ad esempio, ora puoi vedere il naso, gli occhi accigliati, la massa di capelli, le pieghe dei pantaloni, ecc. Puoi anche aggiungere dei punti luce su di esso, sembrerà ancora migliore:

Usa la stessa fonte di luce durante l'ombreggiatura

Ed ora, come promesso, una piccola guida su luci ed ombre:

Ravviva la tua tavolozza

Molte persone usano i colori della tavolozza predefinita, ma poiché molte persone usano questi colori, li vediamo in molti giochi.

Photoshop ha una vasta selezione di colori nella tavolozza standard, ma non fare troppo affidamento su di essa. È meglio creare i propri colori facendo clic sulla tavolozza principale nella parte inferiore della barra degli strumenti.

Quindi, nella finestra Color Picker, sfoglia la barra laterale destra per selezionare un colore e l'area principale per selezionare la luminosità desiderata (più chiara o più scura) e la saturazione (più succosa o più opaca).

Una volta trovato quello giusto, fare clic su OK e riconfigurare lo strumento Secchiello. Non preoccuparti, puoi semplicemente deselezionare la casella di controllo "Contiguo" e quando dipingi con il nuovo colore, verranno dipinti anche tutti i nuovi pixel con lo stesso colore di sfondo.

Questo è un altro motivo per cui è importante lavorare con un numero ridotto di colori e utilizzare sempre lo stesso colore per lo stesso elemento (camicia, capelli, elmo, armatura, ecc.). Ma non dimenticare di usare colori diversi per altre aree, altrimenti il nostro disegno sarà troppo colorato!

Deseleziona "Contiguo" per riempire i pixel selezionati con lo stesso colore

Cambia i colori se vuoi e ottieni una colorazione del personaggio più glamour! Puoi persino ricolorare i contorni, assicurati solo che si fondano bene con lo sfondo.

Infine, esegui un test del colore di sfondo: crea un nuovo livello sotto il tuo personaggio e riempilo con colori diversi. Questo è necessario per assicurarti che il tuo personaggio sia visibile su sfondi chiari, scuri, caldi e freddi.

Come puoi vedere, ho disattivato l'anti-aliasing in tutti gli strumenti che ho utilizzato finora. Non dimenticare di farlo anche in altri strumenti, ad esempio, Tendone ellittico(Area di selezione ovale) e Lazo(Lazo).

Con questi strumenti, puoi facilmente ridimensionare le parti selezionate o persino ruotarle. Per fare ciò, utilizzare qualsiasi strumento di selezione (o premere il tasto M) per selezionare un'area, fare clic con il tasto destro e selezionare Trasformazione libera(Trasformazione libera) o semplicemente premi Ctrl + T . Per modificare le dimensioni dell'area selezionata, trascinare una delle maniglie situate lungo il perimetro della cornice di trasformazione. Per ridimensionare la selezione mantenendo le proporzioni, tieni premuto il tasto Maiusc e trascina una delle maniglie d'angolo.

Tuttavia, Photoshop uniforma automaticamente tutto ciò che viene modificato con il file Trasformazione libera quindi prima di modificare vai a Modifica → Preferenze → Generale(Ctrl + K) e cambia interpolazione di immagini(Interpolazione immagine) attivata Quartiere più vicino(Il vicino più prossimo). In poche parole, a Quartiere più vicino la nuova posizione e dimensione viene calcolata in modo molto approssimativo, non vengono applicati nuovi colori o trasparenze ei colori scelti vengono mantenuti.

Integrare Pixel Art Drawing nei giochi per iPhone

In questa sezione imparerai come integrare la nostra pixel art in un gioco per iPhone utilizzando il framework di gioco Cocos2d. Perché sto considerando solo iPhone? Perché, grazie a una serie di articoli su Unity, (ad esempio: o Gioco nello stile di Jetpack Joyride in Unity 2D) sai già come lavorare con loro in Unity e da articoli su Crafty (Giochi browser: Snake) e Impact (Introduzione alla creazione di giochi per browser su Impact) hai imparato come incorporarli su una tela e creare giochi per browser.

Se sei nuovo in Cocos2D o nello sviluppo di iPhone in generale, ti suggerisco di iniziare con uno dei tutorial di Cocos2d e iPhone. Se hai installato Xcode e Cocos2d, continua a leggere!

Crea un nuovo progetto iOS → cocos2d v2.x → modello iOS cocos2d, chiamalo PixelArt e seleziona iPhone come dispositivo. Trascina la pixel art creata, ad esempio: sprite_final.png nel tuo progetto, quindi apri HelloWorldLayer.m e sostituire il metodo di inizializzazione con il seguente:

-(id) init ( if((self=)) ( CCSprite * hero = ; hero.position = ccp(96, 96); hero.flipX = YES; ; ) return self; )

Posizioniamo lo sprite sul lato sinistro dello schermo e lo ruotiamo in modo che sia rivolto verso destra. Compila, esegui e poi vedrai il tuo sprite sullo schermo:

Tuttavia, ricorda, come abbiamo discusso in precedenza in questo tutorial, volevamo aumentare artificialmente i pixel in modo che ogni pixel fosse notevolmente diverso dagli altri. Quindi aggiungi questa nuova riga all'interno del metodo di inizializzazione:

Scala Eroe = 2.0;

Niente di complicato, vero? Compila, esegui e... aspetta, il nostro sprite è sfocato!

Questo perché, per impostazione predefinita, Cocos2d appiattisce il disegno quando lo ridimensiona. Non ne abbiamo bisogno, quindi aggiungi la seguente riga:

Questa riga configura Cocos2d per ridimensionare le immagini senza anti-aliasing, quindi il nostro ragazzo sembra ancora "pixelato" Compila, esegui e... sì, funziona!

Nota i vantaggi dell'utilizzo della grafica Pixel Art: possiamo utilizzare un'immagine più piccola di quella visualizzata sullo schermo, risparmiando molta memoria delle texture. Non abbiamo nemmeno bisogno di creare immagini separate per i display retina!

E cosa c'è dopo?

Spero che questo tutorial ti sia piaciuto e che tu abbia imparato qualcosa in più sulla pixel art! Prima di separarti, voglio darti un consiglio:

Cerca sempre di evitare l'uso di anti-aliasing, gradienti o troppi colori per le tue risorse. Questo è per il tuo bene, specialmente se sei ancora un principiante.
Se vuoi VERAMENTE emulare lo stile retrò, dai un'occhiata all'arte nei giochi per console a 8 o 16 bit.
Alcuni stili non usano contorni scuri, altri non tengono conto dell'influenza della luce o dell'ombra. Tutto dipende dallo stile! Nella nostra lezione non abbiamo disegnato ombre, ma questo non significa che non dovresti usarle.

Ad un principiante la Pixel Art sembra essere la grafica più facile da imparare, ma in realtà non è così semplice come sembra. Il modo migliore per migliorare le tue abilità è esercitarsi, esercitarsi, esercitarsi. Consiglio vivamente di pubblicare il tuo lavoro sui forum di Pixel Art affinché altri artisti ti diano consigli: è un ottimo modo per migliorare la tua tecnica! Inizia in piccolo, esercitati duramente, ottieni feedback e puoi creare un gioco fantastico che ti porterà un sacco di soldi e gioia!

Nel 20 ° secolo, i giochi per computer sono diventati un'ampia area di applicazione della grafica pixel, soprattutto negli anni '90. Con lo sviluppo della grafica 3D, la pixel art iniziò a declinare, ma poi tornò a vivere grazie allo sviluppo del web design, all'avvento dei telefoni cellulari e delle applicazioni mobili.

La pixel art è una tecnica speciale per creare un'immagine in forma digitale, eseguita in editor di grafica raster, in cui l'artista lavora con l'unità più piccola di un'immagine digitale raster: un pixel. Tale immagine è caratterizzata da una bassa risoluzione, alla quale ogni pixel diventa chiaramente visibile. La pixel art viene eseguita a lungo e scrupolosamente, a seconda della complessità del disegno, pixel per pixel.

Regole di base della pixel art

La componente più importante della pixel art è il cosiddetto disegno al tratto, in altre parole i suoi contorni. La pixel art viene eseguita utilizzando linee: linee rette e curve.

linee rette

La regola per disegnare linee in pixel art è che dovrebbero essere costituite da segmenti che si spostano lateralmente di un pixel mentre disegni. Evita l'errore principale degli artisti di pixel art principianti: i pixel non devono toccarsi, formando un angolo retto.

Nel caso delle linee rette, puoi semplificare il tuo compito utilizzando uno dei ben noti modelli di linee oblique:

Come si può vedere dalla figura, tutte le linee rette presentate su di esso sono costituite dagli stessi segmenti di pixel, spostati lateralmente di una distanza di un pixel, e le più popolari sono segmenti di uno, due e quattro pixel. Tali semplici linee rette sono chiamate linee "ideali" nella pixel art.

Le linee rette possono avere uno schema diverso, ad esempio puoi alternare segmenti di due pixel con un segmento di un pixel, ma tali linee non sembreranno così belle, specialmente quando l'immagine viene ingrandita, sebbene non violino le regole del pixel arte.

linee curve

Le linee rette sono più facili da disegnare perché evitano i nodi, cosa che non accade con le linee curve. La loro costruzione è più difficile, ma le linee curve devono essere tracciate molto più spesso di quelle diritte.

Oltre allo stesso divieto di formare angoli retti dai pixel, quando si disegnano linee curve, è necessario ricordare la natura del loro spostamento. La lunghezza dei segmenti di pixel dovrebbe cambiare in modo uniforme, gradualmente, aumentando e diminuendo uniformemente. La grafica pixel non consente nodi.

È improbabile che tu possa disegnare una linea curva perfetta con un solo movimento della mano senza violare alcuna regola, quindi puoi ricorrere a due metodi: disegnare linee disegnando un pixel dopo l'altro, oppure disegnare una curva regolare e poi correggerla rimuovendo extra pixel dal fotogramma finito.

dithering

Nella pixel art esiste qualcosa come il dithering. È un certo modo di mescolare pixel di colori diversi per creare un effetto di transizione del colore.

Il metodo di dithering più popolare consiste nel disporre i pixel in uno schema a scacchiera:

Questo metodo deve il suo aspetto a limitazioni tecniche nelle tavolozze dei colori, perché per ottenere, ad esempio, un colore viola, era necessario disegnare pixel rossi e blu in uno schema a scacchiera:

E successivamente, il dithering è stato spesso utilizzato per trasmettere il volume dovuto alla luce e all'ombra nelle immagini:

Affinché la pixel art con retinatura funzioni correttamente, l'area di fusione deve essere larga almeno due pixel.

Software per pixelart

Per padroneggiare la creazione di opere d'arte in modo pixel, puoi utilizzare qualsiasi editor grafico che supporti questo tipo di disegno. Tutti gli artisti lavorano con programmi diversi in base alle loro preferenze.

Fino ad oggi, molte persone preferiscono disegnare con i pixel nel noto programma standard del sistema operativo Windows: Microsoft Paint. Questo programma è davvero facile da imparare, ma questo è anche il suo svantaggio: è piuttosto primitivo, ad esempio, non supporta il lavoro con i livelli e la loro trasparenza.

Un altro programma di pixel art facile da usare, la cui versione demo può essere trovata su Internet in modo assolutamente gratuito, è GraphicsGale. Lo svantaggio del programma è, forse, il fatto che non supporta il salvataggio di pixel art nel formato .gif.

I possessori di Mac possono provare il programma gratuito Pixen. E gli utenti del sistema operativo Linux dovrebbero testare da soli i programmi GrafX2 e JDraw.

E, naturalmente, un'ottima opzione per creare pixel art è Adobe Photoshop, che ha un'ampia funzionalità, ti consente di lavorare con i livelli, supporta la trasparenza e fornisce un lavoro semplice con una tavolozza. Con l'aiuto di questo programma, esamineremo semplici esempi su come disegnare pixel art da soli.

Come disegnare Pixel Art in Photoshop

Come per le belle arti tradizionali, la forma, l'ombra e la luce sono importanti nella pixel art, quindi prima di imparare a disegnare pixel art, prenditi la briga di familiarizzare con le basi del disegno: esercitati a disegnare con la matita su carta.

Disegno "Palloncino"

Iniziamo con il più semplice: disegna un normale palloncino. Crea un nuovo file in Photoshop con una risoluzione dello schermo di 72 dpi. Non ha senso impostare grandi dimensioni dell'immagine: questa è pixel art. Seleziona un pennello, duro e opaco, imposta la dimensione su 1 pixel.

Disegna un piccolo semiarco curvo da sinistra a destra, guidandolo dal basso verso l'alto. Ricorda le regole della pixel art: mantieni le stesse proporzioni dei segmenti, spostali di lato di un pixel, senza lasciare pieghe e angoli retti. Quindi rispecchia questo arco disegnando la parte superiore del palloncino.

Con lo stesso principio, disegna il fondo della palla e il filo. Riempi la palla di rosso usando lo strumento Riempi. Ora resta da aggiungere volume: la nostra palla sembra troppo piatta. Disegna una striscia rosso scuro sul lato in basso a destra del fumetto, quindi applica il dithering a quest'area. Nell'angolo in alto a sinistra della palla, disegna un bagliore di pixel bianchi.

Guarda com'è facile: la palla è pronta!

Figura "Robot"

E ora proviamo a disegnare un'immagine in modo tradizionale, e solo allora ripuliremo quei pixel che violano le regole della pixel art.

Apri un nuovo documento, fai uno schizzo approssimativo del futuro robot:

Ora puoi ripulire tutto ciò che si frappone e disegnare i pixel dove necessario:

Allo stesso modo, disegna la parte inferiore del corpo del robot. Non perdere l'opportunità di tracciare linee "perfette" nei punti giusti.

Dettaglia il busto del robot. Molti artisti esperti ti consigliano di prepararti una tavolozza prima di iniziare a lavorare, un set di colori che utilizzerai durante la creazione di lavori in modo pixel. Ciò consente di ottenere la massima integrità dell'immagine. Crea una tavolozza su un'area libera dell'area di lavoro di Photoshop, ad esempio sotto forma di quadrati o macchie di colore. Successivamente, per selezionare il colore desiderato, cliccaci sopra con lo strumento Contagocce.

Puoi iniziare a riempire i contorni. "Decora" il corpo del robot con il colore principale. Il nostro colore è il blu lavanda.

Cambia il colore del contorno: riempilo di blu scuro. Decidi dove si trova la fonte di luce nel tuo disegno. Lo abbiamo posizionato da qualche parte sopra ea destra davanti al robot. Disegniamo il petto del nostro personaggio, aggiungendo volume:

Sul lato destro, segna l'ombra più profonda nella figura, passando lungo il contorno del busto. Da questa ombra, dai bordi al centro, disegna un'ombra più chiara che scompare nelle aree previste illuminate dalla sorgente luminosa:

Aggiungi evidenziazioni al robot in tutte le aree che dovrebbero riflettere la luce:

Dai alle gambe del robot un aspetto cilindrico con ombre e luci. Allo stesso modo, fai dei buchi dai cerchi sul petto del robot:

Ora miglioriamo l'immagine aggiungendo l'elemento di pixel art che abbiamo considerato in precedenza - il dithering - alle aree d'ombra del busto.

Il dithering può essere omesso sui punti salienti, così come sulle gambe: sono già troppo piccoli. Con l'aiuto di pixel scuri e chiari, disegna una fila di rivetti sulla testa del robot invece dei denti e disegna anche un'antenna divertente. Ci è sembrato che la mano del robot non fosse disegnata molto bene: se riscontri lo stesso problema, ritaglia l'oggetto in Photoshop e spostalo verso il basso.

Ecco fatto: il nostro divertente robot pixel è pronto!

E con l'aiuto di questo video imparerai come realizzare animazioni pixel art in Photoshop:

Prendilo, dillo ai tuoi amici!

Arte dei pixel. Le migliori opere e illustratori

Città. Autore: Zoggles

Castello delle fiabe. Autore: Tinuleaf

borgo medievale. Autore: DocDoom

Giardini pensili di Babilonia. Autore: Eclissi lunare

Quartiere residenziale. Autore:

pixelart(scritto senza trattino) o pixelart- una direzione dell'arte digitale, che consiste nel creare immagini a livello di pixel (cioè l'unità logica minima di cui è composta un'immagine). Non tutte le immagini raster sono pixel art, sebbene siano tutte composte da pixel. Perché? Perché alla fine, il concetto di pixel art include non tanto il risultato quanto il processo di creazione di un'illustrazione. Pixel per pixel, e basta. Se scatti una foto digitale, riducila notevolmente (in modo che i pixel diventino visibili) e affermi di averla disegnata da zero: questo sarà un vero falso. Anche se ci saranno sicuramente degli ingenui sempliciotti che ti loderanno per il tuo duro lavoro.

Ora non si sa esattamente quando abbia avuto origine questa tecnica, le radici si perdono da qualche parte nei primi anni '70. Tuttavia, la tecnica di comporre immagini da piccoli elementi risale a forme d'arte molto più antiche, come mosaici, punto croce, tessitura di tappeti e perline. La stessa frase "pixel art" come definizione di pixel art è stata usata per la prima volta in un articolo di Adele Goldberg e Robert Flegal sulla rivista Communications of the ACM (dicembre 1982).

La pixel art ha ricevuto la più ampia applicazione nei giochi per computer, il che non sorprende: ha permesso di creare immagini poco impegnative per le risorse e allo stesso tempo dall'aspetto davvero bello (allo stesso tempo, richiedono molto tempo dal artista e richiedono determinate abilità, e quindi implicano una buona paga). Il periodo di massimo splendore, il punto più alto dello sviluppo, è ufficialmente chiamato videogiochi su console di 2a e 3a generazione (primi anni '90). Ulteriori progressi nella tecnologia, l'apparizione del primo colore a 8 bit, e poi True Color, lo sviluppo della grafica tridimensionale: tutto questo nel tempo ha spinto la pixel art sullo sfondo e sui terzi piani, e poi ha iniziato a sembrare completamente quel pixel l'arte era finita.

Stranamente, ma è stato il progresso scientifico e tecnologico di Mr. a spingere la grafica pixel alle ultime posizioni a metà degli anni '90, per poi restituirla al gioco, rivelando al mondo dispositivi mobili sotto forma di telefoni cellulari e PDA. Dopotutto, non importa quanto sia utile un dispositivo nuovo di zecca, sappiamo tutti che se non puoi almeno giocare a solitario su di esso, è inutile. Ebbene, dove c'è uno schermo a bassa risoluzione, c'è la pixel art. Come si suol dire, bentornato.

Naturalmente, vari elementi di mentalità retrograda hanno svolto il loro ruolo nel ritorno della grafica pixel, che amano annoiare i bei vecchi giochi dell'infanzia, dicendo: "Oh, non lo fanno adesso"; esteti che sono in grado di apprezzare la bellezza della pixel art e sviluppatori indipendenti che non percepiscono le bellezze grafiche moderne (e talvolta, anche se raramente, semplicemente non sanno come implementarle nei propri progetti), motivo per cui scolpiscono la pixel art . Ma non scartiamo ancora progetti puramente commerciali: applicazioni per dispositivi mobili, pubblicità e web design... Quindi ora la pixel art, come si suol dire, è diffusa in circoli ristretti e si è guadagnata una sorta di status artistico "non per tutti" . E questo nonostante il fatto che per un semplice profano sia estremamente accessibile, perché per lavorare con questa tecnica è sufficiente avere a portata di mano un computer e un semplice editor grafico! (la capacità di disegnare, tra l'altro, anche non fa male) Basta parole, arriva al punto!

2. Strumenti.

Di cosa hai bisogno per creare pixel art? Come dicevo sopra basta un computer e un qualsiasi editor grafico in grado di lavorare a livello di pixel. Puoi disegnare ovunque, anche su Game Boy, anche su Nintendo DS, anche in Microsoft Paint (un'altra cosa è che disegnare in quest'ultimo è estremamente scomodo). Esistono moltissimi editor raster, molti dei quali sono gratuiti e abbastanza funzionali, in modo che ognuno possa decidere autonomamente il software.

Disegno in Adobe Photoshop perché è conveniente e perché è passato molto tempo. Non mentirò e dirò, borbottando la mia dentiera, che "Ricordo che Photoshop era ancora molto piccolo, era sul Macintosh, ed era con il numero 1.0". Non lo era. Ma ricordo Photoshop 4.0 (e anche su Mac). E così per me la questione della scelta non è mai stata. E quindi no, no, ma darò consigli su Photoshop, soprattutto dove le sue capacità aiuteranno a semplificare notevolmente la creatività.

Quindi, hai bisogno di qualsiasi editor grafico che ti permetta di disegnare con uno strumento in un pixel quadrato (i pixel possono anche essere non quadrati, ad esempio rotondi, ma al momento non ci interessano). Se il tuo editor supporta qualsiasi set di colori, bene. Se ti consente anche di salvare i file, semplicemente fantastico. Sarebbe bello sapere come lavorare con i livelli, poiché quando si lavora su un'immagine piuttosto complessa, è più conveniente scomporre i suoi elementi in diversi livelli, ma in generale è una questione di abitudine e convenienza.

Dobbiamo cominciare? Probabilmente stai aspettando un elenco di alcuni trucchi segreti, consigli che ti insegneranno a disegnare pixel art? E la verità è che non ce n'è molto. L'unico modo per imparare a disegnare pixel art è disegnare te stesso, provare, provare, non aver paura e sperimentare. Sentiti libero di copiare il lavoro di altre persone, non aver paura di sembrare poco originale (ma non far passare il lavoro di qualcun altro come tuo, hehe). Analizza attentamente e con attenzione il lavoro dei maestri (non il mio) e disegna, disegna, disegna. Diversi link utili ti aspettano alla fine dell'articolo.

3. Principi generali.

Tuttavia, ci sono alcuni principi generali che vale la pena conoscere. Ce ne sono davvero pochi, li chiamo "principi" e non leggi, perché sono di natura piuttosto consultiva. Dopotutto, se riesci a disegnare un'ingegnosa pixel art aggirando tutte le regole, a chi importa?

Il principio più basilare può essere formulato come segue: l'unità minima di un'immagine è un pixel e, se possibile, tutti gli elementi della composizione dovrebbero essere proporzionati ad esso. Decifrerò: tutto ciò che disegni è costituito da pixel e il pixel dovrebbe essere letto in ogni cosa. Ciò non significa che non possano esserci elementi nell'immagine, ad esempio 2x2 pixel o 3x3. Ma è ancora preferibile creare un'immagine da singoli pixel.

Il tratto e in generale tutte le linee dell'immagine dovrebbero avere uno spessore di un pixel (con rare eccezioni).

Non sto affatto dicendo che questo sia sbagliato. Ma non è ancora molto carino. E per renderlo bello, ricorda un'altra regola: disegna senza pieghe, arrotonda senza intoppi. Esistono cose come i nodi: frammenti che sono fuori servizio, danno alle linee un aspetto irregolare e frastagliato (nell'ambiente di lingua inglese dei pixel artist sono chiamati jaggies):

I nodi privano il disegno della levigatezza e della bellezza naturali. E se i frammenti 3, 4 e 5 sono evidenti e facilmente correggibili, la situazione è più complicata con gli altri: la lunghezza di un singolo pezzo della catena è rotta lì, sembrerebbe una sciocchezza, ma una sciocchezza notevole. Ci vuole un po' di pratica per imparare a vedere ed evitare questi luoghi. Kink 1 viene eliminato dalla linea perché è un singolo pixel, mentre nell'area in cui è incuneato, la linea è composta da segmenti di 2 pixel. Per sbarazzarmene, ho ammorbidito l'ingresso della curva nella curva estendendo il segmento superiore a 3px e ridisegnando l'intera linea in segmenti di 2px. Le interruzioni 2 e 6 sono identiche tra loro: si tratta già di frammenti di 2 pixel di lunghezza in aree costruite da singoli pixel.

Una serie elementare di esempi di linee oblique, che si possono trovare in quasi tutti i manuali di pixel art (il mio non fa eccezione), aiuterà a evitare tali interruzioni durante il disegno:

Come puoi vedere, una linea retta è composta da segmenti della stessa lunghezza, spostati di un pixel mentre viene disegnata: questo è l'unico modo per ottenere l'effetto di linearità. I metodi di costruzione più comuni sono con una lunghezza del segmento di 1, 2 e 4 pixel (ce ne sono altri, ma le opzioni presentate dovrebbero essere sufficienti per implementare quasi tutte le idee artistiche). Di questi tre, il più popolare può essere tranquillamente chiamato la lunghezza del segmento di 2 pixel: disegna un segmento, sposta la penna di 1 pixel, disegna un altro segmento, sposta la penna di 1 pixel, disegna un altro segmento:

Facile, vero? Ci vuole solo un'abitudine. Sapere come disegnare linee oblique con incrementi di 2 pixel aiuterà con gli isometrici, quindi daremo un'occhiata più da vicino la prossima volta. In generale, le linee rette sono fantastiche, ma solo fino a quando non si presenta il compito di disegnare qualcosa di miracoloso. Qui abbiamo bisogno di curve e molte curve diverse. E adottiamo una semplice regola per arrotondare le linee curve: la lunghezza degli elementi della curva dovrebbe diminuire/aumentare gradualmente.

L'uscita dalla linea retta all'arrotondamento avviene senza intoppi, ho indicato la lunghezza di ogni segmento: 5 pixel, 3, 2, 2, 1, 1, ancora 2 (già verticale), 3, 5 e oltre. Non necessariamente il tuo caso utilizzerà la stessa sequenza, tutto dipende dalla scorrevolezza richiesta. Un altro esempio di arrotondamento:

Ancora una volta, evitiamo i nodi che rovinano così tanto l'immagine. Se vuoi controllare il materiale appreso, qui ho una skin per Winamp disegnata da un autore sconosciuto, uno spazio vuoto:

Ci sono errori grossolani nell'immagine e solo arrotondamenti non riusciti e vengono rilevati nodi: prova a correggere l'immagine in base a ciò che già sai. Questo è tutto per me con le linee, propongo di disegnare un po '. E non lasciarti ingannare dalla semplicità degli esempi, puoi imparare a disegnare solo disegnando, anche cose così semplici.

4.1. Disegniamo una bottiglia con acqua viva.

1. La forma dell'oggetto, mentre non puoi usare il colore.

2. Liquido rosso.

3. Modificare il colore del vetro in blu, aggiungere aree ombreggiate all'interno della bolla e un'area chiara sulla superficie prevista del liquido.

4. Aggiungere evidenziazioni bianche sulla bolla e un'ombra rosso scuro larga 1 pixel sulle aree liquide che delimitano le pareti della bolla. Sembra buono, vero?

5. Allo stesso modo, disegniamo una bottiglia con un liquido blu - qui lo stesso colore del vetro, più tre sfumature di blu per il liquido.

4.2. Disegniamo un'anguria.

Disegniamo un cerchio e un semicerchio: questi saranno un'anguria e una fetta ritagliata.

2. Segniamo il ritaglio sull'anguria stessa e sulla fetta - il confine tra la crosta e la polpa.

3. Riempi. Colori dalla tavolozza, la tonalità media del verde è il colore della crosta, il rosso medio è il colore della polpa.

4. Denotare l'area di transizione dalla buccia alla polpa.

5. Strisce chiare su un'anguria (finalmente sembra se stesso). E, naturalmente, semi! Se incroci un'anguria con gli scarafaggi, si diffonderanno.

6. Ricordiamo. Usiamo un colore rosa pallido per indicare le luci sopra i semi in una sezione, e disponendo i pixel in uno schema a scacchiera, otteniamo una sorta di volume dalla sezione ritagliata (il metodo è chiamato dithering, ne parleremo più avanti). Usiamo una tinta rosso scuro per indicare i punti ombreggiati nella sezione dell'anguria e verde scuro (di nuovo, pixel a scacchiera) per dare volume all'anguria stessa.

5. Dithering.

Il dithering, o blending, è la tecnica di miscelazione dei pixel in uno schema nettamente ordinato (non sempre) in due aree confinanti di colori diversi. Il modo più semplice, più comune ed efficace è alternare i pixel in uno schema a scacchiera:

La ricezione è nata per (o meglio contraria) limitazioni tecniche - su piattaforme con palette limitate, il dithering ha permesso, mescolando pixel di due colori diversi, di ottenerne un terzo che non era nella palette:

Ora, in un'era di possibilità tecniche illimitate, molti dicono che la necessità del dithering è scomparsa da sola. Tuttavia, un suo uso corretto può conferire al tuo lavoro un caratteristico stile retrò che tutti gli appassionati di vecchi videogiochi riconosceranno. Personalmente, mi piace usare il dithering. Non lo conosco molto bene, ma mi piace.

Altre due opzioni per il dithering:

Cosa devi sapere sul dithering per poterlo usare. La larghezza minima della zona di fusione deve essere di almeno 2 pixel (quelle stesse pedine). Di più è possibile. È meglio non fare di meno.

Di seguito è riportato un esempio di cattivo dithering. Nonostante il fatto che una tale tecnica possa essere trovata spesso sugli sprite dei videogiochi, è necessario essere consapevoli del fatto che lo schermo TV ha notevolmente levigato l'immagine e un tale pettine, e anche in movimento, non è stato fissato dall'occhio:

Bene, basta teoria. Ti consiglio di esercitarti un po' di più.

La pixel art può essere disegnata in qualsiasi programma di grafica raster, è una questione di preferenze ed esperienza personali (oltre che di capacità finanziarie, ovviamente). Qualcuno usa il Paint più semplice, io lo faccio in Photoshop, perché, in primo luogo, ci lavoro da molto tempo e, in secondo luogo, mi sento più a mio agio lì. In qualche modo ho deciso di provare Paint.NET gratuito, non mi è piaciuto: è improbabile che con un'auto che riconosce un'auto straniera con cambio automatico a Zaporozhets si sieda. Il mio datore di lavoro mi fornisce software con licenza, quindi ho la coscienza pulita davanti ad Adobe Corporation ... Anche se i prezzi dei loro programmi sono impensabili e bruciano all'inferno per questo.

1. Preparazione al lavoro.

Crea un nuovo documento con qualsiasi impostazione (lascia che sia largo 60 pixel, alto 100 pixel). Lo strumento principale di un pixel artist è una matita ( Strumento matita, richiamato da hotkey B). Se la barra degli strumenti ha un pennello abilitato (e un'icona raffigurante un pennello), passaci sopra con il mouse, tieni premuto LMB- apparirà un piccolo menu a discesa in cui selezionare una matita. Imposta la dimensione della penna su 1 pixel (nel pannello superiore a sinistra, un menu a discesa Spazzola):