Pieni pikselitaide. Adobe Photoshop: Piirrä ja animoi Pixel Art -hahmo

Pikseligrafiikat (jäljempänä yksinkertaisesti pikselitaide) muistuttavat nykyään yhä enemmän itseään etenkin indie-pelien kautta. Tämä on ymmärrettävää, koska tällä tavalla taiteilijat voivat täyttää pelin hyvin monenlaisilla hahmoilla eivätkä viettää satoja tunteja kolmiulotteisten esineiden mallinnuksessa ja käsin piirtämässä monimutkaisia \u200b\u200besineitä. Jos haluat oppia pikselitaidetta, sinun on ensin opittava piirtämään ns. Sitten, kun spritit eivät enää pelota sinua, voit siirtyä animaatioon ja jopa myydä työsi!

Askeleet

Osa 1

Lataa hyvät kuvankäsittelyohjelmat. Voit tietysti luoda mestariteoksia Paintissa, mutta tämä on vaikeaa eikä kovin kätevää. Se toimisi paljon paremmin esimerkiksi:

• Photoshop
• Paint.net
• Pixen

1. Osta grafiikkatabletti. Jos et pidä piirtämisestä hiirellä, tarvitset tabletin ja kynän. Wacom-tabletit ovat muuten suosituimpia.

   Kytke "ruudukko" päälle grafiikkaeditorissasi. Itse asiassa, jos grafiikkaeditori ei tue ruudukkonäyttöä, sinun kannattaa miettiä toisen ohjelman etsimistä. Ruudukon avulla voit nähdä selvästi, missä ja miten kukin yksittäinen pikseli sijaitsee. Helmi otetaan yleensä käyttöön "Näytä" -valikossa.

   • Saatat joutua säätämään näyttöasetuksia hieman sen varmistamiseksi, että jokainen mesh-segmentti todella tuottaa pikselin. Jokainen ohjelma tekee tämän eri tavalla, joten etsi neuvoja miten se tehdään.

2. Piirrä 1 pikselin harjalla. Jokaisessa grafiikkaeditorissa on oltava lyijykynätyökalu. Valitse se ja aseta harjan kooksi 1 pikseli. Nyt voit piirtää ... pikseli kerrallaan.

   Osa 2

   Perustoimien harjoittelu

   1. Luo uusi kuva. Koska opit piirtämään pikselitaidetyyliin, sinun ei pitäisi tähtää eeppisiin kankaisiin. Jos muistat, Super Mario Brosissa. koko näyttö oli 256 x 224 pikseliä, ja Mario itse mahtui 12 x 16 pikselin tilaan!

      Lähennä. Kyllä, muuten et yksinkertaisesti näe yksittäisiä pikseleitä. Kyllä, sinun on lisättävä sitä paljon. Oletetaan, että 800% on varsin normaalia.

      Opi piirtämään suoria viivoja. Se näyttää olevan yksinkertainen, mutta jos yhtäkkiä, jonnekin keskelle, piirrät viiksellä 2 pikseliä paksun viivan vapisevalla kädellä, ero osuu silmiin. Piirrä suoria viivoja, kunnes sinun on aktivoitava suorien piirtotyökalu. Sinun on opittava piirtämään suorat viivat käsin!

      Opi piirtämään kaarevat viivat. Kaarevalla viivalla tulisi olla, sanotaan, yhtenäiset "viivan katkokset" (mikä näkyy selvästi yllä olevassa kuvassa). Oletetaan, että aloitat kaarevan viivan piirtämisen, piirrä suora viiva 6 pikseliä, sen alle - suora viiva kolmesta, sen alle - suora viiva kahdesta ja sen alle - yhden pikselin. Toisaalta piirrä sama asia (tietysti peilattu). Juuri tätä etenemistä pidetään optimaalisena. Käyrät, jotka on piirretty mallin “3-1-3-1-3-1-3” mukaan, eivät ole pikselitaiteen standardeja.

      Älä unohda poistaa virheitä. Pyyhekumi-työkalu tulee säätää kuin lyijykynä, harjan koko on 1 pikseli. Mitä suurempi on pyyhekumi, sitä vaikeampaa ei ole poistaa ylimääräistä, joten kaikki on loogista.

   Osa 3

   Luo ensimmäinen sprite

   Ajattele, mitä sprite palvelee. Onko se staattinen? Animoidut? Staattinen sprite voi olla kyllästetty yksityiskohdilla epäonnistumiseen asti, mutta on parempi tehdä animoitu yksinkertaisempi, jotta et viettää tuntikausia piirtämällä kaikkia yksityiskohtia animaation kaikkiin kehyksiin. Muuten, jos spriteesi on tarkoitus käyttää muiden kanssa, ne kaikki tulisi piirtää samalla tyylillä.

   Selvitä, onko spriteille erityisiä vaatimuksia. Jos etsit esimerkiksi projektia, on järkevää odottaa värejä tai tiedostokokoa koskevia vaatimuksia. Tämä on kuitenkin tärkeämpää hiukan myöhemmin, kun aloitat suurten projektien, joissa on monia erilaisia \u200b\u200bspriittejä.

   • Objektiivisesti katsottuna nykyään spriittien kokoa tai palettia koskevia vaatimuksia ei esitetä harvoin. Jos kuitenkin piirrät grafiikkaa pelille, jota pelataan vanhemmilla pelijärjestelmillä, sinun on otettava huomioon kaikki rajoitukset.

   1. Piirrä se. Luonnos paperilla on kaiken spriteen perusta, koska tällä tavalla pystyt ymmärtämään, miltä kaikki näyttää, ja tarvittaessa voit korjata jotain etukäteen. Lisäksi voit myös jäljittää paperipiirustuksen myöhemmin (jos sinulla on vielä tabletti).

      • Älä jätä yksityiskohtia luonnosteluun! Piirrä mitä haluat nähdä viimeisessä piirustuksessa.

   2. Siirrä luonnos grafiikkaeditoriin. Voit jäljittää paperipiirroksen tablet-laitteellasi, voit piirtää kaiken uudelleen käsin, pikseli kerrallaan - sillä ei ole väliä, valinta on sinun.

      • Kun luonnostelet luonnoksen, käytä ääriviivana 100% mustaa. Jos jotain, vaihdat sen manuaalisesti myöhemmin, mutta nyt on helpompaa työskennellä mustan kanssa.

   3. Tarkenna luonnoksen luonnosta. Tässä yhteydessä voit tietysti sanoa toisin - pyyhi kaikki tarpeettomat. Mikä on tarkoitus - ääriviivan on oltava 1 pikselin paksu. Vastaavasti lähennä ja poista, poista turhat ... tai viimeistele puuttuvat lyijykynällä.

      • Kun hahmottelet, älä häiritse yksityiskohtia - heidän vuoronsa tulee.

   Osa 4

   Sprite väritys

   1. Harjoittele väriteoriaa. Katso paletista, mitä värejä haluat käyttää. Kaikki on siellä yksinkertaista: mitä kauempana värit ovat toisistaan, sitä enemmän ne eroavat toisistaan; mitä lähempänä värit ovat toisiinsa, sitä enemmän ne ovat samanlaisia \u200b\u200bja sitä paremmin ne näyttävät vierekkäin.

      • Valitse värit, jotka saavat spriteesi näyttämään kauniilta eivätkä purra silmiäsi. Ja kyllä, pastellivärejä tulisi välttää (ellei koko projektisi ole tehty tässä tyylissä).

   2. Valitse useita värejä. Mitä enemmän värejä käytät, sitä enemmän "häiritsevä" spriteesi on niin sanottu. Katso klassista pikselitaidetta ja yritä laskea, kuinka monta väriä siellä käytetään.

      • Mario - värejä on vain kolme (jos puhumme klassisesta versiosta), ja jopa ne sijaitsevat paletilla melkein lähellä toisiaan.
      • Sonic - vaikka Sonic on piirretty yksityiskohtaisemmin kuin Mario, se perustuu silti vain neljään väriin (ja varjoihin).
      • Ryu on melkein klassikko spriteistä, kuten taistelupeleissä ymmärretään, Ryu on suuria alueita, jotka on maalattu yksinkertaisilla väreillä, sekä pieni varjo rajausta varten. Ryu on kuitenkin hieman monimutkaisempi kuin Sonic - värejä ja varjoja on jo viisi.

   3. Väritä sprite. Väritä spriteesi Paint Bucket Tool -työkalulla äläkä välitä kaikesta tasaiselta ja elottomalta näyttävältä - tässä vaiheessa ei odoteta mitään muuta. Maalikauhan toiminta on yksinkertaista - se täyttää kaikki napsauttamasi värin pikselit valitsemallasi värillä, kunnes se saavuttaa rajat.

   Osa 5

   Lisää varjot

   Valitse valonlähde. Mitä järkeä: Sinun on päätettävä, missä kulmassa valo putoaa spriteille. Tässä mielessä voit luoda uskottavan näköisiä varjoja. Kyllä, kirjaimellisesti ei tule "valoa", on tarkoitus kuvitella, kuinka se putoaa piirustukseen.

   • Yksinkertaisin ratkaisu on olettaa, että valonlähde on hyvin korkealla spriteen yläpuolella, hieman sen vasemmalla tai oikealla puolella.

   1. Aloita varjojen käyttö väreillä, jotka ovat hieman tummempia kuin perusvärit. Jos valo putoaa ylhäältä, missä varjo on? Aivan, missä suora valo ei putoa. Vastaavasti lisätäksesi varjon, lisää vain muutama kerros spriteeseen vastaavan värisillä pikseleillä ääriviivan ylä- tai alapuolella.

      • Jos pienennät perusvärin “Kontrasti” -asetusta ja lisäät hieman “Kirkkaus” -asetusta, saat hyvän värin varjon renderoimiseksi.
      • Älä käytä kaltevuuksia. Kaltevuudet ovat pahoja. Kaltevuudet näyttävät halvoilta, hakkerilta ja epäammattimaisilta. Gradienttien kaltainen vaikutus saavutetaan desimaatiotekniikalla (katso alla).

   2. Älä unohda penumbraa. Valitse väri perusvärin ja varjon värin välillä. Käytä sitä uuden kerroksen luomiseen - mutta näiden kahden värin kerrosten väliin. Tuloksena on siirtymävaikutus pimeästä alueesta vaaleaan alueeseen.

      Piirrä kohokohtia. Kohokohta on se, missä eniten valoa putoaa sprite. Voit piirtää korostuksen, jos otat värin, joka on hieman vaaleampi kuin perusväri. Tärkeintä ei ole saada häikäisyä, se häiritsee.

   Osa 6

   Käytämme kehittyneitä piirustustekniikoita

   Käytä ohennusta. Tämä tekniikka voi välittää muutoksen varjossa. Desimaation avulla voit luoda kaltevuusefektin vain muutamalla värillä sijoittamalla pikselit siirtymätehosteen luomiseksi. Kahden eri värin pikselien määrä ja sijainti huijaavat silmän näkemään erilaisia \u200b\u200bvarjoja.

   • Aloittelijat käyttävät usein harvennusta väärin, älä pidä siitä.

   1. Älä unohda anti-aliasingia (muodon epäsäännöllisyyksien poistaminen). Kyllä, pikselitaiteen tunnusmerkki on kuvan näennäinen "pikselisyys". Joskus haluat kuitenkin, että linjat näyttävät hieman vähemmän havaittavilta, hieman tasaisemmilta. Tässä tulee anti-aliasing.

      • Lisää käyriin välivärejä. Piirrä yksi välivärikerros tasoitettavan käyrän ääriviivan ympärille. Jos se näyttää edelleen kulmikkaalta, lisää toinen, kevyempi kerros.
      • Jos et halua, että sprite sulautuu taustaan, älä käytä liimauksen estoa spriteen ulkoreunaan ulkopuolelta.

   2. Opi käyttämään valikoivaa hahmonnusta. Mikä on tarkoitus: polku piirretään värillä, joka on samanlainen kuin täytteessä käytetty. Tuloksena on vähemmän "sarjakuvamainen" kuva, ja juuri johtuen ääriviivan realistisemmasta ulkonäöstä. Yritä sanoa, että renderoidaan iho valikoivasti ja jätetään klassinen musta ääriviiva vaatteille tai esineille.

Pikselitaide (kirjoitettu ilman väliviivaa) tai pikseligrafiikka - digitaalisen taiteen suunta, joka koostuu kuvien luomisesta pikselitasolla (eli vähimmäisloogisesta yksiköstä, josta kuva koostuu). Kaikki bittikartat eivät ole pikselitaidetta, vaikka ne kaikki koostuvat pikseleistä. Miksi? Koska pikselitaiteen käsite ei viime kädessä käsitä niinkään lopputulosta kuin kuvan luomisprosessia. Pikseli pikseliltä, \u200b\u200bja juuri niin. Jos otat digitaalisen valokuvan, pienennä sitä paljon (niin, että pikselit ovat näkyvissä) ja väitä, että piirrit sen tyhjästä - se olisi todellinen väärentäminen. Vaikka varmasti on naiiveja yksinkertaisuuksia, jotka ylistävät sinua kovasta työstäsi.

Nyt ei tiedetä, milloin tämä tekniikka syntyi, juuret ovat kadonneet jonnekin 1970-luvun alussa. Pienistä elementeistä koostuvien kuvien sommittelutekniikka palaa kuitenkin paljon muinaisempiin taidemuotoihin, kuten mosaiikki, ristipistot, maton kudonta ja helmikoristelu. Aivan samaa ilmaisua "pikselitaide" kuin pikselitaiteen määritelmää käytettiin ensimmäisen kerran Adele Goldbergin ja Robert Flegalin artikkelissa ACM-lehdessä (joulukuu 1982).

Kummallista kyllä, mutta Mr.Scientific and Technological Progress työnsi pikseligrafiikan viimeisiin paikkoihin 90-luvun puolivälissä ja palautti sen myöhemmin peliin - esittäen maailman mobiililaitteet matkapuhelinten ja kämmentietokoneiden muodossa. Loppujen lopuksi riippumatta siitä, kuinka hyödyllinen uusi laitteisto voi olla, sinä ja minä tiedämme, että jos et voi edes pelata pasianssiä siinä, se on arvoton. No, missä on pieni resoluutio, siellä on pikselitaidetta. Kuten sanotaan, tervetuloa takaisin.

2. Työkalut.

Mitä tarvitset pikselitaiteen luomiseen? Kuten edellä mainittiin, tietokone ja kaikki grafiikkaeditorit, jotka pystyvät toimimaan pikselitasolla, ovat riittäviä. Voit piirtää missä tahansa, jopa Game Boy -pelissä, jopa Nintendo DS: ssä tai jopa Microsoft Paintissa (toinen asia on, että jälkimmäiseen piirtäminen on erittäin hankalaa). Bittikartan muokkaajia on paljon, monet niistä ovat riittävän ilmaisia \u200b\u200bja toimivia, jotta jokainen voi päättää ohjelmistosta itse.

Tarvitset siis minkä tahansa grafiikkaeditorin, jonka avulla voit piirtää työkalulla yhdessä neliön pikselissä (pikselit voivat olla myös neliömäisiä, esimerkiksi pyöreitä, mutta ne eivät kiinnosta meitä tällä hetkellä). Jos editori tukee mitä tahansa värejä, hieno. Jos sen avulla voit myös tallentaa tiedostoja, se on hieno. Olisi myös mukavaa pystyä työskentelemään kerrosten kanssa, koska melko monimutkaisen kuvan parissa työskenteleminen on kätevämpää hajottaa sen elementit eri kerroksiin, mutta yleensä tämä on tapana ja mukavuutena.

3. Yleiset periaatteet.

Ja silti on olemassa muutamia yleisiä periaatteita, joita ei ole haittaa tietää. Niitä on todella vähän, kutsun niitä "periaatteiksi", en laiksi, koska ne ovat luonteeltaan melko neuvoja. Loppujen lopuksi, jos onnistut piirtämään loistavan pikselikuvan ohittamalla kaikki säännöt - kuka välittää niistä?

Perusperiaate voidaan muotoilla seuraavasti: kuvan vähimmäisyksikkö on pikseli, ja mikäli mahdollista, kaikkien koostumuksen elementtien tulisi olla suhteessa siihen. Selvitän: kaikki piirtämäsi koostuu pikseleistä, ja pikselin pitäisi olla luettavissa kaikessa. Tämä ei tarkoita sitä, ettei kuvassa voi olla lainkaan elementtejä, esimerkiksi 2x2 pikseliä tai 3x3. Mutta on silti parempi rakentaa kuva yksittäisistä pikseleistä.

Aivohalvauksen ja yleensä kaikkien piirrosten viivojen tulee olla yhden pikselin paksuisia (harvoja poikkeuksia lukuun ottamatta).

Murtumat vievät piirustukselta sen luonnollisen sileyden ja kauneuden. Ja jos fragmentit 3, 4 ja 5 ovat ilmeisiä ja ne voidaan helposti korjata, tilanne muiden kanssa on monimutkaisempi - siellä ketjussa olevan yhden kappaleen pituus on rikki, se tuntuisi pieneltä, mutta huomattavalta hienoiselta. Se vie vähän käytäntöä oppia näkemään tällaisia \u200b\u200bpaikkoja ja välttämään niitä. Kink 1 pudotetaan linjasta, koska se on yksi pikseli - kun taas alue, johon se kiilasi, viiva koostuu 2 pikselin segmenteistä. Päästäksesi eroon pehmentin käyrän tuloa taivutukseen laajentamalla yläosaa 3 pikseliin ja piirtämällä koko viivan uudelleen 2 pikselisegmentiksi. Kinkit 2 ja 6 ovat identtisiä toistensa kanssa - ne ovat jo 2 pikselin pituisia fragmentteja yksittäisten pikselien rakentamisalueilla.

Yksinkertainen joukko vinoa viivaa, joka löytyy melkein jokaisesta pikselitaidon opetusohjelmasta (minun ei ole poikkeus), auttaa välttämään tällaisia \u200b\u200bvääntöjä piirrettäessä:

Kuten näette, suora viiva koostuu samanpituisista segmenteistä, joita on siirretty yhdellä pikselillä piirrettäessä - tämä on ainoa tapa saavuttaa lineaarisuuden vaikutus. Yleisimmät rakennusmenetelmät, joiden segmentin pituus on 1, 2 ja 4 pikseliä (on muitakin, mutta esitettyjen vaihtoehtojen tulisi riittää melkein minkä tahansa taiteellisen idean toteuttamiseen). Näistä kolmesta suosituinta voidaan varmuudella kutsua 2 pikselin segmentin pituudeksi: piirrä segmentti, siirrä kynää 1 pikselillä, piirrä toinen segmentti, siirrä kynää 1 pikselillä, piirrä toinen segmentti:

Ei vaikeaa, eikö? Se vie vain tapana. Kyky piirtää viistot linjat 2 pikselin välein auttaa isometrisesti, joten pysymme siinä tarkemmin seuraavalla kerralla. Suorat viivat ovat yleensä hienoja - mutta vasta siihen asti, kun tehtävä syntyy piirtää jotain ihmeellistä. Tarvitsemme käyriä täällä ja paljon erilaisia \u200b\u200bkäyriä. Ja hyväksymme yksinkertaisen säännön kaarevien viivojen pyöristämiseksi: käyräelementtien pituuden tulisi pienentyä / kasvaa asteittain.

Poistuminen suorasta viivasta pyöristykseen tapahtuu sujuvasti, merkitsin kunkin segmentin pituuden: 5 pikseliä, 3, 2, 2, 1, 1, jälleen 2 (jo pystysuoraan), 3, 5 ja niin edelleen. Tapaus ei välttämättä käytä samaa järjestystä, kaikki riippuu vaaditusta sileydestä. Toinen pyöristävä esimerkki:

Jälleen: vältä kuvan pilaantumista. Jos haluat tarkistaa oppimasi materiaalin, tässä on tuntemattoman kirjoittajan piirtämä iho Winampille, tyhjä:

Kuvassa on karkeita virheitä, ja yksinkertaisesti epäonnistuneet fileet ja kinkut esiintyvät - yritä korjata kuva sen perusteella, mitä jo tiedät. Tämä on kaikki mitä minulla on viivojen kanssa, ehdotan piirtämistä vähän. Ja älä sekoita esimerkkien yksinkertaisuuteen, voit oppia piirtämään vain piirtämällä - jopa niin yksinkertaisia \u200b\u200basioita.

4.1. Piirrämme pullon elävällä vedellä.

1. Esineen muoto, kunhan et voi käyttää väriä.

2. Punainen neste.

3. Vaihda lasin väri siniseksi, lisää varjostetut alueet kuplan sisään ja vaalea alue nesteen oletetulle pinnalle.

4. Lisää kuplaan valkoisia kohokohtia ja 1 pikselin levyinen tummanpunainen varjo nesteen alueille, jotka reunustavat kuplan seinämiä. Näyttää hyvältä, vai mitä?

5. Piirrä pullo sinisellä nesteellä samalla tavalla - tässä on sama lasiväri ja nesteen kolme sinistä sävyä.

4.2. Piirrämme vesimeloni.

Piirretään ympyrä ja puoliympyrä - nämä ovat vesimeloni ja leikattu viipale.

2. Merkitään leikkaus itse vesimeloniin ja viipaleeseen - kuoren ja massan välinen raja.

3. Täytä. Paletin värit, keskivihreä on kuoren väri, keskipunainen on lihan väri.

4. Merkitään siirtymäalue kuoresta massaan.

5. Vesimelonin vaaleat raidat (lopulta se näyttää itseltään). Ja tietysti - siemenet! Jos ylität vesimelonin torakoiden kanssa, ne leviävät itseään.

6. Tuomme mieleen. Käytämme vaaleanpunaista väriä osoittamaan kohokohdat siementen päällä leikkauksessa, ja sijoittamalla pikselit ruutulautakuvioon saavutamme leikatusta viipasta jonkin verran tilavuutta (menetelmää kutsutaan ditheringiksi, lisää siitä myöhemmin) . Käytämme tummanpunaista sävyä osoittamaan varjostettuja paikkoja vesimelonin leikkauksessa ja tummanvihreää (jälleen pikseleitä ruutulautakuviona) lisäämään tilavuutta itse vesimeloniin.

5. Dittering.

Sekoittaminen tai sekoittaminen on tekniikka, jolla sekoitetaan pikseleitä ehdottomasti järjestetyllä (ei aina) tavalla kahdella eri väreillä. Yksinkertaisin, yleisin ja tehokas tapa on vaihtaa pikseleitä ruutulautakuviossa:

Tekniikka syntyi teknisten rajoitusten vuoksi (tai pikemminkin päinvastoin) - alustoilla, joilla on rajoitettu paletti, hämärtyminen mahdollisti kahden erivärisen pikselin sekoittamisen, jolloin saatiin kolmas, jota ei ollut paletissa:

Kaksi muuta vaihtoehtoa kaventamiseen:

Alla on esimerkki epäonnistuneesta ditheristä. Huolimatta siitä, että tällaista tekniikkaa löytyy usein videopelien spritistä, sinun on oltava tietoinen siitä, että television ruutu tasoitti kuvaa merkittävästi, ja tällaista kampaa ja jopa liikkeessä ei kiinnitetty silmällä:

No, tarpeeksi teoriaa. Ehdotan, että harjoitellaan vähän enemmän.

Pikselitaide voidaan piirtää mihin tahansa ohjelmaan rasterigrafiikan käsittelemiseksi, tämä on henkilökohtaisten mieltymysten ja kokemuksen (tietysti myös taloudellisten mahdollisuuksien) asia. Joku käyttää yksinkertaisinta maalia, teen sen Photoshopissa - koska ensinnäkin olen työskennellyt siinä jo pitkään, ja toiseksi olen mukavampi siellä. Kun päätin kokeilla ilmaista Paint.NET-verkkoa, en pidä siitä - se on kuin autolla, joka tunnistaa Zaporozhetsissa olevan ulkomaisen auton, jossa on automaattivaihteisto, ei todennäköisesti istu. Työnantajani toimittaa minulle lisensoituja ohjelmistoja, joten omatuntoni on puhdas ennen Adobe-yhtiötä ... Vaikka heidän ohjelmiensa hintoja ei voida kuvitella, ja he palavat helvetissä siitä.

1. Työn valmistelu.

Luo uusi asiakirja millä tahansa asetuksella (olkoon se 60 pikseliä leveä ja 100 pikseliä korkea). Pikselitaiteilijan päätyökalu on lyijykynä ( Lyijykynä työkalu, kutsutaan pikanäppäimellä B). Jos harja (ja harjakuvake) on käytössä työkalurivillä, vie hiiri sen päälle, pidä painettuna LMB - näkyviin tulee pieni avattava valikko, josta sinun pitäisi valita kynä. Aseta kynän kokoon 1 pikseli (vasemmassa yläpaneelissa oleva avattava valikko Harjata):

Pikselitaide aloittelijoille. | Johdanto.

Joitakin hyödyllisiä yhdistelmiä. " Ctrl + "Ja" Ctrl - "lähentää ja loitontaa kuvaa. On myös hyödyllistä tietää, että painaminen Ctrl ja "(lainausmerkit-joulukuusi tai venäläinen avain" E") Ottaa käyttöön ja poistaa ruudukon käytöstä, mikä auttaa paljon pikselitaidon piirtämisessä. Ruudukon askel tulisi myös säätää itsellesi, jollekin on helpompaa, kun se on 1 pikseli, olen tottunut siihen, että solun leveys on 2 pikseliä. Työntää Ctrl + K (tai siirry osoitteeseen Muokata->Asetukset), siirry kohtaan Oppaat, ruudukko ja viipaleet ja asenna Ruudukko 1 pikselin välein (Toistan, se on minulle helpompaa 2).

2. Piirustus.

Lopuksi aloitamme piirtämisen. Miksi luoda uusi kerros ( Ctrl + Vaihto + N), vaihda mustaksi kynän väriksi (painamalla D asettaa oletusvärit, mustavalkoinen) ja piirtää hahmon pään, minun tapauksessani tämä on symmetrinen ellipsi:

Pikselitaide aloittelijoille. | Johdanto.

Sen ala- ja yläpohjat ovat 10 pikseliä pitkiä, sitten on segmenttejä 4 pikseliä, kolme, kolme, yksi, yksi ja pystyviiva, jonka korkeus on 4 pikseliä. Suoria viivoja Photoshopissa on helppo piirtää puristimilla SiirtääVaikka kuvan mittakaava pikselitaidessa on minimaalinen, tämä tekniikka säästää joskus paljon aikaa. Jos teit virheen ja piirtänyt liikaa, kiipesi jonnekin ohi - älä lannistu, vaihda pyyhekumi-työkaluun ( Liian pyyhekumil tai " E») Ja poista turhat. Kyllä, muista asettaa pyyhekumi myös 1 pikselin kooksi niin, että pyyhkii pikseli kerrallaan, ja kynätila ( Tila: lyijykynä), muuten se ei poista tarvittavaa. Palatakseni takaisin kynään, haluan muistuttaa teitä B»

Yleensä tätä ellipsiä ei piirretä tiukasti pikselitaiteen sääntöjen mukaan, mutta taiteellinen muotoilu vaatii sitä. Koska tämä on tuleva pää, sen päällä on silmät, nenä, suu - tarpeeksi yksityiskohtia, jotka lopulta kiinnittävät katsojan huomion itseensä ja estävät halua kysyä, miksi pää on muodoltaan niin epäsäännöllinen.

Lisää piirustus, lisää nenä, antennit ja suu:

Pikselitaide aloittelijoille. | Johdanto.

Nyt silmät:

Pikselitaide aloittelijoille. | Johdanto.

Huomaa, että niin pienessä mittakaavassa silmien ei tarvitse olla pyöreitä - minun tapauksessani nämä ovat neliöitä, joiden sivupituus on 5 pikseliä ja joihin ei ole piirretty kulmapisteitä. Kun palaat alkuperäiseen asteikkoon, ne näyttävät melko pyöreiltä, \u200b\u200bja pallomaisuutta voidaan parantaa varjojen avulla (lisätietoja tästä myöhemmin oppitunnin 3. osiosta). Sillä välin korjaan hiukan pään muodon pyyhkimällä pari pikseliä yhteen paikkaan ja piirtämällä ne toiseen:

Pikselitaide aloittelijoille. | Johdanto.

Piirrämme kulmakarvat (mitään, mitä ne roikkuvat ilmassa - minulla on sellainen tyyli) ja kasvojen taittumat suun kulmiin, mikä tekee hymystä ilmeisemmän:

Pikselitaide aloittelijoille. | Johdanto.

Kulmat eivät vielä näytä kovin hyvältä, yksi pikselitaiteen sääntöistä sanoo, että jokainen vedon pikseli ja elementit voivat koskettaa enintään kahta vierekkäistä pikseliä. Mutta jos tutkit huolellisesti 80-luvun lopun - 90-luvun alun pelien spritit, tämä virhe löytyy siellä melko usein. Päätelmä - jos et voi, mutta todella haluat, niin voit. Tätä yksityiskohtaa voidaan toistaa myöhemmin täytön aikana varjojen avulla, joten nyt piirrämme edelleen. Torso:

Pikselitaide aloittelijoille. | Johdanto.

Ohita nilkat toistaiseksi, se näyttää hankalalta, korjaamme sen täytettäessä. Pieni korjaus: lisää vyö ja taitokset nivusiin ja valitse myös polvinivelet (käyttämällä pieniä 2 pikselin palasia, jotka ulottuvat jalkaviivasta):

Pikselitaide aloittelijoille. | Johdanto.

3. Täytä.

Hahmon jokaiselle osalle riittää toistaiseksi kolme väriä - päätäyttöväri, varjon väri ja viivan väri. Pikselitaiteen väriteoriassa on yleensä paljon neuvoja, alkuvaiheessa, älä epäröi vakoilla mestareiden työtä ja analysoida, kuinka he valitsevat värit. Jokaisen elementin viiva voidaan tietysti jättää mustaksi, mutta tässä tapauksessa elementit todennäköisesti sulautuvat yhteen, mieluummin käytän itsenäisiä värejä, jotka ovat lähellä elementin pääväriä, mutta pienellä kylläisyydellä. Kätevin tapa on piirtää pieni paletti jonnekin hahmosi viereen ja ottaa sitten värit siitä pipettityökalulla ( Pipettityökalu, I):

Valittuamme haluamasi värin aktivoimme "ämpäri" -työkalun ( Maalikauha, G.). Varmista myös, että poistat Anti-alias-toiminnon käytöstä asetuksissa. Täytön on toimittava selvästi piirrettyjen rajojen sisällä eikä ylitettävä niitä:

Pikselitaide aloittelijoille. | Johdanto.

Täydennämme hahmomme, mitä emme voi täyttää - piirrämme käsin kynällä.

Pikselitaide aloittelijoille. | Johdanto.

Kiinnitä huomiota nilkoihin - koska nämä alueet ovat vain 2 pikseliä paksuja, jouduin luopumaan aivohalvauksesta molemmilta puolilta, ja vedin sen vain aiotusta varjoalueelta, jättäen perusvärilinjan 1 pikselin paksuiseksi. Huomaa myös, että jätin kulmakarvat mustiksi, vaikka sillä ei ole merkitystä.

Photoshopilla on kätevä valinta värin mukaan ( Valitse-\u003e Värialuetönäisemällä haluamallasi värillä olevalla silmätippalla, saamme valikoiman kaikkia samanvärisiä alueita ja mahdollisuuden niiden välittömään täyttämiseen, mutta tätä varten sinun on oltava hahmosi elementit eri kerroksissa, joten nyt pitää tätä toimintoa hyödyllisenä edistyneille Photoshop-käyttäjille):

Pikselitaide aloittelijoille. | Johdanto.

4. Varjo ja himmeä.

Valitse nyt varjon värit ja vaihda lyijykynään ( B) sijoita varjoalueet varovasti. Minun tapauksessani valonlähde on jonnekin vasemmalla ja yläpuolella merkin edessä - siksi merkitsemme oikeat puolet varjolla korostaen pohjaa. Kasvoista tulee varjon rikkain, koska on olemassa monia pieniä elementtejä, jotka erottuvat helpotuksesta toisaalta varjojen avulla, ja toisaalta he itse heittävät varjon (silmät, nenä, kasvojen taitokset):

Pikselitaide aloittelijoille. | Johdanto.

Varjo on erittäin voimakas visuaalinen media, hyvin merkitty varjo vaikuttaa myönteisesti hahmon ulkonäköön - ja siihen vaikutelmaan, joka sillä on katsojaan. Pikselitaidessa yksi väärin sijoitettu pikseli voi pilata koko teoksen, kun taas näennäisesti tällaiset pienet säätöjen ansiosta kuva voi olla paljon kauniimpi.

Mitä tulee hämmentäväMutta mielestäni kuvassa, jolla on niin pienikokoiset mitat, se on täysin tarpeeton. Menetelmä itsessään käsittää kahden vierekkäisen värin "sekoittamisen", mikä saavutetaan pikselien porrastetulla järjestelyllä. Jotta saisin käsityksen tekniikasta, esitän silti pienet sekoitusalueet, housuissa, paidassa ja hieman kasvoilla:

Pikselitaide aloittelijoille. | Johdanto.

Kuten näette, mikään ei ole erityisen monimutkaista. Pikselitaide niin houkutteleva on, että tietyt lait hallittuaan kuka tahansa voi itse piirtää melko hyvin - vain tutkimalla huolellisesti mestareiden työtä. Vaikka kyllä, jotkut piirustuksen ja väriteorian perusteet eivät silti vahingoita. Anna palaa!

Kävellessäni aamulla Internetissä, halusin kirjoittaa viestin Pixel Artista, etsin materiaalia etsimällä nämä kaksi artikkelia.

Pixel Art on erittäin suosittu nykyäänkin peleissä, ja siihen on useita syitä!

Joten mikä saa Pixel Artin kiehtomaan:

1. Käsitys. Pixel Art näyttää upealta! Voit kertoa paljon spriteen jokaisesta yksittäisestä pikselistä.
2. Nostalgia. Pixel Art tuo takaisin suuren nostalgisen tunnelman pelaajille, jotka varttuivat Nintendoa, Super Nintendoa tai Genesistä pelaamalla (kuten minä!)
3. Oppimisen helppous. Pixel Art on yksi helpoimmista oppia digitaalisesta taiteesta, varsinkin jos olet enemmän ohjelmoija kuin taiteilija.]

Joten haluat kokeilla kättäsi Pixel Artissa? Seuraa sitten kanssani, kun näytän sinulle, kuinka tehdä yksinkertainen mutta tehokas pelattava hahmo, jota voit käyttää omassa pelissäsi! Lisäksi bonuksena tarkastelemme, kuinka se voidaan integroida iPhone-peleihin!

Tarvitset Adobe Photoshopin oppiakseen menestyksekkäästi. Jos sinulla ei ole sellaista, voit ladata ilmaisen kokeiluversion Adoben verkkosivustolta tai torrentista.

Mikä on Pixel Art?

Ennen kuin aloitamme, selvennetään, mitä Pixel Art on, se ei ole niin ilmeistä kuin luulisi. Helpoin tapa määrittää, mikä Pixel Art on, on määrittää, mikä ei ole, nimittäin kaikki, missä pikselit luodaan automaattisesti. Tässä on joitain esimerkkejä:

Kaltevuus: Valitse kaksi väriä ja laske niiden välisten pikselien väri. Näyttää siistiltä, \u200b\u200bmutta ei Pixel Artilta!

Blur-työkalu: Määritä pikselit ja kopioi / muokkaa niitä saadaksesi uuden version edellisestä kuvasta. Jälleen, ei pikselitaidetta.

Tasoitustyökalu (pohjimmiltaan uusien pikselien luominen eri väreillä, jotta saat jotain "sileää"). Sinun on vältettävä niitä!

Jotkut sanovat, että edes automaattisesti luodut värit eivät ole Pixel Art, koska ne ottavat kerroksen sekoituksia varten (sekoittamalla pikseleitä kahden kerroksen välillä tietyn algoritmin mukaan). Mutta koska suurin osa laitteista käsittelee tällä hetkellä miljoonia värejä, tämä väite voidaan jättää huomioimatta. Muutaman värin käyttäminen on kuitenkin hyvä tapa Pixel-taiteessa.

Muut työkalut, kuten (viiva) tai maalikauhatyökalu (maalikauha) luo myös pikseleitä automaattisesti, mutta koska voit asettaa ne tasoittamaan täytettyjä pikseleitä, näiden työkalujen katsotaan olevan Pixel Art -ystävällisiä.

Siksi havaitsimme, että Pixel Art vaatii paljon huomiota, kun jokainen pikseli sijoitetaan sprite-alueelle, useimmiten käsin ja rajoitetulla väripaletilla. Lähdetään töihin nyt!

Työn alku

Ennen kuin aloitat ensimmäisen Pixel Art -resurssin tekemisen, sinun on tiedettävä, että Pixel Artia ei voi skaalata. Jos yrität vähentää sitä, kaikki näyttää epäselvältä. Jos yrität suurentaa sitä, kaikki näyttää kunnolta, kunhan käytät moninkertaista 2-skaalausta (mutta tietysti se ei ole terävä).

Tämän ongelman välttämiseksi sinun on ensin ymmärrettävä, kuinka suuri pelihahmosi tai pelielementtisi pitäisi olla, ja aloittaa sitten. Tämä perustuu useimmiten kohdistamasi laitteen näyttökokoon ja siihen, kuinka monta "pikseliä" haluat nähdä.

Esimerkiksi, jos haluat pelin näyttävän kaksi kertaa suuremmalta iPhone 3GS -näytöllä ("Kyllä, haluan todella antaa pelilleni pikselöidyn retro-ilmeen!") Kenen näytön resoluutio on 480x320 pikseliä, sinun on työskenneltävä puoliksi tässä tapauksessa se on 240x160 pikseliä.

Avaa uusi Photoshop-asiakirja ( Tiedosto → Uusi ...) ja aseta koko pelinäytön kooksi ja valitse sitten hahmosi koko.

Valitsin 32 × 32 pikseliä paitsi siksi, että se on hieno valitulle näyttökoolle, myös siksi, että 32 × 32 pikseliä ovat myös 2: n kerrannaisia, mikä on kätevää lelumoottoreille (ruutujen koot ovat usein 2: n kerrannaisia, tekstuurit ovat linjassa 2: n moninkertainen jne.

Vaikka käyttämäsi moottori tukee mitä tahansa kuvakokoa, voit aina yrittää työskennellä parillisen pikselimäärän kanssa. Tässä tapauksessa, jos kuvaa on skaalattava, koko jaetaan paremmin, mikä johtaa lopulta parempaan suorituskykyyn.

Kuinka piirtää Pixel Art -hahmo

Pixel Artin tiedetään olevan terävä ja helposti luettava grafiikka: voit määrittää kasvojen piirteet, silmät, hiukset, ruumiinosat muutamalla pisteellä. Kuvien koko vaikeuttaa kuitenkin tehtävää: mitä pienempi hahmosi, sitä vaikeampi on piirtää niitä. Saadaksesi käytännön lähestymistavan tehtävään valitse, mikä on pienin merkkiominaisuuksista. Valitsen aina silmät, koska ne ovat yksi parhaista tavoista puhaltaa hahmolle elämää.

Valitse Photoshopissa Lyijykynä työkalu (Lyijykynätyökalu). Jos et löydä sitä, pidä työkalua painettuna Harjatyökalu (Brush Tool) ja näet sen heti (sen pitäisi olla toinen luettelossa). Sinun tarvitsee vain muuttaa sen kokoa 1 kuvapisteeksi (voit napsauttaa työkalupalkin palkkia ja muuttaa sen kokoa tai pitää vain [] -näppäintä painettuna.

Tarvitset myös Poista työkalu (Eraser Tool), joten napsauta sitä (tai paina E) ja muuta sen asetuksia valitsemalla pudotusvalikosta Tila: (Tila :) Lyijykynä (Pencil) (koska tässä tilassa ei ole anti-aliasia).

Aloitetaan nyt pikselointi! Piirrä kulmakarvat ja silmät alla olevan kuvan mukaisesti:

Voisit jo aloittaa Lineartilla (kun piirustus tehdään viivoilla), mutta käytännöllisempi tapa on piirtää hahmon siluetti. Hyvä uutinen on, että sinun ei tarvitse olla ammattilainen tässä vaiheessa, yritä vain kuvitella ruumiinosien (pää, vartalo, käsivarret, jalat) mitat ja hahmon lähtökohta. Yritä tehdä jotain tällaista harmaalla:

Huomaa, että jätin myös tyhjää tilaa. Sinun ei tarvitse täyttää koko kangasta, jätä tilaa tuleville laukauksille. Tässä tapauksessa on erittäin hyödyllistä pitää sama kangaskoko kaikille.

Kun olet lopettanut siluetin, tulee aika ... Sinun tulisi nyt olla varovainen pikselien sijoittelun suhteen, joten älä huoli vielä vaatteista, panssareista jne. Voit olla turvallisella puolella lisäämällä uuden kerroksen, jotta et koskaan menetä alkuperäistä siluettiasi.

Jos haluat piirtää liian hitaasti lyijykynätyökalulla, voit aina käyttää (Linjatyökalu), muista vain, että et pysty sijoittamaan pikseleitä yhtä tarkasti kuin lyijykynällä. Sinun on mukautettava kuten alla:

Ole hyvä ja valitse pitämällä Suorakulmion työkalu (Suorakulmion työkalu)

Siirry työkaluvalintapaneeliin pudotusvalikosta Valitse työkalutila (Piirustustila) valitse Pikseli, muuta Paino (Paksuus) 1 kuvapiste (jos sitä ei ole vielä tehty) ja poista valinta Anti-alias (Tasoitus). Näin sinulla pitäisi olla:

Huomaa, että en ole tehnyt jalkojen pohjan muotoa. Tämä on valinnainen, koska jalat eivät ole niin tärkeä osa jalkoja erottumaan, ja tämä säästää yhden pikselirivin kankaalle.

Levitä värejä ja varjoja

Nyt olet valmis aloittamaan värittämisen hahmomme. Älä huoli oikeiden värien valitsemisesta, niiden muuttaminen on erittäin helppoa myöhemmin, varmista vain, että jokaisella on oma väri. Käytä välilehden oletusvärejä Värimallit (Ikkuna → Värimallit).

Väritä hahmosi kuten alla oleva kuva (mutta voit olla luovia ja käyttää omia värejäsi!)

Huomaa, että en ole vieläkään tehnyt ääriviivoja vaatteille tai hiuksille. Muista aina: tallenna mahdollisimman monta pikseliä tarpeettomilta ääriviivoilta!

Älä tuhlaa aikaa jokaisen pikselin maalaamiseen. Nopeuta työtäsi käyttämällä saman värisiä viivoja tai Maalikauhatyökalu (Paint Bucket Tool) aukkojen täyttämiseksi. Muuten, se on myös määritettävä. Ole hyvä ja valitse Maalikauhatyökalu työkalurivillä (tai paina vain G-näppäintä) ja muuta Toleranssi (Toleranssi) arvoon 0 ja poista myös valintaruudun valinta Anti-alias (Tasoitus).

Jos sinun on koskaan käytettävä Taikasauva-työkalu (Taikasauvatyökalu) - erittäin hyödyllinen työkalu, joka valitsee kaikki pikselit samalla värillä ja säätää sen samalla tavalla kuin Paint Bucket -työkalu - ei suvaitsevaisuutta tai aliasia.

Seuraava vaihe, joka vaatii sinulta jonkin verran tietoa, on vaalentaminen ja varjostaminen. Jos sinulla ei ole tietoa siitä, miten näyttää vaaleat ja tummat puolet, annan sinulle alla pienen ohjeen. Jos sinulla ei ole aikaa ja halua tutkia sitä, voit ohittaa tämän vaiheen ja siirtyä osioon "Paletin piristäminen", koska loppujen lopuksi voit tehdä varjostuksestasi samanlaisen kuin esimerkissäni!

Yritä antaa muoto haluamallasi tavalla, koska sen jälkeen omaisuus alkaa näyttää mielenkiintoisemmalta. Esimerkiksi nyt voit nähdä nenän, kulmikkaat silmät, hiusiskun, taitokset housuissa jne. Voit myös lisätä siihen kevyitä täpliä, se näyttää vielä paremmalta:

Ja nyt, kuten lupasin, pieni opas valoihin ja varjoihin:

Maustaa paletti

Monet ihmiset käyttävät oletuspalettivärejä, mutta koska monet ihmiset käyttävät näitä värejä, voimme nähdä ne monissa peleissä.

Photoshopin vakiopaletissa on laaja valikoima värejä, mutta sinun ei pitäisi luottaa siihen liikaa. On parasta tehdä omat värisi napsauttamalla työkalupalkin alaosassa olevaa päävalikkoa.

Selaa sitten Värivalitsin-ikkunassa oikeaa sivupalkkia valitaksesi värin ja pääalueen valitaksesi haluamasi kirkkauden (vaaleampi tai tummempi) ja kylläisyyden (rikkaampi tai tummempi).

Kun löydät haluamasi, napsauta OK ja määritä Paint Bucket -työkalu uudelleen... Älä huoli, voit sitten yksinkertaisesti poistaa valinnan ”Viereinen” -valintaruudusta, ja kun maalat uudella värillä, myös kaikki uudet saman taustavärin pikselit maalataan.

Tämä on toinen syy, miksi on tärkeää työskennellä pienellä määrällä värejä ja käyttää aina samaa väriä samalle tuotteelle (paita, hiukset, kypärä, panssari jne.). Mutta älä unohda käyttää eri värejä muilla alueilla, muuten piirustuksemme maalataan ylimaalattuna!

Vaihda värejä, jos haluat, ja saat hohdokkaamman värin! Voit jopa värittää ääriviivat, vain varmista, että ne sulautuvat hyvin taustaan.

Lopuksi tee taustaväritesti: luo uusi kerros hahmosi alle ja täytä se eri väreillä. Näin varmistetaan, että hahmosi näkyy kirkkaassa, tummassa, lämpimässä ja kylmässä taustassa.

Kuten näette, sammutin anti-aliaksen käytöstä kaikissa tähän mennessä käyttämissäni työkaluissa. Älä unohda tehdä tätä myös muissa työkaluissa, esimerkiksi Elliptinen teltta (Soikea teltta) ja Lasso (Lasso).

Näillä työkaluilla voit helposti muuttaa valittujen osien kokoa tai jopa kiertää niitä. Voit tehdä tämän käyttämällä mitä tahansa valintatyökalua (tai painamalla M-näppäintä) valitaksesi alueen, napsauttamalla hiiren kakkospainikkeella ja valitsemalla Vapaa muunnos (Free Transform) tai paina vain Ctrl + T. Muuta valinnan kokoa vetämällä yhtä kahvoista muunnoskehyksen kehän ympäri. Jos haluat muuttaa valinnan kokoa säilyttäen mittasuhteet, pidä Shift-näppäintä painettuna ja vedä yhtä kulmakahvasta.

Photoshop tasoittaa kuitenkin kaikki toiminnolla muokatut toiminnot Vapaa muunnosjoten siirry kohtaan ennen muokkaamista Muokkaa -\u003e Asetukset -\u003e Yleistä (Ctrl + K) ja muuta Kuvien interpolointi (Kuvien interpolointi) päällä Lähin naapuri (Lähin naapuri). Lyhyesti sanottuna Lähin naapuri uusi sijainti ja koko lasketaan hyvin karkeasti, uusia värejä tai kalvoja ei käytetä ja valitsemasi värit säilyvät.

Pixel Artin integrointi iPhone-peleihin

Tässä osassa opit integroimaan pikselitaidemme iPhone-peliin Cocos2d-pelikehyksen avulla. Miksi harkitsen vain iPhonea? Koska Unityä käsittelevän artikkelisarjan (esimerkiksi: tai Jetpack Joyride -tyyliin soittaminen Unity 2D: ssä) ansiosta tiedät jo, kuinka työskennellä heidän kanssaan Unityssä, ja artikkeleista, jotka koskevat Craftyä (Selainpelit: Käärme) ja Impact (johdanto selaimen Impact-pelien luomiseen) opit kuinka upottaa ne kankaalle ja luoda selainpelejä.

Jos olet uusi Cocos2D- tai iPhone-sovelluskehityksessä yleisesti, suosittelen, että aloitat yhdellä Cocos2d- ja iPhone-opetusohjelmista. Jos sinulla on Xcode ja Cocos2d asennettuna, lue lisää!

Luo uusi projekti iOS → cocos2d v2.x → cocos2d iOS -malli, nimeä se PixelArtiksi ja valitse laitteeksi iPhone. Vedä luotu pikselitaide: sprite_final.png projektiisi ja avaa sitten HelloWorldLayer.m ja korvaa alustusmenetelmä seuraavalla:

- (id) init (jos ((itse \u003d)) (CCSprite * sankari \u003d; sankari.asento \u003d ccp (96, 96); sankari.flipX \u003d KYLLÄ ;;) palauttaa itsensä;)

Sijoitamme sprite näytön vasemmalle puolelle ja kierrämme sitä oikealle. Käännä, suorita ja sitten näet sprite-ruudun:

Muista kuitenkin, kuten keskustelimme aiemmin tässä opetusohjelmassa, halusimme suurentaa pikseleitä keinotekoisesti siten, että kukin pikseli on huomattavasti erotettavissa muista. Joten lisää tämä uusi rivi init-menetelmän sisään:

Sankarin mittakaava \u003d 2,0;

Ei mitään monimutkaista, eikö? Koosta, juokse ja ... odota, spriteemme on epäselvä!

Tämä johtuu siitä, että oletusarvoisesti Cocos2d tasoittaa kuvaa, kun se skaalaa sitä. Emme tarvitse tätä, joten lisää seuraava rivi:

Tämä rivi määrittää Cocos2d: n skaalaamaan kuvia ilman anti-aliasia, joten kaverimme näyttää edelleen "pikselöidyltä". Koosta, suorita ja ... kyllä, se toimii!

Huomaa Pixel Art -grafiikan käytön edut - voimme käyttää pienempää kuvaa kuin mitä näytöllä näkyy, mikä säästää paljon tekstuurimuistia. Meidän ei tarvitse edes tehdä erillisiä kuvia verkkokalvonäytöille!

Mitä seuraavaksi?

Toivottavasti pidit tästä opetusohjelmasta ja opit hieman enemmän pikselitaidesta! Ennen hajoamista haluan antaa sinulle vinkkejä:

• Yritä aina välttää anti-aliasing-, kaltevuus- tai paljon värejä omaisuudellesi. Tämä on omaksi eduksi, varsinkin jos olet vielä aloittelija.
• Jos haluat todellakin jäljitellä retrotyyliä, katso kuvia 8- tai 16-bittisissä konsolipeleissä.
• Jotkut tyylit eivät käytä tummia ääriviivoja, toiset eivät ota huomioon valon tai varjon vaikutuksia. Kaikki riippuu tyylistä! Oppaassamme emme piirtäneet varjoja, mutta se ei tarkoita, että sinun ei pitäisi käyttää niitä.

Aloittelijoille Pixel Art on helpoin grafiikka oppia, mutta se ei todellakaan ole niin yksinkertaista kuin miltä näyttää. Paras tapa kasvattaa taitojasi on harjoittelu, harjoittelu, harjoittelu. Suosittelen, että kirjoitat työsi Pixel Art -foorumeille, jotta muut taiteilijat voivat antaa sinulle neuvoja - se on hieno tapa parantaa tekniikkaasi! Aloita pienestä, harjoittele paljon, hanki palautetta ja voit luoda upean pelin, joka tuo sinulle paljon rahaa ja iloa!

Pikselitaide tai pikselitaide on digitaalinen maalaus, joka luodaan bittikartan muokkausohjelmissa pikselittäin. Pikseli on kuvan pienin graafinen elementti. Toisin sanoen tämä on asia. Ja koko pikselitaide koostuu lukemattomista pisteistä, jotka ovat hieman epätasaisia, ikään kuin huonosti piirrettyjä. Mutta tämä on tällaisten kuvien kauneus.

Hieman historiaa

Missä ohjelmissa voit luoda modernia pikselitaidetta

Siellä on monia ilmaisia \u200b\u200bbittikartan muokkaajia. Mutta useimpia muita kutsutaan Microsoft Paintiksi ja Adobe Photoshopiksi. Totta, Paintia pidetään vähemmän mukavana työkaluna pikselitaiteen luomiseen kuin Adobe Photoshop. Miksi? Tässä ohjelmassa:
kuvien tasaisuutta ja symmetriaa on erittäin vaikea saavuttaa;
tallentamalla ne JPG-muotoon tapahtuu voimakas värin vääristymä;
vaikea piirtää varjoja ja kohokohtia.
Siksi he yrittävät antaa etusijan Adobe Photoshopille. Tällä ohjelmalla on paljon enemmän työskentelymahdollisuuksia kuin Paintillä. Sen avulla voit piirtää yksittäisiä hahmoja yksinkertaisella muotoilulla, vaan kokonaisia \u200b\u200bkuvia. Lisäksi itse pikselitaidetta on helpompi ja nopeampi muokata täällä. Ja voit siirtää värisiirtymät Adobe Photoshopissa sujuvasti ja luonnollisesti.

Kuinka välttää kolhuja Pixel Art -sovelluksessa

Pikselitaide on kokoelma pikseleitä, jotka ovat neliön tai suorakaiteen muotoisia "pisteitä". Kun kuva piirretään tällaisista "pisteistä", kulmaisuus ilmestyy, viivojen sileys katoaa. Toisaalta tämä on Pixel Art -käyntikortti, mutta toisaalta haluan lisää sileyttä, mikä tekee kuvasta siistin ja houkuttelevan käyttäjälle. Tätä ongelmaa pikselitaiteilijoiden kielellä kutsutaan käänteiksi tai "jaggiksi".
Jaggies ovat fragmentteja, jotka antavat kaikille viivoille rosoisen ilmeen. Ne hävitetään yleensä jollakin seuraavista tavoista:
lisätä aukkoviivan segmenttiä 2, 3 tai useammalla pikselillä;
vähentää itse pikselien pituutta näkyvällä alueella;
uusi viivan osa rakennetaan useista yksikköpikseleistä;
lisää yksittäisiä pikseleitä pidempien "pisteiden" ja niin edelleen väliseen risteykseen.
Kinkkien oikean poistamisen kannalta sinun on muistettava pääsääntö: kaarevan viivan elementtien pituuden tulisi pienentyä tai kasvaa vähitellen. Sinun on myös muistettava, että viivasegmentin siirtäminen kahdella tai useammalla pikselillä korkeudella johtaa tasaisuuden tuhoutumiseen.
Siksi tarvitaan jatkuvaa piirtoharjoitusta. Ja yksinkertaisena ja visuaalisena apuna vääntymien välttämisessä voit käyttää joukkoa viistoja viivoja.

Kuinka saada varjo Pixel Art -sovelluksesta

Toinen tärkeä pikselitaidetta koskeva kohta on tilavuus. Kuten muissakin grafiikkavaihtoehdoissa, se saavutetaan kohokohtien ja varjojen avulla. Varjojen luomiseksi pikselitaiteessa tarvitset sujuvan siirtymisen vaaleasta tummaan tai väristä toiseen. Tämän vaikutuksen saavuttamiseksi käytetään usein sekoitustekniikkaa - hämmentämistä tai purkamista. Toisin sanoen kahden värin rajalla ne sekoitetaan ruutulautakuviona. Tämä menetelmä syntyi kukkien puutteen taustalla. Kahden maali sekoittamalla ruutuun voitiin saada kolmas, joka puuttui paletista.
Kuitenkin sen jälkeen, kun paletti on laajentunut merkittävästi, hiekkapuhallustekniikka on edelleen kysyntää. Mutta sinun on muistettava, että siirtyminen väristä toiseen yhden pikselin levyiseksi ei näytä hyvältä. Osoittautuu vain kampa. siksi
vähimmäissekoitusalueen on oltava vähintään kaksi pikseliä. Ja mitä laajempi tämä siirtymä on, sitä parempi.
Varjoa luodessasi:
on tärkeää määrittää, missä kulmassa ja mistä puolelta valo putoaa esineeseen. Tämä tekee piirustuksesta "elävän" ja ymmärtää, mistä varjo piirtää. Esimerkiksi, jos valo putoaa oikealta, varjoalueet sijaitsevat vasemmalla jne.;
sinun on käytettävä värejä paljon tummempia kuin perusvärit. Nuo. varjo tulisi kuvata tummemmilla väreillä kuin itse varjostettu alue. Jos esine on esimerkiksi punainen, sen varjo on viininpunainen tai tummanruskea;
älä unohda osittaista sävyä. Tätä tarkoitusta varten valitaan sävy, joka paletin mukaan on perusvärin ja varjon värin välillä. Tämä sävy sijoitetaan näiden kahden värin kerrosten väliin. Tämän seurauksena syntyy sujuvan siirtymisen tummalta alueelta vaaleammalle alueelle.

Kuinka saada leimahtaa pikselitaidetta

Heijastus, kuten varjo, lisää äänenvoimakkuutta piirrettäviin kohteisiin. Hän on aina sillä puolella, missä valo putoaa. Mutta jos esine on suunniteltu siten, että sillä on kiiltävä pinta, esimerkiksi posliinikuppi, teräksestä valmistettu miekka jne., Häikäisyä tarvitaan myös varjostetulla alueella.
Jos haluat luoda korostuksen alueelle, johon valo putoaa, sinun on otettava maali, joka on paljon kevyempi kuin pää. Älä vain ole innokas tämän paikan kirkkaudessa - se ei välttämättä käy luonnollisesti. Hyvin usein soihtu näkyy valkoisena ilman siirtymiä. Tätä ei tapahdu luonnossa. Ja kohde näyttää tasaiselta.
Korostuksen luomiseksi varjon puolelta tarvitaan väri, joka on vaaleampi kuin se, jolla varjo itse levitettiin. Ja tässä tapauksessa tarvitaan myös sujuva siirtyminen, joka voidaan saavuttaa käyttämällä useita sävyjä kerralla.
Kaiken tämän tekeminen vaatii tietysti käytäntöä. Ja on parasta aloittaa yksinkertaisilla esineillä.

Pikselitasoisella maalauksella on kapea visuaalinen taide. Todelliset mestariteokset luodaan yksinkertaisilla pikseleillä. Tietenkin voit luoda tällaisia \u200b\u200bpiirustuksia paperiarkille, mutta on paljon helpompaa ja oikeampi tehdä kuvia graafisilla editorilla. Tässä artikkelissa analysoimme yksityiskohtaisesti jokaisen tällaisen ohjelmiston edustajan.

Maailman suosituin kuvankäsittelyohjelma, joka pystyy toimimaan pikselitasolla. Jos haluat luoda tällaisia \u200b\u200bkuvia tässä editorissa, sinun tarvitsee vain suorittaa muutama esiasetusten vaihe. Siinä on kaikki mitä taiteilija tarvitsee taiteen luomiseen.

Mutta toisaalta tällaista runsaasti toiminnallisuutta ei tarvita pikselitaiteen piirtämiseen, joten ohjelmasta ei ole mitään syytä maksaa liikaa, jos aiot käyttää sitä vain tiettyyn toimintoon. Jos olet yksi näistä käyttäjistä, suosittelemme kiinnittämään huomiota muihin edustajiin, jotka keskittyvät erityisesti pikseligrafiikkaan.

PyxelMuokkaa

Tässä ohjelmassa on kaikki mitä tarvitset tällaisten maalausten luomiseen, eikä se ole kyllästetty toiminnoilla, joita taiteilija ei koskaan tarvitse. Asetus on melko yksinkertainen, väripaletissa voit muuttaa minkä tahansa värin haluamallesi sävylle, ja ikkunoiden vapaa liikkuvuus auttaa sinua mukauttamaan ohjelmaa itsellesi.

PyxelEditillä on toiminto, jolla ruudut asetetaan kankaalle, mikä voi olla hyödyllinen, kun luodaan samankaltaisen sisällön objekteja. Kokeiluversio on ladattavissa virallisella verkkosivustolla, eikä sillä ole käyttörajoituksia, joten voit koskettaa tuotetta ennen ostoksen tekemistä.

Pixelformer

Ulkonäöltään ja toiminnallisuudeltaan tämä on yleisin grafiikkaeditori, vain siinä on useita lisäominaisuuksia pikselikuvien luomiseen. Tämä on yksi harvoista ohjelmista, joita jaetaan täysin ilmaiseksi.

Kehittäjät eivät pidä tuotteitaan sopivina pikselitaiteen luomiseen, vaan he kutsuvat sitä loistavaksi tapaksi piirtää logoja ja kuvakkeita.

GrafiikkaGale

He yrittävät toteuttaa kuva-animaatiojärjestelmän melkein kaikissa tällaisissa ohjelmistoissa, jotka usein osoittautuvat yksinkertaisesti käyttökelvottomiksi rajoitettujen toimintojen ja virheellisen toteutuksen vuoksi. GraphicsGale ei myöskään ole niin hyvä tämän kanssa, mutta ainakin tämä toiminto voi toimia hyvin.

Piirustuksen osalta kaikki on täsmälleen sama kuin useimmissa muokkaajissa: perustoiminnot, suuri väripaletti, kyky luoda useita kerroksia eikä mitään turhaa, joka voisi häiritä työtä.

Charamaker

Character Maker 1999 on yksi vanhimmista tällaisista ohjelmista. Se luotiin luomaan yksittäisiä merkkejä tai elementtejä, joita sitten käytetään muissa animaatio-ohjelmissa tai jotka tuodaan tietokonepeleihin. Siksi se ei ole kovin sopiva maalausten luomiseen.

Käyttöliittymä ei ole kovin hyvä. Lähes yhtään ikkunaa ei voida siirtää tai kokoa muuttaa, eikä oletusasettelu ole kovin hyvä. Voit kuitenkin tottua siihen.

Pro Motion NG

Tämä ohjelma on ihanteellinen melkein kaikessa, hyvin harkitusta käyttöliittymästä, jossa voit siirtää ikkunoita pääikkunasta riippumatta mihin tahansa pisteeseen ja muuttaa niiden kokoa, automaattiseen vaihtoon silmätippasta kynään, joka on vain uskomattoman kätevä ominaisuus.

Muuten Pro Motion NG on vain hyvä ohjelmisto minkä tahansa tason pikseligrafiikan luomiseen. Kokeiluversion voi ladata viralliselta verkkosivustolta ja testata sen päättämiseksi täysversiosta.

Aseprite

Sitä voidaan oikeutetusti pitää mukavimpana ja kauniimpana ohjelmana pikselitaiteen luomiseksi. Pelkästään käyttöliittymäsuunnittelu on paljon arvoista, mutta se ei ole kaikki Asepriten edut. Täällä voit animoida kuvan, mutta toisin kuin edelliset edustajat, se toteutetaan ammattitaitoisesti ja sitä on helppo käyttää. Kaikkien GIF-animaatioiden luomiseen on kaikkea.