Indieutvecklare måste ofta kombinera flera roller samtidigt: speldesigner, programmerare, kompositör, artist. Och när det kommer till det visuella är det många som väljer pixelkonst – vid första anblicken verkar det enkelt. Men för att göra det vackert behöver du mycket erfarenhet och vissa färdigheter. Jag hittade en handledning för dem som precis har börjat förstå grunderna i denna stil: med en beskrivning av speciell programvara och rittekniker med två sprites som exempel.
Фон
Pixelkonst är en form av digital konst där förändringar görs på pixelnivå. Det är främst förknippat med videospelsgrafik från 80- och 90-talen. Då var artister tvungna att ta hänsyn till minnesbegränsningar och låg upplösning. Nuförtiden är pixelkonst fortfarande populärt i spel och som konststil i allmänhet, trots möjligheten att skapa realistisk 3D-grafik. Varför? Bortsett från nostalgi, att skapa coolt arbete inom en så snäv ram är en rolig och givande utmaning.
Barriären för inträde i pixelkonst är relativt låg jämfört med traditionell konst och 3D-grafik, vilket lockar indieutvecklare. Men det betyder inte att det blir lätt Avsluta spel i denna stil. Jag har sett många indieutvecklare med pixel art metroidvanias på crowdfunding-plattformar. De trodde att de skulle göra klart allt på ett år, men i verkligheten behövde de ytterligare sex år.
Metal Slug 3 (Arcade). SNK, 2000
Pixelkonst på den nivå som de flesta vill skapa det tar mycket tid och det finns väldigt få korta handledningar. När du arbetar med en 3D-modell kan du rotera den, deformera den, flytta dess enskilda delar, kopiera animationer från en modell till en annan, och så vidare. Pixelkonst på hög nivå tar nästan alltid mycket ansträngning för att noggrant placera pixlar på varje bildruta.
I allmänhet varnade jag dig.
Och nu lite om min stil: jag ritar främst pixelkonst för tv-spel och hittar inspiration i dem. I synnerhet är jag ett fan av Famicom/NES, 16-bitarskonsoler och 90-tals arkadspel. Pixelkonsten i mina favoritspel från eran kan beskrivas som ljus, självsäker och ren (men inte för ren), snarare än skarp och minimalistisk. Det här är stilen jag själv arbetar i, men du kan enkelt tillämpa idéerna och teknikerna från denna handledning för att skapa helt andra saker. Utforska olika konstnärers verk och skapa pixelkonst som du gillar!
Programvara
De grundläggande digitala verktygen för pixelkonst är Zoom och Pencil för att placera pixlarna. Du kommer också att hitta Line, Shape, Select, Move och Paint Bucket användbara. Det finns många gratis och betalda program med en sådan uppsättning verktyg. Jag kommer att berätta om de mest populära och de som jag själv använder.
Måla (gratis)
Om du har Windows är den inbyggda Paint ett primitivt program, men det har alla verktyg för pixelkonst.
(är gratis)
En oväntat funktionell pixelartredigerare som körs genom webbläsaren. Du kan exportera ditt arbete som PNG eller animerad GIF. Ett utmärkt alternativ för nybörjare.
(är gratis)
GraphicsGale är den enda redigeraren jag har hört talas om som är designad speciellt för pixelkonst och inkluderar animeringsverktyg. Den skapades av det japanska företaget HUMANBALANCE. Det har varit tillgängligt gratis sedan 2017 och är fortfarande efterfrågat, trots ökningen i popularitet för Aseprite. Tyvärr fungerar det bara på Windows.
($)
Kanske den mest populära redaktören för tillfället. , många funktioner, aktivt stöd, versioner för Windows, Mac och Linux. Om du menar allvar med pixelkonst och fortfarande inte har hittat rätt redigerare kan det här vara den du behöver.
($$+)
GameMaker Studio 2 är ett utmärkt 2D-verktyg med en bra Sprite Editor. Om du vill skapa pixelkonst för dina egna spel är det väldigt bekvämt att göra allt i ett program. Nu använder jag denna programvara medan jag arbetar på , en samling av 50 retrospel: Jag skapar sprites och animationer i GameMaker och tilesets i Photoshop.
($$$+)
Photoshop är dyr programvara, distribuerad genom prenumeration och inte designad för pixelkonst. Jag rekommenderar inte att köpa den om du inte är inblandad i att rendera illustrationer i hög upplösning, eller så behöver du inte utföra komplexa manipulationer med bilden, som jag. Du kan skapa statiska sprites och pixelkonst i den, men det är ganska komplext jämfört med specialiserad programvara (till exempel GraphicsGale eller Aseprite).
Andra
Mitt pixel art kit. Allt är svart, jag märkte det nu.
Grafikplatta ($$+)
Jag rekommenderar grafikplattor för alla digitala illustrationsarbeten för att undvika karpaltunnelsyndrom. Det är mycket lättare att förebygga än att bota. En dag kommer du att känna smärta och den kommer bara att öka – ta hand om dig själv från första början. Eftersom jag brukade rita med mus har jag nu svårt att spela spel som kräver att jag trycker på tangenter. Jag använder för närvarande Wacom Intuos Pro S.
Handledsstöd ($)
Om du inte kan få en surfplatta, skaffa åtminstone ett handledsstöd. Min favorit är Mueller Green Fitted Wrist Brace. Resten är antingen för snäva eller ger inte tillräckligt stöd. Bromsok kan beställas online utan problem.
96 × 96 pixlar
Sista kampen. Capcom, 1989
Låt oss börja! Låt oss börja med en teckensprite på 96x96 pixlar. Som exempel ritade jag en orc och placerade den på en skärmdump från Final Fight (bilden ovan) så att du kan förstå skalan. Detta большой sprite för de flesta retrospel, skärmbildstorlek: 384x224 pixlar.
På en så stor sprite blir det lättare att visa tekniken jag vill prata om. Per-pixel-rendering är också mer lik traditionella former av konst (som att rita eller måla) som du kanske är mer bekant med. Efter att ha bemästrat de grundläggande teknikerna kommer vi att gå vidare till mindre sprites.
1. Välj en palett
Pixel är ett mycket djupare koncept inom pixelkonst än i någon annan digital värld. Pixelkonst definieras av dess begränsningar, till exempel färger. Det är viktigt att välja rätt palett, det kommer att hjälpa till att bestämma din stil. Men i början föreslår jag att du inte tänker på paletter och väljer en av de befintliga (eller bara några slumpmässiga färger) - du kan enkelt ändra det när som helst.
För den här handledningen kommer jag att använda paletten med 32 färger som vi skapade för . För pixelkonst är de ofta sammansatta av 32 eller 16 färger. Vår är designad för en fiktiv konsol som skulle dyka upp någonstans mellan Famicom och PC Engine. Du kan ta det eller något annat - handledningen beror inte alls på den valda paletten.
2. Grova konturer
Låt oss börja rita med pennverktyget. Låt oss rita en skiss på samma sätt som vi gör med en vanlig penna och papper. Naturligtvis överlappar pixelkonst och traditionell konst, speciellt när det kommer till så stora sprites. Mina observationer visar att starka pixelkonstnärer åtminstone är bra på att rita för hand och vice versa. Så att utveckla dina ritfärdigheter är alltid användbart.
3. Utarbetning av konturer
Vi förfinar konturerna: ta bort extra pixlar och minska tjockleken på varje linje till en pixel. Men exakt vad anses vara överflödigt? För att svara på denna fråga måste du förstå pixellinjer och oregelbundenheter.
Oegentligheter
Du måste lära dig att rita två grundläggande linjer i pixelkonst: raka och böjda. Med penna och papper handlar det om muskelkontroll, men vi arbetar med små färgblock.
Nyckeln till att rita korrekta pixellinjer är jaggies. Dessa är enstaka pixlar eller små segment som förstör linjens jämnhet. Som jag sa tidigare gör en enda pixel en enorm skillnad i pixelkonst, så ojämnheter kan förstöra hela estetiken. Föreställ dig att du ritar en rak linje på papper och plötsligt slår någon i bordet: knölarna i pixelkonsten ser precis ut som en slumpmässig krusel.
Exempel:
Direkt
Kurvor
Oregelbundenheter uppträder i kurvor när längden på linjesegmenten inte ökar eller minskar gradvis.
Det är omöjligt att helt undvika stötar – alla dina favoritretrospel har dem (såvida inte pixelkonsten enbart består av enkla former). Mål: Hålla ojämnheter till ett minimum samtidigt som du visar allt som behövs.
4. Applicera de första färgerna
Färglägg din karaktär med fyllning eller annat lämpligt verktyg. Paletten kommer att förenkla denna del av arbetet. Om programvaran inte tillåter användning av paletter kan du placera den direkt i bilden, som i exemplet ovan, och välja färger med en pipett.
I det nedre vänstra hörnet ritade jag vår vän, träffas, det här är Ball. Det kommer att göra det lättare att förstå exakt vad som händer i varje skede.
5. Skuggning
Det är dags att visa skuggorna – lägg bara till mörkare färger till spriten. Detta kommer att få bilden att se tredimensionell ut. Låt oss anta att vi har en ljuskälla placerad ovanför orken till vänster om den. Det betyder att allt som är ovanför och framför vår karaktär kommer att belysas. Lägg till skuggor längst ner till höger.
Form och volym
Om det här steget är utmanande för dig, tänk på din ritning som tredimensionella former snarare än bara linjer och färg. Former finns i tredimensionellt rum och kan ha volym, som vi bygger med hjälp av skuggor. Detta hjälper dig att visualisera karaktären utan detaljer och föreställa dig att han är gjord av lera och inte pixlar. Skuggning är inte bara att lägga till nya färger, det är processen att bygga en form. På en väldesignad karaktär döljer inte detaljerna de underliggande formerna: om du kisar ser du några stora kluster av ljus och skugga.
Kantutjämning (kantutjämning)
Varje gång jag använder en ny färg applicerar jag anti-aliasing (AA). Det hjälper till att jämna ut pixlarna genom att lägga till mellanfärger i hörnen där två linjesegment möts:
Grå pixlar mjukar upp "avbrotten" i linjen. Ju längre linjesegment, desto längre AA-segment.
Så här ser AA ut på en orcs axel. Det behövs för att jämna ut linjerna som visar kurvan för hans muskler
Kantutjämning bör inte sträcka sig längre än spriten som kommer att användas i spelet eller på en bakgrund vars färg är okänd. Om du till exempel applicerar AA på en ljus bakgrund kommer kantutjämningen att se ful ut på en mörk bakgrund.
6. Selektiv disposition
Tidigare var konturerna helt svarta, vilket gjorde att spriten såg väldigt tecknad ut. Bilden verkade vara uppdelad i segment. Till exempel ger svarta linjer på en arm för mycket kontrast till muskulaturen, vilket gör att karaktären ser mindre sammanhållen ut.
Om spriten blir mer naturlig och segmenteringen mindre uppenbar blir karaktärens grundformer lättare att läsa. För att göra detta kan du använda en selektiv kontur - ersätt delvis den svarta konturen med en ljusare. På den upplysta delen av spriten kan du använda de ljusaste färgerna, eller, där spriten vidrör negativt utrymme, kan du ta bort konturen helt. Istället för svart måste du använda färgen som valdes för skuggan - på så sätt kommer segmenteringen att bevaras (för att skilja mellan muskler, päls och så vidare).
Jag lade också till mörkare skuggor i detta skede. Resultatet blev tre grader av grönt på orkens hud. Den mörkaste gröna färgen kan användas för selektiv kontur och AA.
7. Sista handen
Slutligen är det värt att lägga till highlights (de lättaste fläckarna på spriten), detaljer (örhängen, nitar, ärr) och andra förbättringar tills karaktären är klar eller tills du måste gå vidare till nästa.
Det finns flera användbara tekniker som kan tillämpas i detta skede. Rotera ritningen horisontellt, detta hjälper ofta att identifiera fel i proportioner och skuggning. Du kan också ta bort färgen - ställ in mättnaden till noll för att förstå var du behöver ändra skuggorna.
Skapa brus (dithering, dithering)
Hittills har vi mest använt stora, solida skuggområden. Men det finns en annan teknik - dithering, som gör att du kan gå från en färg till en annan utan att lägga till en tredje. Titta på exemplet nedan.
Den översta mörk till ljus gradient använder hundratals olika nyanser av blått.
Den genomsnittliga gradienten använder bara nio färger, men det finns fortfarande för många nyanser av samma färg. En så kallad banding uppstår (av engelska band - stripe), där ögat på grund av tjocka enhetliga ränder fokuserar på färgernas kontaktpunkter, istället för färgerna själva.
På den nedre gradienten tillämpade vi rastrering, vilket undviker bandbildning och använder bara två färger. Vi skapar brus av varierande intensitet för att simulera färggradering. Denna teknik är mycket lik halvtonsbild (halvtonsbild) som används vid utskrift; samt stippling (kornig bild) - i illustrationer och serier.
På orcen darrade jag en hel del för att förmedla textur. Vissa pixelartister använder det inte alls, andra är tvärtom inte blyga och gör det väldigt skickligt. Jag tycker att dither ser bäst ut på stora områden fyllda med en enda färg (titta på himlen i Metal Slug-skärmdumpen ovan) eller på områden som borde se grova och ojämna ut (som smuts). Bestäm själv hur du använder den.
Om du vill se ett exempel på storskalig och högkvalitativ dithering, kolla in spelen från The Bitmap Brothers, en brittisk studio från 80-talet, eller spelen på PC-98-datorn. Tänk bara på att de alla är NSFW.
Kakyusei (PC-98). Elf, 1996
Det finns bara 16 färger i den här bilden!
8. Sista titt
En av farorna med pixelkonst är att det verkar enkelt och enkelt (på grund av dess struktur och stilbegränsningar). Men du kommer att lägga ner enormt mycket tid på att förfina dina sprites. Det är som ett pussel som måste lösas – det är därför pixelkonst lockar perfektionister. Kom ihåg att en sprite inte bör ta för mycket tid - det är bara en liten bit av en extremt komplex samling av bitar. Det är viktigt att inte tappa helheten ur sikte.
Även om din pixelkonst inte är för spel, är det ibland värt att säga till dig själv, "det är redan tillräckligt bra!" Och gå vidare. Det bästa sättet att utveckla dina färdigheter är att gå igenom hela processen från början till slut så många gånger som möjligt och använda så många ämnen som möjligt.
Och ibland är det användbart att lämna en sprite ett tag så att du kan titta på den med fräscha ögon lite senare.
32×32 pixlar
Vi skapade en stor sprite på 96x96 pixlar först eftersom den i den storleken är mer som att rita eller måla, men med pixlar. Ju mindre sprite, desto mindre lik är den vad den ska visa, och desto viktigare är varje pixel.
I Super Mario Bros. Marios öga är bara två pixlar, den ena ovanpå den andra. Och hans öra också. Karaktärsskaparen Shigeru Miyamoto sa att mustaschen behövdes för att skilja näsan från resten av ansiktet. Så en av huvuddragen hos Mario är inte bara en karaktärsdesign, utan ett pragmatiskt knep. Vilket bekräftar den gamla visdomen - "nödvändigheten är uppfinningens moder."
Huvudstadierna för att skapa en sprite på 32x32 pixlar är redan bekanta för oss: skiss, färg, skuggor, ytterligare förfining. Men under sådana förhållanden, som en första skiss, väljer jag färgade former istället för att rita konturer på grund av den lilla storleken. Färg spelar en viktigare roll för att definiera en karaktär än kontur. Titta på Mario igen, han har inga konturer alls. Det är inte bara mustaschen som är intressant. Hans polisonger definierar formen på hans öron, hans ärmar visar armarna och hans övergripande form visar mer eller mindre tydligt hela kroppen.
Att skapa små sprites är en ständig kompromiss. Om du lägger till ett streck kan du förlora utrymme för skuggan. Om din karaktär har tydligt synliga armar och ben, bör huvudet förmodligen inte vara särskilt stort. Om du använder färg, selektiv linje och kantutjämning effektivt, kommer det renderade objektet att se större ut än det faktiskt är.
För små sprites gillar jag chibi-stilen: karaktärerna ser väldigt söta ut, de har stora huvuden och ögon. Ett bra sätt att skapa en färgstark karaktär på ett begränsat utrymme, och överlag en väldigt snygg stil. Men kanske behöver du visa en karaktärs rörlighet eller styrka, då kan du ge mindre utrymme åt huvudet för att få kroppen att se kraftfullare ut. Allt beror på dina preferenser och mål.
Hela laget är samlat!
Filformat
Detta resultat kan göra vilken pixel artist som helst nervös
Bilden du ser är resultatet av att du har sparat bilden i JPG. Vissa data gick förlorade på grund av filkomprimeringsalgoritmer. Högkvalitativ pixelkonst kommer att se dåligt ut, och det kommer inte att vara lätt att återställa den till sin ursprungliga palett.
För att spara en statisk bild utan att förlora kvalitet, använd PNG-formatet. För animationer - GIF.
Hur man delar pixelkonst korrekt
Att dela pixelkonst på sociala nätverk är ett bra sätt att få feedback och träffa andra artister som arbetar i samma stil. Glöm inte att använda hashtaggen #pixelart. Tyvärr konverterar sociala nätverk ofta PNG till JPG utan att fråga, vilket gör din upplevelse värre. Dessutom är det inte alltid klart varför din bild konverterades.
Det finns flera tips om hur man sparar pixelkonst i den kvalitet som krävs för olika sociala nätverk.
För att behålla din PNG-fil oförändrad på Twitter, använd färre än 256 färger eller att din fil är mindre än 900 pixlar på den längsta sidan. Jag skulle öka filstorleken till minst 512x512 pixlar. Och så att skalningen är en multipel av 100 (200 %, inte 250 %) och skarpa kanter bevaras (Neast Neighbor i Photoshop).
Animerade GIF-bilder för Twitter-inlägg väger inte mer än 15 MB. Bilden måste vara minst 800x800 pixlar, looping-animationen måste upprepas tre gånger, och den sista bildrutan måste vara hälften så lång som alla andra - den mest populära teorin. Det är dock oklart i vilken utsträckning dessa krav behöver uppfyllas, med tanke på att Twitter hela tiden ändrar sina bildvisningsalgoritmer.
Vad jag vet är det omöjligt att lägga upp en bild på Instagram utan att tappa kvalitet. Men det kommer definitivt att se bättre ut om du förstorar det till minst 512x512 pixlar.
Källa: will.com