Hur man skapar en Isometric Pixel Art julgran i Adobe Photoshop

Vad du ska skapa

Låt oss bli lite festliga med vår pixelkonst. Vi ska göra julens # 1 dekoration: ett julgran! 

Träet självt kommer att återanvändas för naturliga miljöer (sans dekorationerna) så det blir en gåva som fortsätter att ge.

Om du tycker att det faktiska pixelarbetet är för tidskrävande eller obehagligt, kan du handla om bra färdiga isometriska grafik på Envato Market.

1. Definiera måtten

Som vanligt baserar vi storleken på objektet på vår karaktärs höjd.

Steg 1

Träet ska vara högre än karaktären, men det ska vara kortare än en golvhöjd, om du vill göra den till en inomhusplats.

Steg 2

Låt oss lägga till en höjdmarkör för bagaget. På grund av trädets form ser vi aldrig stammen, men vi använder fortfarande referenserna i dessa höjder.

Steg 3

Detta är den vinkel jag ska använda för mitt träd; Det är en 3: 1 diagonal linje.

Steg 4

Kopiera det och vänd det, och vi får en triangel.

Steg 5

För att vrida triangeln i en konform, behöver vi botten vara en cirkel. Bredden på denna cirkel borde matcha den nedre triangeln och höjden ska vara hälften av bredden.

Skapa cirkeln i en Nytt lager. Du kan göra det med Elliptisk markeringsverktyg, och när du gör det, kolla in informationspanelen för att se din bredd i pixlar. Dela det med två och gör höjden den storleken. Mitten av denna cirkel matchar triangeln längst ned.

När du har gjort det, fyll det med lite färg.

Steg 6

Jag mjukade några av pixlarna i min cirkel som jag trodde att de gjorde kanten lite mer skarp än vad de borde vara. Gör en kopia av denna cirkel, placera den i en Nytt lager och fyll det med svart. Detta kommer att vara skuggan, som vi kommer att tillämpa på ett tag.

Steg 7

Vi tar den solida cirkelformen och gör den till en kontur. Det är lätt att göra genom att välja cirkeln med Magisk stav verktyg, och sedan kontrahera urvalet med 1 px (Välj> Ändra> Kontrakt ... ).

På det ursprungliga triangelskiktet vill du ta bort de två bottenlinjerna ... men bli inte av med dem än, bara sätt dem åt sidan.

Steg 8

Du kan nu ta bort den bakre halvan av cirkeln, ge den samma färg som triangelutskriften (svart eller nästan svart) och Sammanfoga de båda skikten tillsammans.

Botten ser lite udda, så jag justerade höjden på den delen.

Steg 9

Låt oss nu hämta vår cirkulära skugga och bagagehöjdmarkörerna. Flytta skuggans lager under trädet och ge skiktet 15% eller 20% opacitet.

Använd sedan höjdmarkörerna för att placera skuggen ordentligt under konens botten.

Steg 10

Fyll konen med en fin nyans av grön och vi är på väg.

2. Lägg till skuggning och textur

Vi har en grundläggande konform ned. Låt oss ta det närmare att se ut som ett träd.

Steg 1

Det här är ovanligt, men vi kommer medvetet att göra vår form mer skrynklig. Vrid diagonalerna till mestadels vertikala linjer som växlar med en enda pixel, så här:

Steg 2

En liknande ihåghet kan appliceras på botten också. Detta borde hjälpa konen att se mindre perfekt och lite mer organiskt.

Steg 3

Som vanligt skuggar vi höger sida mörkare än vänster sida. All skuggning på konen ska ha kilformar med linjerna som konvergerar vid toppen. Diagonalen på den här raden är 4: 1 (det går 4 px för varje 1 px som går över.)

Steg 4

Vi kan ganska spegla den sista formen för den ljusaste nyansen. Du kanske vill att den ljusare nyansen kommer upp till toppen.

Krama en kil av basfärgen mellan de mörka och ljusa nyanserna för att mildra övergången.

Steg 5

Vi lägger till en sista färgen till trädet, vilket blir den mörkaste nyansen i höger kant.


Steg 6

Skuggningen kan få samma ojämnhet som konformen fick. Här appliceras den på de mörkare nyanserna ...

... här på de ljusare nyanserna:

... och här också genom mitten:

Steg 7

Vi lägger till en sista liten ljuseffekt här: gör den mörkaste nyansen 1 px bort från trädets kontur.

Steg 8

Låt oss nu lägga till lite textur. Vi kan basera texturen på något sådant:

Det ser lite ut som löv, men också lite "pixely", som passar oss. Det matchar också de andra träden jag har täckt i tidigare lektioner, så det är bra för konsekvens.

Steg 9

Denna textur förändrar skuggningen vertikalt, så om vi applicerade den på hela trädet skulle det röra för mycket med vår konskärning - det skulle se för komplicerat ut och det skulle också vara svårt att göra! Så vi applicerar den bara till botten.

Börja med att placera den på en Nytt lager, klibbar till botten av konen och justerar till sin kurva.

Steg 10

Och för att applicera texturen, gå till trädslaget och med Magisk stav verktyg (inställd på 0 Tolerans och sammanhängande) välj alla fyra nyanser av grönt av trädet. Invertera valet (Välj> Inverse) och på texturslagret Radera.

Därefter sänka opaciteten för det laget till 50% eller så och Sammanfoga konsistensskiktet med träskiktet (Kommando-E eller Kontroll-E slås samman).

Och slutligen ersätta de mörkare nyanser av grönt du får med de fyra redan valda nyanserna av grön från tidigare; Jag brukar inte arbeta med palettrestriktioner, men det är renare för att undvika att lägga nyanser på nyanser på ett slumpmässigt sätt.

Steg 11

Vi ska bara göra lite extra rengöring på den nyligen applicerade konsistensen, nämligen på kanterna av trädet.

Och trädet är klart! Nu kan det naturligtvis användas i parker eller naturmiljöer utan att det behövs ett jultema.

3. Skapa och placera smyckena

Låt oss göra vårt träd Christmassy. Vi lägger till ljus, bollprydnader och en stjärna topper.

Steg 1

Det är inte helt nödvändigt men jag gjorde dessa halvcirkelstyrningar (i en Nytt lager) regelbundet åtskilda för att hjälpa till att placera ornamenten, särskilt lamporna.

Steg 2

Här är några möjligheter för ljusen, mot en mörkare bakgrund för kontrast.

Dessa görs med en ljusfärg (nästan vit, låg mättnad gul) för mittpunkten och samma färg appliceras vid 50% opacitet för de omgivande bildpunkterna.

Ge alla versioner ett försök, eller skapa en ny om du vill. Jag slutade att föredra den första.

Steg 3

Placera dem på en Nytt lager, ovanför guiderna. Julgranljus brukar gå upp i en spiral, så jag började varje linje av ljus under en ledning och slutade den över styrlinjen.

Kom ihåg att hålla Alt medan nudging-val lämnar en kopia bakom.

Inget behov av ledningar längre. När du har tagit bort dem kanske du fortfarande vill flytta några av lamporna runt en knapptryckning om det hjälper till att förbättra deras layout.

Steg 4

Vi ska göra två typer av boll ornament. De borde vara ganska små cirklar - det här är 2x2 (inre pixlar) och 3x3.

Jag gillade hur varma färger såg mot mitt träd, så jag gick för dessa guld- och kopparfärger.

Steg 5

Placera de mindre bollarna på en Nytt lager, under ljusskiktet.

De ska se slumpmässigt nog utan att lämna stora öppna fläckar eller kolliderar för mycket med ljusen - hitta en balans!

Steg 6

Byt nu några av bollarna med de större bollarna.

Du kan försöka ändra nyansen på dem eller lägga till ett större antal färger om du vill. Jag kände mig som att hålla det enkelt.

Steg 7

Låt oss mjuka bollarnas konturer, förutom när de ligger strax på kanten av trädet.

För att göra detta kan du välja nyanser av grönt på träslaget (Magisk stav verktyg igen) och sedan gå tillbaka till bollpyntens lager och använd Paint Bucket Tool (med sammanhängande kontrollerad av) för att färglägga konturerna med en mycket mörk nyans av grönt. Områdena i konturerna som går över kanterna av trädet kommer att vara svarta / nästan svarta, och konturerna inuti blir fortfarande mörka men kommer att förbli mer harmoniska med trädet.

Steg 8

För att avsluta bollprydnaden, applicerar vi lite skuggning på dem, på samma sätt som hur vi gjorde det för konen. Här i vitt har jag valt bollarna som blir lite ljusare, eftersom de är i den ljusaste delen av trädet, medan de svarta blir mörkare.


Steg 9

För att göra ändringarna kan du välja de bollar du vill ändra (endast de inre pixlarna) och spela med ljusstyrka och kontrast (Bild> Ljusstyrka / Kontrast ... ) eller med mättnad och ljushet (Bild> Färgtoning / Mättnad ... ), eller helt enkelt handplocka nya färger.

Effekten är subtil, men det bidrar till att förmedla mer volym.

Steg 10

Och nu för att toppa trädet: stjärnstjärna!

Här är vår mycket lilla stjärna, skisserad och fylld med en fin ljusgul.

Steg 11

Vi lägger det på trädet strax över toppen, men låt oss lägga till en extra effekt för att göra stjärnpoppen lite mer. Lägg till en extra skiss av en färg i hög kontrast, som vi senare byter ut med samma julgran ljuskol på 50%.

Gjort!

Här är det färdiga trädet, med lite bakgrundsfärg för att hjälpa tittarna att uppskatta ljuseffekterna. Känns trevligt, varmt och fuzzy ... som en viss semester!