Hem › Ljus och glas › Adobe Photoshop: Rita och animera en karaktär med hjälp av Pixel Art-teknik. Vad är Pixel Art? Exempel och hur man lär sig det Skapa pixelkonst

Adobe Photoshop: Rita och animera en karaktär med hjälp av Pixel Art-teknik. Vad är Pixel Art? Exempel och hur man lär sig det Skapa pixelkonst

"itemprop="image">

I den här 10-stegs handledningen om hur man ritar Pixel Art kommer jag att lära dig hur du skapar en "sprite" (en enda 2D-karaktär eller ett objekt). Själva termen kom förstås från tv-spel.

Jag lärde mig att skapa pixelkonst eftersom jag behövde det för grafiken i mitt spel. Efter år av träning vände jag mig vid det och började förstå att pixelkonst är mer en konst än bara ett verktyg. Idag är pixelkonst väldigt populärt bland spelutvecklare och illustratörer.

Denna handledning skapades för många år sedan för att lära människor enkla pixelkoncept, men har utökats många gånger, så den skiljer sig avsevärt från originalversionen. Det finns många tutorials på webben om samma ämne, men de verkar alla för komplicerade eller långa för mig. Pixelkonst är inte vetenskap. Du behöver inte beräkna vektorer när du skapar pixelkonst.

Verktyg

En av de största fördelarna med att skapa pixelkonst är att du inte behöver några avancerade verktyg - den grafiska editorn som är installerad på din dator som standard borde räcka. Det är värt att nämna att det finns program som är utformade specifikt för att skapa pixelkonst, som Pro Motion eller Pixen (för Mac-användare). Jag har inte testat dem själv, men jag har hört mycket positiv feedback. I den här handledningen kommer jag att använda Photoshop, som, även om det kostar mycket, innehåller många användbara verktyg för att skapa konst, av vilka några är mycket användbara för pixelering.

Hur man ritar Pixel Art i Photoshop

När du använder Photoshop kommer ditt huvudvapen att vara pennverktyget (B-tangenten), som är ett alternativ till penselverktyget. Penna låter dig färglägga enskilda pixlar utan att övertrycka färger.

Ytterligare två verktyg kommer väl till pass: Selection (M-tangenten) och Magic Wand (W-tangenten) för att markera och dra, eller kopiera och klistra in. Kom ihåg att genom att hålla ned Alt- eller Skift-tangenten medan du gör ett urval kan du lägga till de markerade objekten eller exkludera dem från den aktuella urvalslistan. Detta är förresten nödvändigt när du behöver välja ojämna föremål.

Du kan också använda en pipett för att överföra färger. Det finns tusen anledningar till varför det är viktigt att bevara färger i pixelkonst, så du måste ta några färger och använda dem om och om igen.

Slutligen, se till att du memorerar alla snabbtangenter, eftersom detta kan spara mycket tid. Lägg märke till att "X" växlar mellan primära och sekundära färger.

rader

Pixlar är samma små färgade rutor. Först måste du ta reda på hur du effektivt arrangerar dessa rutor för att skapa den linje du behöver. Vi kommer att titta på de två vanligaste typerna av linjer: raka och böjda.

raka linjer

Jag vet vad du tänkte: allt är så enkelt här att det är meningslöst att fördjupa sig i något. Men när det kommer till pixlar kan även raka linjer vara ett problem. Vi måste undvika taggiga delar - små fragment av linjen som får den att se taggig ut. De visas om en av delarna av linjen är större eller mindre än de andra som omger den.

böjda linjer

När du ritar böjda linjer måste du se till att nedgången eller stigningen är enhetlig längs hela längden. I detta exempel, den prydliga linjen har intervall 6 > 3 > 2 > 1, men linjen med intervall 3 > 1< 3 выглядит зазубренной.

Möjligheten att rita linjer är en viktig del av pixelkonst. Lite längre kommer jag att berätta om kantutjämning.

Konceptualisering

För att komma igång behöver du bra idé! Försök att visualisera vad du ska göra i pixelkonst - på papper eller bara i ditt sinne. Om du har en idé om ritningen kan du koncentrera dig på själva pixeleringen.

Ämnen för reflektion

Vad ska denna sprite användas till? Är det för hemsidan eller för spelet? Kommer det att bli nödvändigt att göra den animerad senare? Om ja, måste den göras mindre och mindre detaljerad. Omvänt, om du inte arbetar med spriten i framtiden kan du bifoga så många detaljer till den som du behöver. Bestäm därför i förväg vad exakt denna sprite behövs för och välj de optimala parametrarna.
Vilka är begränsningarna? Tidigare nämnde jag vikten av att bevara färger. främsta orsakenär den begränsade färgpaletten på grund av systemkrav (vilket är extremt osannolikt i vår tid) eller för kompatibilitet. Eller för precisionen, om du efterliknar en viss stil av C64, NES och så vidare. Det är också värt att överväga dimensionerna på din sprite och om den sticker ut för mycket mot bakgrunden av de nödvändiga föremålen.

Låt oss försöka!

Det finns inga begränsningar i den här handledningen, men jag ville se till att min pixelkonst är tillräckligt stor så att du kan se i detalj vad som händer i vart och ett av stegen. För detta ändamål bestämde jag mig för att som modell använda Lucha Lawyer, en karaktär från brottningens värld. Han skulle passa perfekt in i ett fightingspel eller en dynamisk actionfilm.

Krets

Den svarta konturen kommer att vara en bra bas för din sprite, så det är där vi börjar. Vi valde svart för att det ser bra ut, men också lite mörkt. Senare i handledningen kommer jag att visa dig hur du ändrar färgen på konturen för att öka realismen.

Det finns två sätt att skapa en disposition. Du kan rita banan på fri hand och sedan justera den lite, eller rita allt en pixel i taget. Ja, du förstod rätt, vi pratar om tusen klick.

Valet av metod beror på spritens storlek och dina pixelfärdigheter. Om spriten verkligen är enorm, skulle det vara mer logiskt att rita den för hand för att skapa ungefärlig form och sedan räta ut. Tro mig, det går mycket snabbare än att försöka rita den perfekta skissen direkt.

I min handledning skapar jag en ganska stor sprite, så den första metoden kommer att visas här. Det blir lättare om jag visar allt visuellt och förklarar vad som hände.

Steg ett: Grov kontur

Använd musen eller surfplattan och rita en grov kontur för din sprite. Se till att den INTE är FÖR rå, det vill säga att den ser ut ungefär som hur du ser din slutprodukt.

Min skiss stämde nästan helt överens med vad jag hade planerat.

Steg två: polera konturen

Börja med att förstora bilden med 6 eller 8 gånger. Du måste tydligt se varje pixel. Och sedan, rensa upp konturen. Var särskilt uppmärksam på "stray pixlarna" (hela konturen bör inte vara mer än en pixel tjock), bli av med de taggiga kanterna och lägg till de små detaljerna som vi missade i det första steget.

Även stora sprites överstiger sällan 200 gånger 200 pixlar. Frasen "gör mer med mindre" är ett bra sätt att beskriva pixeleringsprocessen. Du kommer snart att se att även en pixel spelar roll.

Förenkla din disposition så mycket som möjligt. Vi kommer att ta itu med detaljerna senare, nu behöver du jobba med att hitta stora pixlar, som till exempel muskelsegmentering. Det ser inte så bra ut just nu, men ha lite tålamod.

Färg

När konturen är klar får vi en sorts färgläggning som behöver fyllas med färger. Måla, fylla och andra verktyg hjälper oss med detta. Matchande färger kan vara knepigt, men färglära är helt klart inte ämnet för den här artikeln. Hur som helst, det finns några grundläggande begrepp som du behöver känna till.

HSB färgmodell

Detta Engelsk förkortning, sammansatt av orden "Hue, Saturation, Brightness". Det är bara en av många datorfärgmodeller (eller numeriska representationer av färg). Du har säkert hört talas om andra exempel som RGB och CMYK. De flesta bildredigerare använder HSB för färgval, så vi fokuserar på det.

Nyans Nyans är vad vi brukade kalla färg.

Mättnad– Mättnad – bestämmer färgens intensitet. Om värdet är 100 % är detta den maximala ljusstyrkan. Om du sänker den kommer färgen att bli matt och den "blir grå".

ljusstyrka- ljus som avger färg. Till exempel, för svart är denna indikator 0 %.

Att välja färger

Att bestämma vilka färger du ska välja är upp till dig, men det finns några saker att tänka på:

Mjuka och omättade färger ser mer realistiska ut än tecknade.
Tänk på färghjulet: ju längre två färger är på det, desto sämre blandas de. Samtidigt ser rött och orange, som ligger i närheten av varandra, bra ut tillsammans.

Ju fler färger du använder, desto suddigare kommer din teckning att se ut. Välj därför ett par primärfärger och använd dem. Kom ihåg att Super Mario, en gång, skapades enbart från kombinationer av brunt och rött.

Applicera blommor

Att applicera färg är mycket enkelt. Om du använder photoshop, välj sedan bara önskat fragment, välj det trollspö(W-tangenten) och fyll den sedan med primärfärgen (Alt-F) eller sekundärfärgen Ctrl-F).

skuggning

Skuggning är en av väsentliga delar strävan efter att få status som en pixlad halvgud. Det är i detta skede som spriten antingen börjar se bättre ut eller förvandlas till en konstig substans. Följ mina instruktioner och du kommer definitivt att lyckas.

Steg ett: välj en ljuskälla

Först väljer vi en ljuskälla. Om din sprite är en del av ett större fragment som har sina egna lampor, som lampor, facklor och så vidare. Och alla kan påverka hur spriten ser ut på olika sätt. Att välja en avlägsen ljuskälla som solen är dock en bra idé för de flesta pixelkonst. För spel, till exempel, kommer du att behöva skapa den ljusaste möjliga sprite, som sedan kan anpassas till miljön.

Jag brukar välja ett avlägset ljus någonstans framför spriten, så att bara fronten och toppen av spriten lyser, och resten är skuggad.

Steg två: Skugga direkt

När vi väl har valt en ljuskälla kan vi börja mörka de områden som ligger längst ifrån den. Vår belysningsmodell föreslår att den nedre delen av huvudet, armar, ben etc. ska täckas med en skugga.

Kom ihåg att platta saker inte kan kasta en skugga. Ta ett papper, skrynkla ihop det och rulla det över bordet. Hur vet du att det inte är platt längre? Du såg precis skuggorna runt honom. Använd skuggning för att framhäva veck i kläder, muskler, päls, hudfärg och så vidare.

Steg tre: mjuka skuggor

Den andra nyansen, som är ljusare än den första, ska användas för att skapa mjuka skuggor. Detta är nödvändigt för områden som inte är direkt upplysta. De kan också användas för övergång från ljust till mörkt och på ojämna ytor.

Steg fyra: upplysta platser

Platser som tar emot direkta ljusstrålar måste också markeras. Det är värt att notera att det bör finnas mindre höjdpunkter än skuggor, annars kommer de att orsaka onödig uppmärksamhet, det vill säga sticka ut.

Spara dig själv huvudvärken genom att komma ihåg en enkel regel: först skuggorna, sedan högdagrarna. Anledningen är enkel: om det inte finns några skuggor kommer för stora fragment att exponeras, och när du applicerar skuggorna måste de minskas.

Några användbara regler

Skuggor är alltid svårt för nybörjare, så här är några regler som du måste följa när du skuggar.

Använd inte gradienter. Det vanligaste misstaget för nybörjare. Gradienterna ser hemska ut och uppskattar inte ens hur ljuset spelar på ytor.
Använd inte "mjuk skuggning". Jag pratar om en situation där skuggan är för långt bort från konturen, för då ser den väldigt suddig ut, och förhindrar att ljuskällan avslöjas.
Använd inte för många skuggor. Det är lätt att tänka att "ju fler färger - desto mer realistisk är bilden." Hur som helst, i verkliga livet vi är vana vid att se saker i mörka eller ljusa spektrum, och vår hjärna kommer att filtrera bort allt däremellan. Använd endast två mörka färger (mörk och mycket mörk) och två ljusa färger (ljus och mycket ljus) och lägg dem på basfärgen, inte ovanpå varandra.
Använd inte för lika färger. Det finns egentligen ingen anledning att använda nästan identiska färger, förutom när du vill göra en riktigt suddig sprite.

vibrering

Att bevara färger är vad pixelkonstskapare verkligen behöver vara uppmärksamma på. Ett annat sätt att få fler skuggor utan att använda fler färger kallas "dithering". Precis som i traditionell målning"hatching" och "cross hatching" används, det vill säga du, i bokstavligen, får du något mellan de två färgerna.

Enkelt exempel

Här är ett enkelt exempel på hur två färger kan vibreras för att skapa fyra skuggningsalternativ.

Avancerat exempel

Jämför bilden ovan (skapad med en gradient i Photoshop) med bilden som skapats med bara tre färger med hjälp av vibrering. Observera att olika mönster kan användas för att skapa "intilliggande färger". Det blir lättare för dig att förstå principen om du skapar flera mönster själv.

Ansökan

Dithering kan ge din sprite den där snygga retrolooken, eftersom många av de tidiga videospelen använde den här tekniken kraftigt på grund av det lilla antalet tillgängliga färgpaletter (om du vill se många exempel på dithering, kolla in spelen som utvecklats för Sega Genesis). Jag använder inte den här metoden så ofta själv, men i utbildningssyfte ska jag visa dig hur den kan appliceras på vår sprite.

Du kan använda dither till ditt hjärta, men det är värt att notera att endast ett fåtal personer faktiskt använder det framgångsrikt.

Selektiv konturering

Selective contouring, som också kallas seout (från den engelska selected outlining), är en underart av konturskuggning. Istället för att använda en svart linje väljer vi en färg som kommer att se mer harmonisk ut på din sprite. Vi ändrar också ljusstyrkan på denna väg mot spritens kanter, så att färgkällan kan bestämma vilka färger vi ska använda.

Fram till denna punkt har vi använt en svart kontur. Det är inget fel med detta: svart ser bra ut och låter dig också kvalitativt skilja spriten från bakgrunden av dess omgivande föremål. Men genom att använda den här metoden offrar vi en del realism som vi kan behöva i vissa fall, eftersom vår sprite fortsätter att se tecknad ut. Selektiv konturering gör att du kan bli av med detta.

Du kommer att märka att jag har använt en seult för att mjuka upp hans muskler. Slutligen börjar vår sprite se ut som en helhet och inte som ett stort antal separata fragment.

Jämför detta med originalet:

Glättning

Principen för kantutjämning är enkel: lägg till mellanfärger till vecken för att få dem att se jämnare ut. Till exempel, om du har en svart linje på en vit bakgrund, kommer små grå pixlar att läggas till på dess veck längs kanten.

Teknik 1: jämna ut kurvorna

I allmänhet måste du lägga till mellanfärger där det finns pauser, annars kommer linjen att se ojämn ut. Om det fortfarande ser ojämnt ut, lägg till ytterligare ett lager med ljusare pixlar. Appliceringsriktningen för det mellanliggande lagret måste matcha kurvans riktning.

Jag tror inte att jag kan förklara det bättre utan att komplicera det. Titta bara på bilden så förstår du vad jag menar.

Teknik 2: runda av gupp

Teknik 3: Skriv över radslut

Ansökan

Låt oss nu tillämpa kantutjämning på vårt tryck. Observera att om du vill att din sprite ska se bra ut mot vilken bakgrundsfärg som helst, släta inte ut linjens utsida. Annars är din sprite omgiven av en mycket olämplig gloria i korsningen med bakgrunden, och kommer därför att framträda för tydligt mot vilken bakgrund som helst.

Effekten är mycket subtil, men den är av stor betydelse.

Varför behöver du göra det manuellt?

Du kanske frågar, "Varför inte bara använda ett grafikredigeringsfilter på vår sprite om vi vill att den ska se smidig ut?" Svaret är också enkelt - inget filter kommer att göra din sprite så skarp och ren som handgjord. Du kommer att ha full kontroll över inte bara färgerna som används, utan också var du ska använda dem. Dessutom vet du bättre än något filter var kantutjämning kommer att vara lämplig, och där det finns områden där pixlar helt enkelt kommer att förlora sin kvalitet.

Efterbehandling

Wow, vi är ganska nära att kunna stänga av din dator och ta en kall öl från kylen. Men han har inte kommit än! Den sista delen handlar om vad som skiljer den energiska amatören från den rutinerade proffsen.

Ta ett steg tillbaka och ta en ordentlig titt på din sprite. Det finns en möjlighet att han fortfarande ser "rå". Ta dig tid att förbättra och se till att allt är perfekt. Oavsett hur trött du är så ligger det roligaste framför dig. Lägg till detaljer för att få din sprite att se mer intressant ut. Det är här dina pixelfärdigheter och erfarenhet kommer in i bilden.

Du kanske blir förvånad över att vår Lucha-advokat inte har haft några ögon hela tiden, eller att paketet han håller i är tomt. Egentligen ligger anledningen i att jag ville vänta med små detaljer. Lägg också märke till klädseln jag la till hans armband, gylfen på hans byxor... ja, vad skulle en man vara utan hans bröstvårtor? Jag mörkade även nedre delen av hans bål lite så att armen sticker ut mer mot kroppens bakgrund.

Äntligen är du klar! Lucha Lawyer tävlar i kategorin Lättvikt, eftersom den bara har 45 färger (kanske det är en tungviktare beroende på dina palettbegränsningar) och dess upplösning är cirka 150 gånger 115 pixlar. Nu kan du öppna ölen!

Hela framstegen:

Det är alltid roligt. Här är en gif som visar utvecklingen av vår sprite.

Lär dig grunderna i konst och praktik traditionella tekniker. Alla kunskaper och färdigheter som behövs för att rita och rita kan tillämpas i pixel.
Börja med små sprites. Det svåraste är att lära sig hur man placerar mycket detaljer med så få pixlar som möjligt utan att göra sprites lika stora som mina.
Studera verk av konstnärer du beundrar och var inte rädd för att vara overoriginal. Det bästa sättet lärande - upprepning av fragment av andras arbete. För produktion egen stil tar mycket tid.
Om du inte har en surfplatta, köp en. Permanent nervsammanbrott och stressen med att ständigt klicka på vänster musknapp är inte kul, och det är inte heller troligt att det imponerar på medlemmar av det motsatta könet. Jag använder en liten Wacom Graphire2 - jag gillar dess kompakthet och portabilitet. Du kanske gillar en större surfplatta. Gör en liten provkörning innan du köper.
Dela ditt arbete med andra för att få deras åsikter. Detta kan också vara ett bra sätt att få nya nördvänner.

P.S.

Originalartikeln finns. Om du har länkar till coola tutorials som behöver översättas, skicka dem till vår festlokal. Eller skriv direkt till gruppens meddelanden

I den här handledningen kommer du att lära dig hur du förvandlar ett foto av en person till pixelkonst som fiktiv karaktär arkadspel från tidigt 90-tal.
James May - aka Smudgethis - designade denna stil 2011 för musikvideo för en dubstep rockakt. Neros första hit, Me & You – där han skapade animationen för att visa gammalt spel med Neros två medlemmar. Spelet var ett rytmiskt 2D-plattformsspel med 16-bitars grafik som liknar Double Dragon, men vida överlägset 8-bitars klassiska retrospel som Super Mario Bros.
För att skapa den här stilen måste karaktärer fortfarande vara blockiga, men mer komplexa än äldre spel. Och samtidigt måste du använda en begränsad färgpalett för att uppnå utseende, kom ihåg att dessa spel fortfarande hade 65 536 färger.
Här visar James hur du skapar en karaktär från ett foto med hjälp av en enkel färgpalett och pennverktyget.
Liksom animationsguiden behöver du också ett foto av personen. James använde bilden av en punkare som ingår i projektfilerna för den här handledningen.
När du är klar, kolla in denna 16-bitars After Effects Animation Tutorial där James kommer att visa dig hur du tar den här karaktären i AE, animerar den och använder retrospeleffekter.

Steg 1

Öppna animationsguiden (16 bitar) .psd och 18888111.jpg (eller valfritt foto) för att använda som bas för karaktären. Ett profilfoto i fullängd fungerar bäst och hjälper dig att få färgpaletter och stilar för din 16-bitars form.
Animationsguiden har flera poser på separata lager. Välj den som det bästa sättet matchar posen på ditt foto - eftersom vi inte har ben i ramen, valde jag standardposen på nivå 1.

Steg 2

Använd det rektangulära markeringsverktyget (M), välj huvudet från ditt foto och kopiera (Cmd /Ctrl + C) och klistra in det (Cmd /Ctrl + V) i Animation Guide (16bit).psd.
Skala bilden så att den passar, proportionellt. Du kommer att märka att eftersom PSD-dimensionerna är mycket små, kommer bilden omedelbart att börja rita en pixel.

Steg 3

Skapa ett nytt lager och rita en kontur med en pixel svart penna (B), med hjälp av animationsguiden som finns i det och fotot som bas. \ P
Den medföljande guiden hjälper till att utveckla en rad karaktärer från större chefsfigurer eller tunnare kvinnliga. Det här är en grov guide för att komponera och animera mina pixelkonstfigurer.

Steg 4

Använd pipettverktyget (I), prova det mörkaste hudtonsområdet på fotot och skapa en liten kvadrat med färg. Gör detta tre gånger till för att skapa en fyrfärgad hudtonspalett.
Skapa ytterligare ett lager under konturlagret och använd en 1 pixel pensel och en färgpalett med fyra färger för att skugga bilden (igen med hjälp av fotot som din guide). \ P
Det är bäst att behålla alla delar av ditt konstverk, eller olika lager, eftersom det gör det lätt att återanvända dem på andra former. Detta är särskilt användbart för "baddies" eftersom de flesta 16-bitars spel använder mycket liknande siffror. Till exempel kan en kompis ha en röd skjorta och en kniv, medan en senare är identisk förutom den blå skjortan och pistolen.

Steg 5

Upprepa denna process för andra delar av figuren, skugga tyget för att matcha andra element i originalfotot. Kom ihåg att fortsätta sampla med pipettverktyget för att skapa färgpaletterna först, eftersom detta ger en konsekvent uppsättning färger som ser bra ut och passar den relativt begränsade färgpaletten i 16-bitarsspel.

Steg 6

Lägg till data för att förbättra din karaktär med nyanser, tatueringar, ett örhänge med mera. Ät middag här och fundera över hur du vill att din karaktär ska se ut i spelmiljön. De kanske kan använda en yxa eller ha en robotarm?

Steg 7

För att ge din karaktär liv, upprepa de föregående stegen med de andra fem animationsguidelagren. Denna process kan ta lite tid att bemästra och skapa sömlösa resultat, men genvägar kan göras genom att återanvända element från tidigare ramar. Till exempel, i denna sex-bildruta sekvens, förblir huvudet oförändrat.

Steg 8

För att kontrollera att animeringssekvensen är i sin ordning, öppna animeringspanelen i Photoshop och se till att den är i det här ögonblicket endast den första bildrutan i animationen. Du kan lägga till nya ramar och aktivera och inaktivera lager för att göra din animation, men mest snabb vägär att använda kommandot "Gör ramar från lager" i panelens popup-meny (överst till höger).
Den första ramen är en tom bakgrund, så välj den och klicka på panelens papperskorgsikon (längst ner) för att ta bort den.

Del 6: Utjämning
Del 7: Texturer och oskärpa
Del 8: Värld av brickor

Förord

Det finns många definitioner av pixelkonst, men här kommer vi att använda detta: en pixelkonstbild om den är helt handgjord, och det finns kontroll över färgen och positionen för varje pixel som ritas. Utan tvekan, i pixelkonst, inkluderande eller användning av penslar eller oskärpa verktyg eller nedbrytningsmaskiner (degraderade maskiner, osäker) och andra programvarualternativ som är "moderna" används inte av oss (som faktiskt står till vårt förfogande betyder "till vårt bortskaffande”, men logiskt verkar det mer korrekt så här). Det är begränsat till verktyg som "penna" och "fyll".

Du kan dock inte säga att pixelkonst eller icke-pixelartgrafik är mer eller mindre vacker. Det är mer rättvist att säga att pixelkonst är annorlunda och bättre lämpad för retrospel (som Super Nintendo eller Game Boy). Du kan också kombinera teknikerna som du lärt dig här med konsteffekter utan pixlar för att skapa en hybridstil.

Så här kommer du att lära dig den tekniska delen av pixelkonst. Jag kommer dock aldrig att göra dig till artist...av den enkla anledningen att jag inte är någon artist heller. Jag kommer inte att lära dig mänsklig anatomi eller konstens struktur, och jag kommer inte att säga så mycket om perspektiv. I den här guiden kan du hitta mycket information om tekniker för pixelkonst. I slutändan måste du kunna skapa karaktärer och scenerier för dina spel, så länge du är uppmärksam, övar regelbundet och tillämpar dessa tips.

– Jag vill också påpeka att bara några av bilderna som används i den här guiden är förstorade. För bilder som inte är förstorade skulle det vara bra om du tar dig tid att kopiera dessa bilder så att du kan studera dem i detalj. Pixelkonst är essensen av pixlar, det är värdelöst att studera dem på långt håll.

Till sist måste jag tacka alla konstnärer som på ett eller annat sätt hjälpte mig att skapa denna guide: Shin, för hans smutsiga arbete och linjekonst, Xenohydrogen, för hans färggeni, Lunn, för hans kunskap om perspektiv, och Panda, aktern Ahruon, Dayo och Kryon för deras generösa bidrag för att illustrera dessa sidor.

Så låt oss gå tillbaka till saken.

Del 1: Rätt verktyg

Dåliga nyheter: du kommer inte att rita en enda pixel i den här delen! (Och det är väl ingen anledning att hoppa över det?) Om det finns ett talesätt som jag inte tål så är det "det finns inga dåliga verktyg, bara dåliga arbetare." Jag trodde faktiskt att ingenting kunde vara längre från sanningen (förutom kanske "det som inte dödar dig gör dig starkare"), och pixelkonst, mycket bra bevis. Den här guiden syftar till att bekanta dig med de olika programvarorna som används för att skapa pixelkonst och hjälpa dig att välja rätt.

1. Några gamla grejer

När man väljer programvara för att skapa pixelkonst tänker folk ofta: "Val av programvara? Det här är vansinne! Allt vi behöver för att skapa pixelkonst är målning! (uppenbarligen en ordlek, teckning och ett program) ” tragiskt misstag S: Jag pratade om dåliga verktyg, det här är det första. Paint har en fördel (och bara en): du har den redan om du kör Windows. Å andra sidan har han en hel del brister. Detta är en (ofullständig) lista:

* Du kan inte öppna mer än en fil samtidigt
* Ingen paletthantering.
* Inga lager eller transparens
* Inga icke-rektangulära val
* Få snabbtangenter
* Fruktansvärt obekvämt

Kort sagt, du kan glömma Paint. Nu kommer vi att se den verkliga programvaran.

2. Till slut...

Folk tänker då, "Okej, Paint är för begränsat för mig, så jag använder min vän Photoshop (eller Gimp eller PaintShopPro, det är samma sak), som har tusentals möjligheter." Detta kan vara bra eller dåligt: om du redan kan ett av dessa program kan du göra pixelkonst (inaktivera alla alternativ för automatisk kantutjämning och stänga av många av de avancerade funktionerna). Om du inte redan känner till dessa program kommer du att spendera mycket tid på att lära dig dem, även om du inte behöver alla deras funktioner, vilket skulle vara ett slöseri med tid. Kort sagt, om du redan använder dem under en lång tid, du kan skapa pixelkonst (jag använder personligen Photoshop av vana), men annars är det mycket bättre att använda program som är specialiserade på pixelkonst. Ja, de finns.

3. Grädde

Det finns många fler pixel art-program än man kan tro, men här kommer vi bara att överväga de bästa. De har alla mycket liknande egenskaper (palettkontroll, förhandsvisning av upprepade brickor, transparens, lager och så vidare). Skillnader de har i bekvämlighet ... och pris.

Charamaker 1999- bra program, men distributionen verkar vara pausad.

Graphics Gale är mycket roligare och enklare att använda, och det kostar runt $20, vilket inte är så illa. Jag kommer att tillägga, testversionen är inte tidsbegränsad och kommer med tillräckligt mycket uppsättning för att göra tillräckligt bra grafik. Bara det fungerar inte med .gif, vilket inte är ett sådant problem eftersom .png är bättre ändå.

Den mjukvara som oftast används av pixelartister är ProMotion, som är (klart) bekvämare och snabbare än Graphics Gale. Och ja, hon är värdefull! du kan köpa full version för ett blygsamt belopp... 50 euro ($78).
Låt oss inte glömma våra Mac-vänner! Pixen är ett bra program tillgängligt för Macintosh och det är gratis. Tyvärr kan jag inte berätta mer eftersom jag inte har en Mac. Översättarens anteckning (franska): Linux-användare (och andra) bör prova , och GrafX2 . Jag uppmanar dig att prova dem alla i demoversioner och se vilken som passar din bekvämlighet. I slutändan är det en smaksak. Tänk bara på att när du väl börjar använda ett program kan det vara väldigt svårt att byta till något annat.

Fortsättning följer…

Översättarens anteckningar från franska till engelska

Det här är en bra guide till pixelkonst skriven av Phil Razorback från LesForges.org. Stort tack till Phil Razorback för att du tillåter OpenGameArt.org att översätta dessa guider och lägga upp dem här. (Från en översättare till ryska: Jag bad inte om lov, om någon har en önskan kan du hjälpa till, jag har inte tillräckligt med erfarenhet av att kommunicera på engelska, än mindre franska).

Översättarens anteckning från engelska till ryska

Jag är en programmerare, inte en artist eller översättare, jag översätter för mina vänner artister, men vad gott är förlorat, låt det vara här.
Original på franska någonstans här www.lesforges.org
Franska till engelska översättning här: opengameart.org/content/les-forges-pixel-art-course
Jag översatte från engelska eftersom jag inte kan franska.
Och ja, detta är mitt första inlägg, så designförslag är välkomna. Plus, frågan är om de återstående delarna ska publiceras som separata artiklar, eller är det bättre att uppdatera och komplettera denna?

Om du gillade att leka med Lego som barn (eller du fortsätter att leka med det även som vuxen), kommer du säkert att vara intresserad av isometrisk pixelkonst. Det kan bero på teknik och vara mer som en exakt vetenskap än en illustration. Men i sådan konst finns det inget 3D-perspektiv, du kan flytta elementen miljö med maximal enkelhet.

Vi kommer att skapa karaktären som en logisk referenspunkt för pixelkonsten, eftersom det kommer att hjälpa till att bestämma proportionerna för de flesta andra föremål som vi förmodligen kommer att skapa. Men först måste du lära dig några grunder i isometrisk pixelkonst och sedan gå vidare till att skapa karaktärer; om du inte vill lära dig grunderna och rita en kub, hoppa till steg 3. Nu sätter vi igång.

1. Pixellinjer

Dessa linjer är grunden för den vanligaste (och intressanta) stilen av isometrisk pixelkonst, stilen vi kommer att använda i denna handledning:

De är två pixlar långa för varje pixel ner. Sådana linjer ser relativt mjuka ut och används för fyrkantiga ytor:

De vanligaste linjestrukturerna (som i figuren nedan) kommer att fungera bra, men ritningen blir mer kantig och grov för varje stegsökning:

Som kontrast, här är några ojämnt strukturerade linjer:

Mycket kantig och ser inte ut

Skön. Undvik att använda dem.

2. Volymer

Vår karaktär kommer inte att följa isometriska regler exakt, så låt oss först skapa en enkel kub för att ta reda på proportionerna.

Skapa ett nytt dokument i Photoshop med upplösning 400x400px.

Jag gillar att öppna ett extra fönster för samma fil med hjälp av menyn Fönster > Ordna > Nytt fönster/lektioner.(Fönster > Ordna > Nytt fönster...). Detta tillåter, arbetar med en ökning 600% följ resultatet i zoomfönstret 100% . Att använda rutnätet är upp till dig, men ibland tycker jag att det är mer irriterande än användbart.

Låt oss zooma in på dokumentet och skapa en av raderna 2:1

Jag föredrar att använda 5% grått istället för svart, så att jag senare kan lägga till skuggor (svart och låg opacitet) och kunna välja varje färg separat med trollstaven.

Det finns flera sätt att dra en linje:

1. Använda Linjeverktyg(Linjeverktyg) med läge Pixels(Pixlar) avmarkerad Glättning(Anti-alias) och tjocklek 1 px. När du ritar bör lutningsvinkelns verktygstips visas 26,6°. Linjeverktyget kan faktiskt inte kallas bekvämt, det skapar taggiga linjer om vinkeln inte är korrekt.

2. Du måste skapa ett urval 20 x 40 px, välj sedan K penna(Blyertsverktyg) 1 px och rita en prick i det nedre vänstra hörnet av markeringen, efter det, medan du håller ner tangenten Flytta klicka till höger övre hörnet. Photoshop skapar automatiskt en ny linje mellan de två punkterna. Med övning kan du på detta sätt skapa jämna linjer utan val.

3. Du måste rita två pixlar med en penna, markera dem, klicka Ctrl+Alt, dra sedan markeringen till en ny plats så att pixlarna konvergerar i hörnen. Du kan också flytta markeringen med piltangenterna på tangentbordet medan du håller ned alt. En sådan metod kallas Alt offset(Alt Nudge).

Här har vi skapat den första raden. Välj det och flytta det som i steg 3, eller bara kopiera och klistra, flytta det nya lagret nedåt. Efter det bläddrar du den andra raden horisontellt genom menyn Redigera > Transformera > Vänd horisontellt(Redigera > Transformera > Vänd horisontellt). Jag använder den här funktionen så ofta att jag till och med gjorde en kortkommando för den!

Låt oss nu kombinera våra linjer:

Sedan, Alt-Offset igen, vänd kopian vertikalt och slå samman de två halvorna för att fullborda vår yta:

Det är dags att lägga till en "tredje dimension". Alt-skift den kvadratiska ytan och flytta den till 44px ner:

Tips: Om du håller ned piltangenterna medan du rör dig Flytta, kommer valet att flyttas till 10 pixlar istället för en.

För att få kuben att se snyggare ut, låt oss mjuka upp hörnen genom att ta bort pixlarna längst till vänster och längst till höger från rutorna. Lägg sedan till vertikala linjer:

Ta nu bort de onödiga linjerna längst ner på kuben. För att börja färga vår figur, välj vilken färg som helst (helst en ljus nyans) och fyll den översta kvadraten med den.

Öka nu ljusstyrkan för den valda färgen med 10% (Jag rekommenderar att du använder HSB-reglagen på kontrollpanelen) för att rita ljusare hörn längs framsidan av vår färgruta. Eftersom vi har beskuren kuben lite kommer dessa ljusare linjer att se snyggare ut över de svarta kanterna (istället för att ersätta dem) som i bilden nedan:

Nu måste vi ta bort de svarta kanterna. Använd tricket från den andra linjeritningsmetoden för radergummit (som ska vara inställt på normalt utsuddningsverktyg(Suddverktyg) Läge Penna(Blyertsläge), Tjocklek 1 px).

Välj färg på den översta kvadraten med Pipetter(Eyedropper Tool). För att snabbt välja det här verktyget, medan du ritar med en penna eller en fyllning, tryck på knappen alt. Använd den resulterande pipettfärgen för att fylla i den vertikala linjen i mitten av kuben. Efter det minskar du färgens ljusstyrka med 15% och fyll den vänstra sidan av kuben med den resulterande färgen. Minska ljusstyrkan ytterligare 10% för höger sida:

Vår kub är klar. Det ska se rent och relativt smidigt ut när det zoomas in. 100% . Vi kan fortsätta.

3. Lägg till ett tecken

Stilen på karaktären kan vara helt annorlunda, du är fri att ändra proportionerna eller elementen som du vill. Som regel gör jag en tunn kropp och ett lite stort huvud. Karaktärens slanka kropp hjälper till att hålla linjerna raka och enkla.

Det vore logiskt att börja med ögonen. Om vi var strikta med isometriska vinklar, borde ett öga i ansiktet vara lägre, men i liten skala kan vi försumma denna funktion för att göra karaktärernas ansikten trevligare. Detta kommer att göra ritningen snygg även trots storleken.

Vi gör karaktären liten, för efter ett tag kanske du vill lägga till en bil, ett hus, ett helt torg eller till och med en stad. Därför bör karaktären vara ett av de minsta delarna i illustrationen. Grafisk effektivitet bör också beaktas; försök att göra karaktären så attraktiv som möjligt med så få pixlar som möjligt (tillräckligt stor för att representera ansiktsdrag). Dessutom är små föremål mycket lättare att rita. Undantaget är när du bara vill visa karaktären, deras känslor eller deras likhet med någon.

Låt oss skapa ett nytt lager. Ögonen behöver bara två pixlar - en för varje öga, med en tom pixel emellan. Hoppa över en pixel till vänster om ögonen, lägg till en vertikal linje:

Lägg nu till ytterligare ett lager och rita en 2px horisontell rand, detta kommer att vara munnen. Använd pilarna på tangentbordet för att flytta och när du hittar den perfekta positionen flyttar du lagret nedåt. Gör samma sak med hakan, det ska bara vara en längre linje:

Avsluta håret och toppen av huvudet, mjuka sedan upp hörnen. Du borde få något sånt här:

Lämna nu en tom pixel bredvid det andra ögat, lägg till polisonger (som också kommer att hjälpa till att rita karaktärens öron) och ytterligare några pixlar ovanför dem till hårfästet. Lämna sedan en tom pixel till, det är här örat kommer att börja och linjen som markerar slutet av huvudet. Fortsätt och mjuka upp hörnen på linjerna:

Lägg till en pixel för toppen av örat och omforma huvudet om du vill; huvuden dras vanligtvis redan i nackområdet:

Rita en linje från hakan - det här kommer att vara bröstet. Början av halsen kommer att vara vid örat, några pixlar ner och ett par pixlar diagonalt så att vår karaktärs axlar är synliga:

Nu på den plats där axlarna slutar, lägg till en vertikal linje med en längd på 12 pixlar för att göra den yttre sidan av armen, och den inre sidan kommer att vara två pixlar till vänster. Anslut linjerna längst ner med ett par pixlar för att göra en hand / knytnäve (i vårt fall finns det ingen detalj, så var inte uppmärksam på detta element) och precis ovanför platsen där handen slutar, lägg till en linje 2:1 , som kommer att fungera som en midja, dra sedan linjen på bröstet och få en färdig överkropp. Karaktärens andra arm är inte synlig, men den kommer att se bra ut eftersom den är täckt av bålen.

Du borde sluta med något liknande detta:

Naturligtvis kan du använda vilket bildförhållande du vill; Jag föredrar att rita olika varianter sida vid sida innan du bestämmer dig för vilken som är bäst.

Nu för den nedre bålen kommer vi att lägga till några till vertikala linjer. Jag gillar att lämna 12 pixlar mellan sulor och midja. Benen är väldigt lätta att rita, du behöver bara göra ett ben lite längre, vilket gör att karaktären ser mer voluminös ut:

Nu ska vi lägga till färg. Att hitta en bra hudfärg är alltid svårt, så om du vill använda samma som i den här handledningen är dess kod #FFCCA5. Färgmatchning för resten av elementen borde inte vara ett problem. Efter det bestämmer du längden på ärmarna, läget för skjortans snitt, dess stil. Lägg nu till en mörk rand för att skilja skjortan från kroppen. Jag föredrar att göra alla dekorativa element ljusare än svarta (särskilt när många element är på samma nivå, till exempel från en skjorta till läder eller byxor). Detta gör att du kan få den nödvändiga kontrasten, samtidigt som bilden inte blir för grov.

Du kan lägga till ljuseffekter i nästan varje färgzon. Undvik för många skuggor eller använd gradienter. Några pixlar till ( 10% eller 25% ) en ljus eller mörk färg räcker för att få elementen att se tredimensionella ut och ta bort illustrationens planhet. Om du vill lägga till en levande färg till ett område som redan har 100% ljusstyrka, försök att sänka dess mättnad. I vissa fall (till exempel när man ritar hår) kan detta vara ett bra sätt att byta nyanser.

Du kan prova många håralternativ. Här är några idéer:

Om du fortsätter att skapa karaktärer kommer små saker som klädstil, ärmlängd, byxlängd, accessoarer, kläder och hudfärg att vara väldigt användbara för variation.

Nu återstår bara att sätta ihop båda elementen och utvärdera hur de ser ut i samma miljö:

Om du vill exportera din skapelse är PNG det perfekta formatet.

Det var allt, jobbat klart!

Jag hoppas att den här lektionen inte är för förvirrande. Jag tror att jag har täckt det maximala antalet tips och estetiska knep. Du kan fritt utöka din isometriska pixelvärld - byggnader, bilar, interiörer, exteriörer. Att göra allt detta är möjligt och till och med intressant, även om det inte är så lätt.

Översättare: Shapoval Alexey

Att rita på pixelnivå har en nisch bild och form. Med hjälp av enkla pixlar skapas riktiga mästerverk. Naturligtvis kan du skapa sådana ritningar på ett pappersark, men det är mycket enklare och mer korrekt att göra bilder med hjälp av grafiska redigerare. I den här artikeln kommer vi att analysera i detalj varje representant för sådan programvara.

Den mest populära grafikredigeraren i världen som kan arbeta på pixelnivå. För att skapa sådana bilder i den här redigeraren behöver du bara utföra några förkonfigurationssteg. Allt en konstnär behöver för att skapa konst finns här.

Men å andra sidan behövs inte ett sådant överflöd av funktionalitet för att rita pixelkonst, så det är ingen mening att betala för mycket för ett program om du bara ska använda det för en viss funktion. Om du är en av dessa användare, råder vi dig att vara uppmärksam på andra representanter som fokuserar specifikt på pixelgrafik.

PyxelEdit

Det här programmet har allt du behöver för att skapa sådana målningar och är inte övermättat med funktioner som en konstnär aldrig kommer att behöva. Inställningen är ganska enkel, i färgpaletten är det möjligt att ändra vilken färg som helst till önskad ton, och den fria rörligheten för fönster hjälper dig att anpassa programmet för dig själv.

PyxelEdit har en bricka-till-duk-funktion som kan vara praktisk när du skapar objekt med liknande innehåll. Provversionen är tillgänglig för nedladdning på den officiella webbplatsen och har inga begränsningar för användning, så du kan känna på produkten innan du köper.

Pixelformer

I utseende och funktionalitet är detta den vanligaste grafiska redigeraren, bara den har flera ytterligare funktioner för att skapa pixelbilder. Detta är ett av få program som distribueras helt gratis.

Utvecklare positionerar inte sin produkt som lämplig för att skapa pixelkonst, de kallar det bra väg rita logotyper och ikoner.

GraphicsGale

I nästan all sådan mjukvara försöker man införa ett bildanimationssystem, som oftast visar sig vara helt enkelt oanvändbart p.g.a. begränsade funktioner och felaktig implementering. Även i GraphicsGale är inte allt så bra med detta, men den här funktionen kan åtminstone fungera normalt.

När det gäller ritning är allt exakt detsamma som i huvuddelen av redaktörer: grundläggande funktioner, stora färgpalett, möjligheten att skapa flera lager och inget extra som kan störa arbetet.

charamaker

Character Maker 1999 är ett av de äldsta sådana programmen. Den skapades för att skapa individuella karaktärer eller element, som sedan skulle användas i andra program för animering eller inbäddade i datorspel. Därför är det inte särskilt lämpligt för att skapa målningar.

Gränssnittet är inte särskilt bra. Nästan inga fönster kan flyttas eller storleksändras, och standardlayouten är inte den bästa. Däremot kan du vänja dig vid det.

Pro Motion NG

Detta program är idealiskt i nästan allt, från ett genomtänkt gränssnitt, där det är möjligt att flytta fönster oberoende av huvudet till vilken punkt som helst och ändra storlek på dem, och slutar med en automatisk växling från en pipett till en penna, vilket är bara en otroligt bekväm funktion.

Annars är Pro Motion NG bara bra programvara för att skapa pixelkonst på alla nivåer. Provversionen kan laddas ner från den officiella webbplatsen och testas för att besluta om ytterligare köp av den fullständiga versionen.

Aseprit

Det kan med rätta anses vara det mest bekväma och vackra programmet för att skapa pixelkonst. Enbart gränssnittsdesignen är värd något, men det är inte alla fördelarna med Aseprite. Den har förmågan att animera bilden, men till skillnad från de tidigare representanterna är den implementerad korrekt och är bekväm att använda. Det finns allt för att skapa vackra GIF-animationer.

Populär i kategorin: