Maak een Isometric Pixel Art Office-gebouw in Adobe Photoshop

Wat je gaat creëren

In eerdere tutorials hebben we een pixelartiekarakter gemaakt en een auto en plaatsen om te leven gegeven. Laten we het een plaats geven om te werken.

Een kantoorgebouw is een geweldig stuk om te doen in isometrische pixelkunst, omdat je zoveel verdiepingen kunt toevoegen als je wilt en een mooi groot gebouw krijgt dat ongeveer evenveel werk kost als een huis of een kleiner gebouw.

Je moet eerst het Isometric Pixel Art Character en de Isometric Pixel Art House-zelfstudie hebben doorlopen voordat je verdergaat.

1. Afmetingen

Laten we een vloerhoogte en voetafdruk maken die congruent is met ons karakter.

Stap 1

Dus we gebruiken het personage als een meetlat, zoals gewoonlijk. Hier is de hoogte die ik heb gekozen 60 px voor één verdieping.

Ik gebruik graag veelvouden van 10 px omdat het verplaatsen van de elementen met de toetsenbordpijlen Shift ingedrukt houdt, gebeurt in veelvouden van 10 px, dus dingen vallen veel sneller en gemakkelijker op hun plaats.

Stap 2

Laten we nu eens kijken naar de breedte van het entreegedeelte van het gebouw. Het zal vrij brede dubbele deuren hebben, dus de breedte voor de ingang moet hen toelaten met een beetje ruimte eromheen.

Ik zal ook de meeste van deze afstanden in veelvouden van 10 px behouden, om de reden die hierboven is uitgelegd; het maakt het later gemakkelijker (en als je helemaal kieskeurig bent, is het goed om je afstanden in ronde getallen te laten meten).

De verticale streepjes hier worden gewoon als hulplijnen gebruikt - we kunnen ze later verwijderen of er later overheen tekenen, dus ze zijn niet nodig maar ze zijn meestal nuttig.

Stap 3

Het toegangsgebied steekt een beetje uit, dus laten we het wat diepte geven.

Stap 4

Voeg nog een lijn parallel aan de ingang toe. Dit wordt de glazen wand. Samen met de ingang maken ze vrijwel de totale breedte van ons gebouw.

We voegen wat naden toe aan de glazen wand - daarom zijn die streepjes daar.

Stap 5

Laten we nu nog meer diepte toevoegen: de zijmuur van het gebouw. Het zal korter zijn dan de voorkant.

Stap 6

Laten we de voetafdruk afmaken. U kunt de hulplijnen een tijdje naar een andere laag verplaatsen. Hier sloot ik het gebied af en vulde het met wit, zodat de volgende stappen een beetje gemakkelijker zijn.

Stap 7

Nu dupliceren we de voetafdruk en verplaatsen deze naar de hoogte die we al voor het niveau hadden bepaald.

Omdat het oppervlak vol was met kleur, hebben we iets minder lijnen om te verwijderen.

Stap 8

We moeten nog steeds de rest van de lijnen verwijderen die de muren zullen blokkeren.

Voeg een paar verticale hoeklijnen toe en uw volume is voltooid.

2. Details

Nu zorgen we voor de meeste kleuren en details die de eerste verdieping nodig heeft, die voor de rest van de verdiepingen hetzelfde blijft.

Stap 1

Laten we de meeste verticale lijnen toevoegen die we nodig hebben: één op elke hoek en enkele extra lijnen voor de randen van de glazen wandruiten.

Stap 2

Vind de kleuren die u leuk vindt voor de verschillende secties van het gebouw. Ik heb ervoor gekozen om de entree op beton te laten lijken. De glazen wanden hebben dezelfde kleur als de vensters van de vorige zelfstudie, en het kleine gedeelte aan de rand is donker van kleur..

Je zou moeten proberen te spelen met de Tint / verzadiging / helderheid schuifregelaars om de uiteindelijke kleuren te vinden.

Stap 3

Laten we een breedte instellen voor de dubbele deuren en dat oppervlak een klein beetje in het volume duwen. Zoals gewoonlijk, wil je de piekhoeken een lichtere tint maken dan de muren.

Stap 4

Nu stellen we de hoogte voor de deuren in.

Stap 5

En hier heb ik een enigszins donkere lijn gemaakt vlak naast een enigszins lichte lijn om eruit te zien als kleine groeven - het lijkt gebruikelijk te zijn in dit soort gebouwen en het maakt de betonnen muren niet te vlak / saai.

We zullen deze groeven ook horizontaal toepassen, later.

Stap 6

We maken de voordeuren meestal van glas, dus vullen met dezelfde kleur als de parallelle glazen wand. Voeg ook verticale randlijnen toe voor de deuren, één aan de binnenhoek en de andere in het midden. Om het centrum te vinden, kun je de hele pauze in het beton meten met de Selecteer gereedschap (je krijgt de breedte in het infopaneel) en deel dat door 2 en je weet de afstand tussen de binnenhoek en waar de middelste hoek moet komen.

Omdat de wanden rond de deuren een deel van hen bedekken, verwacht niet dat beide glasrechthoeken van beide deuren even breed zijn.

Stap 7

Laten we een kader rond het glas toevoegen. Ik heb gekozen voor een donkergrijs, met een enigszins koele tint.

Eén pixel grijs was voldoende verticaal. Voor de onderste regel verliet ik 3 px hoogte. Voeg ook de donkere lijnen tussen het grijs en het glas toe.

Stap 8

Hier zijn de voltooide deuren. Ik heb een klein accent toegevoegd voor het onderste deel van de grijs / metalen delen, een paar pixels rond de armhoogte van het personage (dit zijn de sloten) en een paar donkerdere glaslijnen, voor een soort van glaseffect.

Stap 9

Nu, op de glazen muur. Maak de voorste hoek lichter en voeg een gebied toe met een donkerdere tint van de glaskleur. U kunt de Toverstafgereedschap om het witte bovenoppervlak te selecteren en verplaats die selectie vervolgens ongeveer 10 px omlaag, zodat de selectie de gebieden van de glaswand snijdt die u wilt verven.

Stap 10

Werk de lijnen af ​​voor al deze glazen delen. De meeste hoeken hoeven niet zwart te zijn en de naden op het glas moeten net iets donkerder zijn dan de omliggende kleuren.

Druk de bruine muur ook een beetje naar buiten.

Stap 11

Pas de kleuren van de bruine muur aan, nu deze naar buiten is geduwd.

De begane grond is bijna klaar.

Stap 12

Kopieer nu het niveau en plak het op een nieuwe laag (of Alt-Shift pijl-omhoog) en plaats deze recht boven de begane grond.

Stap 13

Natuurlijk zijn er geen deuren op de volgende niveaus, dus begin de deuren in een venster te veranderen door ze in één te voegen en de grootte aan te passen. Hier is het al een stuk korter, verticaal.

Stap 14

De dikke onderkant van het frame is niet nodig, nu het een raam is. Ontdoe je ervan en maak het raam smaller. Zorg ervoor dat het gecentreerd blijft; als je het 12 px korter maakt aan de rechterkant, maak het dan ook 12 px korter aan de linkerkant.

Stap 15

Maak dan de gebieden rond het raam af. Vul de betonnen muurkleur in.

Stap 16

En maak de extra details op de muur. We voegen nog een paar groeven aan het beton toe, dit keer horizontaal. Net als de vorige, zijn deze gemaakt met een iets donkerdere muurkleur, direct naast een iets lichtere. Ze moeten zowel op de boven- als onderkant van dit niveau worden toegepast.

Stap 17

Nu voor het glas. We willen de naden behouden, maar de bovenste en onderste zijn nu in het zwart en we willen ze met dezelfde kleur als de rest van de naden.

Stap 18

Uiteindelijk doen we hetzelfde met de bruine muur, maar het is nog eenvoudiger voor deze omdat er geen groeven of naden zijn. Het is gewoon een voortzetting van dezelfde kleuren. De eenvoudigste manier om deze oplossing te maken, is met de Toverstafgereedschap; alle drie de kleuren selecteren en vervolgens Alt-nudging 1 px omhoog en ook omlaag.

Stap 19

Laten we een klein venster toevoegen aan deze bruine muur. Het zal een leuk klein accent zijn - het venster heeft een andere stijl. Begin met een rechthoek. Als je het zo doet, lijkt het alsof het afgeronde hoeken heeft en het schoner lijkt.

Stap 20

Vul de rechthoek met donkergrijs (dezelfde kleur als in de deur) en voeg vervolgens een markering aan de bovenkant toe en een paar lijnen parallel aan de boven- en voorrand.

Stap 21

Geef het wat diepte. Hier heb ik ook een highlight aan de onderkant toegevoegd.

Stap 22

Voeg een glaskleur en een donkere lijn toe tussen het glas en metaal.

Stap 23

En dupliceer het dan gewoon zodat het ook op de begane grond is.

De tweede verdieping is voltooid.

3. Sta op

De tweede verdieping lijkt op een tegel - je zou het zo vaak herhalen als je wilt, en een gebouw van 100 verdiepingen hebben als je wilde.

Stap 1

Maar we zullen geen 100 verdiepingen doen. Voor dit gebouw, vijf verdiepingen voelt ongeveer gelijk. Hoe dan ook, als het gebouw te lang is en elke verdieping hetzelfde is, verspilt het soort illustratieruimte met meer van hetzelfde.

U kunt de tweede laag van de vloer selecteren en op drukken Alt-Shift pijl-omhoog om het meteen te dupliceren. Of je zou kunnen kopiëren en plakken, en dan gewoon plaatsen waar het thuis hoort. Zoals ik eerder al zei, is het mogelijk om selecties van 10 pixels in elke richting te verplaatsen door op te drukken Verschuiving en de pijltjestoetsen.

Stap 2

We herhalen slechts een deel van de vloer voor de bovenkant, zodat we een deel van het gebouw hebben dat er is om eenvoudig toegang te bieden tot het dakterras. We hoeven alleen het betonnen deel naar voren te brengen.

Misschien wil je dit op een nieuwe laag doen.

Stap 3

Voltooi het volume.

Stap 4

Voeg de overeenkomende details toe.

Stap 5

Hier heb ik een klein gedeelte toegevoegd om het kleine betonnen doosje te completeren. Het zag er een beetje abrupt zonder. 

Stap 6

Vul de bovenkant met een lichte tint van de betonkleur en monteer eventuele lijnen die mogelijk moeten worden bevestigd. We zullen een beetje dakachtige textuur toevoegen, net als bij het appartementencomplex. Begin met een rechthoek, gecentreerd op de bovenkant.

Stap 7

Zoek een kleur die je leuk vindt en pas dan de zachte, korrelige textuur toe en verzacht de rand.

Stap 8

Als we wilden, zouden we kunnen impliceren dat de deur naar het terras aan de zijkant van de kubus staat die we niet kunnen zien, maar in plaats daarvan laten we het aan de zichtbare kant toevoegen. We kopiëren de deuren die we al hebben gedaan en passen ze aan deze nieuwe muur aan.

Stap 9

Het heeft maar één deur nodig. Ik hield het kleine slot zichtbaar, en afgezien van het verwijderen van een van de deuren maakte ik ook degene die ik een beetje smaller hield.

Stap 10

De originele deur stond aan de lichtere kant van het gebouw, dus u moet de kleuren aanpassen aan de nieuwe kant.

Stap 11

Verwijder vervolgens het stuk muur onder de deur.

Stap 12

En om de volumes voor het terras af te maken, voegen we een reling toe - het moet gaan om de taillehoogte van het personage. Begin met de achterkant en geef deze de kleuren van de bruine muur.

Stap 13

Dan (misschien wil je dit in een nieuwe laag plaatsen) maak de reling rond en aan de voorkant.

Maak vervolgens de randen die in contact komen met muur of vloer een beetje lichter dan zwart.

En alle volumes zijn voltooid.

4. Texturen

Tijd om ons gebouw af te maken door een paar eenvoudige texturen toe te voegen.

Stap 1

Dit is de textuur die we zullen toevoegen aan de bruine muren. Het zal niet zwart en wit zijn, maar om het te maken, doe deze lijnen van 2 px afwisselend. U kunt slechts enkele pixels tekenen en vervolgens vele malen selecteren en dupliceren totdat u een groot gebied bedekt. Je zou het ook als een penseel kunnen doen door de tegel te selecteren en dan naar te gaan Bewerken> Patroon definiëren.

Stap 2

Zodra je voldoende textuur hebt, plaats je deze in een nieuwe laag en bedek je alle bruine delen. Idealiter zouden de zwarte delen van de textuur de meeste zwarte lijnen in de tekening moeten overlappen.

Stap 3

Verander de dekking van de textuurlaag in 20%, of zoals gewenst.

Snelkoppeling: u kunt de opaciteit van lagen wijzigen door op het toetsenbord te drukken terwijl het gereedschap Verplaatsen actief is.

Selecteer vervolgens op de lagen met de bruine muur alle gebieden van de bruine kleur met de Toverstafgereedschap. Als u deze gebieden over meerdere lagen verspreid hebt, vindt u het handig om de Toverstafgereedschap naar Sample alle lagen.

Stap 4

Ga terug naar de laag met de textuur en keer de selectie omSelecteer> Inverse) en verwijderen.

Je blijft zitten met textuur die alleen de muren bedekt die het hoort te zijn.

Stap 5

Zoek nu een kleur voor het dakoppervlak.

Stap 6

En laten we nog een eenvoudige textuur maken. Voor dit oppervlak zullen we tegels doen.

Begin met een rechthoek met een donkerdere tint van de nieuwe oppervlaktekleur. Gebruik dan een andere rechthoek in deze donkere rechthoek, maar met een tint die lichter is dan het oppervlak. Dupliceer en arrangeer meerdere keren.

Stap 7

Dupliceer totdat je de hele terrasvloer met de textuur kunt bedekken. Het contrast mag niet te hoog zijn voor deze tegel.

Stap 8

Herhaal vervolgens hetzelfde proces als hiervoor om de ongewenste delen van de textuur weg te snijden.

Je kunt nu, als je wilt, al je bouwlagen samenvoegen.

Gebouw voltooid!

Gefeliciteerd! Het kantoorgebouw is klaar en nu is de pixelhemel de limiet!