Spesso gli sviluppatori indie devono assumere più ruoli: game designer, programmatore, compositore, artista. E, quando si tratta di grafica, molti scelgono il pixel art, che a prima vista sembra semplice. Ma per ottenere un bel risultato servono molta esperienza e competenze specifiche. Ho trovato un tutorial per chi ha appena iniziato a conoscere le basi di questo stile: con descrizione del software specifico e delle tecniche di disegno attraverso due sprite.
Sfondo
Il pixel art è una forma di arte digitale in cui si apportano modifiche a livello dei pixel. Essenzialmente è associato alla grafica dei videogiochi degli anni '80 e '90. Allora, gli artisti dovevano considerare i limiti di memoria e la 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 senza considerare la nostalgia, realizzare un lavoro eccezionale in tali rigide limitazioni è una sfida gratificante.
La barriera d'ingresso nel pixel art è relativamente bassa rispetto all'arte tradizionale e alla grafica 3D, il che attrae gli sviluppatori indie. Ma ciò non significa affatto che sia semplice completare un gioco in questo stile. Ho visto molti sviluppatori indie con metroidvania in pixel art sulle piattaforme di crowdfunding. Pensavano di poter completare tutto in un anno, ma in realtà ci volevano ancora sei anni.
Metal Slug 3 (Arcade). SNK, 2000
Il pixel art al livello in cui la maggior parte desidera crearlo richiede molto tempo, e ci sono molto pochi tutorial brevi. Lavorando con un modello 3D è possibile ruotarlo, deformarlo, muovere parti singole, copiare animazioni da un modello all'altro, e così via. Il pixel art di alto livello richiede quasi sempre un enorme sforzo per posizionare con precisione i pixel su ogni fotogramma.
In generale, vi ho avvertito.
Ora parliamo un po' del mio stile: principalmente disegno pixel art per videogiochi e trovo ispirazione in essi. In particolare, sono un fan del Famicom/NES, delle console a 16 bit e degli 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 può essere definita rigida e minimalista. In questo stile lavoro da solo, ma puoi facilmente applicare idee e tecniche di questo tutorial per creare cose completamente diverse. Esplora il lavoro di vari artisti e crea la pixel art che ti piace!
Software
Strumenti digitali di base per la pixel art: Zoom (Zoom) e Matita (Pencil) per posizionare i pixel. Avrai anche bisogno di Linea (Line), Figura (Shape), Seleziona (Select), Muovi (Move) e Secchiello (Paint Bucket). Ci sono molti software gratuiti e a pagamento con questo set di strumenti. Parlerò dei più popolari e di quelli che utilizzo personalmente.
Paint (gratuito)
Se hai Windows, il Paint integrato è un programma primitivo, ma ha tutti gli strumenti necessari per la pixel art.
(gratuito)
Un sorprendentemente funzionale editor di pixel art che si avvia tramite browser. Puoi esportare il lavoro in PNG o GIF animati. Ottima opzione per i principianti.
(gratuito)
GraphicsGale è l'unico editor tra quelli di cui ho sentito parlare, progettato precisamente per la pixel art e include strumenti di animazione. È stato creato dalla compagnia giapponese HUMANBALANCE. Dal 2017 è distribuito gratuitamente ed è ancora richiesto, nonostante la crescente popolarità di Aseprite. Purtroppo, funziona solo su Windows.
($)
Probabilmente l'editor più popolare al momento. , molte possibilità, supporto attivo, versioni per Windows, Mac e Linux. Se ti stai seriamente dedicando alla pixel art e non hai ancora trovato l'editor giusto, forse questo è quello che fa per te.
($$+)
GameMaker Studio 2 è un eccellente strumento 2D con un buon editor di sprite (Sprite Editor). Se desideri creare pixel art per i tuoi giochi, è molto comodo fare tutto in un unico programma. Attualmente sto usando questo software per lavorare su , una collezione di 50 giochi retro: creo sprite e animazioni in GameMaker, mentre i tileset sono realizzati in Photoshop.
($$$+)
Photoshop è un software costoso, distribuito in abbonamento, non adatto all'arte pixel. Non lo consiglio se non ti occupi di illustrazioni ad alta risoluzione o se non hai bisogno di fare manovre complesse con le immagini, come me. Puoi creare sprite statici e opere pixelate, ma è abbastanza complesso rispetto a software specializzati (ad esempio, GraphicsGale o Aseprite).
Altro
Il mio set per l'arte pixel. Tutto nero, me ne sono accorto solo ora.
Tavoletta grafica ($$+)
Consiglio le tavolette grafiche per qualsiasi lavoro di illustrazione digitale, per evitare la sindrome del tunnel carpale. È molto più facile prevenirla che curarla. Una volta che sentirai dolore, questo aumenterà solo: prenditi cura di te sin dall'inizio. Poiché una volta disegnavo con il mouse, ora ho difficoltà a giocare a giochi in cui devo premere tasti. Attualmente uso una Wacom Intuos Pro S.
Supporto per polso ($)
Se non puoi permetterti una tavoletta, comprati almeno un supporto per il polso. A me piace molto il Mueller Green Fitted Wrist Brace. Gli altri sono troppo stretti o forniscono un supporto insufficiente. I supporti possono essere ordinati online senza problemi.
96×96 pixel
Final Fight. Capcom, 1989
Iniziamo! Partiamo dallo sprite di un personaggio di 96×96 pixel. Per esempio, ho disegnato un orco e l'ho posizionato su uno screenshot di Final Fight (immagine sopra), per mostrare la scala. Questo è un grande 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 parlarti. Inoltre, il disegno pixelato si avvicina di più alle forme tradizionali d'arte (ad esempio, disegno o pittura), con cui potresti essere più familiare. Una volta padroneggiate 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 dalle sue limitazioni, ad esempio, i colori. È importante scegliere bene la palette, poiché aiuterà a definire il tuo stile. Ma all'inizio ti consiglio di non pensare alle palette e di sceglierne una tra quelle esistenti (o semplicemente diversi colori a caso) — puoi facilmente cambiarla in qualsiasi momento.
Per questo tutorial userò una palette di 32 colori che abbiamo creato per . Per il pixel art, spesso si raggruppano in 32 o 16 colori. La nostra è sviluppata per una console immaginaria che potrebbe apparire da qualche parte tra Famicom e PC Engine. Puoi prenderla o qualsiasi altra — il tutorial non dipende affatto dalla palette scelta.
2. Contorni grezzi
Iniziamo a disegnare utilizzando lo strumento Matita. Fai uno schizzo proprio come faresti con una penna e della carta. Certo, il pixel art e l'arte tradizionale si intrecciano, specialmente quando si tratta di sprite così grandi. Le mie osservazioni mostrano che i bravi artisti di pixel art spesso sanno disegnare bene anche a mano e viceversa. Quindi è sempre utile sviluppare le abilità di disegno.
3. Lavorazione dei contorni
Rielaboriamo i contorni: eliminiamo i pixel in eccesso e riduciamo lo spessore di ogni linea a un pixel. Ma cosa considerare in eccesso? Per rispondere a questa domanda, è necessario comprendere le linee pixelate e le irregolarità.
Irregolarità
Bisogna imparare a disegnare due linee base nel pixel art: linee rette e curve. Con penna e carta, il tutto si riduce al controllo muscolare, ma noi lavoriamo con piccole macchie di colore.
La chiave per disegnare linee pixel perfette sono le irregolarità. Sono pixel singoli o piccoli segmenti che rompono la levigatezza della linea. Come ho già detto, un pixel singolo ha un'enorme importanza nel pixel art, quindi le irregolarità possono rovinare tutta l'estetica. Immagina di tracciare una linea retta su carta e improvvisamente qualcuno colpisce il tavolo: le irregolarità nel pixel art appaiono proprio come un segno casuale.
Esempi:
Linee rette
Curve
Le irregolarità si manifestano nelle curve quando la lunghezza dei segmenti di linea aumenta o diminuisce non gradualmente.
Evitare completamente le irregolarità è impossibile: in tutti i tuoi giochi retro preferiti ci sono (se, ovviamente, il pixel art non consiste esclusivamente in forme semplici). L'obiettivo è minimizzare le irregolarità, mostrando comunque tutto il necessario.
4. Applichiamo i primi colori
Colora il tuo personaggio usando un riempimento o un altro strumento appropriato. La paletta semplificherà questa parte del lavoro. Se il software non supporta l'uso delle palette, puoi inserirla direttamente nell'immagine, come nell'esempio sopra, e scegliere i colori usando il contagocce.
Nell'angolo in basso a sinistra ho disegnato il nostro amico, incontrate Sharl. Sarà più facile capire cosa sta succedendo ad ogni fase.
5. Ombreggiatura
È tempo di mostrare le ombre: basta aggiungere colori più scuri allo sprite. Così l'immagine avrà un aspetto tridimensionale. Supponiamo di avere una fonte 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 crea difficoltà, immagina il tuo disegno come forme tridimensionali, non solo linee e colori. Le forme esistono in uno spazio tridimensionale e possono avere volume, che costruiamo con le ombre. Questo aiuterà a visualizzare il personaggio senza dettagli e a immaginare 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 progettato, i dettagli non nascondono le forme di base: se strizzi gli occhi, vedrai diversi grandi gruppi di luce e ombra.
Antialiasing
Ogni volta che uso un nuovo colore, applico l'antialiasing (AA). Aiuta a smussare i pixel aggiungendo colori intermedi agli angoli, nel punto in cui due segmenti si incontrano:
I pixel grigi ammorbidiscono i "salti" nella linea. Più lungo è il segmento della linea, più lungo sarà il segmento di AA.
Questa è l'aspetto dell'AA sulla spalla dell'orco. Serve a smussare le linee che rappresentano la curva dei suoi muscoli.
L'antialiasing non deve estendersi oltre lo sprite, che sarà usato nel gioco o sullo sfondo, il cui colore è sconosciuto. Ad esempio, se applichi l'AA su uno sfondo chiaro, su uno sfondo scuro l'ombreggiatura apparirà brutta.
6. Contorno selettivo
In precedenza, i contorni erano completamente neri, il che rendeva lo sprite molto cartoonesco. L'immagine sembrava divisa in segmenti. Ad esempio, le linee nere sulle braccia evidenziano troppo la muscolatura, 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 questo si può utilizzare un contorno selettivo: sostituire parzialmente il contorno nero con uno più chiaro. Nella parte illuminata dello sprite si possono usare i colori più chiari oppure, dove lo sprite si incontra con lo spazio negativo, si può eliminare completamente il contorno. Invece del nero, si dovrebbe utilizzare il colore scelto per l'ombra: in questo modo si conserverà la segmentazione (per delimitare i muscoli, il pelo e così via).
Inoltre, in questo stadio ho aggiunto ombre più scure. Sono state create tre gradazioni di verde sulla pelle dell'orco. Il colore verde scuro più intenso può essere utilizzato per il contorno selettivo e l'AA.
7. Ritocchi finali
Alla fine, è utile aggiungere riflessi (i punti più chiari sullo sprite), dettagli (orecchini, rivetti, cicatrici) e altre migliorie, fino a che il personaggio non è completo o prima di passare al passo successivo.
Ci sono alcune tecniche utili che si possono applicare in questa fase. Ruota il disegno orizzontalmente, questo spesso aiuta a individuare errori nelle proporzioni e nell'ombreggiatura. È anche possibile rimuovere il colore: impostare la saturazione a zero per capire dove è necessario modificare le ombre.
Creazione di rumori (dithering)
Finora abbiamo principalmente utilizzato aree grandi e solide di ombra. Ma esiste anche 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 dal scuro al chiaro utilizza centinaia di tonalità diverse di blu.
Il gradiente medio utilizza solo nove colori, ma contiene ancora troppe sfumature di un solo colore. Si verifica così detto banding, in cui a causa di spesse bande omogenee l'occhio si concentra sui punti di contatto dei colori, piuttosto che sui colori stessi.
Nel gradiente inferiore abbiamo applicato il dithering, che evita il banding e utilizza solo due colori. Creiamo un rumore di intensità variabile per imitare la gradazione del colore. Questa tecnica è molto simile al halftone, utilizzato nella stampa; e anche al stippling — nelle illustrazioni e nei fumetti.
Ho usato il dithering sull'orc per trasmettere la texture, ma solo un po'. Alcuni artisti pixel non lo usano affatto, mentre altri non esitano e lo fanno molto abilmente. Penso che il dithering si veda meglio su ampie aree riempite da un solo colore (guardate il cielo nello screenshot di Metal Slug qui sopra) o su quelle aree che devono apparire ruvide e irregolari (ad esempio, il fango). Decidete voi come usarlo.
Se volete vedere un esempio di dithering su larga scala e di alta qualità, esaminare i giochi di The Bitmap Brothers, uno studio britannico degli anni '80, o i giochi per PC-98. Tenete presente, però, che sono tutti NSFW.
Kakyusei (PC-98). Elf, 1996
In questa immagine ci sono solo 16 colori!
8. Ultimo sguardo
Una delle insidie dell'arte pixel è che appare facile e semplice (a causa della sua struttura e delle limitazioni stilistiche). Ma alla fine, spenderete una quantità enorme di tempo a perfezionare i vostri sprite. È come un puzzle da risolvere: ecco perché l'arte pixel attira i perfezionisti. Ricordate, uno sprite non dovrebbe richiedere troppo tempo — è solo un piccolo pezzo di un aggregato complesso di pezzi. È importante non perdere di vista il quadro generale.
Anche se la vostra arte pixel non è per i giochi, a volte è bene dirsi: «Va già bene così!» E andare avanti. Il miglior modo per sviluppare le proprie abilità è passare attraverso l'intero processo il più possibile, dall'inizio alla fine, utilizzando temi quanto più diversi possibile.
E a volte è utile allontanarsi temporaneamente dallo sprite, per riguardarlo più tardi con uno sguardo fresco.
32×32 pixel
Abbiamo creato un grande sprite di 96×96 pixel per primo, perché a questa dimensione assomiglia di più a un dipinto o a un'opera d'arte, solo con i pixel. Più piccolo è lo sprite, meno somiglia a ciò che deve rappresentare, e più ogni pixel diventa importante.
In Super Mario Bros., l'occhio di Mario è costituito da soli due pixel, uno sopra l'altro. E anche la sua orecchia. Il creatore del personaggio, Shigeru Miyamoto, ha detto che i baffi servivano a separare il naso dal resto del volto. Così, una delle principali caratteristiche del volto di Mario non è solo il design del personaggio, ma anche un trucco pragmatico. Ciò conferma il vecchio adagio che dice: «La necessità è la madre dell'invenzione».
I principali passaggi per creare uno sprite di 32×32 pixel ci sono già familiari: schizzo, colore, ombre, ulteriori ritocchi. Ma in queste circostanze, per lo schizzo iniziale scelgo forme colorate invece di disegnare contorni, a causa delle piccole dimensioni. Il colore gioca un ruolo più importante nella definizione del personaggio rispetto ai contorni. Guarda di nuovo Mario, non ha affatto contorni. Gli interessano non solo i baffi. I suoi pizzetti definiscono la forma delle orecchie, le maniche mostrano le braccia e la forma generale riflette chiaramente tutto il suo corpo.
Creare piccoli sprite richiede continui compromessi. Se aggiungi un contorno, potresti perdere spazio per le ombre. Se le mani e le gambe del tuo personaggio sono chiaramente visibili, la testa dovrebbe probabilmente essere non troppo grande. Usando il colore in modo efficace, contorni selettivi e smussature, l'oggetto disegnato apparirà 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 piacevole. Ma forse hai bisogno di mostrare la mobilità o la forza del personaggio, allora puoi dedicare meno spazio alla testa, in modo che il corpo appaia più potente. Tutto dipende dalle tue preferenze e obiettivi.
L'intera squadra è riunita!
Formati file
Un risultato del genere può mettere in ansia qualsiasi artista pixel
L’immagine che vedi è il risultato del salvataggio del disegno in JPG. Parte dei dati è andata persa a causa degli algoritmi di compressione del file. L'arte pixel di qualità apparirà male e ripristinare la sua palette originale sarà complicato.
Per salvare un'immagine statica senza perdita di qualità utilizza il formato PNG. Per le animazioni — GIF.
Come condividere correttamente l'arte pixel
Condividere l'arte pixel sui social media è un ottimo modo per ricevere feedback e conoscere altri artisti che lavorano nello stesso stile. Non dimenticare di usare l'hashtag #pixelart. Sfortunatamente, i social media spesso convertono PNG in JPG senza chiedere, danneggiando il tuo lavoro. Inoltre non è sempre chiaro perché la tua immagine sia stata convertita.
Ci sono alcuni suggerimenti su come mantenere l'arte pixel nella qualità necessaria per i vari social media.
Affinché il file PNG non venga modificato su Twitter, utilizza meno di 256 colori o , che il tuo file sia inferiore a 900 pixel sul lato lungo. Ti consiglierei di aumentare la dimensione del file almeno a 512×512 pixel. In particolare, in modo che la scalabilità sia un multiplo di 100 (200% e non 250%) e che vengano mantenuti i bordi nitidi (Nearest Neighbor in Photoshop).
I file GIF animati per i post su Twitter non devono superare i 15 MB. L'immagine deve avere almeno 800×800 pixel, l'animazione ciclica deve ripetersi tre volte e l'ultimo fotogramma deve durare la metà del tempo rispetto agli altri — questa è la teoria più diffusa. Tuttavia, non è chiaro quanto sia necessario rispettare questi requisiti, considerando che Twitter cambia continuamente i propri algoritmi di visualizzazione delle immagini.
Per quanto ne so, non è possibile pubblicare un'immagine su Instagram senza perdere qualità. Ma apparirà sicuramente meglio se la ingrandisci almeno a 512x512 pixel.
Fonte: habr.com
