Share
In Photoshop kunnen naast websites websites voor allerlei toepassingen worden gemaakt. In de premium-zelfstudie van vandaag laten we zien hoe je een retro-stijl elektronische kluisvergrendelingsinterface maakt met zowel Photoshop als Illustrator. Laten we beginnen!
De volgende items zijn gebruikt tijdens het maken van deze zelfstudie.
Open de afbeelding met de metalen textuur die is meegeleverd met de downloadbestanden van deze handleiding in Adobe Photoshop. Druk op "Command / Ctrl + A" om alles te selecteren. Ga naar het menu en klik op "Bewerken> Patroon definiëren". Noem je patroon "metalBg" en klik op OK. Sluit de afbeelding met de metalen textuur. Maak een nieuw bestand van 768 (breedte) x 1024 (hoogte). Druk op "U" om het gereedschap Rechthoek te selecteren.
Maak een rechthoekige vorm met dezelfde grootte als uw document. Wijzig de naam van uw rechthoek in "Achtergrond" en dubbelklik erop om de volgende Overlaate kleurovergang en Patroonoverlay toe te voegen. Merk op dat we in de Pattern Overlay-stijl het "metalBg" -patroon hebben geselecteerd dat we eerder hebben gemaakt. Maak een nieuwe aanpassingslaag voor niveaus door op de "Nieuwe vul- of aanpassingslaag maken" onder aan het venster Lagen te klikken. Voer de waarden van de volgende afbeelding in. Maak een groep uit uw "achtergrond" en uw niveauslagen. Hernoem de groep in "Bg."
Open met Adobe Photoshop de afbeelding van de leertextuur die bij deze zelfstudie is meegeleverd. Druk op "Command / Ctrl + A" om alles te selecteren. Ga naar het menu en klik op "Bewerken> Patroon definiëren". Noem je patroon "leatherBg" en klik op OK. Sluit de afbeelding van de lederen textuur. Maak een vorm zoals de vorm die wordt weergegeven in de volgende afbeelding. Hernoem de vorm in Leer. Dubbelklik erop om een Slagschaduw, Schuine kant en Reliëf- en Patroonoverlay-stijlen toe te voegen met de waarden van de volgende afbeelding. Merk op dat we in de Pattern Overlay-stijl het 'leatherBg'-patroon hebben geselecteerd dat we eerder hebben gemaakt.
Open Adobe Illustrator. Selecteer het pengereedschap en maak een vorm zoals wordt weergegeven in de volgende afbeelding. Hernoem de vorm in "Knop". Ga naar het menu en druk op Effect> 3D> Draaien en voer de waarden van de volgende afbeelding in.
Dupliceer de knopvorm. Hernoem de gedupliceerde naar "Knop 2". Druk op Shift + F6 om het Vormgeving-venster te openen als het niet open is. Klik met de vorm Knop 2 geselecteerd op de link 3D Revolve in het venster Uiterlijk. Wijzig de waarden in de waarden in de volgende afbeelding.
Ik ontdekte bij het maken van deze tutorial dat de radiale vervaging in Photoshop niet helemaal rond is, dus we moeten hier wat extra stappen doorlopen. Knop 2 kopiëren en plakken vanuit Illustrator naar Photoshop als een slim object. Plaats de afbeelding en pas de grootte aan zodat deze overeenkomt met de volgende afbeelding. De Vector slim-objectlaag rasteren. Selecteer nu elke cirkel van de knop met het cirkelvormige maskergereedschap en druk op Command / Ctrl + J om een nieuwe laag uit de selectie te maken. Ik schilderde de sectie verschillende kleuren alleen ter illustratie. Je zou eindigen met een lagenvenster dat lijkt op dat in de volgende afbeelding.
Selecteer elk deel van de knop en ga in het menu naar Filter> Ruis> Ruis toevoegen. Voer de waarden van de volgende afbeelding in.
Command / Ctrl + klik op de miniatuur van een van de onderdelen om er een selectie van te maken. Pas een radiale vervaging toe door naar Filter> Vervagen> Radiaal vervagen te gaan. Voer de waarden van de volgende afbeelding in. Herhaal deze stap voor de andere drie delen van de knop. U kunt op Command / Ctrl + F drukken om het laatste filter toe te passen dat u hebt gebruikt.
Voeg de vier lagen samen door ze te selecteren en op Command / Ctrl + E te drukken. Hernoem de resulterende laag naar 'knob'.
Je zou met zoiets moeten eindigen.
Ga terug naar Illustrator, kopieer je Knob-vorm (de donkere) en plak deze in je Photoshop-bestand als een slim object. Pas het formaat aan zodat het overeenkomt met je "knobbel" laag. Command / Ctrl + klik op de miniatuur van uw Vector Smart Object-laag om er een selectie van te maken. Klik op de knop 'Nieuwe opvulling of aanpassingslaag maken> Niveaus' onderaan het lagenvenster om een aanpassingslaag voor niveaus toe te voegen. Voer de waarden van de volgende afbeelding in.
Voeg de laag "Niveau 2" en de laag "Vector slim object" samen. Wijzig de overvloeimodus van de resulterende laag in Lichtere kleur en vul naar 16%.
Selecteer de laag "knop" en "Niveaus 2" en druk op Command / Ctrl + E om de twee lagen samen te voegen. Dupliceer de resulterende laag en voeg ze opnieuw samen. Hernoem de laag opnieuw naar "knop". Dupliceer de "knobbel" -laag opnieuw en plaats de gedupliceerde laag onder "knop". Hernoem de gedupliceerde laag naar "Big Shadow". Voeg een slagschaduwstijl toe aan de "Big Shadow" -laag, gevolgd door de volgende afbeelding.
Dubbelklik op de "knobbel" -laag om een Bevel- en Emboss-stijl toe te voegen. Voer de waarden van de volgende afbeelding in.
Laten we nu de nummers op de knop maken.
Ga terug naar Illustrator. Maak een "liniaal" zoals die boven in de volgende afbeelding wordt weergegeven.
Voor de nummers heb ik het Chunk Five-lettertype gebruikt. Open het venster Symbolen (Venster> Symbolen). Sleep de liniaal die u zojuist hebt gemaakt naar het venster Symbolen om er een symbool van te maken. Ga nu naar je Lagen-venster en dupliceer een van de knopvormen die je al had. Hernoem de resulterende laag naar "Knobummers". Selecteer de vorm "Knob-nummers" en open het venster Uiterlijk (Shift + F6). Klik op de link 3D Revolve in het venster Uiterlijk. Klik in het venster 3D Revolve-opties op 'Map Art'. knop. Selecteer in het Map Art-venster oppervlak 5 van 10. Selecteer het symbool met de liniaal die u eerder hebt gemaakt en klik op de knop "Passend maken". Controleer het vakje Onzichtbare geometrie. Klik op OK en je zou eindigen met iets als de knop getoond in de volgende afbeelding.
Laten we nu de lijnen op de knop maken. Het is hetzelfde proces als in de vorige stap. Maak een reeks witte en zwarte lijnen zoals die aan de bovenkant van de volgende afbeelding wordt weergegeven. Open het venster Symbolen (Venster> Symbolen). Sleep de reeks witte en zwarte lijnen die u zojuist hebt gemaakt naar het venster Symbolen om er een symbool van te maken. Ga nu naar je Lagen-venster en dupliceer een van de knopvormen die je al had. Hernoem de resulterende laag naar "Knoplijnen". Selecteer de vorm "Knob Lines" en open het venster Uiterlijk (Shift + F6). Klik op de link 3D Revolve in het venster Uiterlijk. Klik in het venster 3D Revolve-opties op de knop "Map Art". Selecteer in het Map Art-venster oppervlak 6 van 10. Selecteer het symbool met de rij regels die u eerder hebt gemaakt en klik op de knop "Passend maken". Controleer het vakje Onzichtbare geometrie. Klik op OK en je zou eindigen met iets als de knop getoond in de volgende afbeelding.
Kopieer de "Knob-nummers" -vorm die u in Illustrator hebt gemaakt en plak deze in Photoshop als een slim object. Pas het formaat aan zoals te zien is in de onderstaande afbeelding. Hernoem het slimme object naar "knobNumbers". Breng een Bebel en Emboss en een Colour Overlay-stijl aan. Voer de waarden van de volgende afbeelding in.
Masseer nu het deel van de "knobNumbers" dat verborgen moet zijn. Om dat te doen, selecteert u de laag "knobNumbers" en drukt u op Command / Ctrl + G om een groep te maken. Hernoem de groep in "numbersGroup." Maak met het gereedschap Cirkelmasker een selectie van de cirkel zoals weergegeven in de volgende afbeelding. Alles buiten die cirkel zal worden verborgen. Als de groep "numbersGroup" is geselecteerd, drukt u op de knop "Laagmasker toevoegen" onder aan het lagenvenster.
Kopieer nu de vorm "Knob Lines" van Illustrator naar Photoshop als een slim object. Formaat wijzigen en op de juiste positie plaatsen. Wijzig de overvloeimodus in Vermenigvuldigen en de vulling naar 8%. Hernoem het slimme object in "lijnen".
Voor deze zelfstudie heb ik ook een stempel in Illustrator gemaakt. U kunt degene die ik heb gemaakt gebruiken, die bij deze zelfstudie wordt geleverd, of u kunt uw eigen maken. Kopieer de stempel van Illustrator naar Photoshop als een laag Shape en hernoem die in "stamp". Een schuine rand en reliëfstijl toepassen met de waarden van de volgende afbeelding. Ik draaide de stempel een beetje om het er natuurlijker uit te laten zien.
Dupliceer de knoplaag en verplaats de gedupliceerde over alle andere lagen. Dubbelklik erop om een verloopoverlay toe te voegen met de waarden van de volgende afbeelding. Wijzig de vulling in 0%. Hernoem de laag in "glans".
Nu voegen we wat textuur toe aan de knop. Dupliceer de "glanslaag" en hernoem de gedupliceerde laag in "textuur". Verwijder de vorige stijlen en voeg een patroonoverlaystijl toe. Gebruik hetzelfde gekrast metaalpatroon dat we in het begin op de achtergrond gebruikten. Nu begint de knop er echter uit te zien, maar is nog steeds een beetje plat.
Laten we de buitenste ring van de knop donkerder maken. Maak een selectie van de buitenste ring. Druk op de knop "Nieuwe vul- of aanpassingslaag maken" onder aan het venster Lagen en selecteer Verloop toewijzen.
Voer de waarden in die in de volgende afbeelding worden getoond.
Maak met het maskergereedschap de selectie in de volgende afbeelding.
Druk nu op de knop "Nieuwe vul- of aanpassingslaag maken" onder aan het venster Lagen en selecteer "Kleurtoon / verzadiging." Voer de waarden van de volgende afbeelding in het venster Aanpassing in en verander de overvloeiing van de laag naar Vermenigvuldigen. aanpassingslaag om een innerlijke schaduw toe te voegen met de instellingen van de volgende afbeelding.
Met de aanpassingslaag geselecteerd, druk je op Command / Ctrl + G om een groep te maken met de laag erin. Hernoem de groep in "mainKnobShadow." Met "mainKnobShadow" geselecteerd, druk je op de knop "Laagmasker toevoegen" onderaan het lagenvenster. Selecteer met het laagmasker van de "mainKnob Shadow" -groep het gereedschap Verloop en maak een lineaire verticale verloop met wit aan de onderkant en zwart bovenop.
Om een beetje van de scherpte van de schaduw te verwijderen, selecteert u het masker van de aanpassingslaag in de "mainKnob Shadow" -groep. Ga naar het menu en selecteer Filter> Vervagen> Gaussiaans vervagen. Voer de waarden van de volgende afbeelding in en klik op OK.
Maak met de Ellipse Tool een cirkel zoals in de volgende afbeelding. De kleur maakt niet uit.
Hernoem de vorm in "innerCircle". Met de laag "innerCircle" geselecteerd, drukt u op Command / Ctrl + G om een groep te maken. Hernoem de groep om te "markeren".
Verander de Fill van de "innerCircle" in 0%. Dubbelklik erop om een Inner Shadow en een Outer Glow-stijl toe te voegen aan de laag "innerCircle". Voer de waarden van de volgende afbeelding in. Selecteer de "highlight" -groep en druk op de knop "Laagmasker toevoegen" onderaan het lagenvenster. Zorg ervoor dat het laagmasker dat u zojuist hebt gemaakt is geselecteerd en maak met het verloopgereedschap een verticaal verloop met wit bovenaan en zwart aan de onderkant.
Command / Ctrl + Klik op de vectormaskerminiatuur van de "innerCircle" -laag om een selectie te maken van het lichtere deel van de knop. Druk nu op de knop "Nieuwe vul- of aanpassingslaag maken" onder aan het venster Lagen en selecteer "Niveaus". Voer de waarden van de volgende afbeelding in het aanpassingsvenster in. Druk op de Shift-toets om alle lagen van de knop te selecteren en druk op Command / Ctrl + G om er een groep uit te maken. Hernoem de groep tot "KNOP".
Laten we nu de gepixeleerde rand onderaan repareren. Maak een cirkelvormlaag die precies zo groot is als het lichtere deel van de knop bovenop alle andere knoplagen, binnen de "KNOP" -groep. Hernoem de vormlaag naar "fix". Voeg een Slagschaduwstijl toe en voer de waarden van de volgende afbeelding in. Verander de vulling in 0%.
Maak met het pengereedschap een driehoekje boven aan de knop, over de "fixeerlaag". Wijzig de overvloeimodus in Overlay en de Fill naar 50%. Hernoem de laag in "triangle."
Laten we nu het toetsenbord maken. We zullen één knop maken, deze herhalen en dan wat structuur en licht toevoegen. Maak een afgeronde rechthoekvorm met een hoekradius van 3 px. Voeg een slagschaduw- en afschuinings- en reliëfstijl toe. Voer de waarden van de volgende afbeelding in. Hernoem de vormlaag naar "a". Met de "a" -laag geselecteerd, drukt u op Command / Ctrl + G om een groep te maken. Hernoem de groep naar "1"
Dupliceer de "a" -laag en hernoem de gedupliceerde vormlaag naar "b". Voeg de volgende opties toe voor Slagschaduw, Binnenschaduw, Afgeschuind en Reliëf en Kleuroverlay tot de vorm van de "b" laag.
Maak met het gereedschap Rechthoekige vorm een rechthoek die iets kleiner is dan de afgeronde rechthoek. Verplaats het een paar pixels naar boven en voeg een slagschaduwstijl toe met de waarden van de volgende afbeelding. Hernoem de rechthoek naar "c".
Dupliceer de "c" vormlaag en hernoem de gedupliceerde laag naar "d". Verander de kleur in 5f5f5f. Voeg de volgende stijlen toe: Slagschaduw, Inner Shadow, Inner Glow, Bevel and Emboss en Gradient Overlay. Voer de waarden van de volgende afbeelding in.
Maak een cirkelvorm gecentreerd in de kleinere rechthoek. Hernoem de cirkel naar "e." Volg de volgende afbeelding om een slagschaduw, buitengloed, binnengloed en verloopoverlay toe te voegen. Zorg ervoor dat de vulling is ingesteld op 0%.
Dupliceer de "d" vormlaag, plaats de gedupliceerde laag bovenop de "e" laag en hernoem het in "f." Voeg een innerlijke schaduw toe en een overlaystijl met een verloop. Voer de waarden van de volgende afbeelding in. Zorg ervoor dat de vulling van de laag is ingesteld op 0%.
Selecteer het tekstgereedschap en schrijf het nummer 1 over de "f" -laag; dubbelklik erop om een afschuining en reliëf en een kleuroverlay-stijl toe te voegen zoals getoond in de volgende afbeelding. Verander de vulling in 0%. En we hebben de eerste sleutel afgemaakt.
Je hebt gelijk, we hoeven niet al die stappen te doen om de andere sleutels te maken. Laat de map "1" dupliceren, hernoem de mappen en verander de teksten. Selecteer alle nummergroepen en druk op Command / Ctrl + G om er een groep van te maken. Hernoem het naar "toetsenbord".
Laten we nu wat textuur aan de toetsen toevoegen. Selecteer de groep "Toetsenblok" en sleep deze naar de knop "Nieuwe laag maken" onderaan het lagenvenster om het te dupliceren. Druk op Command / Ctrl + E om de gedupliceerde groep samen te voegen. Hernoem de resulterende laag naar "textuur" en plaats deze in de groep "Toetsenbord" bovenop alle andere lagen. Pas een Pattern Overlay-stijl toe, gevolgd door de onderstaande afbeelding.
Laten we beginnen met het scherm. Maak een afgeronde zwarte rechthoek met een hoekradius van 3 px. Hernoem het naar "displayBg". Breng de volgende slagschaduw, buitenste gloed en afschuining en reliëf aan. Voer de waarden van de volgende afbeelding in.
Maak een map over de laag "displayBg" en noem deze "OPEN Groep". De naam van het lettertype dat we op het scherm zullen gebruiken is Digital Dream Narrow. Selecteer de teksttool. Zorg ervoor dat uw tekst links uitgelijnd is en schrijf 888888 met afmeting a van 25 px en kleur 1e1e1e. Stel de overvloeimodus in op Luminosity. Dupliceer de laag en verander de 8s in Xs. Dupliceer de laag 'XXXXXX' en schrijf 'OPEN'. Verander de kleur van de tekst in 73854d. Stel de overvloeimodus in op Normaal. Voeg een Outer Glow en Inner Glow-stijl toe aan de laag "OPEN" met de waarden van de volgende afbeelding.
Dupliceer de groep "Groep openen". Verplaats de nieuwe groep naar rechts en hernoem deze in "GESLOTEN Groep". Open de "GESLOTEN Groep" en verander de "OPEN" tekst in "GESLOTEN". Verberg de "OPEN" tekst binnen de "OPEN Groep".
Dupliceer de groep "GESLOTEN Groep". Verplaats de nieuwe groep naar de bovenkant en hernoem deze in 'Numbers'. Wijzig de grootte van de drie teksten in 46 px. Voeg vier extra XS toe aan de laag "XXXXXX". Voeg nog eens vier 8s toe aan de laag "888888". Wijzig de tekst "GESLOTEN" in een willekeurig nummer.
Dupliceer de laag "displayBg". Hernoem de gedupliceerde laag naar "groen" en dubbelklik erop om een verloopoverlay-stijl toe te voegen. Voer de waarden van de volgende afbeelding in. Met de "groene" laag geselecteerd, drukt u op Command / Ctrl + G om een groep te maken. Hernoem de groep in "Groene groep". Als de "Groene groep" is geselecteerd, drukt u op de knop "Laagmasker toevoegen" onder aan het lagenvenster. Creëer een lineair diagonaal verloop op het laagmasker van de "Groene groep", wit bovenaan - rechts en zwart onderaan - links.
Dupliceer de "Groene" laag. Wijzig de naam van de gedupliceerde laag in "Bevel" en verplaats deze over de groep "Numbers". Verwijder de vorige stijlen van de laag. Pas de stijlen Inner Shadow, Inner Glow, Bevel en Emboss en Color Overlay toe die in de volgende afbeelding worden weergegeven. En we zijn klaar met het display.
We zullen nu de lichten maken. Laten we beginnen met het maken van een groep met de naam "ledGreen" boven de "Display" -groep. Maak een andere groep met de naam "metalRing" in de "ledGreen" -groep. Creëer een ronde vormlaag in de "metalRing" -groep en voeg de stijlen Slagschaduw en Gradiëntoverlay toe zoals getoond in de volgende afbeelding.
Dupliceer de laag in de "metalRing" -groep. Verwijder de vorige stijlen en pas de stijl Gradient Overlay toe die wordt weergegeven in de volgende afbeelding.
Maak nu een nieuwe groep met de naam "light" boven de "metalRing" -groep. Maak in de "lichte" groep een cirkelvormige vorm die kleiner is dan de metalen ring. Voeg een schaduwschaduw, binnengloed, kleuroverlay, verloopoverlay en lijnstijl toe volgens de onderstaande afbeelding. Hernoem de vormlaag naar "verloop".
Laten we nu een patroon maken voor het glas van het licht. Maak een document van 4 bij 4 px met een witte achtergrond. Verf de 4 pixels links boven en de 4 pixels rechtsonder met zwart, net als een dambord. Ga naar het menu en druk op "Bewerken / Patroon definiëren", geef een naam aan het patroon en druk op OK. U kunt dit document nu sluiten; u hoeft het niet op te slaan.
Ga terug naar uw kluisbox-interfacedocument. Dupliceer uw "verlooplaag" en hernoem de gedupliceerde laag in "licht". Voeg een schaduwschaduw, kleuroverlay, verloopoverlay en patroonoverlay toe zoals in de volgende afbeelding.
Dupliceer de groep "ledGreen". Verplaats het naar rechts en hernoem het naar "ledRed".
Open het "licht" binnen de "ledRed" -groep en verberg de "lichte" vormlaag even.
Verwijder alle stijlen van de laag met de "verlooplaag", behalve de binnenste schaduw en de overlay met kleurovergang. Als u de stijlen wilt verwijderen, sleept u ze naar de prullenbak onder aan het venster Lagen. Dubbelklik over de Overlay Gradient en sleep de schuifregelaar Dekking naar 100%.
Onthul de "lichte" vormlaag opnieuw en verwijder de kleuroverlay-stijl. Dubbelklik erop en voeg een slagschaduw en buitenstijl toe. Voer de waarden van de volgende afbeelding in. We zijn nu klaar met de lichten.
En tot slot zullen we een luidspreker maken zodat uw kluis een raar geluid kan maken als u de verkeerde code invoert :-). Open de meshPattern. jpg-afbeelding geprofileerd met deze tutorial. Ga naar het menu en klik op Bewerken> Patroon definiëren. Sluit de meshPattern.jpg en ga terug naar uw interface.
Maak een cirkelvorm aan de rechterkant van het rode licht en pas de volgende stijlen toe op de afbeelding hieronder. Slagschaduw, binnenschaduw, buitengloed, binnengloed, afschuinen en reliëf en patroonoverlay. Hernoem de laag naar "Speaker".
Verplaats de "Luidspreker" onder de "ledRed" -groep.
Accentsconagua