Gli sviluppatori indipendenti spesso devono ricoprire più ruoli contemporaneamente: game designer, programmatore, compositore, artista. E quando si tratta di immagini, molte persone scelgono la pixel art: a prima vista sembra semplice. Ma per farlo magnificamente, hai bisogno di molta esperienza e di determinate abilità. Ho trovato un tutorial per chi ha appena iniziato a comprendere le basi di questo stile: con la descrizione di software speciali e tecniche di disegno usando due sprite come esempio.
sfondo
La pixel art è una forma di arte digitale in cui le modifiche vengono apportate a livello di pixel. È principalmente associato alla grafica dei videogiochi degli anni '80 e '90. Allora gli artisti dovevano tenere conto dei limiti di memoria e della bassa risoluzione. Al giorno d'oggi, la pixel art è ancora popolare nei giochi e come stile artistico in generale, nonostante la capacità di creare grafica 3D realistica. Perché? Nostalgia a parte, creare un lavoro interessante in un quadro così ristretto è una sfida divertente e gratificante.
La barriera per entrare nella pixel art è relativamente bassa rispetto all’arte tradizionale e alla grafica 3D, che attrae gli sviluppatori indipendenti. Ma ciò non significa che sarà facile finire gioco in questo stile. Ho visto molti sviluppatori indipendenti con metroidvanie pixel art su piattaforme di crowdfunding. Pensavano di finire tutto in un anno, ma in realtà ci volevano altri sei anni.
Metal Slug 3 (Arcade). SNK, 2000
La pixel art al livello a cui la maggior parte delle persone desidera crearla richiede molto tempo e ci sono pochissimi tutorial brevi. Quando lavori con un modello 3D, puoi ruotarlo, deformarlo, spostare le sue singole parti, copiare animazioni da un modello all'altro e così via. La pixel art di alto livello richiede quasi sempre un grande sforzo per posizionare meticolosamente i pixel su ciascun fotogramma.
In generale, ti avevo avvertito.
E ora parliamo un po' del mio stile: disegno principalmente pixel art per i videogiochi e trovo ispirazione in essi. In particolare, sono un fan di Famicom/NES, delle console a 16 bit e dei giochi arcade degli anni '90. La pixel art dei miei giochi preferiti dell'epoca può essere descritta come brillante, sicura e pulita (ma non troppo pulita), piuttosto che cruda e minimalista. Questo è lo stile in cui lavoro, ma puoi facilmente applicare le idee e le tecniche di questo tutorial per creare cose completamente diverse. Esplora il lavoro di diversi artisti e crea la pixel art che ti piace!
morbido
Gli strumenti digitali di base per la pixel art sono Zoom e Matita per posizionare i pixel. Troverai utili anche Linea, Forma, Seleziona, Sposta e Secchio di vernice. Esistono molti software gratuiti e a pagamento con questo set di strumenti. Ti parlerò di quelli più popolari e di quelli che uso io stesso.
Vernice (gratuita)
Se hai Windows, Paint integrato è un programma primitivo, ma ha tutti gli strumenti per la pixel art.
(è libero)
Un editor di pixel art inaspettatamente funzionale che viene eseguito tramite il browser. Puoi esportare il tuo lavoro come PNG o GIF animata. Un'ottima opzione per i principianti.
(è libero)
GraphicsGale è l'unico editor di cui ho sentito parlare progettato specificamente per la pixel art e include strumenti di animazione. È stato creato dalla società giapponese HUMANBALANCE. È disponibile gratuitamente dal 2017 ed è ancora richiesto, nonostante la crescente popolarità di Aseprite. Purtroppo funziona solo su Windows.
($)
Forse l'editor più popolare del momento. , tantissime funzionalità, supporto attivo, versioni per Windows, Mac e Linux. Se prendi sul serio la pixel art e non hai ancora trovato l'editor giusto, questo potrebbe essere quello di cui hai bisogno.
($$+)
GameMaker Studio 2 è un eccellente strumento 2D con un buon Sprite Editor. Se vuoi creare pixel art per i tuoi giochi, è molto comodo fare tutto in un unico programma. Ora sto utilizzando questo software mentre lavoro su , una raccolta di 50 giochi retrò: creo sprite e animazioni in GameMaker e set di riquadri in Photoshop.
($$$+)
Photoshop è un software costoso, distribuito tramite abbonamento e non progettato per la pixel art. Non consiglio l'acquisto a meno che tu non sia coinvolto nel rendering di illustrazioni in alta risoluzione o non sia necessario eseguire manipolazioni complesse con l'immagine, come me. Puoi creare sprite statici e pixel art al suo interno, ma è piuttosto complesso rispetto ai software specializzati (ad esempio GraphicsGale o Aseprite).
altro
Il mio kit di pixel art. È tutto nero, me ne sono accorto solo adesso.
Tavoletta grafica ($$+)
Raccomando le tavolette grafiche per qualsiasi lavoro di illustrazione digitale per evitare la sindrome del tunnel carpale. È molto più facile prevenire che curare. Un giorno sentirai dolore e non farà altro che aumentare: abbi cura di te fin dall'inizio. Dato che disegnavo con il mouse, ora ho difficoltà a giocare con i giochi che richiedono di premere i tasti. Attualmente sto utilizzando Wacom Intuos Pro S.
Supporto per il polso ($)
Se non puoi procurarti un tablet, procurati almeno un supporto per il polso. Il mio preferito è il tutore da polso aderente verde Mueller. Il resto è troppo stretto o non fornisce abbastanza supporto. Le pinze possono essere ordinate online senza problemi.
96 × 96 pixel
Lotta finale. CAPCOM, 1989
Iniziamo! Iniziamo con uno sprite di carattere 96x96 pixel. Ad esempio, ho disegnato un orco e l'ho posizionato su uno screenshot di Final Fight (immagine sopra) in modo che tu possa capire la scala. Questo большой sprite per la maggior parte dei giochi retrò, dimensioni dello screenshot: 384x224 pixel.
Su uno sprite così grande sarà più semplice mostrare la tecnica di cui voglio parlare. Il rendering per pixel è anche più simile alle forme d'arte tradizionali (come il disegno o la pittura) con cui potresti avere più familiarità. Dopo aver padroneggiato le tecniche di base, passeremo agli sprite più piccoli.
1. Scegli una tavolozza
Pixel è un concetto molto più profondo nella pixel art che in qualsiasi altro regno digitale. La pixel art è definita dai suoi limiti, come i colori. È importante scegliere la tavolozza giusta; ti aiuterà a determinare il tuo stile. Ma all'inizio suggerisco di non pensare alle tavolozze e di sceglierne una tra quelle esistenti (o solo alcuni colori casuali): puoi cambiarla facilmente in qualsiasi momento.
Per questo tutorial utilizzerò la tavolozza di 32 colori per cui abbiamo creato . Per la pixel art vengono spesso assemblati da 32 o 16 colori. La nostra è progettata per una console immaginaria che apparirebbe a metà strada tra Famicom e PC Engine. Puoi prenderlo o qualsiasi altro: il tutorial non dipende affatto dalla tavolozza selezionata.
2. Cenni generali
Iniziamo a disegnare utilizzando lo strumento Matita. Disegniamo uno schizzo nello stesso modo in cui lo facciamo con carta e penna normali. Naturalmente, la pixel art e l’arte tradizionale si sovrappongono, soprattutto quando si tratta di sprite così grandi. Le mie osservazioni mostrano che i bravi artisti di pixel art sono almeno bravi a disegnare a mano e viceversa. Quindi sviluppare le tue abilità di disegno è sempre utile.
3. Elaborazione dei contorni
Perfezioniamo i contorni: rimuoviamo i pixel extra e riduciamo lo spessore di ciascuna linea a un pixel. Ma cosa è esattamente considerato superfluo? Per rispondere a questa domanda è necessario comprendere le linee e le irregolarità dei pixel.
Irregolarità
Devi imparare come disegnare due linee base nella pixel art: dritta e curva. Con carta e penna è tutta una questione di controllo muscolare, ma noi lavoriamo con piccoli blocchi di colore.
La chiave per disegnare linee di pixel corrette sono le frastagliature. Si tratta di singoli pixel o piccoli segmenti che distruggono la levigatezza della linea. Come ho detto prima, un singolo pixel fa un'enorme differenza nella pixel art, quindi le irregolarità possono rovinare l'intera estetica. Immagina di disegnare una linea retta su carta e all'improvviso qualcuno colpisce il tavolo: i rilievi nella pixel art sembrano proprio uno scarabocchio casuale.
Esempi:
Diretta
curve
Le irregolarità compaiono nelle curve quando la lunghezza dei segmenti di linea non aumenta o diminuisce gradualmente.
È impossibile evitare completamente gli urti: tutti i tuoi giochi retrò preferiti li hanno (a meno che, ovviamente, la pixel art non consista esclusivamente di forme semplici). Obiettivo: ridurre al minimo le irregolarità pur mostrando tutto il necessario.
4. Applica i primi colori
Colora il tuo personaggio utilizzando il riempimento o un altro strumento adatto. La tavolozza semplificherà questa parte del lavoro. Se il software non prevede l'utilizzo delle tavolozze, è possibile posizionarla direttamente nell'immagine, come nell'esempio sopra, e selezionare i colori utilizzando un contagocce.
Nell'angolo in basso a sinistra ho disegnato il nostro amico, incontro, questo è Ball. Renderà più facile capire cosa sta succedendo esattamente in ogni fase.
5. Ombreggiatura
È ora di visualizzare le ombre: aggiungi semplicemente colori più scuri allo sprite. Ciò renderà l'immagine tridimensionale. Supponiamo di avere una fonte di luce situata sopra l'orco alla sua sinistra. Ciò significa che tutto ciò che è sopra e davanti al nostro personaggio sarà illuminato. Aggiungi ombre in basso a destra.
Forma e volume
Se questo passaggio è impegnativo per te, pensa al tuo disegno come a forme tridimensionali anziché solo a linee e colori. Le forme esistono nello spazio tridimensionale e possono avere un volume, che costruiamo con l'aiuto delle ombre. Questo ti aiuterà a visualizzare il personaggio senza dettagli e a immaginare che sia fatto di argilla e non di pixel. L'ombreggiatura non significa semplicemente aggiungere nuovi colori, è il processo di costruzione di una forma. In un personaggio ben progettato, i dettagli non nascondono le forme sottostanti: se strizzi gli occhi, vedrai alcuni grandi gruppi di luci e ombre.
Antialiasing (antialiasing)
Ogni volta che utilizzo un nuovo colore, applico l'anti-aliasing (AA). Aiuta a smussare i pixel aggiungendo colori intermedi agli angoli dove si incontrano due segmenti di linea:
I pixel grigi ammorbidiscono le "interruzioni" nella linea. Più lungo è il segmento di linea, più lungo è il segmento AA.
Ecco come appare AA sulla spalla di un orco. È necessario per appianare le linee che mostrano la curva dei suoi muscoli
L'anti-aliasing non dovrebbe estendersi oltre lo sprite che verrà utilizzato nel gioco o su uno sfondo di cui non si conosce il colore. Ad esempio, se applichi AA a uno sfondo chiaro, l'anti-aliasing apparirà brutto su uno sfondo scuro.
6. Schema selettivo
In precedenza, i contorni erano completamente neri, il che rendeva lo sprite molto simile a un cartone animato. L'immagine sembrava divisa in segmenti. Ad esempio, le linee nere su un braccio creano un contrasto eccessivo con la muscolatura, rendendo il personaggio meno coeso.
Se lo sprite diventa più naturale e la segmentazione meno evidente, le forme base del personaggio saranno più facili da leggere. Per fare ciò, puoi utilizzare un contorno selettivo: sostituisci parzialmente il contorno nero con uno più chiaro. Sulla parte illuminata dello sprite, puoi usare i colori più chiari, oppure, dove lo sprite tocca lo spazio negativo, puoi rimuovere completamente il contorno. Invece del nero, è necessario utilizzare il colore scelto per l'ombra, in questo modo verrà preservata la segmentazione (per distinguere tra muscoli, pelo e così via).
Ho anche aggiunto ombre più scure in questa fase. Il risultato furono tre gradazioni di verde sulla pelle dell'orco. Il colore verde più scuro può essere utilizzato per il contorno selettivo e AA.
7. Tocchi finali
Infine, vale la pena aggiungere punti salienti (i punti più chiari sullo sprite), dettagli (orecchini, borchie, cicatrici) e altri miglioramenti finché il personaggio non sarà pronto o finché non si dovrà passare a quello successivo.
Esistono diverse tecniche utili che possono essere applicate in questa fase. Ruota il disegno orizzontalmente, questo spesso aiuta a identificare errori nelle proporzioni e nell'ombreggiatura. Puoi anche rimuovere il colore: imposta la saturazione su zero per capire dove devi cambiare le ombre.
Creazione di rumore (dithering, dithering)
Finora abbiamo utilizzato principalmente aree d'ombra ampie e solide. Ma esiste un'altra tecnica: il dithering, che ti consente di passare da un colore all'altro senza aggiungerne un terzo. Guarda l'esempio qui sotto.
Il gradiente superiore da scuro a chiaro utilizza centinaia di diverse tonalità di blu.
Il gradiente medio utilizza solo nove colori, ma ci sono ancora troppe sfumature dello stesso colore. Nasce un cosiddetto banding (dall'inglese band - stripe), in cui, a causa di strisce spesse e uniformi, l'occhio si concentra sui punti di contatto dei colori, anziché sui colori stessi.
Sul gradiente inferiore abbiamo applicato il dithering, che evita il banding e utilizza solo due colori. Creiamo rumore di varia intensità per simulare la gradazione del colore. Questa tecnica è molto simile al mezzitoni (immagine mezzitoni) utilizzata nella stampa; così come la punteggiatura (immagine granulosa) - nelle illustrazioni e nei fumetti.
Sull'orco ho effettuato un po' di dithering per trasmettere la texture. Alcuni artisti del pixel non lo usano affatto, altri, al contrario, non sono timidi e lo fanno con molta abilità. Trovo che il dithering abbia un effetto migliore su aree ampie riempite con un singolo colore (guarda il cielo nello screenshot di Metal Slug sopra) o su aree che dovrebbero apparire ruvide e irregolari (come lo sporco). Decidi tu stesso come usarlo.
Se vuoi vedere un esempio di dithering su larga scala e di alta qualità, dai un'occhiata ai giochi di The Bitmap Brothers, uno studio britannico degli anni '80, o ai giochi sul computer PC-98. Tieni presente che sono tutti NSFW.
Kakyusei (PC-98). Elfo, 1996
Ci sono solo 16 colori in questa immagine!
8. Ultimo sguardo
Uno dei pericoli della pixel art è che sembra facile e semplice (a causa della sua struttura e dei limiti di stile). Ma finirai per dedicare un'enorme quantità di tempo a perfezionare i tuoi sprite. È come un puzzle da risolvere: ecco perché la pixel art attira i perfezionisti. Ricorda che uno sprite non dovrebbe richiedere troppo tempo: è solo un piccolo pezzo di una raccolta di pezzi estremamente complessa. È importante non perdere di vista il quadro generale.
Anche se la tua pixel art non è destinata ai giochi, a volte vale la pena dirti: "È già abbastanza buono!" E vai avanti. Il modo migliore per sviluppare le tue capacità è ripetere l'intero processo dall'inizio alla fine il maggior numero di volte possibile, utilizzando il maggior numero di argomenti possibile.
E a volte è utile lasciare uno sprite per un po’ in modo da poterlo guardare con occhi nuovi un po’ più tardi.
32×32 pixel
Abbiamo creato prima uno sprite grande da 96x96 pixel perché a quella dimensione è più come disegnare o dipingere, ma con i pixel. Più piccolo è lo sprite, meno simile è a ciò che dovrebbe visualizzare e più importante è ogni pixel.
In Super Mario Bros. L'occhio di Mario è composto solo da due pixel, uno sopra l'altro. E anche il suo orecchio. Il creatore del personaggio Shigeru Miyamoto ha detto che i baffi erano necessari per separare il naso dal resto del viso. Quindi una delle caratteristiche principali di Mario non è solo il design dei personaggi, ma uno stratagemma pragmatico. Il che conferma l’antica saggezza: “la necessità è la madre dell’invenzione”.
Le fasi principali della creazione di uno sprite di 32x32 pixel ci sono già familiari: schizzo, colore, ombre, ulteriore perfezionamento. Ma in tali condizioni, come schizzo iniziale, scelgo forme colorate invece di disegnare contorni a causa delle dimensioni ridotte. Il colore gioca un ruolo più importante nella definizione di un personaggio rispetto al contorno. Guarda di nuovo Mario, non ha alcun contorno. Non sono solo i baffi ad essere interessanti. Le sue basette definiscono la forma delle sue orecchie, le sue maniche mostrano le sue braccia e la sua forma generale mostra più o meno chiaramente tutto il suo corpo.
Creare piccoli sprite è un compromesso costante. Se aggiungi un tratto, potresti perdere spazio per l'ombra. Se il tuo personaggio ha braccia e gambe chiaramente visibili, la testa probabilmente non dovrebbe essere molto grande. Se utilizzi il colore, il tratto selettivo e l'anti-alias in modo efficace, l'oggetto sottoposto a rendering apparirà più grande di quanto non sia in realtà.
Per i piccoli folletti mi piace lo stile chibi: i personaggi sembrano molto carini, hanno teste e occhi grandi. Un ottimo modo per creare un personaggio colorato in uno spazio limitato e, nel complesso, uno stile molto carino. Ma forse hai bisogno di mostrare la mobilità o la forza di un personaggio, quindi puoi dare meno spazio alla testa per far sembrare il corpo più potente. Tutto dipende dalle tue preferenze e dai tuoi obiettivi.
Tutta la squadra è riunita!
Formati di file
Questo risultato può innervosire qualsiasi artista di pixel
L'immagine che vedi è il risultato del salvataggio dell'immagine in JPG. Alcuni dati sono andati persi a causa degli algoritmi di compressione dei file. La pixel art di alta qualità finirà per avere un brutto aspetto e riportarla alla sua tavolozza originale non sarà facile.
Per salvare un'immagine statica senza perdere la qualità, utilizza il formato PNG. Per le animazioni - GIF.
Come condividere correttamente la pixel art
Condividere la pixel art sui social network è un ottimo modo per ottenere feedback e incontrare altri artisti che lavorano nello stesso stile. Non dimenticare di utilizzare l'hashtag #pixelart. Sfortunatamente, i social network spesso convertono PNG in JPG senza chiedere, peggiorando la tua esperienza. Inoltre, non è sempre chiaro il motivo per cui la tua immagine è stata convertita.
Esistono diversi suggerimenti su come salvare la pixel art nella qualità richiesta per vari social network.
Per mantenere invariato il tuo file PNG su Twitter, utilizza meno di 256 colori o che il tuo file sia inferiore a 900 pixel sul lato più lungo. Aumenterei la dimensione del file ad almeno 512x512 pixel. E in modo che il ridimensionamento sia un multiplo di 100 (200%, non 250%) e gli spigoli vivi vengano preservati (vicino più vicino in Photoshop).
GIF animate per post su Twitter pesare non più di 15 MB. L'immagine deve essere di almeno 800x800 pixel, l'animazione in loop deve ripetersi tre volte e l'ultimo fotogramma deve essere lungo la metà di tutti gli altri: la teoria più popolare. Tuttavia non è chiaro fino a che punto questi requisiti debbano essere soddisfatti, dato che Twitter modifica costantemente i suoi algoritmi di visualizzazione delle immagini.
Per quanto ne so, è impossibile pubblicare una foto su Instagram senza perdere la qualità. Ma avrà sicuramente un aspetto migliore se lo ingrandisci ad almeno 512x512 pixel.
Fonte: habr.com