I sviluppatori indie spessu anu da cumminà parechji roli à una volta: designer di ghjocu, programatore, cumpusitore, artista. È quandu si tratta di visuale, assai persone sceglienu pixel art - à u primu sguardu, pare simplice. Ma per fà bella, avete bisognu di assai sperienza è certe cumpetenze. Aghju trovu un tutoriale per quelli chì anu cuminciatu à capisce i principii di stu stile: cù una descrizzione di software speciale è tecniche di disegnu cù dui sprites com'è esempiu.
Sfondu
Pixel art hè una forma d'arti digitale in quale i cambiamenti sò fatti à u nivellu di pixel. Hè soprattuttu assuciatu cù gràfiche di video game da l'anni 80 è 90. Allora l'artisti anu da piglià in contu e limitazioni di a memoria è a bassa risoluzione. Avà l'arte di pixel hè sempre populari in i ghjoculi è cum'è stile d'arti in generale, malgradu a pussibilità di creà gràfiche 3D realistiche. Perchè? Ancu fora di a nostalgia, creà un travagliu frescu in un quadru cusì rigidu hè una sfida bella è gratificante.
A barriera à l'ingressu in pixel art hè relativamente bassu cumparatu cù l'arti tradiziunale è i grafici 3D, chì attrae sviluppatori indie. Ma questu ùn significa micca chì serà faciule finisce ghjocu in stu stile. Aghju vistu parechji sviluppatori indie cù pixel art metroidvanias nantu à e plataforme di crowdfunding. Pensavanu ch'elli finiscinu tuttu in un annu, ma in fatti avianu bisognu di altri sei anni.
Metal Slug 3 (Arcade). SNK, annu 2000
L'arte di pixel à u livellu chì a maiò parte di a ghjente vole creà hè assai tempu, è i tutoriali brevi sò pocu è luntanu. Quandu u travagliu cù un mudellu 3D, pudete rotà, deformallu, movendu e so parti individuali, copiate animazioni da un mudellu à l'altru, è cusì. L'arte di pixel d'altu livellu quasi sempre richiede assai sforzu per mette meticulosamente pixel in ogni quadru.
In generale, aghju avvistatu.
È avà un pocu nantu à u mo stile: principalmente disegnu pixel art per i video games è truvà ispirazione in elli. In particulare, sò un fan di Famicom / NES, console 16-bit, è ghjochi arcade di l'anni 90. L'arte di pixel di i mo ghjochi preferiti di l'era pò esse qualificata cum'è luminosa, sicura è pulita (ma micca eccessivamente), ùn hè micca dura è minimalista. U travagliu in questu stile stessu, ma pudete facilmente applicà l'idee è e tecniche da stu tutoriale per creà cose completamente diverse. Esplora u travagliu di diversi artisti è crea l'arte di pixel chì ti piace!
Soffiu
Strumenti digitali basi per pixel art - Zoom (Zoom) è Pencil (Pencil) per mette pixel. Averete ancu bisognu di Linea (Line), Figura (Forma), Select (Select), Move (Move) è Fill (Paint Bucket). Ci hè parechje software gratuitu è pagatu cù tali strumenti. Parlaraghju di i più populari è quelli chì aghju utilizatu.
pittura (gratuitu)
Se tenete Windows, Paint hè custruitu in questu - un prugramma primitivu, ma hà tutte l'arnesi per pixel art.
(hè liberu)
Un editore di pixel art inaspettatamente funzionale chì passa per u navigatore. Pudete esportà u vostru travagliu in PNG o GIF animatu. Ottima opzione per i principianti.
(hè liberu)
GraphicsGale hè l'unicu editore chì aghju intesu parlà cuncepitu specificamente per l'arte di pixel è include arnesi d'animazione. Hè statu creatu da a cumpagnia giapponese HUMANBALANCE. Dapoi 2017, hè statu distribuitu gratuitamente è hè sempre in dumanda, malgradu a popularità crescente di Aseprite. Sfurtunatamente, funziona solu in Windows.
($)
Forse l'editore più populari in u mumentu. , tunnellate di funziunalità, supportu attivu, versioni per Windows, Mac è Linux. Sè vo site seriu nantu à l'arte di pixel è ùn avete micca truvatu l'editore ghjustu, questu puderia esse quellu per voi.
($$+)
GameMaker Studio 2 hè un eccellente strumentu 2D cù un bonu Editor Sprite. Se vulete creà pixel art per i vostri ghjoculi, hè assai cunvenutu per fà tuttu in un prugramma. Avà aghju utilizatu stu software in u mo travagliu , una cullizzioni di 50 ghjochi retro: Crea sprites è animazioni in GameMaker, è tilesets in Photoshop.
($$$+)
Photoshop hè un software caru, distribuitu per abbunamentu, micca pensatu per pixel art. Ùn vi cunsigliu micca di cumprà questu, salvu chì ùn site in illustrazioni d'alta risoluzione o ùn avete micca bisognu di fà una manipulazione cumplessa di l'imaghjini cum'è mè. Pudete creà sprites statici è pixel art in questu, ma hè abbastanza cumplessu cumparatu cù u software specializatu (cum'è GraphicsGale o Aseprite).
Прочее
U mo kit di pixel art. Tuttu hè neru, aghju appena nutatu.
Tavuletta grafica ($$+)
Recumandemu tablette grafiche per qualsiasi travagliu di illustrazione digitale per evità u sindromu di u carpale. Hè assai più faciule di prevene cà di curà. Un ghjornu vi sentite u dulore è solu peghju - cura di sè stessu da u principiu. A causa di u fattu chì aghju utilizatu per disegnà cù un mouse, avà aghju un tempu duru à ghjucà à i ghjochi chì esigenu di appughjà i tasti. Attualmente aghju utilizatu Wacom Intuos Pro S.
Supportu per i polsi ($)
Se ùn pudete micca uttene una tableta, almenu cumprà un caliper di polso. U mo preferitu hè u Mueller Green Fitted Wrist Brace. U restu hè troppu strettu o furnisce un supportu insufficiente. Calipers pò esse urdinatu in linea senza prublemi.
96 × 96 pixel
battaglia finale. Capcom, 1989
Cuminciamu ! Cuminciamu cù un sprite di caratteri 96x96 px. Per esempiu, aghju disegnatu un orcu è u pusatu nantu à a screenshot da Final Fight (foto sopra) per ottene a scala. Questu большой sprite per a maiò parte di i ghjochi retro, dimensione di screenshot: 384 × 224 pixel.
Nantu à un sprite cusì grande, serà più faciule per vede a tecnica chì vogliu parlà. Inoltre, u rendering pixel-by-pixel hè più cum'è forme tradiziunali di l'arti (cum'è disegnu o pittura) chì pudete esse più familiarizatu. Dopu avè ammaistratu i tecnichi basi, andemu à i sprites più chjuchi.
1. Sceglite una paleta
U pixel hè un cuncettu assai più profundo in l'arte di pixel chì in qualsiasi altru regnu digitale. Pixel art hè definitu da e so limitazioni, cum'è i culori. Hè impurtante di sceglie a paleta ghjusta, aiutarà à definisce u vostru stile. Ma à u principiu, suggerenu di ùn pensà micca à e palette è di sceglie unu di quelli esistenti (o solu uni pochi di culori casuali) - pudete facilmente cambià in ogni stadiu.
Per questu tutoriale, useraghju a paleta di culori 32 chì avemu creatu . Per pixel art, sò spessu assemblati da 32 o 16 culori. U nostru hè pensatu per una cunsola fittizia chì puderia apparisce in qualchì locu trà Famicom è PC Engine. Pudete piglià o qualsiasi altru - u tutoriale ùn dipende micca da a paleta scelta.
2. Contorni ruvidi
Cuminciamu à disegnà cù u strumentu Pencil. Dicemu u sketch in u listessu modu chì facemu cù una penna regulare è carta. Di sicuru, l'arte di pixel è l'arti tradiziunale si sovrapponenu, soprattuttu quandu si tratta di sprites cusì grande. I mo osservazioni mostranu chì i forti artisti di pixel art sò almenu boni à u disegnu a manu libera è viceversa. Allora u sviluppu di cumpetenze di disegnu hè sempre utile.
3. Contouring
Finalizemu i contorni: sguassate pixel extra è riduce u spessore di ogni linea à un pixel. Ma chì hè esattamente redundante? Per risponde à sta quistione, avete bisognu di capiscenu e linee di pixel è i bumps.
bumps
Avete bisognu à amparà à disegnà duie linee basi in pixel art: linee dritte è curve. Cù penna è carta hè tutta di cuntrollu di i musculi, ma avemu travagliatu cù picculi blocchi di culore.
A chjave per disegnu linee di pixel propiu hè a rugosità. Quessi sò pixel unichi o picculi segmenti chì distrughjenu a liscia di a linea. Cumu l'aghju dettu prima, un solu pixel hè di grande impurtanza in l'arte di pixel, cusì l'irregularità pò arruvinà tutta l'estetica. Immaginate chì state tracendu una linea retta nantu à carta è di colpu qualcunu chjappà à u tavulu: i bumps in pixel art sembranu cum'è un squiggle casuale.
esempi:
Linii diretta
Curve
L'incurvatura appare nantu à e curve quandu a lunghezza di i segmenti di linea ùn aumenta o diminuisce gradualmente.
Hè impussibile di evità cumplettamente i bumps - tutti i vostri ghjochi retro preferiti l'anu (salvo chì, sicuru, l'arte di pixel hè custituita interamente da forme simplici). Scopu: per minimizzà l'irregularità, mentre mostra tuttu ciò chì avete bisognu.
4. Applicà i primi culori
Culore u vostru caratteru cù un pienu o un altru strumentu adattatu. A paleta simplificà sta parte di u travagliu. Se u software ùn furnisce micca l'usu di palette, pudete mette direttamente in a stampa, cum'è in l'esempiu sopra, è selezziunate i culori cù un contagocce.
In u cantonu inferiore manca, aghju disegnatu u nostru amicu, cunnosce, questu hè Shar. Cù ellu, serà più faciule per capisce ciò chì succede esattamente in ogni stadiu.
5. Ombra
Hè ora di rende l'ombra - solu aghjunghje culori più scuri à u sprite. Allora l'imaghjini pareranu tridimensionali. Assumimu chì avemu una fonte di luce situata sopra l'orcu à a manca. Questu significa chì tuttu ciò chì hè sopra è davanti à u nostru caratteru serà illuminatu. Aghjunghjite ombre à u fondu à diritta.
Forma è volumine
Se stu passu hè difficiule per voi, imagine u vostru disegnu cum'è forme tridimensionali, è micca solu linee è culore. Forme esistenu in u spaziu XNUMXD è ponu avè u voluminu chì custruemu cù ombre. Questu aiuterà à visualizà u caratteru senza detaglii è fà chì pare chì hè fattu di argilla invece di pixel. L'ombra ùn hè micca solu per aghjunghje novi culori, hè di custruisce una forma. Nant'à un caratteru ben detallatu, i ditaglii ùn oscureghjanu micca i formi basi: se squint, vi vede parechji grandi gruppi di luce è ombra.
Lisciatura (anti-aliasing, anti-aliasing)
Ogni volta chì aghju utilizatu un novu culore, appiccicà l'anti-aliasing (AA). Aiuta à liscia i pixel aghjunghjendu culori intermedi in i cantoni induve dui segmenti di linea si scontranu:
I pixel grigi ammorbidiscenu i "rumpi" in a linea. U più longu u segmentu di linea, più longu u segmentu AA.
Hè cusì chì AA pare nantu à a spalla di l'orcu. Hè necessariu per allisà e linee chì rapprisentanu a curva di i so musculi.
L'anti-aliasing ùn deve esse micca più di u sprite chì serà utilizatu in u ghjocu o contru un fondo chì u culore hè scunnisciutu. Per esempiu, se applicate AA à un fondo chjaru, l'anti-aliasing parerà bruttu nantu à un fondo scuru.
6. Circuitu selettivu
Nanzu, i contorni eranu completamente neri, chì facia chì u sprite pareva assai cartoonish. A stampa paria esse divisa in segmenti. Per esempiu, i linii neri nantu à u bracciu mostranu a musculatura troppu cuntrastanti, è u caratteru pare menu solidu.
Se u sprite diventa più naturali, è a segmentazione ùn hè micca cusì evidenti, allora e forme basi di u caratteru seranu più faciuli di leghje. Per fà questu, pudete aduprà un contornu selettivu - rimpiazzà parzialmente u contornu nìvuru cù un liggeru. Nantu à a parte illuminata di u sprite, pudete aduprà i culori più chjaru o, induve u sprite hè in cuntattu cù u spaziu negativu, pudete sguassate cumplettamente u contornu. Invece di nìvuru, avete bisognu di usà u culore chì hè statu sceltu per l'ombra - questu modu a segmentazione serà cunservata (per distingue trà i musculi, fur, etc.).
Ancu in questu stadiu aghju aghjustatu ombre più scure. Hè risultatu trè gradazioni di verde nantu à a pelle di un orcu. U culore verde più scuru pò esse usatu per u contour selettivu è AA.
7. Finitura
À a fine, vale a pena aghjunghje punti culminanti (i spots più ligeri nantu à u sprite), dettagli (arecchi, studs, scars) è altre migliure finu à chì u caratteru hè prontu o finu à chì avete da passà à u prossimu.
Ci sò parechji trucchi utili chì ponu esse appiicati in questa fase. Rotate u disegnu horizontale, questu spessu aiuta à revelà errori in proporzioni è ombre. Pudete ancu sguassà u culore - stabilisce a saturazione à cero per capiscenu induve avete bisognu di cambià l'ombra.
Creazione di rumore (dithering, dithering)
Finu a ora, avemu soprattuttu utilizatu pezze grandi è solidi di ombre. Ma ci hè una altra tecnica - dithering, chì permette di passà da un culore à l'altru senza aghjunghje un terzu. Fighjate à l'esempiu sottu.
U gradiente superiore scuru à u lume usa centinaie di sfarenti sfumature di blu.
U gradiente mediu solu usa novi culori, ma hà ancu troppu sfumature di u stessu culore. Ci hè un banding chjamatu (da a banda inglesa - una striscia), in quale, per via di strisce uniformi grossi, l'ochju fucalizza nantu à i punti di cuntattu di i culori, invece di i culori stessi.
In u gradiente di fondu, avemu appiicatu un dither chì evita banding è usa solu dui culori. Creemu un sonu d'intensità variata per simulà a gradazione di culore. Sta tecnica hè assai simile à a mezza tinta utilizata in stampa; è ancu di stippling (stippling - image granulata) - in l'illustrazione è i fumetti.
Nantu à l'orcu, aghju dithered un pocu per trasmette a texture. Certi artisti di pixel ùn l'utilizanu micca in tuttu, mentre chì altri ùn sò micca timidi è facenu assai abilmente. Pensu chì u dithering si vede megliu nantu à grandi spazii pieni di un unicu culore (guardate u celu in a screenshot di Metal Slug sopra) o spazii chì duveranu vede ruvide è irregolari (cum'è a terra). Decide per sè stessu cumu aduprà.
Se vulete vede un esempiu di dithering à grande scala è di alta qualità, fighjate à i ghjochi di The Bitmap Brothers, un studiu britannicu di l'anni 80, o ghjochi nantu à l'urdinatore PC-98. Basta à tene in mente chì sò tutti NSFW.
Kakyusei (PC-98). Elf, 1996
Ci hè solu 16 culori in questa imagine!
8. Ultimu sguardu
Unu di i periculi di l'arte di pixel hè chì pare ligeru è simplice (per via di e so limitazioni di struttura è stile). Ma à a fine, passerete una quantità enormosa di tempu per sintonizà i vostri sprites. Hè cum'è un puzzle chì deve esse risoltu, per quessa, l'arte di pixel appellu à i perfeccionisti. Ricurdativi chì un sprite ùn deve micca troppu longu - hè solu un pezzu di una cullizzioni estremamente cumplessa di pezzi. Hè impurtante di ùn perde micca a vista di u big picture.
Ancu s'è u vostru pixel art ùn hè micca per i ghjoculi, qualchì volta vale à dì à sè stessu, "Hè abbastanza bè digià!" E vai avanti. U megliu modu per sviluppà e cumpetenze hè di passà per tuttu u prucessu da u principiu à a fine quante volte pussibule, utilizendu quant'è temi possibili.
E qualchì volta hè utile per lascià un sprite per un pocu tempu per pudè fighjà cù l'ochji freschi un pocu dopu.
32 × 32 pixel
Avemu creatu u big sprite 96x96 pixel prima, perchè à quella dimensione hè più cum'è disegnu o pittura, ma pixelatu. U più chjucu u sprite, u menu s'assumiglia à ciò chì deve vede, è u più impurtante hè ogni pixel.
In Super Mario Bros. L'ochju di Mario hè solu dui pixel impilati unu sopra l'altru. È ancu a so orechja. U creatore di caratteri Shigeru Miyamoto hà dettu chì u mustache era necessariu per separà u nasu da u restu di a faccia. Allora una di e caratteristiche principali di a faccia di Mario ùn hè micca solu un disignu di caratteru, ma ancu un truccu pragmaticu. Chì cunfirma l'antica saviezza - "a necessità hè a mamma di l'ingenuità".
Avemu digià familiarizatu cù e tappe principali di a creazione di un sprite di pixel 32 × 32: sketch, culore, ombre, più raffinamentu. Ma in tali cundizioni, cum'è un sketch iniziale, aghju pigliatu forme culurite invece di disegnà contorni per via di a piccula dimensione. U culore ghjoca un rolu più impurtante in a definizione di caratteri chè i contorni. Fighjate à Mario di novu, ùn hà micca cuntorni in tuttu. Ùn sò solu i mustachi sò interessanti. I so sideburns definiscenu a forma di l'arechje, e maniche mostranu i so braccia, è a forma generale riflette più o menu chjaramente u so corpu tutale.
A creazione di picculi sprites hè un scambiu constantu. Sè aghjunghje un colpu, pudete perde u spaziu per l'ombra. Se u vostru caratteru hà brazzi è gammi chjaramente definiti, a testa hè prubabile micca esse assai grande. Utilizà u culore, u trattu selettivu è l'anti-aliasing in modu efficace farà chì l'ughjettu resu pare più grande di ciò chì hè veramente.
Per i picculi sprites, mi piace u stilu chibi: i caratteri sò assai cute, anu grandi capi è ochji. Una bella manera di creà un caratteru luminoso in un spaziu limitatu, è in generale, un stile assai piacevule. Ma forsi avete bisognu di dimustrà a mobilità o a forza di u caratteru, allora pudete dà menu spaziu à a testa per fà u corpu più putente. Tuttu dipende di e vostre preferenze è scopi.
Tutta a squadra hè quì !
Formati di fugliale
Un tali risultatu pò fà chì ogni artista di pixel hè nervoso
A stampa chì vede hè u risultatu di salvà a stampa cum'è JPG. Una parte di e dati hè stata persa per via di l'algoritmi di compressione di file. L'arte di pixel d'alta qualità finiscinu per vede male, è rinvià à a so paleta originale ùn serà micca faciule.
Per salvà una maghjina statica senza perde a qualità, utilizate u formatu PNG. Per l'animazioni - GIF.
Cumu sparte pixel art in u modu ghjustu
U sparte di pixel art nantu à e social media hè una bella manera di riceve feedback è scuntrà altri artisti chì travaglianu in u listessu stile. Ùn vi scurdate di aduprà l'hashtag #pixelart. Sfurtunatamente, e rete soziale spessu convertenu PNG à JPG senza dumandà, aggravendu u vostru travagliu. È ùn hè micca sempre chjaru perchè a vostra foto hè stata cunvertita.
Ci sò qualchi cunsiglii nantu à cumu salvà pixel art in a qualità ghjustu per diverse rete suciale.
Per mantene u schedariu PNG senza cambià in Twitter, utilizate menu di 256 culori, o chì u vostru schedariu hè menu di 900 pixel long. Puderia aumentà a dimensione di u schedariu à almenu 512x512 pixel. È cusì chì a scala hè un multiplu di 100 (200%, micca 250%) è i bordi sharp sò cunservati (Nearest Neighbor in Photoshop).
GIF animati per i posti di Twitter pesa micca più di 15 MB. A stampa deve esse almenu 800x800 pixel, l'animazione di looping deve esse ripetuta trè volte, è l'ultimu quadru deve esse a mità di u tempu di tutti l'altri - a teoria più populari. In ogni casu, ùn hè micca chjaru in quale misura queste esigenze deve esse soddisfatte, postu chì Twitter cambia constantemente i so algoritmi di visualizazione di l'imaghjini.
Quantu sò, ùn hè micca pussibule di pubblicà una foto à Instagram senza perdita di qualità. Ma sarà certamente megliu se l'aumente à almenu 512x512 pixel.
Source: www.habr.com