Sendependaj programistoj ofte devas kombini plurajn rolojn samtempe: luddezajnisto, programisto, komponisto, artisto. Kaj se temas pri bildoj, multaj homoj elektas pikselan arton - unuavide, ĝi ŝajnas simpla. Sed por fari ĝin bela, vi bezonas multan sperton kaj certajn kapablojn. Mi trovis lernilon por tiuj, kiuj ĵus ekkomprenis la bazojn de ĉi tiu stilo: kun priskribo de specialaj programaroj kaj desegnaj teknikoj uzante du spritojn kiel ekzemplon.
Fono
Piksela arto estas formo de cifereca arto, en kiu ŝanĝoj estas faritaj je la piksela nivelo. Ĝi estas plejparte rilata al videoludaj grafikoj de la 80'oj kaj 90'oj. Tiam la artistoj devis konsideri la limojn de memoro kaj malalta rezolucio. Nun piksela arto daŭre estas populara en ludoj kaj kiel arta stilo ĝenerale, malgraŭ la ebleco krei realismajn 3D-grafikojn. Kial? Eĉ krom nostalgio, krei bonegan laboron en tia rigida kadro estas bela kaj rekompenca defio.
La baro al eniro en piksel-arto estas relative malalta kompare kun tradicia arto kaj 3D-grafikaĵoj, kiuj altiras sendependajn programistojn. Sed ĉi tio ne signifas, ke ĝi estos facila fini ludo en ĉi tiu stilo. Mi vidis multajn sendependajn programistojn kun pikselaj artaj metroidvanioj sur crowdfunding platformoj. Ili pensis, ke ili finos ĉion en unu jaro, sed fakte ili bezonis pliajn ses jarojn.
Metala Limako 3 (Arkado). SNK, jaro 2000
Piksel-arto je la nivelo, kiun plej multaj homoj volas krei, estas tempopostula, kaj mallongaj lerniloj estas malmultaj kaj malproksimaj. Kiam vi laboras kun 3D-modelo, vi povas turni ĝin, deformi ĝin, movi ĝiajn individuajn partojn, kopii kuraĝigojn de unu modelo al alia, ktp. Altnivela piksela arto preskaŭ ĉiam bezonas multe da penado por meti pikselojn sur ĉiu kadro.
Ĝenerale, mi avertis.
Kaj nun iomete pri mia stilo: mi ĉefe desegnas pikselan arton por videoludoj kaj trovas inspiron en ili. Precipe mi estas ŝatanto de Famicom/NES, 16-bitaj konzoloj kaj 90aj arkadludoj. La piksela arto de miaj plej ŝatataj ludoj de la epoko povas esti priskribita kiel brila, memcerta kaj pura (sed ne tro), ĝi ne estas malfacila kaj minimumisma. Mi mem laboras en ĉi tiu stilo, sed vi povas facile apliki la ideojn kaj teknikojn de ĉi tiu lernilo por krei tute malsamajn aferojn. Esploru la verkon de diversaj artistoj kaj kreu la pikselan arton, kiun vi amas!
Milda
Bazaj ciferecaj iloj por pikseloj - Zoom (Zoom) kaj Krajono (Krajono) por meti pikselojn. Vi ankaŭ bezonos Linio (Linio), Figuro (Formo), Elektu (Elektu), Movi (Movi) kaj Plenigi (Farbujo). Estas multaj senpagaj kaj pagitaj programoj kun tia aro da iloj. Mi parolos pri la plej popularaj kaj tiuj, kiujn mi mem uzas.
Farbo (senpaga)
Se vi havas Vindozon, Paint estas enkonstruita en ĝi - primitiva programo, sed ĝi havas ĉiujn ilojn por piksela arto.
(estas senpaga)
Neatendite funkcia piksela arta redaktilo, kiu trairas la retumilon. Vi povas eksporti vian verkon al PNG aŭ vigla GIF. Bonega elekto por komencantoj.
(estas senpaga)
GraphicsGale estas la nura redaktilo pri kiu mi aŭdis specife desegnita por piksela arto, kiu inkluzivas animaciajn ilojn. Ĝi estis kreita de la japana kompanio HUMANBALANCE. Ekde 2017, ĝi estas distribuita senpage kaj daŭre estas postulata, malgraŭ la kreskanta populareco de Aseprite. Bedaŭrinde ĝi funkcias nur en Vindozo.
($)
Eble la plej populara redaktisto nuntempe. , tunoj da funkcioj, aktiva subteno, versioj por Vindozo, Mac kaj Linukso. Se vi estas serioza pri piksel-arto kaj ankoraŭ ne trovis la ĝustan redaktilon, ĉi tiu povus esti tiu por vi.
($$+)
GameMaker Studio 2 estas bonega 2D-ilo kun bona Sprite Editor. Se vi volas krei pikselan arton por viaj propraj ludoj, estas tre oportune fari ĉion en unu programo. Nun mi uzas ĉi tiun programaron en mia laboro , kolekto de 50 retroludoj: mi kreas spritojn kaj animaciojn en GameMaker, kaj kahelojn en Photoshop.
($$$+)
Photoshop estas multekosta programaro, distribuita per abono, ne desegnita por piksela arto. Mi ne rekomendas aĉeti ĉi tion krom se vi ŝatas altdizoluciajn ilustraĵojn aŭ vi ne bezonas fari kompleksan bildmanipuladon kiel mi. Vi povas krei statikajn spritojn kaj pikselan arton en ĝi, sed ĝi estas sufiĉe kompleksa kompare kun speciala programaro (kiel GraphicsGale aŭ Aseprite).
Aliaj
Mia piksela arta ilaro. Ĉio estas nigra, mi ĵus rimarkis.
Grafika tablojdo ($$+)
Mi rekomendas grafiktablojn por ajna cifereca ilustra laboro por eviti karpa tunela sindromo. Estas multe pli facile malhelpi ol kuraci. Iun tagon vi sentos la doloron kaj ĝi nur plimalboniĝos - zorgu pri vi mem ekde la komenco. Pro tio, ke mi antaŭe desegnis per muso, mi nun malfacile ludas ludojn, kiuj postulas, ke vi premu klavojn. Nuntempe mi uzas Wacom Intuos Pro S.
Pojna subteno ($)
Se vi ne povas akiri tabuleton, almenaŭ aĉetu pojnan kalibron. Mia plej ŝatata estas la Mueller Green Fitted Wrist Brace. La ceteraj aŭ tro streĉas aŭ provizas nesufiĉan subtenon. Kovaliloj povas esti menditaj interrete sen problemoj.
96 × 96 rastrumeroj
fina batalo. Capcom, 1989
Ni komencu! Ni komencu per 96x96 px-karaktera sprite. Ekzemple, mi desegnis orkon kaj metis ĝin sur la ekrankopio de Final Fight (bildo supre) por ke vi ricevu la skalon. Ĉi tio большой sprite por la plej multaj retro-ludoj, grandeco de ekrankopio: 384×224 pikseloj.
Sur tia granda sprite, estos pli facile montri la teknikon, pri kiu mi volas paroli. Ankaŭ piksela bildigo pli similas al tradiciaj artaj formoj (kiel desegnaĵo aŭ pentrado), kun kiuj vi eble pli konas. Majstrinte la bazajn teknikojn, ni transiros al pli malgrandaj spritoj.
1. Elektu paletron
La pikselo estas multe pli profunda koncepto en piksela arto ol en iu ajn alia cifereca sfero. Pixel arto estas difinita per siaj limigoj, kiel koloroj. Gravas elekti la ĝustan paletron, ĝi helpos difini vian stilon. Sed komence, mi sugestas ne pensi pri paletroj kaj elekti unu el la ekzistantaj (aŭ nur kelkaj hazardaj koloroj) - vi povas facile ŝanĝi ĝin en ajna etapo.
Por ĉi tiu lernilo, mi uzos la 32-koloran paletron, por kiu ni kreis . Por piksela arto, ili ofte estas kunvenitaj de 32 aŭ 16 koloroj. Nia estas desegnita por fikcia konzolo, kiu povus aperi ie inter la Famicom kaj la PC Engine. Vi povas preni ĝin aŭ ajnan alian - la lernilo tute ne dependas de la elektita paletro.
2. Malglataj konturoj
Ni komencu desegni per la ilo Krajono. Ni desegnu la skizon same kiel ni faras ĝin per regula skribilo kaj papero. Kompreneble, piksel-arto kaj tradicia arto interkovras, precipe se temas pri tiaj grandaj spritoj. Miaj observoj montras, ke fortaj pikselaj artaj artistoj estas almenaŭ bonkapablaj pri libermana desegnado kaj inverse. Do disvolvi desegnajn kapablojn ĉiam utilas.
3. Konturado
Ni finas la konturojn: forigu kromajn pikselojn kaj reduktas la dikecon de ĉiu linio al unu pikselo. Sed kio ĝuste estas redunda? Por respondi ĉi tiun demandon, vi devas kompreni la pikselojn kaj tuberojn.
tuberoj
Vi devas lerni kiel desegni du bazajn liniojn en piksela arto: rektaj linioj kaj kurboj. Per plumo kaj papero ĉio temas pri muskola kontrolo, sed ni laboras kun etaj koloroj.
La ŝlosilo por desegni taŭgajn piksajn liniojn estas malglateco. Ĉi tiuj estas unuopaj pikseloj aŭ malgrandaj segmentoj, kiuj detruas la glatecon de la linio. Kiel mi diris antaŭe, unu pikselo tre gravas en piksela arto, do neegaleco povas ruinigi la tutan estetikon. Imagu, ke vi desegnas rektan linion sur papero kaj subite iu batas la tablon: ŝvelaĵoj en piksela arto aspektas same kiel hazarda squiggle.
ekzemploj:
Rektaj linioj
Kurboj
Denteco aperas sur kurboj kiam la longo de liniaj segmentoj ne pliiĝas aŭ malpliiĝas iom post iom.
Estas neeble tute eviti ŝvelaĵojn—ĉiuj viaj plej ŝatataj retroludoj havas ilin (krom se, kompreneble, piksela arto konsistas tute el simplaj formoj). Celo: minimumigi malregulaĵojn, montrante ĉion, kion vi bezonas.
4. Apliki la unuajn kolorojn
Koloru vian karakteron per plenigaĵo aŭ alia taŭga ilo. La paletro simpligos ĉi tiun parton de la laboro. Se la programaro ne provizas la uzon de paletoj, vi povas meti ĝin rekte en la bildon, kiel en la supra ekzemplo, kaj elekti kolorojn per okulgutulo.
En la malsupra maldekstra angulo, mi desegnis nian amikon, konatiĝu, ĉi tiu estas Shar. Kun ĝi, estos pli facile kompreni kio precize okazas en ĉiu etapo.
5. Ombrigo
Estas tempo por bildigi la ombrojn - nur aldonu pli malhelajn kolorojn al la sprite. Do la bildo aspektos tridimensia. Ni supozu, ke ni havas unu lumfonton situantan super la orko maldekstre de ĝi. Ĉi tio signifas, ke ĉio, kio estas super kaj antaŭ nia karaktero, estos prilumita. Aldonu ombrojn malsupre dekstre.
Formo kaj volumeno
Se ĉi tiu paŝo estas malfacila por vi, imagu vian desegnon kiel tridimensiajn formojn, kaj ne nur liniojn kaj kolorojn. Formoj ekzistas en XNUMXD-spaco kaj povas havi volumon, kiun ni konstruas per ombroj. Ĉi tio helpos vidi la karakteron sen detaloj kaj aspekti kiel ĝi estas farita el argilo anstataŭ pikseloj. Ombrigi ne nur temas pri aldoni novajn kolorojn, ĝi temas pri konstruado de formo. Ĉe bone detala karaktero, la detaloj ne malklarigas la bazajn formojn: se vi strambas, vi vidos plurajn grandajn aretojn de lumo kaj ombro.
Glatigo (kontraŭalising, kontraŭaliasing)
Ĉiufoje kiam mi uzas novan koloron, mi aplikas kontraŭaliasing (AA). Ĝi helpas glatigi pikselojn aldonante mezajn kolorojn ĉe la anguloj, kie du liniaj segmentoj renkontiĝas:
Grizaj pikseloj mildigas "rompojn" en la linio. Ju pli longa estas la linio-segmento, des pli longa estas la AA-segmento.
Jen kiel AA aspektas sur la ŝultro de la orko. Necesas glatigi la liniojn, kiuj reprezentas la kurbon de liaj muskoloj.
Kontraŭaliasing ne devus iri preter la sprite kiu estos uzita en la ludo aŭ kontraŭ fono kies koloro estas nekonata. Ekzemple, se vi aplikas AA al hela fono, kontraŭ-aliasing aspektos malbela sur malhela fono.
6. Selektema konturo
Antaŭe, la konturoj estis tute nigraj, kio igis la sprite aspekti tre karikatura. La bildo ŝajnis esti dividita en segmentojn. Ekzemple, la nigraj linioj sur la brako montras la muskolaron tro kontraste, kaj la karaktero aspektas malpli solida.
Se la sprito fariĝas pli natura, kaj la segmentado ne estas tiel evidenta, tiam la bazaj formoj de la karaktero estos pli facile legeblaj. Por fari tion, vi povas uzi selekteman konturon - parte anstataŭigi la nigran konturon per pli hela. Sur la lumigita parto de la sprite, vi povas uzi la plej malpezajn kolorojn aŭ, kie la sprite estas en kontakto kun negativa spaco, vi povas tute forigi la konturon. Anstataŭ nigra, vi devas uzi la koloron, kiu estis elektita por la ombro - tiamaniere la segmentado estos konservita (por distingi inter muskoloj, pelto, ktp).
Ankaŭ en ĉi tiu etapo mi aldonis pli malhelajn ombrojn. Montriĝis tri gradaĵoj de verdo sur la haŭto de orko. La plej malhela verda koloro povas esti uzata por selektema konturo kaj AA.
7. Finaj tuŝoj
Je la fino, indas aldoni lumaĵojn (la plej malpezajn punktojn sur la sprite), detalojn (orelringoj, ŝtopiloj, cikatroj) kaj aliajn plibonigojn ĝis la karaktero estas preta aŭ ĝis vi devos pluiri al la sekva.
Estas pluraj utilaj lertaĵoj, kiuj povas esti aplikataj en ĉi tiu etapo. Turnu la desegnon horizontale, tio ofte helpas malkaŝi erarojn en proporcioj kaj ombro. Vi ankaŭ povas forigi la koloron - agordi la saturadon al nulo por kompreni kie vi devas ŝanĝi la ombrojn.
Krei bruon (dithering, dithering)
Ĝis nun, ni plejparte uzis grandajn, solidajn pecetojn de ombroj. Sed ekzistas alia tekniko - dithering, kiu ebligas al vi iri de unu koloro al alia sen aldoni trionon. Rigardu la ekzemplon sube.
La supra malhela ĝis hela gradiento uzas centojn da malsamaj bluaj nuancoj.
La meza gradiento nur uzas naŭ kolorojn, sed ĝi ankoraŭ havas tro multajn nuancojn de la sama koloro. Estas tiel nomata banding (el la angla bando - strio), en kiu, pro dikaj uniformaj strioj, la okulo fokusiĝas al la kontaktopunktoj de la koloroj, anstataŭ al la koloroj mem.
Sur la malsupra gradiento, ni aplikis dither, kiu evitas bendojn kaj uzas nur du kolorojn. Ni kreas bruon de ŝanĝiĝanta intenseco por simuli kolorgradecon. Tiu ĉi tekniko estas tre simila al la duontono uzata en presado; same kiel punktado (stippling - grajneca bildo) - en ilustraĵo kaj bildstrioj.
Sur la orko, mi tre ŝanceliĝis por transdoni la teksturon. Iuj pikselaj artistoj tute ne uzas ĝin, dum aliaj ne estas timemaj kaj faras ĝin tre lerte. Mi trovas ke dithering aspektas plej bone sur grandaj areoj plenigitaj per ununura koloro (rigardu la ĉielon en la Metal Slug ekrankopio supre) aŭ areoj kiuj devus aspekti malglataj kaj malebenaj (kiel malpuraĵo). Decidu mem kiel uzi ĝin.
Se vi volas vidi ekzemplon de grandskala kaj altkvalita dithering, rigardu la ludojn de The Bitmap Brothers, brita studio de la 80-aj jaroj, aŭ ludojn sur la komputilo PC-98. Nur memoru, ke ili ĉiuj estas NSFW.
Kakyusei (PC-98). Elfo, 1996
Estas nur 16 koloroj en ĉi tiu bildo!
8. Lasta rigardo
Unu el la danĝeroj de piksela arto estas, ke ĝi ŝajnas malpeza kaj simpla (pro ĝiaj strukturo kaj stilaj limigoj). Sed finfine, vi pasigos grandegan tempon por agordi viajn spritojn. Ĝi estas kiel enigmo, kiu devas esti solvita, tial piksela arto allogas perfektistoj. Memoru, ke unu spritaĵo ne devus daŭri tro longe - ĝi estas nur eta peco de ekstreme kompleksa kolekto de pecoj. Gravas ne perdi la grandan bildon.
Eĉ se via piksela arto ne estas por videoludado, foje indas diri al vi mem, "Ĝi estas jam sufiĉe bona!" Kaj pluiru. La plej bona maniero por disvolvi kapablojn estas trairi la tutan procezon de komenco ĝis fino kiel eble plej multajn fojojn, uzante kiel eble plej multajn temojn.
Kaj foje estas utile lasi spriteton por iom poste, por ke vi povu rigardi ĝin per freŝaj okuloj.
32×32 rastrumeroj
Ni unue kreis la grandan 96x96-pikselon-spriton, ĉar je tiu grandeco ĝi estas pli kiel desegnado aŭ pentrado, sed pikselita. Ju pli malgranda la sprito, des malpli ĝi aspektas kiel tio, kion ĝi devus montri, kaj des pli gravas ĉiu pikselo.
En Super Mario Bros. La okulo de Mario estas nur du pikseloj stakigitaj unu super la alia. Kaj ankaŭ lia orelo. Karakterokreinto Shigeru Miyamoto diris ke la liphararo estis necesa por apartigi la nazon de la resto de la vizaĝo. Do unu el la ĉefaj trajtoj de la vizaĝo de Mario estas ne nur karaktero dezajno, sed ankaŭ pragmata lertaĵo. Kiu konfirmas la malnovan saĝon - "bezono estas la patrino de la saĝeco".
Ni jam konas la ĉefajn etaĝojn de kreado de 32×32-piksela sprite: skizo, koloro, ombroj, plia rafinado. Sed en tiaj kondiĉoj, kiel komenca skizo, mi reprenas kolorajn formojn anstataŭ desegni konturojn pro la malgranda grandeco. Koloro ludas pli gravan rolon en karaktero difino ol konturoj. Rigardu Mario'n denove, li tute ne havas konturojn. Ne nur lipharoj estas interesaj. Liaj vangoj difinas la formon de liaj oreloj, la manikoj montras liajn brakojn, kaj la ĝenerala formo pli-malpli klare reflektas lian tutan korpon.
Krei malgrandajn spritojn estas konstanta kompromiso. Se vi aldonas strekon, vi eble perdos spacon por la ombro. Se via karaktero havas klare difinitajn brakojn kaj krurojn, la kapo verŝajne ne estos tre granda. Uzante koloron, selekteman karesadon kaj kontraŭ-aliasing efike igos la bilditan objekton aspekti pli granda ol ĝi vere estas.
Por malgrandaj spritoj, mi ŝatas la ĉibian stilon: la karakteroj aspektas tre belaj, ili havas grandajn kapojn kaj okulojn. Bonega maniero krei brilan karakteron en limigita spaco, kaj ĝenerale, tre agrabla stilo. Sed eble vi devas montri la moveblecon aŭ forton de la karaktero, tiam vi povas doni malpli da spaco al la kapo por ke la korpo aspektu pli potenca. Ĉio dependas de viaj preferoj kaj celoj.
La tuta teamo estas ĉi tie!
Formatoj de dosieroj
Tia rezulto povas nervozigi ajnan pikselan artiston
La bildo, kiun vi vidas, estas la rezulto de konservado de la bildo kiel JPG. Parto de la datumoj estis perdita pro dosierkunpremaj algoritmoj. Altkvalita piksela arto finos aspekti malbone, kaj reveni ĝin al sia originala paletro ne estos facila.
Por konservi statikan bildon sen perdi kvaliton, uzu la formaton PNG. Por kuraĝigoj - GIF.
Kiel dividi pikselan arton ĝuste
Kunhavigi pikselan arton en sociaj amaskomunikiloj estas bonega maniero ricevi komentojn kaj renkonti aliajn artistojn, kiuj laboras en la sama stilo. Ne forgesu uzi la hashtagon #pixelart. Bedaŭrinde, sociaj retoj ofte konvertas PNG al JPG sen demandi, plimalbonigante vian laboron. Kaj ne ĉiam estas klare kial via bildo estis konvertita.
Estas kelkaj konsiloj pri kiel konservi pikselan arton en la ĝusta kvalito por diversaj sociaj retoj.
Por konservi la PNG-dosieron senŝanĝa en Twitter, uzu malpli ol 256 kolorojn, aŭ ke via dosiero longas malpli ol 900 pikselojn. Mi pliigus la dosiergrandecon al almenaŭ 512x512 pikseloj. Kaj tiel ke la skalo estas oblo de 100 (200%, ne 250%) kaj akraj randoj estas konservitaj (Plej Proksima Najbaro en Photoshop).
Viglaj GIF-oj por Twitter-afiŝoj pezas ne pli ol 15 MB. La bildo devas esti almenaŭ 800x800 pikseloj, la bukla animacio devas esti ripetita tri fojojn, kaj la lasta kadro devas esti duono de la tempo de ĉiuj aliaj - la plej populara teorio. Tamen, estas ne klare ĝis kia grado ĉi tiuj postuloj devus esti plenumitaj, ĉar Twitter konstante ŝanĝas siajn bildmontrajn algoritmojn.
Laŭ mia scio, ne eblas afiŝi bildon al Instagram sen perdo de kvalito. Sed ĝi certe aspektos pli bone se vi pligrandigos ĝin al almenaŭ 512x512 pikseloj.
fonto: www.habr.com