Share
Een van de belangrijkste aspecten van het spelen van een videogame is hoe informatie wordt gepresenteerd. Hoe de grafische weergave wordt gepresenteerd, maakt een groot verschil in hoe de spelers het spel tijdens het spelen waarnemen. In de tutorial van vandaag laten we zien hoe je een interfacevenster voor videogames ontwerpt. Tijdens het proces zullen we laten zien hoe we bepaalde aspecten handmatig kunnen tekenen, laagstijlen, texturen kunnen toepassen en zelfs hoe we Adobe Illustrator kunnen integreren. Laten we beginnen!
De volgende items zijn gebruikt tijdens het maken van deze zelfstudie.
Maak een nieuw bestand met afmeting 1152 px x 864 px. Onze eerste stap is het creëren van achtergrondinformatie voor onze interface. Dit proces is gewoon gewoon experimenteren met textuur. Eigenlijk gooide ik een paar texturen die ik vond en experimenteerde ik met zijn mengmodus. Mijn eerste poging is een papieren textuur.
Voeg weer een papieren structuur toe, verander deze keer de mengmodus met vermenigvuldigen.
Voeg aanpassingslaag toe Kleurtoon / verzadiging om het donkerder te maken.
Voeg een vintage boektextuur toe met mengmodus Vermenigvuldigen en Dekking 48%.
Voeg oud papier structuren toe. Gebruik deze keer Mengmodusoverlay met dekking 58%.
Voeg aanpassingslaag Zwart en Wit toe.
Maak een nieuwe laag. Druk op D om de voor- en achtergrondkleur in te stellen op zwart en wit. Klik op Filter> Renderen> Wolken.
Zet de mengmodus op Vermenigvuldigen en verminder de dekking tot 8%.
Maak een nieuwe laag. Vul het met wit naar zwart radiaal verloop.
Zet de mengmodus op Scherm met dekking 67%.
Voeg aanpassingslaag tint / verzadiging toe. Selecteer Inkleuren om het een kleur te geven.
Voeg tot slot een mooi gekrast metaalachtig patroon toe. Zet de mengmodus op Vermenigvuldigen en verminder de dekking tot 20%.
Open Adobe Illustrator. Teken een gele rechthoek.
Teken op de rechthoek een kleinere zwarte rechthoek. Selecteer toppunten met het gereedschap Direct selecteren en verplaats ze.
Selecteer de vorm en sleep met Alt om het te dupliceren.
Druk op Command / Ctrl + D om het duplicatieproces te herhalen.
Selecteer alle vormen. Druk op Command / Ctrl + C. Plak het in Photoshop, Command / Ctrl + V. Selecteer Smart Object in het dialoogvenster Plakken.
Dubbelklik laag om het dialoogvenster open Laagstijl te openen. Voeg patroonoverlay toe, laad kleurenpapier en selecteer een vies patroon.
Voeg een rechthoekvorm toe aan de boven- en onderkant van de streep.
Voeg de volgende laagstijlen toe.
We beginnen met het maken van de basis van het venster. Maak een rechthoekige vorm met Kleur: # # 313029, Laagdekking: 100% en Opvulling: 50%. Voeg de volgende laagstijl toe.
De laagstijl die we zojuist hebben toegevoegd, is te plat. We zullen een eenvoudige techniek gebruiken om het te repareren. Activeer in het dialoogvenster Laagstijl het masker Laag verbergt effecten.
Breng een laag masker aan. Command / Ctrl-klik pad om selectie te maken. Keer selectie om door op Command / Ctrl + Shift + I te drukken. Voeg een zachte donkere kleurovergang erop en verf zwart op de industriële lijn om schaduw te verbergen.
Je kunt het verschil zien voor en na het aanpassen van de schaduw in de onderstaande afbeelding.
Teken een andere rechthoek. Deze keer kleiner dan de vorige.
Voeg er roesttexturen bovenop toe. Gebruik een laagmasker om onnodige gebieden te verbergen. Zet de mengmodus op Vermenigvuldigen en verminder de dekking tot 10%.
Maak een nieuwe rechthoek die alle vormen bedekt. Voeg een kleinere rechthoek toe in de vorm, stel deze in om af te trekken.
Dubbele vorige vorm. Formaat van binnenpad wijzigen.
Voeg de volgende laagstijlen toe.
Er is teveel schaduw in het bovenste deel van het venster. Activeer in het dialoogvenster Laagstijl het masker Laag verbergt effecten.
Opdracht / Ctrl-klikpad. Keer selectie om (Command / Ctrl + Shift + I) en beschilder schaduwen in het bovenste deel van het venster met grijs.
Hieronder ziet u het verschil voor en na de schaduw gedeeltelijk verborgen is.
Teken een rechthoek die de interface van het venster bedekt. Stel de vulling in op 0% en voeg de volgende laagstijlen toe.
Onze laatste stap voegt alleen subtiele markeringen toe aan de interface van het venster.
Teken een donkere cirkel en plaats deze op de hoek. Voeg slagschaduw toe.
Gebruik een zachte borstel om wat wit bovenop het gat te schilderen.
Dit is het resultaat in een weergave van 100%.
Zet alle lagen die het gat maken op een laaggroep. Dupliceer de groep en plaats deze op elke hoek.
Maak in Illustrator de helft van de titelvorm van Windows.
Vorm met de rechtermuisknop en selecteer Transformeren> Reflecteren. Selecteer As: verticaal en klik op Kopiëren.
Verplaats gedupliceerde vorm.
Selecteer overlappende punten. Klik met de rechtermuisknop en kies Join.
Plak het pad naar Photoshop als vormlaag.
Verf markeer en schaduw op de vorm. U kunt de voortgang zien die ik hieronder heb gemaakt. Ik gebruik een zeer zachte borstel (hardheid: 0%, dekking: 5-10%) en ongeveer 10 lagen.
Spelnaam toevoegen en volgende laagstijlen toevoegen. Lettertype dat hier wordt gebruikt is Celtic Garamond de 2e.
Teken een afgeronde rechthoek aan de linkerkant van de interface. Gebruik kleur: # 605847. Voeg subtiele Gradient Overlay toe van grijs naar wit.
Dubbele vorige vorm dupliceren en het formaat wijzigen. Zie de afbeelding hieronder voor referentie.
Teken een andere rechthoek. Gebruik deze keer lichtere kleuren. Gradient-overlay toevoegen. Dupliceer en plaats het op het onderste deel van de grotere rechthoek.
Teken een lijn van 1 px voor de markering en schaduw. We gaan deze vorm omzetten in een 3D-vorm. Uiteindelijk zul je zien dat dit kleine 1 px-detail nodig is om een realistisch resultaat te krijgen.
Teken onderstaande vorm om 3D-perspectief aan de vorm toe te voegen. Volgende verloopoverlay toevoegen.
Teken schaduw onder de vorm.
Teken de vorm hieronder en voltooi de schaduw. Overvloei overlay toevoegen aan de vorm.
Dit is het resultaat in een weergave van 100%.
Selecteer alle lagen en plaats deze op een groepslaag. Dupliceer de groep, draai hem horizontaal om en plaats hem aan de andere kant.
Teken de vorm zoals hieronder te zien is. Verf highlight en schaduw er bovenop. Vergeet niet om een zachte schaduw van de vorm toe te voegen in het interface venster.
Hieronder ziet u het resultaat in een weergave van 100%. Dupliceer de vorm twee keer.
Maak een nieuwe laag onder de vorm en schilder wat zwarte pixels met een kleine zachte borstel.
Dupliceer alle vormen. Draai het horizontaal en verplaats het naar de andere kant van de interface.
Voeg roesttexturen toe die de hele interface bedekken. Command / Ctrl-klik op interfacegrens en venstertitel om een selectie te maken op basis van hun vorm. Voeg een nieuw laagmasker toe. Verf zwarte titelvorm met een laag dekkingspenseel, omdat we er niet te veel roeststructuur op willen zien. Hieronder ziet u het masker dat ik heb gemaakt.
Zet de dekking terug naar 15%.
Maak een frame binnen de vensterinterface. Dit is gemaakt van twee pad waarbij het innerlijke pad is ingesteld op Aftrekken. Voeg de volgende laagstijlen toe.
Plak een PNG-afbeelding van een voertuig in het frame.
Voeg achter het frame een nieuwe laag toe en vul deze met een grijs tot wit verloop.
Schilder enkele schaduwen onder het voertuig.
Voeg nog een frame toe onder het voertuigvoorbeeld. Gebruik dezelfde techniek in voorgaande stappen.
Voeg wat informatie toe aan het frame.
Teken een ander frame, deze keer groter.
Teken een eenvoudige rechthoek in het kader. Voeg de volgende laagstijl toe.
Voeg wat tekst toe aan de rechthoek.
Dupliceer de rechthoek voor een andere gegevens. Verwijder de Outer Glow laagstijl en verminder de dekking tot 30% van het inactieve niveau.
Dupliceer alle vormen om een andere gegevensset te maken.
Keer terug naar Illustrator en maak deze vorm.
Plak de vorm in Photoshop als vormlaag. Voeg de volgende laagstijlen toe.
Markeer en schaduw handmatig met een zachte borstel, hardheid 0% en dekking 5-10%.
Dupliceer de vorm en draai deze horizontaal.
Teken een lichtblauwe rechthoek en plaats deze achter de vormen. Voeg de volgende laagstijlen toe.
Teken een paar hoogtepunten in de vorm. Knop titel toevoegen. Verflicht gloeien op de bovenkant van de knop.
Dupliceer de knop en verander de titel.
Accentsconagua