Share
Wat je gaat creërenAls je een stad met pixelkunst wilt maken, dan is een park een leuke en vrij noodzakelijke toevoeging. De elementen die we in deze tutorial zullen behandelen, zouden in feite nuttig zijn om andere soorten scènes, zoals tuinen in gebouwen of terrassen, van accessoires te voorzien..
Lees de inleidende zelfstudies in deze serie en de boomles met pixelillustraties.
Ik begin meestal met het definiëren van de grootte van wat er zal gebeuren op basis van de grootte van het personage. Maar voor het park zelf is het misschien niet zo handig om het personage op het doek te hebben.
Maar we kunnen het nog steeds ophangen omwille van gewoonte.
We maken een grote rechthoek. Het zou een perfect vierkant kunnen zijn als je wilt - sterker nog, dat kan ideaal zijn voor het centrale plein van een stad. Maar ik dacht dat het een beetje minder saai zou zijn om het breed te maken aan de ene kant en smal aan de andere kant, en ook dat het de breedte van het stadhuis uit de laatste zelfstudie kon matchen, wat uiteindelijk van pas zou kunnen komen.
Rond de hoeken af en de basisvorm voor het park is voltooid.
Zou dit de gemakkelijkste les tot nu toe zijn? (hint: nee)
Controleer altijd referentiebeelden wanneer je je eigen creaties maakt, maak een moodboard, schets opties en probeer meerdere alternatieven. Natuurlijk zullen we nu een ontwerp volgen dat ik bedacht heb en waarvan ik hoop dat je het leuk vindt. Het wordt een vrij typisch, klassiek park: mooie oude lantaarnpalen, prieel, fontein, enzovoort.
Laten we beginnen met een paar basale landschapsarchitectuur. We zullen een pad hebben dat door het midden van het park gaat.
Er zijn veel manieren om het centrum te vinden. Hier is er een die je zou kunnen proberen: maak de twee parallelle lijnen die het pad vormen en snijd het in het klembord en selecteer vervolgens het middengebied van het park met de Toverstafgereedschap (ingesteld op aangrenzend) en vervolgens plakken; Photoshop plakt automatisch het klembord in het midden van uw selectie.
Een recht pad in het midden van het park is misschien een beetje te saai. De verwijzingen naar parkontwerpen toonden allerlei wervelende, gebogen paden, maar ik vermijd liever zoveel bochten, omdat ze onvermijdelijk meer gekartelde lijnen in onze ontwerpen brengen. In plaats daarvan voegen we wat complexiteit toe door hoeken aan het pad toe te voegen.
Dus maakte ik een rechte horizontale lijn van de ene hoek naar het pad. De cirkel waar ze elkaar ontmoeten, is handig om de juiste breedte van het pad te vinden, ongeacht de richting. De regels voor de cirkel zijn: deze moet twee keer zo breed zijn als hoog en de randen moeten overeenkomen met de twee lijnen van het pad.
Laat het op een nieuwe laag. De bovenste regel van de cirkel definieert de bovenste regel voor het nieuwe horizontale gebied van het pad.
Dit is het gedeelte van het pad, met de referentiecirkel en extra onnodige lijnen verwijderd.
Laten we het pad naar de tegenovergestelde hoek spiegelen. U kunt eenvoudig de vorige regels kopiëren, plakken en vervolgens 180˚ draaien (Bewerken> Transformeren> 180 ° roteren.)
Laten we een ander pad toevoegen dat verticaal door het park loopt. De cirkel wordt weer nuttig om de breedte van het pad naar rechts te krijgen.
Dit zijn de contouren voor het nieuwe padgedeelte.
Reinig het midden naar boven. En laten we nog één padhoekverandering toevoegen.
Let op de licht afgeronde hoeken.
Spiegel dat stukje pad opnieuw, en waarom zou u het niet met een of andere graskleur vullen, op de gebieden die niet de paden zijn.
We zullen de basisvormen van het prieel als een gids maken die we later opnieuw zullen tekenen en we zullen beginnen door een achthoek te maken; gebruik de Polygoon gereedschap om een achtzijdige vorm te maken.
Zet het vervolgens verticaal op 50% zodat het in de isometrische weergave past en wijzig het formaat (met behoud van de verhoudingen) naar de gewenste grootte op het park.
We gebruiken verschillende grootten van de octagon omdat we er enkele stappen aan toevoegen en ze worden concentrisch kleiner. Dus aan de zijkant van de originele achthoek heb ik een kopie van 90% van het originele formaat en aan de zijkant daarvan heb ik nog een achthoek op 80% van de oorspronkelijke grootte.
Ik heb ook nog een kopie bewaard van de middelste achthoek voor gebruik als het dak, later, en nog een kopie van de grote aan de andere kant van het park, alleen om me te helpen de fontein later te plaatsen.
Hun kleuren zijn een beetje aangepast zodat we de vormen apart kunnen onderscheiden.
De drie hoogste achthoeken zijn de trap en de vloer, dus ze moeten wat hoogte hebben; je kunt ze selecteren, kopiëren en plakken (of vasthouden) alt tijdens het nudgen) en verplaats ze 2 pixels omhoog. Ik heb ook hun kleuren omgekeerd om de vormen apart te kunnen onderscheiden.
En hier zijn ze na concentrisch geplaatst te zijn.
Plaats het dak op de basis, hoog genoeg zodat het personage binnen kan staan.
Het lijkt erop dat we geen gekartelde lijnen op het dak kunnen voorkomen, maar het zou wel goed moeten zijn. Maak een aantal 2: 1 lijnen langs de bovenste diagonale lijnen van het dak en verleng ze om in het midden samen te komen; dat is het topje van het dak van de gazebo.
Rechte lijnen moeten zich uitstrekken van die punt tot de zichtbare hoeken van de achthoek. Deze regels kunnen worden gemaakt door op de tip te klikken met de Pencil Tool, ingedrukt houden Verschuiving, en klik vervolgens op een hoek. Een lijn vormt zich automatisch tussen de twee punten.
Laten we nu de basisvormen maken die de gids voor onze bron zullen zijn. Begin met een cirkel en een rechthoek die breder is dan de cirkel.
Centreer ze vervolgens en voeg ze samen. Ze zouden op een dikke Saturnus moeten lijken.
Kopieer die vorm nog drie keer en voeg ze bij elkaar op de hoeken om een vierkant als dit te maken:
Verwijder de openingen binnenin en draai de vorm 45˚. Dit zal de vorm van onze fontein zijn.
Net als bij het prieel, zal deze vorm zich concentrisch herhalen, maar deze keer laat de herschikkingstruc te wensen over, omdat de mix van het vierkant en de cirkels resulteert in de breedte van de vormen die worden gevarieerd.
Let op hoe smal de hoeken zijn en hoe dik de halve cirkels in hun midden zijn.
Dus hier is een snelle en vuile oplossing. Dubbelklik op de laag om in te gaan Laagstijlen, en voeg een toe Beroerte met een mooie stevige maat, zet de positie op "Midden".
We voegen daar nog een streep aan toe. We kunnen dat doen door samengevoegd te kopiëren (Bewerken> Samengevoegd kopiëren) als je een achtergrondlaag hebt, kun je bij het onzichtbaar maken van de kopie alleen de vorm van de fontein samenvoegen. Voeg de andere (nog dikkere) streek toe aan de nieuwe laag met de samengevoegde elementen geplakt.
En we krijgen dit:
Die hoeken zijn niet erg mooi en de cirkels zijn niet perfect, maar dit zal allemaal gewoon een referentie zijn voor het daadwerkelijke pixelwerk, dat we goed zullen krijgen.
Herschaal de vormen die we hebben gemaakt tot 50% hoogte en vervolgens tot een grootte die vergelijkbaar is met de referentiehoek die we hadden. Plak de vorm van de fontein over de achthoek.
En verwijder de achthoek.
En nu hebben we deze ontwerpideeën niet. Je zult merken dat er een symmetrie is in ons park, dat ik voor dit ontwerp het beste vond, maar ontwerpen hoeven niet altijd symmetrisch te zijn.
Laten we aan de slag gaan met de verschillende items die we aan het park zullen toevoegen. Sommige zijn vrij eenvoudig, sommige absoluut niet.
Als je de isometrische zelfstudie van de pixelillustraties niet hebt doorlopen, zou dit het moment zijn om het te doen.
Koop je boom.
Verander het in een miniboom.
Maak gewoon een eenvoudige ovale vorm en voeg een deel van de schaduw van de randen van de boom toe om een deel van dat volume te behouden. Krimp vervolgens de kofferbak en schaduw.
Verander die miniboom in een struik. Het heeft een vrij eenvoudige, eivormige vorm, geen stam.
En je hebt drie soorten bomen!
We zullen plekken vinden om te stippelen met bloemen. Ze zien er mooi uit en vergroten de vegetatievariatie zonder veel werk.
Laten we ons geen zorgen maken over stengels of bladeren. Hier is een vrij eenvoudige en isometrische-als-mogelijke soort bloem: slechts vier bloemblaadjes en een zachte omtrek (groen als het gras, maar donkerder)
Ik maak de onderkant van de contour een beetje donkerder om op te treden als een lichte werpschaduw. Wijzig in meerdere kleuren als u klaar bent.
Laten we onze lantaarnpalen maken. We zullen een aantal van hen het park laten klasseren.
Het zal vrij dun zijn, en zeker langer dan het personage.
Het is niet nodig, maar ik wilde een cementbasis toevoegen.
Voeg enkele hoogtepunten en schaduwen toe. Ik raad aan om in het algemeen een gradient-y-look te vermijden bij schaduwen, maar het is gemakkelijker om verleid te worden door cilinders.
U wilt misschien ook een beetje transparantie geven aan het glazen gedeelte.
Waar anders zouden mensen zitten?
Het zitoppervlak van de bank moet ongeveer op kniehoogte van het personage zijn.
Om de structuur af te werken, voegt u enkele poten en een achterkant toe. Dan kleur en textuur.
Het is gemakkelijk voor een dergelijk eenvoudig meubelstuk om het in vier verschillende weergaven af te werken. Eén extra beeld wordt bereikt door eenvoudig horizontaal te kantelen.
Het zicht aan de achterkant heeft wat extra werk nodig, maar het is vrij eenvoudig - ga gewoon terug naar de tegenovergestelde rand van het zitvlak. Verkleurt u de contouren die het mogelijk nodig hebben.
En flip voor de extra weergave.
Laten we aan de slag met de definitieve versie van het tuinhuisje.
Dit is de gids.
Werk aan een nieuwe laag.
Je kunt beginnen met de buitenste lijnen.
Als je meer geordende lijnen kunt bereiken dan de gidsen suggereren, maak ze dan meer geordend.
Hier voeg ik al hoogtepunten toe aan de voorste hoeken van de trap, en lichtjes verschillende hoogtepunten van het dak.
Je kunt de gids al verwijderen.
Laten we de kolommen toevoegen die het dak omhoog houden, en ook een beetje witte rand onder het dak.
Ik geef de treden dezelfde kleur als de cementbasis die ik op de lantaarnpaal gebruikte, om de dingen gemakkelijker te houden.
Het moet een lichtgrijs zijn, dat cement of beton vertegenwoordigt.
Voeg wat juiste schaduw toe aan de stappen.
En verzacht de lijnen. Er is geen behoefte aan zwart op de hoeklijn waar twee oppervlakken samenkomen. Ik heb ook enkele andere lijnen op de stappen verzacht alleen om het contrast op die delen te verminderen.
Voeg wat kleur toe aan het dak en verschillende tinten. Hoe denk je dat het licht zou reflecteren op het achthoekige dak??
Zachtere hoogtepunten op het dak. Het verdient vooral de voorkeur om het contrast op al deze daklijnen laag te houden, omdat dit de gekartelde, niet-ideale vorm van pixelartlijnen is.
Laten we het dak wat textuur geven, niet echt tegels, maar een hoop parallelle lijnen.
U kunt beginnen met aanwijzers aan de voorzijde, op a nieuwe laag.
Voeg vervolgens regels toe die deze volledig bedekken.
De lijnen moeten op een andere hoek op de aangrenzende kant gaan; ze moeten parallel aan die kant zijn.
Doe dat en verwijder dan de overtollige stukjes lijn.
En herhaal dit voor de volgende aangrenzende kant.
We hoeven alleen aan een van de zijkanten te werken, omdat we de andere kant krijgen door simpelweg te kantelen.
Voeg nog een set regels toe, direct naast de hoogtepunten in het dak. En verwijder de pixels die recht over de hooglichten gaan.
En nu kun je horizontaal omdraaien om alle kanten te bedekken.
Verlaag de laagdekking naar 10% (of probeer 5% en hoger om te zien wat je het liefste doet). En dan kun je naar beneden gaan.
Hier heb ik wat extra verbeteringen toegevoegd. Eerst een beetje extra witte rand onder het dak.
En toen liet ik het dak een beetje zakken om die lelijke, donkere puinhoop te verbergen die gevormd werd door het achterste gedeelte van de trap.
En om de overheersende grijsheid verder te verminderen, laten we een paar banken toevoegen. Ik had met vier kunnen weggaan, maar ik vond het leuk om met twee te kijken.
Herschik de lagen, als je er veel bijhoudt. Zo niet, wis dan gewoon de delen van de banken die bedekt zouden zijn door het dak en de kolommen.
Het tuinhuisje is voltooid!
Nu komen we bij de fontein. Dit kan uiteindelijk het brandpunt van het stuk worden.
Hier is onze gids, en op een nieuwe laag we kunnen die verzachte hoeken onmiddellijk corrigeren. We hoeven maar aan één kwadrant van de gids te werken; de rest kan worden bereikt door horizontaal en verticaal te kantelen.
Ik heb deze regels toegevoegd om dezelfde afstanden op deze parallellen te handhaven. En ik zal ook veel van die pixels als onderdeel van de curven bewaren.
U kunt de krommen uit de vrije hand "plaatsen" en vervolgens enkele pixels rond bewerken en verplaatsen.
Hier zijn de bochten na een beetje schoonmaken.
Hier ziet u hoe de lijnen eruitzien om horizontaal en verticaal te flippen om de vorm van de fontein te voltooien. Wellicht heeft u de gidsen met fonteinvormen niet meer nodig.
Ik deed een laatste beetje retoucheren naar de bochten in één kwadrant (en toen ik klaar was, heb ik de andere drie vervangen door de nieuwe)
Laten we nu wat kleur toevoegen: de vorige cementkleur voor de vloer rond de fontein en een lichtere tint voor wat de bovenkant van de fonteinmuur zal zijn.
Laten we die muren een beetje verhogen.
Ik had het misschien iets meer willen verhogen, maar ik vond het niet leuk hoe de lijnen eruit zagen, botsende tegen de lijnen rond de cementen vloer.
Maar deze hoogte komt goed. Het personage kan comfortabel op die rand zitten.
Voeg wat verticale hoeken toe, sluit die volumes af en voeg wat onderwaterschaduw toe.
Voeg wat schaduw en highlights toe op basis van hoe je denkt dat het licht op de muren zou werken.
En enkele hoogtepunten voor al die piekhoeken die op ons afkomen.
Laten we die lijnen aan de zijkanten van de muren verzachten, net onder de top. Ze kunnen ook worden verwijderd, maar ik denk dat ze een leuk effect geven.
Ze moeten net als de muurkleuren zijn, maar ongeveer 20% donkerder.
Voeg ook die toe en / of verzacht die in lijnen en lijnen waar oppervlakken elkaar ontmoeten.
We hebben een aantal overvolle schalen boven het zwembad. Laten we er een basis voor toevoegen, te beginnen met een cirkel in het midden van het zwembad. De cirkel moet twee keer zo breed zijn als hoog.
Je kunt deze kringen maken met de Elliptical Marquee Tool. Vul de elliptische selectie met de omtrekkleur en koppel de selectie (Selecteer> Wijzigen> Contract ...) met één pixel om de binnenkant te vullen met de kleur die je de cirkel wilt geven.
Verander de cirkel in een cilinder.
En geef het dezelfde afwerkingen als de muren van het zwembad.
Nu, in a nieuwe laag, we voegen een cirkel toe boven deze cilinderbodem. Dit is de laagste en tevens de grootste kom van onze fontein.
Voeg nog een kleinere cilinder toe op a nieuwe laag, boven de vorige.
En dan nog een keer.
Dit zijn alle kommen die we nodig hebben.
Breng wat kleur aan op de eerste schaal; onderwaterkleuren in het midden maar lichter aan de randen.
Herhaal voor de andere twee kommen.
En laten we nu de kommen verbinden zodat ze niet magisch boven de fontein zweven.
De voetstukken en sokkels voor deze fonteinen kunnen behoorlijk sierlijk zijn, maar vanwege ons bovenaanzicht krijgen we gewoon een kleine glimp, dus een simpele cirkel / bol kan genoeg zijn om de truc te doen.
Schaduw het mooi en verzacht de binnenlijnen.
En trek vervolgens het voetstuk uit om de tweede schaal te verbinden.
En ook de derde kom.
Als u klaar bent met het overbrengen van deze volumes, wilt u misschien een beetje schaduw toevoegen aan de binnenkant van de kommen. Het zijn holle vormen en ik denk dat het waarschijnlijk is dat licht zich zo in zo'n vorm zou gedragen.
Ben op de andere twee kommen van toepassing, ook al is het daar minder op te merken.
En je hebt de vormen klaar.
Maar hoe zit het met het water? Laten we daarvoor zorgen door niet één, niet twee, maar drie watereffecten toe te voegen!
Ten eerste een reflectie-effect. Water in beweging kan een beetje op duinen lijken, dus we doen een eenvoudig patroon dat een beetje lijkt op een stel kleine duinen. We beginnen met een verwrongen, geruit patroon.
En dan geven deze vierkanten meer een delta-vorm.
Hier, op een andere laag, heb ik deze vormen gemaakt om de wateroppervlakken te definiëren, de gebieden waar ik mijn patroon zal toepassen.
Hier is het patroon dat overal in het water wordt herhaald, alleen aangebracht over het paarse masker en op een nieuwe laag. Het heeft dezelfde kleur als de binnenkant van het zwembad, maar is helderder.
U kunt de overvloeimodus voor de patroonlaag wijzigen in overlay of een andere instelling die u misschien leuk vindt en de dekking ervan verlagen. En dan, als je wilt, voeg je samen.
We zullen water uit elke kom laten stromen als druppels vanzelf naar beneden gaan. Dat betekent dat ze het wateroppervlak raken waar deze cirkel staat.
Hier in rood, voor zichtbaarheid, zijn de druppels die ik gebruik. Dichtbij zijn ze een beetje dichter bij elkaar, maar naarmate ze vallen, neemt de afstand tussen elke druppel toe (met een gigantische 1 px).
Ik gebruik twee versies van deze gestippelde lijnen: de ene is gewoon 1 px hoger op het canvas dan de andere.
Laten we de druppels een lichte waterkleur geven. Plaats ze rond de cirkel en houd ze afwisselend en zonder veel contact tussen de lijnen.
Maak de vorige druppels onzichtbaar. Nu voegen we kleine spatten toe over het oppervlak, waar de druppels terechtkomen.
Dus we nemen gewoon de cirkel waar die druppels zijn bedoeld om te slaan, maar geven ze een vlekkerig patroon.
En als we deze twee dingen eenmaal hebben gemengd (waardoor de vallende druppels een lagere dekking hebben), zou je een behoorlijk overtuigend douche-effect moeten krijgen.
Breng de waterspetters aan op de kommen.
En breng de vallende druppels ook op hen aan (ik heb ook enigszins de opaciteit verlaagd voor het hogere gedeelte van de kom).
En je hebt je overtuigende, waterige, mooie parkfontein! Eenvoudig!
Met de hoeveelheid elementen en ruimte om ze te plaatsen, kunnen de mogelijkheden bijna oneindig zijn. Probeer verschillende alternatieven. Ik hou ervan om elementen een beetje schaars te houden, net genoeg om overvloed over te brengen, maar om dingen schoon te houden. Maar misschien wilt u een meer verzadigde aanpak.
De twee dingen die we al weten waar ze heen gaan, zijn natuurlijk het tuinhuisje en de fontein. Leg ze recht boven de hulplijnen.
En ontdoe je van de gidsen.
Laten we de lantaarnpalen toevoegen. Drie per kant leek me genoeg. Ik hield ook van deze afstand en ze stonden in de rij met hoeken.
De drie plekken aan de andere kant van het gazon zijn een richtlijn voor het plaatsen van de lantaarnpalen voor die zijde. Je kunt die markeringen direct van de nieuw geplaatste lantaarnpaal halen; kopieer ze gewoon, draai ze 180˚ en leg ze over de andere kant van het gazon. De lantaarnpalen staan ondersteboven, maar dat is prima, want je gebruikt ze alleen om de vlekken te markeren.
Plaats de lantaarnpalen op de overeenkomstige plaatsen aan de andere kant van het gazon.
Laten we nu een paar banken plaatsen om naar de fontein te staren, of wie weet, duivenvoeding?
Ik legde de kleinere bomen tegen de fonteinrand van het park: vier ervan, gelijkmatig verdeeld.
Ze botsen een beetje met de ruimte van de fontein, dus bewoog ik dat in een klein beetje. En ik heb ook het prieel verplaatst om symmetrisch overeen te komen en zodat er ook genoeg ruimte aan die kant is voor nog eens vier kleine bomen.
En laten we nu onze grotere bomen inzetten!
Zoals ik al zei, vind ik het leuk om mijn items enigszins kaal te houden. Hoe dan ook, er worden meer items toegevoegd aan de omgeving, dus er zullen geen saaie gebieden zijn - behalve twee kleine open ruimtes, die parken toch nodig hebben.
Voeg hier en daar wat bloemen toe. Kijk waar je ze wilt hebben. Ik leg ze langs een lijn en verbind de lantaarnpalen op een manier. Hun plaatsing zou een beetje willekeurig moeten zijn, dacht ik.
En de kleine struiken? Laten we ze een leuke plek vinden. Er is een bepaald gebrek aan opwinding aan het prieel en de omgeving. Ik vond de kleine struiken geholpen om dat op te lossen.
En daarmee hebben we plekken gevonden voor al onze elementen.
Er is nog een beetje werk te doen voordat we onze omgeving voltooien.
Laten we wat kleur toevoegen aan het pad.
We zullen het een geplaveid soort patroon geven.
Begin met enkele verticale lijnen, 4 px uit elkaar, ongeveer 5 px uit elkaar. Voeg vervolgens horizontale lijnen toe om de individuele stenen te maken. Het kan vervelend worden om een groter patroon te maken, maar een groter patroon is goed omdat het meer naadloos is.
Om het af te maken, betegel ik het een paar keer om
Accentsconagua