Gli sviluppatori indie spesso devono ricoprire più ruoli: game designer, programmatori, compositori, artisti. E quando si tratta di visual design, molti optano per il pixel art, che all'apparenza sembra semplice. Ma per realizzare qualcosa di bello servono molta esperienza e abilità specifiche. Ho trovato un tutorial per chi ha appena iniziato a esplorare le basi di questo stile: con descrizioni di software specializzati e tecniche di disegno tramite l'esempio di due sprite.
Sfondo
Il pixel art è una forma d'arte digitale in cui le modifiche vengono effettuate a livello di pixel. È principalmente associato alla grafica dei videogiochi degli anni '80 e '90. All'epoca, gli artisti dovevano tenere conto delle limitazioni in termini di memoria e bassa risoluzione. Oggi, il pixel art è ancora popolare nei giochi e come stile artistico in generale, nonostante la possibilità di creare grafica 3D realistica. Perché? Anche al di là della nostalgia, realizzare un'opera straordinaria all'interno di tali rigide limitazioni rappresenta una sfida gradita e significativa.
La barriera all'ingresso nel pixel art è relativamente bassa rispetto all'arte tradizionale e alla grafica 3D, il che attrae sviluppatori indie. Ma questo non significa affatto che sarà facile finire un gioco in questo stile. Ho visto molti sviluppatori indie con metroidvania in pixel art su piattaforme di crowdfunding. Pensavano di completarlo in un anno, ma in realtà ci volevano ancora sei anni.
Metal Slug 3 (Arcade). SNK, 2000
Il pixel art a quel livello, che la maggior parte desidera creare, richiede molto tempo, e ci sono poche guide brevi. Lavorando con un modello 3D, puoi ruotarlo, deformarlo, muovere parti singole, copiare animazioni da un modello all'altro e così via. Il pixel art di alto livello richiede sempre una grande quantità di sforzo per il posizionamento meticoloso dei pixel in ogni fotogramma.
In generale, ho avvisato.
Ora parliamo un po' del mio stile: principalmente disegno pixel art per videogiochi e trovo ispirazione in essi. In particolare, sono un fan di Famicom/NES, console a 16 bit e arcade degli anni '90. La pixel art dei miei giochi preferiti di quel periodo può essere descritta come vivace, sicura e pulita (ma non troppo), non è dura e minimali. In questo stile lavoro io stesso, ma puoi facilmente applicare idee e tecniche di questo tutorial per creare cose completamente diverse. Esplora i lavori di diversi artisti e crea pixel art che piace a te!
Software
Gli strumenti digitali di base per il pixel art sono Zoom e Matita, per posizionare i pixel. Ti saranno utili anche Linea, Figura, Seleziona, Sposta e Secchiello. Ci sono molti software gratuiti e a pagamento con questo set di strumenti. Parlerò dei più popolari e di quelli che uso personalmente.
Paint (gratuito)
Se hai Windows, Paint integrato è un programma semplice, ma ha tutti gli strumenti necessari per il pixel art.
(gratuito)
Un editor di pixel art sorprendentemente funzionale, che si avvia tramite browser. Puoi esportare il tuo lavoro in PNG o GIF animati. Un'ottima scelta per i principianti.
(gratuito)
GraphicsGale è l'unico editor di cui ho sentito parlare, progettato specificamente per il pixel art e dotato di strumenti di animazione. È stato creato dalla compagnia giapponese HUMANBALANCE. Dal 2017 è disponibile gratuitamente e continua a essere molto richiesto, nonostante la crescente popolarità di Aseprite. Sfortunatamente, funziona solo su Windows.
($)
Probabilmente il più popolare editor al momento. , molte funzionalità, supporto attivo, versioni per Windows, Mac e Linux. Se ti stai seriamente dedicando al pixel art e non hai ancora trovato l'editor giusto, potrebbe essere proprio quello di cui hai bisogno.
($$+)
GameMaker Studio 2 è un ottimo strumento 2D con un buon editor di sprite. Se vuoi creare pixel art per i tuoi giochi, è molto comodo fare tutto in un'unica programma. Attualmente sto utilizzando questo software per lavorare su , una collezione di 50 giochi retro: creo sprite e animazioni in GameMaker e tile set in Photoshop.
($$$+)
Photoshop è un software costoso, disponibile in abbonamento, non progettato per il pixel art. Non lo consiglio se non ti occupi di illustrazioni ad alta risoluzione o se non hai bisogno di fare manipolazioni complesse delle immagini, come nel mio caso. Puoi creare sprite statici e lavori in pixel, ma è piuttosto complesso rispetto a software specializzati come GraphicsGale o Aseprite.
Altro
Il mio set per il pixel art. Tutto nero, l'ho notato solo ora.
Tavoletta grafica ($$+)
Raccomando le tavolette grafiche per qualsiasi lavoro con illustrazioni digitali, per prevenire la sindrome del tunnel carpale. È molto più semplice prevenirla che curarla. Una volta che senti dolore, non farà altro che aumentare — abbi cura di te fin dall'inizio. A causa del fatto che una volta disegnavo con il mouse, ora mi risulta difficile giocare a giochi in cui devo premere i tasti. Adesso uso una Wacom Intuos Pro S.
Supporto per il polso ($)
Se non puoi acquistare un tablet, comprati almeno un supporto per il polso. A me piace di più il supporto per il polso Mueller Green Fitted. Gli altri sono o troppo stretti o offrono supporto insufficiente. I supporti possono essere ordinati facilmente online.
96×96 pixel
Final Fight. Capcom, 1989
Iniziamo! Cominciamo con lo sprite del personaggio 96×96 pixel. Per esempio, ho disegnato un orco e l'ho posizionato su uno screenshot di Final Fight (immagine sopra), per darvi un'idea della scala. Questo è grande uno sprite per la maggior parte dei giochi retro, dimensione dello screenshot: 384×224 pixel.
Con uno sprite così grande, sarà più facile mostrare la tecnica di cui voglio parlare. Inoltre, il disegno pixel per pixel somiglia di più alle forme tradizionali dell'arte (come il disegno o la pittura), che potresti conoscere meglio. Una volta apprese le tecniche di base, passeremo a sprite più piccoli.
1. Scegliamo la palette
Il pixel è un concetto molto più profondo nell'arte pixel rispetto ad altri ambiti digitali. L'arte pixel è definita dai suoi limiti, come i colori. È importante scegliere bene la palette, in quanto aiuta a definire il tuo stile. Ma all'inizio ti consiglio di non pensare troppo alle palette e di scegliere una di quelle esistenti (o semplicemente alcuni colori casuali) — potrai cambiarla facilmente in qualsiasi momento.
Per questo tutorial utilizzerò una palette di 32 colori che abbiamo creato per . Per l'arte pixel, spesso ne vengono raccolte da 32 o 16 colori. La nostra è stata sviluppata per una console immaginaria che potrebbe apparire tra Famicom e PC Engine. Puoi prendere questa o qualsiasi altra — il tutorial non dipende affatto dalla palette scelta.
2. Contorni grossolani
Iniziamo a disegnare con lo strumento Matita. Creiamo uno schizzo proprio come faremmo con una normale penna e carta. Certo, il pixel art e l'arte tradizionale si incrociano, specialmente quando si tratta di sprite così grandi. Le mie osservazioni mostrano che i bravi artisti del pixel art sanno disegnare almeno decentemente a mano e viceversa. Quindi, sviluppare le abilità di disegno è sempre utile.
3. Lavorazione dei contorni
Raffiniamo i contorni: rimuoviamo i pixel in eccesso e riduciamo lo spessore di ogni linea a un pixel. Ma cosa consideriamo esattamente in eccesso? Per rispondere a questa domanda, dobbiamo capire le linee pixelate e le irregolarità.
Irregolarità
Dobbiamo imparare a disegnare due linee di base nel pixel art: linee rette e curve. Con penna e carta si tratta di controllo muscolare, ma noi lavoriamo con piccoli blocchi colorati.
La chiave per disegnare linee pixelate corrette sono le irregolarità. Si tratta di singoli pixel o piccoli segmenti che compromettono la levigatezza della linea. Come ho già detto, un singolo pixel ha un'enorme importanza nell'arte pixel, quindi le irregolarità possono rovinare tutta l'estetica. Immaginate di tracciare una linea retta su carta e improvvisamente qualcuno colpisce il tavolo: le irregolarità nell'arte pixel appaiono proprio come una scarabocchiatura casuale.
Esempi:
Linee rette
Curve
Le irregolarità appaiono sulle curve quando la lunghezza dei segmenti della linea aumenta o diminuisce in modo non graduale.
Evitare completamente le irregolarità è impossibile: ci sono in tutti i vostri giochi retro preferiti (a meno che, ovviamente, l'arte pixel non consista esclusivamente in forme semplici). L'obiettivo è ridurre al minimo le irregolarità mostrando al contempo tutto il necessario.
4. Applichiamo i primi colori
Colora il tuo personaggio usando un riempimento o un altro strumento adatto. La palette renderà questa parte del lavoro più semplice. Se il software non prevede l'uso di palette, puoi inserirla direttamente nell'immagine, come nell'esempio sopra, e scegliere i colori con un contagocce.
Nell'angolo in basso a sinistra ho disegnato il nostro amico, ecco a voi — Shar. Con lui sarà più facile capire cosa sta accadendo in ogni fase.
5. Ombreggiatura
È tempo di aggiungere ombre — basta inserire colori più scuri nello sprite. Così l'immagine avrà un aspetto tridimensionale. Supponiamo di avere una sorgente di luce posizionata sopra l'orco, a sinistra. Quindi, sarà illuminato tutto ciò che si trova sopra e davanti al nostro personaggio. Aggiungiamo ombre in basso a destra.
Forma e volume
Se questa fase ti causa difficoltà, immagina il tuo disegno come forme tridimensionali, non solo linee e colori. Le forme esistono nello spazio tridimensionale e possono avere volume, che costruiamo attraverso le ombre. Questo aiuterà a visualizzare il personaggio senza dettagli e a pensare che sia fatto di argilla, non di pixel. L'ombreggiatura non è solo l'aggiunta di nuovi colori, è un processo di costruzione della forma. In un personaggio ben realizzato, i dettagli non nascondono le forme di base: se strizzi gli occhi, vedrai diversi grandi gruppi di luce e ombra.
Antialiasing
Ogni volta che utilizzo un nuovo colore, applico l'anti-aliasing (AA). Questo aiuta a levigare i pixel aggiungendo colori intermedi agli angoli, nei punti di contatto tra i due segmenti della linea.
I pixel grigi attenuano i "salti" nella linea. Più lungo è il segmento della linea, più lungo sarà il segmento AA.
Questo è come appare l'AA sul braccio di un orco. È necessario per ammorbidire le linee che mostrano le curvature dei suoi muscoli.
L'anti-aliasing non deve superare i limiti dello sprite che verrà utilizzato nel gioco o su uno sfondo il cui colore è sconosciuto. Ad esempio, se applichi l'AA su uno sfondo chiaro, su uno sfondo scuro l'anti-aliasing apparirà poco gradevole.
6. Contorno selettivo
In passato, i contorni erano completamente neri, il che rendeva lo sprite molto cartoonesco. L'immagine sembrava essere divisa in segmenti. Ad esempio, le linee nere sul braccio evidenziano troppo il muscolo, e il personaggio appare meno coerente.
Se lo sprite diventa più naturale e la segmentazione non è così evidente, le forme di base del personaggio saranno più facili da leggere. Per fare ciò, puoi utilizzare un contorno selettivo: sostituire parzialmente il contorno nero con uno più chiaro. Nella parte illuminata dello sprite, puoi utilizzare i colori più chiari o, dove lo sprite tocca lo spazio negativo, puoi eliminare completamente il contorno. Invece del nero, dovresti utilizzare il colore scelto per l'ombra, in modo da mantenere la segmentazione (per distinguere muscoli, pelliccia e così via).
Inoltre, a questo punto ho aggiunto ombre più scure. Ci sono tre gradazioni di verde sulla pelle dell'orco. Il colore verde più scuro può essere usato per il contorno selettivo e per l'AA.
7. Ritocchi finali
Alla fine, è bene aggiungere riflessi (i punti più luminosi sullo sprite), dettagli (orecchini, bulloni, cicatrici) e altri miglioramenti, fino a quando il personaggio non è pronto o fino a quando non si deve passare al successivo.
Ci sono diverse tecniche utili che puoi applicare in questa fase. Ruota l'immagine orizzontalmente, spesso aiuta a individuare errori nelle proporzioni e nell'ombreggiatura. Puoi anche rimuovere il colore — impostando la saturazione a zero, per comprendere dove modificare le ombre.
Creazione di rumori (dithering)
Finora abbiamo principalmente utilizzato grandi aree di ombre solide. Tuttavia, esiste un'altra tecnica — il dithering, che permette di passare da un colore all'altro senza aggiungere un terzo colore. Guarda l'esempio qui sotto.
Il gradiente superiore va dal scuro al chiaro utilizzando centinaia di diverse sfumature di blu.
Il gradiente medio utilizza solo nove colori, ma ha ancora troppe sfumature di un solo colore. Si verifica quello che viene chiamato banding, dove a causa di strisce omogenee spesse, l'occhio si concentra sui punti di contatto dei colori, piuttosto che sui colori stessi.
Nella gradientazione inferiore abbiamo applicato il dithering, che evita il banding e utilizza solo due colori. Creiamo rumore di diversa intensità per imitare la gradazione del colore. Questa tecnica è molto simile al halftone, impiegato nella stampa, e anche allo stippling, usato nelle illustrazioni e nei fumetti.
Nel modello dell'orco ho utilizzato il dithering solo un po' per trasmettere la texture. Alcuni artisti pixel non lo utilizzano affatto, mentre altri non esitano e lo fanno in modo molto abile. Penso che il dithering si veda meglio su ampie aree riempite di un solo colore (dai un'occhiata al cielo nello screenshot di Metal Slug che è stato mostrato sopra) o su quelle zone che devono apparire ruvide e irregolari (come il fango). Decidi tu come utilizzarlo.
Se vuoi vedere un esempio di dithering su larga scala e di alta qualità, studia i giochi di The Bitmap Brothers, uno studio britannico degli anni '80, o i giochi per PC-98. Tieni presente che sono tutti NSFW.
Kakyusei (PC-98). Elf, 1996
Questa immagine ha solo 16 colori!
8. Ultima occhiata
Uno dei pericoli dell'arte pixel è che sembra facile e semplice (a causa della sua struttura e delle limitazioni stilistiche). Ma alla fine spenderai un'enorme quantità di tempo a perfezionare i tuoi sprite. È come un rompicapo da risolvere — ed è per questo che l'arte pixel attrae i perfezionisti. Ricorda che uno sprite non dovrebbe richiedere troppo tempo — è solo un piccolo pezzo di un insieme estremamente complesso di pezzi. È importante non perdere di vista il quadro generale.
Anche se la tua arte pixel non è per i giochi, a volte vale la pena dirsi: "Va già bene così!" E andare avanti. Il modo migliore per sviluppare le proprie abilità è completare il processo intero il più possibile, dall'inizio alla fine, utilizzando quante più tematiche possibile.
E a volte è utile distogliere lo sguardo dallo sprite per poi rivederlo con occhi freschi.
32×32 pixel
Abbiamo creato un grande sprite di 96×96 pixel per primo, perché a questa dimensione somiglia di più a dipingere o a un'opera d'arte, ma solo con i pixel. Più piccolo è lo sprite, meno assomiglia a quello che dovrebbe rappresentare e più ogni pixel diventa importante.
In Super Mario Bros., Mario's eye is just two pixels stacked on top of each other. The same goes for his ear. The character's creator, Shigeru Miyamoto, stated that the mustache was needed to separate the nose from the rest of the face. Therefore, one of Mario's defining facial features is not just a character design, but a pragmatic trick. This confirms the old wisdom that necessity is the mother of invention.
The main stages of creating a 32×32 pixel sprite are already familiar to us: sketch, color, shadows, and further refinement. However, in such circumstances, I choose colored shapes as an initial sketch instead of outlining due to the small size. Color plays a more significant role in defining the character than outlines do. Look at Mario again; he doesn't have any outlines at all. It's not just the mustache that's interesting. His sideburns define the shape of his ears, the sleeves indicate his arms, and the overall shape clearly reflects his entire body.
Creare piccoli sprite richiede continui compromessi. Se aggiungi un contorno, potresti perdere spazio per l'ombra. Se il tuo personaggio ha mani e piedi ben definiti, la testa probabilmente non dovrebbe essere troppo grande. Se utilizzi efficacemente il colore, un contorno selettivo e l'anti-aliasing, l'oggetto disegnato sembrerà più grande di quanto non sia in realtà.
Per i piccoli sprite mi piace lo stile chibi: i personaggi sembrano molto carini, con teste e occhi grandi. È un ottimo modo per creare un eroe vivace in uno spazio limitato e, in generale, è uno stile molto gradevole. Ma, se hai bisogno di mostrare la mobilità o la forza del personaggio, puoi dedicare meno spazio alla testa per far apparire il corpo più potente. Tutto dipende dalle tue preferenze e dai tuoi obiettivi.
Tutta la squadra è qui!
Formati dei file
Un risultato del genere può mettere in ansia qualsiasi pixel artist.
L'immagine che vedi è il risultato del salvataggio di un disegno in JPG. Parte dei dati si è persa a causa degli algoritmi di compressione del file. L'arte pixel di qualità finirà per apparire male e sarà difficile riportarla alla sua palette originale.
Per salvare un'immagine statica senza perdita di qualità, utilizza il formato PNG. Per le animazioni, utilizza GIF.
Come condividere correttamente l'arte pixel
La condivisione dell'arte pixel sui social network è un ottimo modo per ricevere feedback e conoscere altri artisti che lavorano nello stesso stile. Non dimenticare di usare l'hashtag #pixelart. Purtroppo, i social network spesso convertono PNG in JPG senza chiedere, rovinando il tuo lavoro. Non è sempre chiaro perché la tua immagine sia stata convertita.
Ci sono alcuni consigli su come mantenere l'arte pixel nella qualità giusta per diversi social network.
Affinché il file PNG non venga modificato su Twitter, usa meno di 256 colori oppure , che il tuo file sia inferiore a 900 pixel sul lato lungo. Ti consiglio di aumentare la dimensione del file almeno a 512×512 pixel. Inoltre, assicurati che il ridimensionamento sia un multiplo di 100 (200%, non 250%) e che gli angoli netti siano mantenuti (Nearest Neighbor in Photoshop).
GIF animati per post su Twitter pesare al massimo 15 MB. L'immagine deve avere almeno 800×800 pixel, l'animazione ciclica deve ripetersi tre volte e l'ultimo fotogramma deve durare metà tempo rispetto agli altri: questa è la teoria più comune. Tuttavia, non è chiaro quanto sia necessario rispettare questi requisiti, dato che Twitter modifica continuamente i propri algoritmi di visualizzazione delle immagini.
Per quanto ne so, non è possibile pubblicare un'immagine su Instagram senza perdita di qualità. Ma sarà sicuramente un aspetto migliore se la si aumenta almeno a 512x512 pixel.
Fonte: habr.com
