U kunt veel doen wanneer u een menu of een van de vele interfaces binnen een videogame maakt. In het geval van deze tutorial nemen we de tijd om opnieuw met pixelart te spelen om iets RPG-geïnspireerds te maken dat teruggaat naar 16-bits menuschermen.
1. Stel uw document en achtergrond in
Stap 1
Pixelart is klein. In het geval van dit ontwerp maken we ons niet al te veel zorgen over wat dit zou inhouden of hoe het zou worden weergegeven (in het geval u aan een specifiek spelontwerp werkt, zou u natuurlijk binnen die beperkingen werken).
Doe open Adobe Photoshop en maak een Nieuw document dat meet 254 px door 117 px op 72 ppi. Dit is het belangrijkste werkbestand dat we tijdens de zelfstudie gebruiken.
Stap 2
Ik heb ervoor gekozen om de toon van dit ontwerp te helpen bepalen door eerst met het achtergrondpatroon te beginnen.
Maak een Nieuw document dat is 10px door 10px op 72 ppi. Ik koos tinten groen in mint en salie (# daf5d2, # 8ca784, en # 748f6c van licht naar donker).
De ... gebruiken Pencil Tool (B) met de standaardpenseel op 1px begin in het midden van het ontwerp met het lichtste groen. Teken een klein doosje met vier pixels met twee pixels aan elke kant (houd de hoeken open). Drie pixels omhoog begint de diagonale lijnen die zich uitstrekken 5 pixels, diagonaal aan elke kant van het kleine document. Om het muntachtige groen af te krijgen, plaatst u drie pixels in elke hoek van het document. Voor de twee tinten salie, vult u de ruimte rondom op met diagonale strepen van kleur.
Ga naar om van dit ontwerp een eenvoudig patroon te maken Bewerken> Patroon definiëren en geef je patroon een nieuwe naam. Ga terug naar het document gemaakt in Stap 1 en gebruik de Verfemmergereedschap (G) om de achtergrondlaag van je gebruikersinterface in te vullen patroon geselecteerd in plaats van voorgrond in de opties van het gereedschap. U kunt het originele patroondocument dat in deze stap is gemaakt, opslaan of verwijderen.
2. Maak de lederen riem
Stap 1
Maak een Nieuwe laag (Control-N) en pak de Pencil Tool en teken een diagonale lijn van 20 enkele pixels en een loodrechte lijn van 11pixels in bruin (# 6c0e04).
aan beide kanten van de korte, loodrechte lijn, teken 3 extra pixels (zie hieronder voor de hoek).
Sla twee rijen met diagonale pixels over en teken nog een lijn met 9pixels.
Sla nog een rij met diagonale pixels over en sluit de kleine diagonale rechthoek (zie hieronder). Trek de andere kant van de leren riem met 20 extra diagonale pixels (betwistbaar, je zou dit kunnen tekenen na het eerste deel van deze sectie).
Stap 2
Maak de onderkant van de riem af met 7pixels (van links naar rechts, diagonaal).
Sla bovenaan de riem een pixel aan beide kanten van de gesp over en teken 3 pixels naar de rechterhoek van het document en 1 pixel aan beide kanten van links naar rechts.
De diagonale lijn over de bovenkant van de gesp is 11 pixels aan de overkant.
Om de gesp te voltooien, tekent u 1 pixel aan beide kanten en voeg een andere toe 11 pixels over in een loodrechte lijn.
Stap 3
Werk de riem af met twee diagonale lijnen met één pixel.
Vul secties van de riem in met lichtbruin (# bb5f15) met de Pencil Tool of doe dat met de Verfemmer gereedschap.
Vergeet niet het midden van de riem in te vullen.
Voor de gesp heb ik goudgeel gebruikt (# fbc423).
Stap 4
Op dit punt besloot ik om een te maken Nieuwe laag om te werken aan het renderen van de leren riem. Begin met highlights met een lichtere kleur dan je basiskleur (# d67b1b) met diagonale lijnen waaruit bestaat 2 of 3 pixels dik.
Voor schaduwen, bedek de zijkanten van de riem met donkerbruin (# 9b3f0e) en dunne lijnen naast de gesp en de hele riem (zie hieronder) diagonaal over de breedte van de riem.
Herhaal aan de andere kant van de riem.
Gebruik donkerbruin in het midden van de riem, langs de boven- en onderrand van dat deel van de pixels. Trek voor de gouden gesp diagonale lijnen van gele oker (# c27b17) op de boven- en onderrand en crème (# f8dd92) Verspringend in het middengedeelte van de gesp. Samenvoegen (Control-E) de band lagen samen (gescheiden van de achtergrondlaag).
3. Ketting en papier
Stap 1
Laten we beginnen met de lijntekeningen voor de keten. Het zal de lederen riem verbinden met het navigeerbare menu.
Begin met de bovenkant van de eerste link: 2 pixels in een lijn met 2 pixels diagonaal naar beneden gaan op twee rijen.
Verbind de eerste rij diagonale pixels met 2 pixels en tekenen 3 pixels omlaag in vier kolommen die één of twee regels spaties overslaan (zie hieronder). Voltooi de vorm (voordat we aan de volgende link werken) met 2 diagonale pixels aan beide kanten naar binnen gaan naar het midden van de vorm.
De eerste link is in wezen een kleine rechthoek die dat is 3 pixels door 5 pixels met de rechterbovenhoek van de sleeptrechter verwijderd en toegevoegd aan de linkerbenedenhoek.
Vanaf hier herhalen we de basisvorm van de kettingslink die in de eerste twee secties van deze stap is gemaakt 4 pixels breed, een enkele diagonale pixel aan elke kant, 3 pixels naar beneden, en 2 pixels naar beneden diagonaal die naar de volgende kettingschakel leiden.
Herhaal secties 3-4 van deze stap dus er is 8 kettingschakels in totaal (zie hieronder).
Stap 2
Beginnend met de schaduwkleur (# c27b17), focus de kleur links onderaan op elk van de ronde kettingschakels.
Vul vervolgens het middelste gedeelte van het ontwerp in met goudgeel (# fbc423).
Trek ten slotte enkele pixels rechtsboven aan elke ketting in romig geel (# f8dd92).
Voor het papier waarmee de ketting is verbonden, tekent u een rechthoek die de pixels aan de bovenhoek mist. De totale grootte die ik heb gebruikt is 53 pixels door 36 pixels. Ik vond het het gemakkelijkst om de rechthoek op een te tekenen Nieuwe laag, verplaats de ketting naar het bovenste midden van de rechthoek. Het gat in het papier is 4 pixels door 5 pixels.
De "vouw" in het papier is 6 pixels naar boven en naar binnen aan de rechterkant. Verwijder hoekpixels of onnodige pixels met de Eraser Tool (E) ingesteld op Potlood (standaardpenseel op 1px) of Blok (Zoom (Z) om een of enkele pixels tegelijk te wissen).
Stap 3
samensmelten de kettinglaag op de papierlaag. Gebruik de Verfemmergereedschap (G) om het papier in te vullen met lichte crème (# fefbd8).
Gebruik de. Voor de lijnen met schaduw op het papier Pencil Tool opnieuw en een donkerdere crèmekleur (# f8de93).
Plaats de ketting onder de leren riem in de Lagen paneel. De ketting moet de gesp van de riem afhangen.
4. Menu-elementen
Stap 1
De cartoonachtige handschoencursor verschijnt tweemaal binnen het ontwerp. Maak een Nieuwe laag en laten we een hand tekenen.
Begin met de Pencil Tool, bruin (# 6c0e04) als de voorgrondkleur, en 7 pixels naar beneden.
De bovenste regel is 13 pixels breed, de conclusie is 11 pixels breed, en de verticale lijn die verwijst naar de manchet van de handschoen is 7 pixels naar beneden.
Voeg toe voor de wijzende vinger 2 pixels vanaf het einde van de bovenste regel en 4 pixels naar links. In het midden van de zojuist gecreëerde vingervorm, teken 3 extra pixels naar beneden om de vorm te sluiten.
Toevoegen 3 pixels om nog twee vingers in de handschoen te definiëren (zie hieronder).
Teken voor de duim een kleine rechthoek 5 pixels van links is dat 2 pixels door 5 pixels met de hoekpixels verwijderd.
Eindelijk, de schaduw onder de hand is dezelfde bruine kleur verminderd tot 50% dekking. Vul de hand en manchet met wit in met behulp van de Verfemmer gereedschap.
Stap 2
Plaats de hand over de gekozen menuselectie. Waar je handschoen ook naar verwijst in dit menu, correleert direct met het tweede menu. Houd de hand later apart, want later hebben we er een kopie van nodig.
Gebruik de Type Tool (T) om de tekst op te schrijven met Small Fonts Regular, of een ander piepklein pixelvriendelijk lettertype, op 10pt grootte. Elk woord was een afzonderlijke tekstlaag. Bekijk hun uitlijning hieronder.
Stap 3
Kopiëren (Control-C) en Plakken (Control-V) het papier en de ene helft van de ketting met behulp van de Rechthoekig selectiekadergereedschap (M). Verleng het midden van het papier door het opnieuw te tekenen of kopiëren en plakken delen van het reeds getrokken papier om de ruimte in te vullen. Het tweede menu is in wezen het dubbele van het eerste menu.
5. Teken het rode hart
Stap 1
Maak voor het hart een Nieuwe laag en begin aan de gelaten kant van het hart met 4 pixelsaan de overkant, in bruin.
Teken een kleine V-vorm bestaande uit 3 pixels in het midden en 4 pixels opnieuw aan de overkant om de top van het hart te voltooien.
De volgende komt 2 pixels diagonaal aan beide kanten, uitgaan en dalen.
Toevoegen 5 pixels aan beide kanten naar beneden gaan voor de zijkanten van het hart.
Trek 6 diagonale pixels schuin naar het midden van het hart.
Voltooi het hart met 3 pixels aan de overkant op de bodem van de vorm.
Begin het hart in te vullen met donkerrood (# bb0708) in de binnenste hoeken van de bovenkant van de vorm.
Ga verder langs het hart langs de rechterkant en onderkant.
Stap 2
Vul het hart in met fel rood (# fa0000) en lijn het hart uit met een tweede laag medium rood (# e10507) (Tussen helder rood en donkerrood uit de vorige stap).
Start de hoogtepunten met licht rood (# fa6964) aan de linkerkant van het hart.
Teken kleine cirkels in lichtrood naar links.
Voeg met behulp van wit een paar hot spot-pixels toe in het midden (of er dichtbij) van de markeervormen (zie hieronder).
6. Teken de schatkist
Stap 1
De schatkist is een aangepaste rechthoek (deze heeft een afgeronde top). Maak opnieuw een Nieuwe laag.
Teken voor de linkerkant van de kist een verticale lijn met de Pencil Tool bestaande uit 17 pixels. De top begint met 2 pixels breed, gevolgd door 3 pixels op de volgende regel omhoog, 19 pixels op de volgende regel omhoog, 3 pixels op de volgende regel omlaag, en 2 pixels op de volgende regel naar beneden.
Voltooi de rechterkant met 17 pixels in een verticale lijn, naar beneden. Sla de hoekpixels over en verbind aan twee kanten met 30 pixels aan de overkant. Voor de middensplitsing, gelijkspel 30 pixels over de rij die dat is 8 pixels naar beneden vanaf de bovenkant van de zijlijnen.
Trek in het midden van de borstkas de bovenkant van het slot van de borst met 4 pixelsaan de overkant en 4 pixels naar beneden, ontmoeten op hun diagonalen. Voor de start van het midden van het slot, wissen1 pixel aan beide kanten van het midden twee.
Begint met het toevoegen van kleur, vul het slot met goudgeel (# 953608). Terwijl je bezig bent, teken 3 kolommen van geel aan beide kanten van de borst 3 pixels van links en rechts respectievelijk. Gebruik bruin (# bb5f15) om de onderkant van de splitsing in de kist te lijnen, terwijl je onderweg gele pixels overslaat.
Stagger geel (# fbf348) Pixels in het midden van de gouden strepen op de onderste helft van de borst.
Bekleed de onderkant van de kist met hetzelfde bruin als eerder gebruikt. Maak het slot van de borst compleet met 4goudgele pixels op de bodem van de slotvorm en 6 bruine pixels daaronder.
Stap 2
Vul het midden en de bovenkant van de borst in met lichtbruin (# fbc423) de ... gebruiken Verfemmer gereedschap.
Vul de zijkanten van de kist in met hetzelfde lichtbruine.
Trek nog een lijn met bruine pixels onder de splitsing in de kist en in de hoeken van de bovenrand.
Teken middelbruin (# a84913) verticale lijnen van de bovenkant naar het midden van de borst. Lijn het midden van de onderkant van de kist ook met middelste bruine lijnen van pixels (let op beide pijlen en de pixels waarnaar ze wijzen voor plaatsing).
Gebruik een veel lichtere bruine dan voorheen (# fdaa74), Teken een horizontale lijn langs de bovenkant van de kist, waarbij middelgrote bruine pixels worden overgeslagen. Versleep lichtbruine pixels door de volgende lijn (zie hieronder).
Voeg een paar gele pixels toe aan het slot van de borst als laatste aanraking.
7. Teken de bijl
Stap 1
Maak een Nieuwe laag en laten we de bijl tekenen.
Trek 3 pixels breed in medium grijs (# 5c5c5c).
De ronding van de linkerkant van de bijl is 5 pixels naar beneden, gevolgd door 2 pixels naar beneden, dan 2 pixels breed, en 5 pixels breed. Veel van de lijnen en vormen binnen dit pictogram zijn gespiegeld, dus het zit vol met herhalingen.
Gebruik makend van grijs (#afafaf), teken een ondersteboven L-vorm bestaande uit 3 pixels breed en 5 pixels naar beneden beginnend in het midden van de bovenste regel. Met donkergrijs (# 333333), krijgen we een beetje luxe in de vorm, maar dat is het 1 pixel diagonaal en rechts van de onderste regel, 2 pixels naar de links, Nog 2 pixelsomhoog, en 1 pixel naar rechts schuin.
Begin vanuit de hoek van de grijze L-vorm en teken een diagonale lijn van 4 pixels. Verbind de donkergrijze pixels met de grijze vorm met 3 pixels breed en 1 pixel diagonaal.
Gebruik middelgroot grijs, plaats 1 pixel op de diagonaal van de twee bovenste en meest rechtse pixels (zie hieronder voor de exacte plaatsing). Ga verder met lichtgrijs toevoegen 1 pixel rechts van de grijze en 2 naar beneden diagonaal.
Vul de rest van het ontwerp in met een nog lichtere grijs (# d7d7d7).
Trek voor het begin van de handvat van de bijl twee diagonale lijnen van 7 pixels in bruin (# 6c0e04). Gebruik wit om enkele hooglichten aan de linkerkant van het blad van de bijl toe te voegen.
Zet de diagonale handgreep in lichtbruin (# 93360b) en eindig het met een 90 ° hoek.
Stap 2
Vul het midden van de handgreep in met middelbruin (# 993511).
Vul de rest van het handvat in met een nog lichtere bruine (# bb5f16). Laten we aan de rechterkant van de bijl werken. Recht tegenover de linkerkant tekenen 3 pixels omhoog, 5 pixels breed, 2 pixels breed (op het niveau onder de laatste), 2 pixels naar beneden, en 5 pixels naar beneden alles grijs. Donkergrijs, sluit de vorm met 1 pixel op de diagonaal van het laatste getrokken leen, twee pixels hoger, en voeg toe Nog 2 pixelsaan de overkant naar links. Spiegelen de twee donkergrijze pixels die overeenkomen met de middelste handgreep (zie hieronder voor de exacte plaatsing).
Met lichtgrijs begin je bij de bovenste donkergrijze pixel 3 pixels omhoog, 5 pixels breed, 1 pixel diagonaal, en 3 pixels naar beneden. Dan, teken een diagonale lijn van 4 pixels in het midden van de bijl gevolgd door plaatsen 3 pixels van lichtgrijs langs de greepzijde (zie hieronder).
Vul de rest van de bijl in met lichter grijs (hex-code in de vorige stap) en gebruik wit voor hoogtepunten.
Gebruik voor de bovenkant van de bijl een assortiment van gouden, bruine en gele pixels (dezelfde kleuren die worden gebruikt voor de schatkist).
Herhaal op de bodem (in een meer gesloten vorm dan bovenaan) met verschillende grijstinten die in het bijlmes worden gebruikt.
8. Teken de gouden munt
Stap 1
Ons laatste pictogram voor het tweede menu is de gouden munt. Maak opnieuw een Nieuwe laag en pak je Pencil Tool klaar.
Trek 7 pixels breed voor de bovenrand van de munt.
Aan elke kant van de bovenste regel ga je 2 pixels breed, 1 pixel diagonaal (Passief), en 2 pixels naar beneden.
De zijkanten zijn 6 pixels naar beneden in dit ontwerp en de onderkant is een herhaling van de bovenste helft van pixels (ik vond het het gemakkelijkst om gewoon te maken Kopiëren, Pasta, en Verticaal spiegelen, dan samensmelten de lineart-lagen van de munt).
Plaats in de hoeken van de cirkelcurve pixels in geel oker (# bb6403).
Ga door met het gebruik van gele oker in een kleinere cirkel in het midden van de medaille. Elke kant bestaat uit 5 pixels in het midden en 2 pixels aan elke kant. Herhaal rond om de kleinere cirkel te sluiten.
Plaats in de onderste helft van de kleinere cirkel donkere oker (# 974000) Pixels in de hoeken van elke regel (zie hieronder voor de exacte plaatsing).
Begin met het invullen van de munt met goud (# ffaa1b) in de onderste helft en een kleine regel van 3 pixels in het onderste midden van het ontwerp.
Stap 2
In het midden van de munt staat een hoofdletter G. Werken aan de 3 pixels getekend in de vorige stap, ga verder met gele oker, donkere oker en bruin. Zie hieronder voor de exacte plaatsing van elke kleur. De vorm bestaat uit 4 verticale pixels, 2 pixels aan elke kant, 5 pixels breed de onderkant vormen, en 2 pixels omhoog.
Voor de bovenrand van de G, teken 4 pixels breed en 1 pixel op de diagonaal.
Voltooi het G met 3 pixels breed de arm van de brief. Vul de tweede regel tussen de G met goudgele pixels.
Vul het midden van de medaille en bedek de rest van de G met een lichtere goudgele kleur (# f9c325).
Gebruik dezelfde lichtere goudgele en felgele (# ffef51), werk om de bovenkant van de munt te vullen.
Gebruik crème (# fff7b6) Voor hoogtepunten in de rechterbovenhoek van het muntontwerp om het te voltooien.
Stap 3
Plaats uw voltooide pictogrammen in een regel in het midden van het tweede menu. Kopiëren en Pasta het handpictogram en zorg ervoor dat het naar het pictogram wijst dat overeenkomt met het eerste menu (in dit geval komt "item" overeen met de schatkist).
8. Inventarisniveau-meters
Stap 1
Elke meter begint met hetzelfde frame-ontwerp. Maak een Nieuwe laag en vul het volgende in:
Teken een lange rechthoek met de Pencil Tool in hetzelfde bruin gebruikt voor de andere lineart-elementen en bedekt het grootste deel van de rest van de ruimte van de UI. Houd het rond door de hoekpixels te verwijderen.
Teken kleine pixelboxen van 2 door 2 goudgele pixels in elke hoek van de grote rechthoek.
Plaats een enkele gele pixel in elke hoek. Gebruik bruin om een kleinere rechthoek te tekenen en een lijn te verlaten 1 pixel breed aan alle kanten.
Vul het midden van de kleinere rechthoek met lichte crème (# fffcd3) de ... gebruiken Verfemmer gereedschap.
Vul het frame in met lichtbruin (# c45d12).
Gebruik medium bruin (# 9e3e14) toevoegen 2 pixels aan beide kanten van elke hoek van het frameontwerp. Bekleed de onderkant van de binnenkant van het frame met een bruine kleur (# cfa984).
Gebruik hetzelfde medium bruin, voeg elk een pixel of twee toe 5-8 pixels rond het frame.
Stap 2
Kopiëren en Pasta het frameontwerp Drie keer. Kies een willekeurig niveau voor elke meter en vul in met de overeenkomstige kleur van elk item:
Rood (# fe0211) voor het hart.
Bruin (# d47d1e) voor de schatkist.
Grijs (# b1b1b1) voor de bijl.
Goud (# ffc643) Voor de munt.
Stap 3
Elke niveaumeter krijgt een lijn of twee pixels in een markeerkleur en in een schaduwkleur. Gebruik het volgende voor elke:
Het is voorbij! Zichtbaar maken de achtergrondlaag in de Lagen paneel en lijn de niveaumeters op de onderstaande manier uit. Duw je pixelart-ontwerp verder door een mock-up te maken van het spel waarin deze gebruikersinterface is gemaakt, de hoeveelheid weergegeven informatie te wijzigen of je eigen kleurenschema te kiezen voor het gehele stuk. Toon ons je versie, trouw aan het ontwerp van deze tutorial of je eigen draai aan het concept, in de commentaarsectie hieronder!
Zie het volgende voor meer tutorials over pixelillustraties:
Maak een isometrisch pixelkunstkarakter in Adobe Photoshop
Wat is de deal met Pixel Art?
Kandi Runner: maak een Pixel Art Sprite van Scratch
Share
Wat je gaat creëren
Accentsconagua
