Share
Wat je gaat creërenJe hebt een isometrisch pixelartiekarakter gemaakt, maar waar zou dat personage kunnen leven? Het is tijd om er een thuis voor te maken!
Net zoals bij Lego-sets, zijn gebouwen bijna het hele punt van isometrische pixelkunst. Het kan enige tijd duren om ze te maken, maar het moet leuk zijn!
Als u de Isometrische Pixel Art Character tutorial dan kun je dat beter eerst controleren; we zullen het personage uit die les gebruiken en de Photoshop-tips overslaan die al zijn behandeld.
We zullen moeten uitzoeken hoe we de elementen voor ons gebouw moeten dimensioneren. Het is niet nodig om te technisch te worden (ons karakter is niet zo realistisch geproportioneerd). We gebruiken het karakter gewoon als een soort maatstaf en bepalen zelf hoe hoog we willen dat deuren, ramen en daken worden, om consistente omgevingsdimensies te behouden.
Dus hier zijn we gebleven:
Laten we nu ons karakter nemen en enkele van de hoogten definiëren.
In een nieuwe laag laten we een "muur" maken van 2: 1 lijnen, elke regel 4PX boven de vorige (ook gezien als drie lege pixels tussen elke regel). Als we alleen hoogten kiezen die overeenkomen met deze lijnen, zal het later toevoegen van texturen, zoals baksteen of hout, esthetisch aantrekkelijker zijn.
Hier zijn de hoogten die ik heb gekozen voor de deuropening en ook voor het plafond en de tweede verdieping. Hoewel we geen plafond en tweede verdieping zullen zien, is het definiëren van deze lijnen meestal nuttig.
Laten we onze structuur blijven uitbreiden, maar niet zozeer! Tenzij je een open zicht op het interieur van het gebouw wilt, kun je het gebouw het beste net groot genoeg maken om het idee te geven dat het een gewoon huis is. Op deze manier kunnen we meer elementen in minder ruimte passen, wat handig is in een complexere stadsscène, en in ieder geval is het beter om weg te laten wat onnodig of overbodig is. In het leven en in pixelart.
We geven de plattegrond een L-vorm om hem complexiteit te geven; het huis zal er leuker uitzien en we zullen meer geometrie gaan ontdekken.
Dus we hoeven de structuur nu slechts in één richting te laten groeien. Hier is het met extra lengte rechts van de deur: 40px van de rand van de deuropening naar de nieuwe hoek.
Er is plaats voor een of misschien twee vensters. We komen daar later op terug.
Laten we nu een gedeelte van die regels selecteren, Alt-duwtje (of Kopiëren plakken) en Draai horizontaal en plaats het dan als de juiste muur aan de muur, en verleng dan deze lijnen totdat ze zijn 50px breed:
Selecteer nu de hele naar links gerichte muur plus 10px van de rechter muur (selectie moet totaal zijn) 60px breed), Alt-duwtje en Draai horizontaal, plaats dan op de andere rand om onze L te maken:
We missen alleen de achterste regels om de L te voltooien, maar we hoeven alleen die met de bovenste lijnen te doen:
Laten we nu de vormen sluiten en ze vullen met kleur op dezelfde manier als bij de kubus in de vorige les. Verlaat de markeringen voor de deur en verwijder de markering voor het plafond.
Je kan gaan naar Afbeelding> Aanpassingen> Kleurtoon / verzadiging om eenvoudig meerdere kleurenopties te bekijken en er een te vinden die u mooi vindt. Ga met aardse tonen als je een bakstenen huis wilt maken, of een andere kleur als je de voorkeur geeft aan een houten plankstructuur of solide, niet-getextureerde muren.
Ik markeerde met rood iets dat we nog niet eerder hadden gezien: een "vallei" -hoek. Alle hoeken van de kubus waren "piek" hoeken en lichtere kleuren werken daar goed voor. Maar voor 'dalhoeken' hebben lichtere kleuren geen zin en zwart kan te hard zijn, dus de beste manier om ze te maken is met een 10% of 15% donkerdere tint van de donkerste muurkleur:
Het lijkt erop dat we een aantal van de hoofdvormen hebben verwijderd, maar we missen nog steeds iets dat vrij belangrijk en iets gecompliceerder is.
Ons karakter heeft nog geen dak boven zijn hoofd. Tijd om dat te dekken.
Maak een nieuwe laag en maak er een platte L-vorm bovenop, recht naar boven L. Maar het moet breder zijn, omdat daken over het algemeen breder zijn dan de voetafdruk van de huizen. Deze nieuwe regels moeten dus een lege lege pixel tussen de zwarte lijnen en twee lege lege pixels tussen de lichtere hoeken laten:
De nieuwe lijnen zullen het onderste deel van het dak zijn.
Maak een nieuwe laag en teken enkele verticale lijnen uit deze twee hoeken van de L:
(De meest rechtse lijn lijkt niet precies op de hoek te staan, maar dat komt omdat ik er de voorkeur aan geef die pixel te verwijderen bij het afwerken van de vormen ... zoals we deden met de kubus en de L.)
Zoek nu een plek precies tussen deze twee lijnen om een derde lijn toe te voegen. U kunt meten met de selectiegereedschap of u kunt een selectie verschuiven en de afstand tellen terwijl u deze verplaatst met behulp van de pijltjestoetsen (onthoud: stoten terwijl je ingedrukt houdt Verschuiving verplaatst de selectie 10 px per keer)
Nu weten we waar de lijnen moeten samenkomen om de bovenste dakhoek te maken. We moeten gewoon de lijnen maken. Je kunt zoveel hoeken proberen als je wilt, maar ik zou de enige twee aanbevelen die gekartelde lijnen vermijden:
Een daarvan is een 1: 1 diagonale lijn met een rechte horizontale lijn en de andere is een 1: 2 met een 1: 1.
We gaan met de langere lijnen. Laten we onze richtlijnen verwijderen, alleen de blauwe lijnen behouden en ze zwart maken. Het is niet nodig om de laag nog samen te voegen.
Kopieer de lange lijn die de achterkant van het dak vormt L, en plak deze over het dakpunt zodat de drie lijnen elkaar op hetzelfde punt ontmoeten.
Het zou er zo uit moeten zien:
En die lijn zou helemaal goed zijn daar. Je kunt ervoor kiezen om de volgende tip te negeren - het is kieskeurig en ik weet het - maar ik vind mijn donkerste 2: 1-lijnen leuk om binnen een bepaald bijna denkbeeldig raster te blijven, waarbij de pixelafstand tussen al die lijnen altijd een even getal is. Ik doe dit om de consistentie te behouden en omdat het me in staat stelt om de ideale esthetiek te behouden, zelfs nadat ik elementen heb aangepast of verplaatst.
Dus in dit geval is het beter dat die nieuwe regel maar één pixel lager of hoger is, zoals hier te zien is:
De 1: 1 diagonale daklijn moet enigszins worden verplaatst als deze wijziging wordt toegepast.
Laten we nu deze daklijnen samenvoegen (maar nog niet met de dak-L-laag) Alt-duwtje, Draai horizontaal en plaats aan de linkerkant van de L om dit te krijgen:
We hebben de bovenliggende lijnen niet nodig, dus verwijder die lijnen en voeg een verticale lijn toe om de "vallei" -hoek van het dak te maken. Op de L-laag op het dak wist u de twee lijnen achteraan (de twee regels hoger op het scherm) en daarna voegt u de daklijnen samen met de L in elkaar:
Nu, hoewel we delen ervan zullen verwijderen, voegen we kleur toe aan de hele dakvorm. Probeer toe te passen wat we hier met de kubus hebben gedaan, ook al zijn de vormen behoorlijk verschillend.
In deze vorm een hoogtepunt aan de bovenkant denk ik dat het er beter uitziet.
Maak nu die twee driehoeken bijna wit (die rechts moet een beetje donkerder zijn) en scheid het wit van de dakkleur met een donkerdere tint, zoals die voor de dalhoek van het dak:
Laten we nu een enigszins decoratieve toets toevoegen door een paar lijnen evenwijdig aan de dakdiagonalen te maken. Laat een pixel er tussenin en voeg een lijn toe met een iets donkerdere tint wit en vervolgens (met een andere pixel ertussen) een zwarte lijn om dit te krijgen:
Nu moeten we de witte gebieden in het midden en de zwarte lijnen eronder verwijderen en zo nodig bijwerken:
Het is niet nodig, maar we kunnen nu samenvoegen met het huis L. Het is misschien eenvoudiger om die lege driehoeksgebieden te vullen met de muurkleuren voordat ze worden samengevoegd. De Lasso gereedschap is je vriend; Vergeet niet om het te gebruiken zonder anti-aliasing.
Leuk! we zijn bijna klaar met het geometrische werk!
Het is geen huis maar zonder een deur en een paar ramen. Gelukkig weten we al waar we onze deur moeten maken, dus laten we wat verticale lijnen toevoegen en een extra 2: 1 lijn onder onze hoogtemarkering om ons deurkozijn te maken. We halen het personage een tijdje uit de weg.
Nu moet die blinde, saaie ruimte die ons aanstaart een raam worden. Het kan bijna hetzelfde zijn als het kozijn, dus houd de bovenrand op hetzelfde niveau en centreer het tussen de rand van het kozijn en de hoek van het huis. Als je wilt, maak het dan smaller of breder. We voegen er nog een concentrische rechthoek aan toe, zodat het frame iets meer details en breedte heeft.
Als je de onderste regel van de deur een pixel of twee omhoog duwt, ziet het er iets minder vlak uit:
De onderste lijn van het raamkozijn moet idealiter met een veelvoud van vier boven het vloerniveau zijn, zoals in de eerste "muur" van 2: 1 lijnen.
We hebben nog steeds twee kale muren, dus we kopiëren gewoon hetzelfde venster naar die muren, plaatsen het zo centraal mogelijk en natuurlijk op hetzelfde niveau met betrekking tot de onderste regel (het helpt om het venster samen met de onderkant te selecteren regel om dit gemakkelijker te maken).
Deze twee nieuwe vensters hebben meer ruimte om hen heen, zodat ze breder of sierlijker kunnen zijn. We houden ze hetzelfde, maar probeer een alternatief te proberen. Wat we zullen toevoegen is een paar kleinere vensters hierboven. Ze zien eruit als kleine zolderramen en ze helpen de kale muren te vullen en het huis er mooier en gedetailleerder uit te laten zien.
(Maak je geen zorgen over de kleinere vensters die niet gecentreerd zijn ten opzichte van het dak, omdat het dak niet op hetzelfde verticale niveau is als de muur en de ramen.)
We stoppen hier met het toevoegen van details, maar er zijn veel mogelijkheden die we kunnen toevoegen; zoek naar afbeeldingsreferenties en probeer de dingen die je leuk vindt in je pixelhuis te verwerken.
Nu moeten we al deze elementen kleuren en afwerken. Laten we alle frames wit maken en alle zwarte lijnen tussen de frames en de muren dezelfde kleur geven als de dalhoek in het huis. En de zwarte lijnen in de raamkozijnen moeten een donkerdere tint van de vensterkleur hebben, net als op de witte delen van het dak:
Je kunt de kleur natuurlijk alleen in een van de vensters toepassen en vervolgens kopiëren voor de anderen. Onthoud alleen dat de elementen aan de donkere kant van het gebouw dienovereenkomstig donkerder moeten zijn.
Vind nu kleuren die je leuk vindt voor de deur en de ramen. Wit is logisch voor de deur, maar ik hou van hoe dit rood eruit ziet, omdat het uit mijn volledig blauwe palet breekt. Voor de ramen houd ik meestal van een aquamarijn met een lage verzadiging, maar probeer alternatieven. Er moeten tientallen manieren zijn om ruiten te illustreren, dus misschien vindt u een betere manier dan wat we nu doen.
Merk op dat ik de meeste zwarte lijnen op deze details kwijt ben. Ik denk dat het logisch is als de elementen in direct contact staan en zwart er een beetje te hard uitziet tussen de verschillende kleuren.
Hier heb ik twee lichtere lijnen aan de vensters toegevoegd gevolgd door een iets donkerdere lijn. Ik denk dat ze een beetje op de weerspiegeling van het frame lijken, dus dat moet ertoe bijdragen dat de ramen op glas lijken.
Ik bracht ook het karakter mee om ons te helpen de deurknop te plaatsen, die ongeveer op ellebooghoogte zou moeten gaan.
Een ronde gouden deurknop toegevoegd.
Voor de laatste details kunnen we wat versieringen aan de deur toevoegen; het zijn maar een paar rechthoeken in een donkerdere tint, plus een aantal hoogtepunten hieronder en aan één kant. Voeg ook wat dunne witte borden toe aan de tophoeken, zoals je in veel houten huizen aantreft:
Laten we onze texturen maken en toepassen. De gebieden die het nodig hebben, zijn natuurlijk het dak en de muren.
We beginnen met het dak. Maak een nieuwe laag.
We zullen een paar licht ronde tegels doen die over de bovenste regel bewegen, en zodra we een paar van die we hebben Alt-duwtje en begin ze toe te voegen.
De tweede rij tegels landt in die positie omdat ze eerst over 2 px bewegen (volgens de bovenste regel) om in overlappende posities als bakstenen te worden gelegd en vervolgens naar beneden (diagonaal opzij) nog een paar pixels. Als het ingewikkeld klinkt, volg dan de bovenstaande visuele gids en het komt goed. Heb je eenmaal een grote patch, vermenigvuldig deze dan nog meer, zodat deze het dak bedekt:
Aan de linkerkant van het dak moet de textuur in de tegenovergestelde richting stromen, dus draai dat gebied horizontaal om. Ga dan naar de huislaag en gebruik de Toverstaf om alle kleuren van het dak te selecteren (behalve de zwarte lijnen). Als je ingedrukt houdt Verschuiving je kunt gebieden blijven toevoegen aan je selectie. Wanneer u klaar bent met die selectie, gaat u terug naar de textuurlaag, keert u de selectie om (Selecteer> Inverse) en verwijder om dit te krijgen:
Voordat we samenvoegen, moeten we de dekking op die laag terugbrengen tot ongeveer 20%. Maar wat ik zou aanraden, om ons kleurenpalet onder controle te houden, zou zijn om de textuurkleuren te vervangen door de donkere tinten die we al op het dak gebruikten:
Ik heb ook de texturen verwijderd van de randmarkeringslijnen om het dak een beetje schoner te maken.
Nu voor de houtstructuur moeten we gewoon lijnen maken die langs de voetafdruk van het huis gaan en dan Alt-duwtje en beweeg vier pixels omhoog en herhaal opnieuw en opnieuw totdat het alle wandgebieden bedekt:
Herhaal dan het proces dat we op de dakpannen in stap 4 gebruikten:
Je gaf je personage een thuis, maar zijn wereld kon blijven groeien. Als je de les leuk vond, kijk dan voor meer informatie!
Accentsconagua