Hur man skapar en isometrisk pixelkonstfabrik i Adobe Photoshop

Vad du ska skapa

Vi fortsätter arbetet med vår isometriska pixelkonstvärld, och vid detta tillfälle lägger vi till en industriell arbetsplats i vårt bibliotek. Det kan vara bra att få det att bli tråkigt, men det betyder inte att det inte kan vara bra också.

Vi kommer att använda några tegelstenar igen, några metallelement, stora skorstenar och några rökplumer. Låt oss komma till jobbet.

Kontrollera tidigare handledning i denna serie om du inte har det; de flesta lektioner täcker Photoshop tips och tricks och pixel-art specifika som jag kanske inte nödvändigtvis täcker i senare handledning.

Allt detta isometriska, geometriska, pixel-perfekta arbete kan bli svårt eller tråkigt; Om du tycker att du gör jobbet otrevligt, var god att handla på bra färdigmonterad isometrisk grafik på Envato Market.

1. Definiera måtten

Få din pixelkaraktär ut. Vi kommer att göra en två nivå hög fabrik - det kommer inte vara enormt, men det kommer att bli en stor låda med några väldigt långa skorstenar och stora rökplumer skjuter upp, så det kommer fortfarande att vara en mycket respektabel storlek

Jag funderade på att göra ett sågtandtak (ganska vanligt i bilder av fabriker), men då trodde jag att det inte var nödvändigt och är förmodligen inte särskilt vanligt längre. Vi gör fortfarande vår byggnad ser väldigt industriell ut.

Steg 1

Använd tecknet för att hitta en nivåhöjd du vill, och dubbelklicka sedan.

Jag lade till extra linjer (4 px mellan vardera) för varje nivå som en vägledning för tegelstenen att läggas till senare. På detta sätt är jag medveten om tegelstenarna medan du placerar fönster och andra arkitektoniska element.

Över den andra nivån lämnade jag en extra linje för att taket skulle ha en liten kant.

Steg 2

Låt oss nu definiera en bredd för byggnaden. Det ska vara tillräckligt för minst en lastbil, inte att vi har täckt en lastbil i dessa handledning ännu!

Steg 3

Och lägg nu lite djup. Detta behöver inte vara en fast storlek; Vi kanske vill redigera det när vi lägger till fönstren.

Steg 4

Stäng av några ytor genom att lägga till några extra linjer. Du kan också redan definiera bredden på metallporten som vi lägger till på framsidan.

Steg 5

Dessa kommer att vara bredden på fönstren. Nedanför en av fönstren får vi en dörr, så i grunden behöver vi göra linjerna så stora som vi förväntar oss att en dörr ska vara. Resten av fönstren kommer inte att ha dörrar, men för konsistens (och för att underlätta arbetet) kommer de alla att ha samma bredd.

Du kan sedan stänga av volymen genom att lägga till övriga hörnlinjer.

Steg 6

Här lägger vi redan lite djup i porten och fönstren.

Steg 7

Och lägg sedan till lite djupare för att få takets tak.

2. Skapa ytterligare strukturer

Vi har vår stora låda ganska mycket gjort. Byggnaden kommer att vara enkel, men det finns några fler strukturer som verkligen hjälper till att förmedla att det är en fabrik: nämligen de stora skorstenarna.

Steg 1

Här började jag lägga till en kvadratisk kontur som en avgränsningslåda för en av skorstenarnas fotavtryck. Jag markerar också avståndet mellan skorstenen och lägger en lika avlägsen linje på motsatt sida av skorstenen. Dessa linjer hjälper oss att skapa en bas för skorstenarna.

Gör det här i a Nytt lager.

Steg 2

Låt oss lägga till en annan linje, precis som de sista som går runt bakre delen av skorstenens referensfält. Justera den sista raden med taket och börja utöka det till där vi lägger till ytterligare två skorstenar.

Steg 3

Gör de nya skorstenarna jämnviktiga. Jag kommer inte att göra skorstenarna och deras bascentrerad eller helt symmetrisk. Du kan om du vill, men ibland öppnar några designdörrar när du släpper på stel symmetri eller balans.

Steg 4

Detta blir bredden på basen. Jag vill att den ska recede lite från fasaden, så jag gjorde det inte i linje med fronten med bara lite.

Steg 5

Basen kommer att vara en lång låda med lite höjd, som några steg.

Steg 6

Avsluta lådan som utgör basen med extra hörnlinjer och genom att rensa upp rygglinjerna.

Jag lade till några rosa markörslinjer som matchade taket för att hjälpa till att flytta och placera basen på marknivå, där de matchar det nedre vänstra hörnet.

Steg 7

Lådan är placerad på marknivå. Nu kan du radera markörslinjerna.

Steg 8

Det här är de tre cylindrarna som ska göra skorstenarna. Är de tillräckligt långa?

För att göra dem du kan, på en Nytt lager, Rita en cirkel med kanterna som matchar kanterna på skorstenens referensfält. Cirkeln kan göras med Elliptisk markeringsverktyg, fylla det elliptiska urvalet med konturfärg och sedan radera de inre pixlarna, vilket kan göras genom att kontraktet utförs (Välj> Ändra> Kontrakt ... ) med 1 px och slår bort.

När du har din cirkel kopierar du den till toppen, direkt ovanför, i den höjd du vill, och lägg sedan bara till de vertikala linjerna för att slutföra formerna.

Steg 9

Rengör de onödiga linjerna uppåt. Lägg in de inre cirklarna för att öppna skorstenarna uppåt.

Jag redigerade de yttre cirklarna till vad jag trodde gjorde ett renare utseende. Renare kan ofta vara bättre än exakt i pixelkonst.

Med det är alla stora strukturer nu gjorda.

3. Avsluta byggnadens ytor

Låt oss få färgen och textureringen ur vägen redan, eftersom vi lägger till flera klockor och visselpipor i byggnaden.

Steg 1

Jag har använt en tegelstruktur i många handledningar på denna serie. Jag vill inte missbruka det, men jag gillar verkligen tegelstruktur, så vi ska göra en lite annorlunda och enklare version den här gången.

Jag vill att fabriken ska se lite mörk ut, så jag väljer en slags chokladfärg för den. Den appliceras över alla väggar och i samma nyans, för tillfället.

Texturlinjerna är ganska krossade, så låt oss ge dem en snyggare nyans. Det görs enkelt med Paint Bucket Tool med Angränsande avmarkerad (förutsatt att texturerna hade en unik färg ... annars ändrar du färgen på allt som delade samma nyans i det lagret / valet).

Steg 2

Låt oss nu sänka grindens toppar och fönstren och bli av med onödiga linjer i det området.

Steg 3

Det främsta fönstret var tänkt att ha en dörr på första nivån, så låt oss ge den en ram.

Du kan också börja lägga en mörkare nyans av brunt på höger sida (eller det spelar ingen roll vilken sida så länge det överensstämmer med dina andra bitar). Kom ihåg att skugga tegelstenarna lite mörkare på den skuggade sidan.

Steg 4

För att inte göra fabriken för tråkig lägger vi till en annan färg på den, längst upp och längst ner.

Här är toppen med den nya krämfärgen (kanske är det en chokladkrämfabrik?) Med lite skuggning redan. Som vanligt rekommenderar jag att skuggningen är ljusast överst och mörkst på höger sida - deras ljusstyrka kan ändras med 8% till 15%.

Steg 5

Applicera färgen längst ner.

Steg 6

Vi behöver inte tegelstenar för den nedre delen.

Steg 7

Vi gör att skorstenens botten matchar den övre delen av byggnaden, så låt oss få färg på toppen av taket med en mörkgrå färg.

Steg 8

Och här appliceras en enkel textur på den mörkgrå ytan, det kan vara grus eller vad som helst kan vara ett bra material för en takyta.

Låt oss också lägga till höjdpunkterna på toppen och rengöra de mörkare linjerna uppåt. Och sänk kontrasten på de inre hörnen, där ytorna möts.

Steg 9

Så nu tar vi ovanstående steg och applicerar dem på botten av skorstenarna, med den största skillnaden att den här rutan inte har en hylla som taket.

Steg 10

Låt oss nu ge en cool grå till skorstenarna. Det kan också fungera som en varm grå på ca 40˚ nyanser, men eftersom vi redan har gott om varma färger valde jag en kallare nyans.

Du kan försöka få det att se ut som betong, eller du kan göra de vita och röda ränder som fabriken skorstenar ibland har. Jag försökte dem och föredrog det konkreta utseendet.

Steg 11

Avsluta skuggningen på skorstenarnas ytterstoppar.

Jag slutade med att ändra de ursprungliga linjerna ganska, men jag tycker att det är bäst, för som jag nämnde tidigare kan rengöringsmedel ofta vara bättre än noggrann i pixelkonst.

Självklart behöver du inte rita alla dessa element tre gånger. Du kan bara arbeta på en av skorstenarna, och när du är nöjd med det kopierar du den för de andra två.

Steg 12

Nu lägger vi lite skuggning på skorstenarna. Det finns många sätt att göra cylindrisk skuggning. Här är det bara en ljus rand precis utanför vänster kant och en mörk bredvid höger kant och jag lade till små kantade kanter bara för att bli av med de perfekta vertikala linjerna som randarna hade. de gjorde skorstenarna lite glansiga.

Steg 13

Nu ska vi korrekt göra de övre delarna av fönstren. Du kan lämna dem fyrkantiga, men jag hade en båge i åtanke.

Här är vad jag gjorde för att få bågformen.

Ta detta som flera steg; Jag tyckte bara att det var bekvämt att visa framsteg på en fasad.

På en Nytt lager, ta en cirkel som är samma bredd som fönstren och ställ in vertikal skev (Redigera> Gratis omvandling) till 26,5˚. Håll sedan bara konturen. Rengör linjerna för att bättre utvärdera framstegen. Och slutligen gör dina egna ändringar till cirkeln; om du kan få linjen att se mindre tuff eller mer rund, gå till den.

När du anländer till den slutgiltiga versionen av fönstret, kan du applicera den till resten av fönstren.

Steg 14

Låt oss lägga till höjdpunkterna i fönstren (och dörren). Höjdpunkten går som vanligt precis på hörnet, men på bågar kan det vara lite knepigt på toppen, där en höjdpunkt måste på ett sätt bli en mörk kontur.

Här finns en ledtråd på toppen av konturet som försvinner - det är nära svart, då är det bara mörkt brunt, och sedan är det borta. Höjdpunkten går upp och försvinner också på ungefär samma område där den nästan svarta linjen försvinner. De kör sida vid sida bara på det där lilla området. Lägg en touch av en mörkare nyans av tegelfärg på väggen precis under det området.

När det är klart, gäller resten av Windows.

Steg 15

Nu ska vi rita botten av fönstren.

Det är ganska enkelt för det korta fönstret; Vi håller tegelfärgen, bara i en ljusare nyans.

För de långa fönstren försökte jag ge den en liten sluttning på bottenramen; linjerna är mycket korta men de går upp i en 1: 1 diagonal och det ger windows en extra liten dimension. Färgen förblir grädde (men en ljusare nyans) för att matcha basen.

Steg 16

Ett annat litet knep för att ge basen en extra liten dimension: det sticker ut lite på hörnen. Några höjdpunkter på basens övre del hjälper också till att få extra volym.

Steg 17

Så nu låt oss arbeta på metallic rollup-porten. Jag flyttade raderna bara lite eftersom jag ville att bottenlinjen skulle vara mycket tunn. Jag sänkte också kontrasten för texturlinjerna.

Steg 18

Prova att lägga till en höjdpunkt i bottenlinjen - det kan se lite ut som en läpp, som jag tycker fungerar bra på en upplösningsport. I själva verket kan det även sticka ut en liten bit precis vid det synliga hörnet där mark, vägg och grind möts.

Slutligen, bara lägre kontrast på de inre hörnen där ytorna möts.

Steg 19

På dörren och windows.

Jag gick nästan med en ljusgul dörr som det gick bra med resten av färgerna och skulle ha lagt till något som dyker upp. Men i slutändan behöll jag det mörkt, som mörk choklad ... Jag antar att det här verkligen måste vara en chokladfabrik.

Dörren är väldigt enkel. Jag har just lagt till en inre rektangel, en liten subtil höjdpunkt och tre metalliska pixlar som representerar ett lås.

Steg 20

Fönstren, som jag brukar föredra dem, får en akvamarin nyans men inte för ljus eller för mättad. Ramarna runt fönstren kan ha varit nästan vita, men jag bestämde mig för att få dem att matcha dörren; bara en tändare.

Steg 21

Det kan ha varit tur, men jag kunde regelbundet lägga till skenor i fönstren medan de olika bottenarna i de höga fönstren och den korta matchningen matchades. Fönstren kan fungera lika bra med inga skenor eller minimala skenor.

Så lade jag till dem, med den vanliga fönstereffekten (en mörkare nyans av glasfärgen formad som en L parallell med de längre kanterna av varje ram).

Steg 22

Och här är vad de ser ut efter att ha rengjorts.

Steg 23

När det gäller tegeltexturen gör vi det med ett annat tillvägagångssätt än det som tidigare lästes.

Vi har redan de horisontella linjerna och så kan vi, i en Nytt lager, rita de vertikala linjerna. Vi behöver bara rita några av dem och då kan vi kopiera (eller Alt-knuff) över hela ytan. Jag kommer att ge dessa vertikala linjer en något mörkare nyans än de horisontella. På de punkter där de horisontella och vertikala linjerna möts, kommer den vertikala att råda, vilket är anledningen till att jag har dragit vertikalerna över horisontalerna.

Steg 24

För att applicera texturen, gå till lagret med de bruna väggarna och välj tegelstenen och tegelfärgen med Magisk stav verktyg. Gå sedan tillbaka till skiktet med texturlinjerna, vänd markeringen (Välj> Inverse) och träffa Radera.

Rengör sedan linjerna på insidan av fönsterkarmarna och ge linjerna den önskade bruna färgen.

Det är en ganska enkel men effektiv textur. Innan vi fortsätter, låt oss snabbt prova en alternativ version.

Steg 25

Här i en Nytt lager Jag lade till en annan färg (endast för kontrast) till bildpunkterna på toppen och de främre kanterna på tegelstenarna. så varje tegel har en typ av L som pekar upp och till det främsta hörnet.

Återigen behöver du bara rita på några få tegelstenar och sedan duplicera om och om igen tills du har täckt alla ytor.

Steg 26

Därefter vänder du bara dessa linjer i nyanser lättare än bakgrundsfärgen, och du får den här upplysta tegelverkan.

Jag gillar det, men jag är inte övertygad om det; Det verkar som om det rör sig lite om grafiken medan jag inte anser att det är mycket bättre än versionen utan effekten. Så jag kommer att fortsätta utan det.

Men det var ett bra alternativ att försöka eller behålla för framtida bruk.

4. Lägg till industriella element

Så jag är inte säker på vad det här är en fabrik av ... det kan vara sant att det är något chokladrelaterat men inte säkert vad maskiner chokladfabriker använder, jag lägger bara till element för att byggnaden ska bli mer industriell.

Steg 1

Här är en placeringsguide (Nytt lager) för de element som vi lägger till.

Den största torget kommer att vara ett vatten (eller någon annan flytande?) Tank. De minsta kommer att vara små takventiler och de andra jag kanske inte är mycket säkra men de passar fint in.

Steg 2

Jag täckte redan små takluckor i lägenhetsbyggnadshandledningen, men här är det igen ett ganska enkelt sätt att göra dem.

För att få ett metalliskt utseende ändrar jag nyans med ljusstyrkan, så ljusare nyanser blir varmare, närmare gula, medan de mörkare nyanserna blir svalare.

Steg 3

Nu vänder vi den större torget till en vattentank.

Först ska vi göra en cylinder. Skuggan ska vara svart applicerad vid 10% -20% opacitet-jag brukar använda 15%. I sista steget här finns det lite extra bredd för cylinderns översta cirkel.

Steg 4

Den extra bredden hjälper till att ge den det koniska locket som dessa saker tycks ha.

Ge det en cool grå och lite mörk färg för benen, eller kanske samma grå som resten av tanken.

Steg 5

Och här är skuggningen. Det följer ganska mycket på skuggans stil på skorstenarna, men jag lade till fler nyanser eftersom det här är en bredare form och det såg lite ut för gles med endast tre nyanser.

Skuggningen på toppen ska ha kilformar riktade högst upp på tanken.

Steg 6

Nu vidare till lådorna som kanske inte är luftkonditioneringsenheter.

Lådorna är ganska enkla. De borde fortfarande se ganska metalliska ut och ha några slitsar / ventiler eller något för att göra det lite mindre enkelt.

Steg 7

Här slutar lådorna och slangarna / kablarna får lite skuggning för att visa lite volym, belysning och konturer som blandar sig bättre med miljön.

Steg 8

Nu ska vi göra en annan tank. Den här kommer att vara mindre, ligga horisontellt och ha ett rör som kopplar ner till fabriken.

Vi vrider rektangeln i en kuboid och i en cylinder genom att dra cirklarna i de två ändarna. Låt oss hålla denna form förhöjd lite med hänsyn till skuggan.

Steg 9

Nu ska vi applicera metallfärger och cylindrisk skuggning.

Den bruna nyansen i botten är avsedd att vara en reflektion av marken. Jag är inte säker på om det lyckades, men jag höll det.

Steg 10

Vi lägger till en bit konisk skuggning i ytterkretsen och skapar röret, vilket ser mer ut som ett strå i detta skede.

Steg 11

Jag gav röret en annan färg från tanken, eftersom det mycket bra kan vara ett annat material. Jag förstorade höjdpunkten i rörets armbåge, för det är där jag tror att det skulle lysa mest, vara metalliskt.

Slutligen lägg till ett stativ på det och mjuka i hörnslinjerna där ytorna möts.

Steg 12

Här är alla elementen placerade.

Steg 13

Du kan nu städa upp riktlinjerna.

Och för att få mer bang för vår pixelbock, låt oss ta röret från den lilla tanken och anslut den till botten av skorstenarna, vilket lätt uppnår lite extra komplexitet.

5. Gör röken

Jag hade inte dragit pixel art rök / moln på ett tag, men det var nödvändigt att skapa några rökplumes för vår fabrik.

Detta är ett element (inte till skillnad från glasfönster) att många pixelartister skulle göra det väldigt annorlunda än varandra.

Hur som helst, här är min inställning.

Steg 1

Börja med att göra några grova skisser (i Nya lager) av grundformen du vill ge dina rökplumer. De bör börja med samma bredd som kolonnens inre men sprida sig ut ... eftersom de sprider sig, kommer de också att tunna ut och försvunna.

Skissen behöver inte vara vacker, men det kommer att ge dig en uppfattning om hur de färdiga formerna kommer att se ut och en guide för de former och kurvor du ger till dina plumes.

De tre plommorna borde flyta mycket på samma sätt, men vi vill inte bara göra en plume och repetera den två gånger, för det skulle inte se bra ut. det skulle se lata ut.

Steg 2

Nu vänder vi varje skiss till en fin rökplume.

Jag bestämde mig för att för det mesta göra formerna torget, som jag gillar, det här är pixelkonst. Så börja med att spåra över skissen (i en Nytt lager) med raka horisontella och vertikala linjer.

Runda sedan ut hörnen. Det skulle vara meningsfullt att göra de rundade hörnen bredare / rounder när plummen går upp och skarpare när de är närmare botten.

Sedan, för att avsluta skissera, gör några av linjerna gå in i formen som om röksjuka överlappar varandra med resten av plummen.

Steg 3

Nu får vi lite psykedelisk en stund.

Vi vill att röken ska tunna ut när den stiger och vi kommer att förmedla det genom att sänka opacitet gradvis mot toppen, men vi kommer att arbeta på de olika opaciteterna genom att använda ljusa färger.

Annars skulle det vara en smärta i nacken att arbeta med den slutliga färgen vid olika opaciteter (Magic Wand Tool kan inte ens skilja opaciteterna utan någon tweaking.)

Så vad jag valde att göra var att ha fyra olika nyanser på varje plume. Den första som jag bara använde precis ovanför skorstenens avgasutrymme och även fungerar som en bit av en ljusskuggning för plummen. De övriga tre nyanserna sprids lite jämnare.

Jag gav de områden där de olika nyanserna möter ett mönster slags övergång. Och jag gjorde också olika nyanser för konturen, som tillsammans med röken skulle försvinna när plummen går upp.

När allt detta är klart kan du börja byta ut de funky färgerna med den olika opacitetsrökfärgen, som jag gjorde som en nästan vit färg med lite gul färg.

Jag gjorde opaciteterna från botten till toppen: 80%, 60%, 40% och 20% på fyllningen. Och konturerna är mycket mjukare (botten till toppen): 20%, 10%, 5%.

Steg 4

Naturligtvis är detta gjort för alla tre skisserna, idealt samtidigt så att de är mer konsekventa.

Här är processen för de tre plumesna.


Steg 5

Och här appliceras de på byggnaden som gör fabriken 100% klar!

Fabriken Upp och Running. Grattis! 

Arbetet lönade sig. Fabriken är i drift, rökplummen ser ganska snygga och nästan för rena för att vara föroreningar, och nu kan du utrusta en stad med några industrikomponenter, vilket ger dina pixelartade karaktärer en plats att arbeta och din pixelkunststad är mer variation och liv.

Hoppas att detta var produktivt!