Så här skapar du ett isometrisk pixelartkärl i Adobe Photoshop

Vad du ska skapa

I denna handledning lär du dig att skapa en isometrisk pixelartbil. Ha din karaktär redo det går en tur.

Vi ska skapa en relativt generisk sedan. Det kommer inte att vara alltför prickigt, vilket är idealiskt för återvinning många gånger över på samma illustration (användbart om du gör en stadsscen!). Men även om det blir generiskt skulle det inte skadas för att se några referensbilder. kanske finns det enkla designelement från faktiska bilmodeller som du kan införliva i din bilgrafik.

Se till att du redan har gått igenom den isometriska pixelkonsttecknadstutorialen; den täcker nödvändiga grunder för illustrationstilen, och vi ska använda tecknet skapat i den lektionen som en slags målestok för bilen.

1. Volymer

Vi börjar med bilens huvudformer, mestadels rektanglar först och sedan några mer intressanta former.

Steg 1

Vi ska göra en ganska medelstor bil. Så det borde vara bredare än två av våra karaktärer, eftersom åtminstone två borde kunna sitta sida vid sida i den, och längden ska vara runt dubbelt bredden. Så låt oss göra en rektangel för att representera fotavtrycket.

Steg 2

Hjulen kommer inte vara raka och punktiga, så låt oss runda dem lite.

Steg 3

Välj och kopiera den avrundade rektangeln och fyll sedan den med svart.

Sänk opaciteten på detta lager till 20%.

Tips! Du kan ändra opacitetsprocenten genom att trycka på siffror på tangentbordet medan flyttningsverktyget är aktivt. Att trycka 2 motsvarar 20% opacitet.

Steg 4

När du har sänkt den fyllda rektangelens opacitet klistar du in den ursprungliga rektangeln precis över den, lämnar den i ett nytt lager och flyttar det upp 4 px. Vi har redan gjort bilens skugga. kom ihåg att uppdatera den om du ändrar bilens dimensioner när som helst.

Steg 5

Kopiera nu bilens bottenlinje och placera kopian 10 px högre (kom ihåg att du kan göra det genom att välja det och sedan trycka på Alt-Shift-Up Arrow) eller justera den här höjden som du tycker är lämplig; behåll din karaktär runt på ett annat lager så att du kan kontrollera storlek mot det när du vill.

Steg 6

Låt oss ansluta de två rektanglarna och ta bort bakgrundslinjerna tills vi får den här typen av flygande tegelstenar!

Steg 7

Vi ska ge bilen en bakre stötfångare som sticker ut lite genom att välja de två bästa hörnen och flytta dem ner en pixel (och över två)

Steg 8

Lägg nu en rektangel till där du vill att windows och vindrutor ska börja skjuta upp.

Steg 9

Rita en diagonal linje (1: 1) från det vänstra hörnet av den här nya rektangeln, och duplicera den så att två parallella diagonaler sticker ut ur tegelformen. Dessa linjer kommer att mötas på toppen med en ny 2: 1-linje, som blir bilens tak.

Taket ska inte vara mycket högre än föregående topplinje (och bör helst vara ett jämnt antal pixlar högre, om du gillar att vara obsessiv med detaljer).

Steg 10

Nu i det främsta hörnet av den nya rektangeln behöver vi ett annat par linjer för att definiera vindrutan. De kommer dock inte att vara diagonaler som de första linjerna, eftersom vindrutor nästan alltid blir smalare när de går upp, så de blir 1: 2 linjer.

Steg 11

Låt oss gå med i dessa vindrutelinjer för att få kompletta konturer för framrutan. Ta bort överblivna pixlar i dessa konturer.

Steg 12

Nu behöver vi en annan 2: 1-linje för de främsta konturerna i fönstren.

Låt oss bli av med de cluttering pixlarna:

Och gör en fin linje för att gå med i topp- och bottenfönster på baksidan av bilen. Jag valde att göra dem med rundade hörn:

Steg 13

Avsluta toppen av bilen genom att lägga till en bakre kontur (med ett rundat hörn) och en vertikal linje i fönstret för att skilja fram och bak.

2. Däck

Nu kommer vi fram till ett ganska nytt element: en cirkel.

Det är relativt lätt att vrida en planvy i fronten i isometrisk vy genom att ställa en vertikal skev till 26,5˚.

Att göra det skulle leda till detta:

Först har du framsidans cirkel; då har du det med 26,5˚ skew; och äntligen polerar du av de skurna bitarna.

Men vi gör våra däck på ett annat sätt för att ha större kontroll över estetiken och mindre iakttagande och sluta med mycket runda däck.

Steg 1

Låt oss använda tecknet för att ställa några höjder. Bottenlinjen här är golvnivån, mittlinjen är karossens bottenlinje och topplinjen blir toppen av däcket. Däck bredvid människor går vanligen upp till ungefär halva låret, så de kommer att bli lite stora men de kommer att fungera okej.

Steg 2

Låt oss nu lägga till två vertikala linjer för att ha en ruta. Ta bort resten av pixlarna (det är bra att hålla bitarna i mellannivån så att placering blir enklare senare).


Denna kvadrat kommer att vara gränserna för vår cirkel. Det är okej om det ser lite längre ut än det är brett. De två vertikala linjerna här är 7 px från varandra.

Steg 3

Här i rött är den cirkel jag ska använda; Det håller för det mesta raka linjer så det ser ganska rent ut men fortfarande tillräckligt runda.

I svart är den färdiga cirkeln, med pixlarna från styrkorgen raderad.

Steg 4

Tiden att lägga till däcken i vår bil. Här är mitt placeringsförslag.

Men gärna prova lite olika platser.

Det är användbart att flytta dessa element runt med pilknapparna på ett annat lager, för att hitta var du tror att de kommer att se bäst ut. När de är på sötnos kan du slå samman.

3. Detaljer & Färg

Vi har fått de flesta huvudlinjerna redan, så det är dags att börja fylla i alla tomma områden med detaljer och färg!

Steg 1

Låt oss avsluta däcken. Däckgummit ska vara tjockare, så lägg till en extra rad pixlar runt cirkelns insida så här:

Inget behov av att göra det på båda däcken; vi ska arbeta på en tills gjort och sedan kopiera den.

Steg 2

Fyll den inre tomma cirkeln med grå eller vilken färg du kanske vill ha för fälgar.

Här är det redan lite detaljerat arbete i mörkare grå som läggs till fälgen. Vi arbetar med så liten detalj att det är viktigt att fortsätta kontrollera hur det ser ut när det zoomas ut. om det inte "läser" rent så borde du förenkla.

Steg 3

Vanligtvis är antialiasing att undvikas i isometrisk pixelkonst, men jag tror att det i så liten skala kan undantag göras. I det här fallet bidrar antialiasingen avsevärt till att pixlarna i mitten av fälgen ser ut som en koncentrisk cirkel. Det handlar om så mycket detaljer som vi kan lägga till så lite element.

Steg 4

För att slutföra däcket lade jag till en extra pixel av antialiasing för att få fälgen att se mindre tuff ut, och jag lade också till ett par pixlar som höjdpunkt för däckgummi:

Däcket är klart, så nu kan det appliceras på den andra cirkeln:

Steg 5

För att göra fönstren kan du försöka lägga till höjdpunkter och reflektioner eller försöka visa fler detaljer om inredningen. Det kan finnas många sätt att närma sig dem. Den stil jag använder tror jag klarar av att uppnå fönstereffekten utan mycket arbete.

Fyll fönstersorterna med en mörk akvamarin eller blå färg.

Bör vara ljusare än konturfärgen men inte så mycket.

Steg 6

Lägg nu lite ljusare detaljer med en ljusare nyans av akvamarin / blå, som om ljuset bara lyckas slå vad som helst nära glaset (instrumentbrädan, hjulet och dörrkanterna) lämnar resten i mörkret. Du behöver inte oroa dig för så mycket detaljer här.

Det är tänkt att se ut som tonade fönster.

Steg 7

Låt oss lägga till bilens färg!

Här är ett ganska djärvt val:

Lägg till en mörkare nyans i det nedre området. 15% mindre ljusstyrka ska fungera bra.

Steg 8

Vi använder endast den främre delen av linjen som går igenom mitten av bilen. Markera den och kopiera den många gånger under den; Vi ska göra strålkastare, grill och andra detaljer med dessa pixlar.

Men linjen på sidan vi inte verkligen behöver, så ta bort det.

Steg 9

Fyll pixlarna mellan dessa nya linjer med vit eller någon ljusfärg som står för strålkastarna.

Steg 10

Nu lägger vi till grillen, skär genom mitten av det stora vita området som vi just gjort. Grillen blir mörkgrå, bara lite ljusare än konturfärgen.

Den främre strålkastaren är bara en pixel bred eftersom det antas att det går runt hörnet av bilen, vilket är ganska korrekt, geometriskt.

Steg 11

Nu kommer bottenlinjen att göra dimljuset och märkskylten. Fortsätt och ta bort onödiga svartvita pixlar.

Steg 12

För att avsluta dessa detaljer sänker vi kontrast på raderna runt de vita pixlarna, vilket gör dem till en mörk nyans av bilens färg, men ganska ljusare än den vanliga konturfärgen.

Steg 13

Nu när det mesta av bilens "ansikte" är klart, är det en bra chans att släpa ut några av hörnen, när vi kommer närmare det slutliga utseendet.

Här har jag utjämnat hörnet över den vänstra strålkastaren och det högra hörnet över bagageutrymmet samt det bakre bakre stötfångarhjulet. Jag tror att dessa förändringar gör bilen snyggare.

Steg 14

Lägg till höjdpunkter där du tycker är nödvändigt (referensbilder kan hjälpa till).

Jag tycker att höjdpunkter bredvid kanterna bidrar till att förmedla metalliskt utseende, så jag applicerade dem på de flesta kanterna.

Steg 15

Och här lägger jag till en ny ljusare nyans på några utvalda områden som jag vill dyka upp lite mer.

Kom ihåg att du kan göra en nyans lättare genom att minska mättnaden. Användbar om du redan är 100% ljusstyrka men skuggan är fortfarande inte tillräckligt ljus.

Ett stort höjdområde över huven tror jag hjälper till att ta ut volymen på bilen och få den att se metallisk ut.

De sista höjdpunkterna som behövs skulle gå på kanten av taket och runt fönstren

Steg 16

Låt oss nu lägga till några små bildörrhandtag. De kommer helt enkelt att vara två ljusare pixlar över två mörkare pixlar.

På samma sätt kan du lägga till dörrbumpers:

Steg 17

Valfri mindre detalj: sänk kontrasten för bakre taklinjen:

Steg 18

Låt oss lägga till några backspeglar!

De kommer att vara så här:

Med en av dem ser bred och den andra tunn som den ses på kanten på.

Hitta dem en bra plats och placera dem.

Ta bort onödiga pixlar och rensa onödigt hög kontrast.

Steg 19

Och det är ganska mycket för din bil!

Hur ser det ut ur din karaktär? Vill du föredra att göra det bredare, längre eller mindre? Dessa förändringar är inte svåra att göra. Men jag tycker att den här storleken är bra.

4. Variationer

Det är väldigt lätt att göra olika färgversioner av din bil! Du kan gå till Bild> Justeringar> Färgtoning / Mättnad ... för att enkelt hitta andra färger du kanske vill. Använd endast ändringarna på de korrekta bilområdena och ändra färgerna individuellt om det behövs.

Snart har du en flotta, redo att fylla i en pixelkonsts gator.

Ditt fordon är klart!

Jag hoppas att du är nöjd med din bil!

Det skulle inte vara för svårt att vända den sedan till en SUV eller en kompakt bil. Lägg till några racingband eller andra tillbehör, och din inventering kan fortsätta växa!

Kolla in tutorialet om du fortfarande vill ha mer pixelkonst.

Jag hoppas att detta var till hjälp och inte för tungt på minutiae!