Share
Gladde ontwerpen vormen een belangrijk onderdeel van een succesvolle iPad-interface. In deze tutorial zullen we uitleggen hoe je een mooie GUI kunt maken voor een Audio / DJ iPad-applicatie in Photoshop. Laten we beginnen!
Maak een nieuw bestand. Stel Breedte in op 768 en Hoogte op 1024 en de resolutie op 132 PPI.
Maak een nieuwe groep en noem deze achtergrond. Open Leather Texture van Tommaso Nervegna, bouw een rastersysteem op zoals in het voorbeeld, door het canvas in tweeën te splitsen op de horizontale en in 3 op de verticale. Pas de grootte van de textuur aan de ene van de 6 vormen aan en dupliceer deze nog 5 keer zodat we elke textuur kunnen vullen.
Voeg alle 6 lagen samen die we eerder hebben gemaakt en pas een verloopoverlay toe vanuit het venster Layerstijl. Centreer het verloop net over het midden van het canvas precies zoals in het voorbeeld en onze achtergrond is voltooid. Ga door met lezen om meer stappen te doen.
Maak een nieuwe groep en noem deze Platter. Gebruik nu Ellipse Tool (U) Maak een perfecte cirkel (513x513 px), verminder het vulniveau naar 0 en pas de laagstijlen uit het voorbeeld toe. U zou een resultaat moeten krijgen dat vergelijkbaar is met dat onderaan het voorbeeld.
Nu geven we de vorm een lichte slag. Gebruik Penseel (B) om de grootte in te stellen op 300 en de hardheid, zet de voorgrondkleur op # 01f5f5 en maak een stip zoals in het voorbeeld. Stel de overvloeimodus voor de laag in op Overlay.
Gebruik Ellipse Tool (U) om nog een perfecte cirkel te maken (483x483 px), zet de voorgrond op # 111111 en pas een Outer Glow toe, met behulp van de instellingen uit het voorbeeld.
Gebruik opnieuw Ellipse Tool (U) om nog een perfecte cirkel te maken (481x481 px) maar maak deze een met 2 px kleiner dan de vorige. Zet de voorgrondkleur op # 00a2ff en pas de Laagstijlen van mijn voorbeeld toe.
Maak een nieuwe cirkel met Ellipse Tool (U) zet de voorgrondkleur op # c2c2c2, maak deze 10 px kleiner dan onze vorige (471x471 px) en pas een lijn toe vanuit het paneel Laagstijlen met behulp van de instellingen uit het voorbeeld.
In deze stap zullen we enkele vormen maken om de Platter meer diepte te geven. Gebruik Pengereedschap (P) om een vorm te tekenen zoals in het voorbeeld. Maak het rond de 64 px breedte en 55 hoogte, zet de voorgrondkleur op # 000000 dan dupliceer het om een cirkel uit de vormen te bouwen en pas de Gradient Overlay toe op elke vorm, verander de hoekoriëntatie enigszins terwijl je van de ene naar de andere vorm gaat om het een meer dynamische schaduw te geven, in dit geval biedt het ons meer diepgang. Groepeer al deze vormen en gebruik Ellipse Tool (U) om een perfecte cirkel (467x467 px) boven deze groep te maken. Breng de miniatuur van het vectormasker over van de cirkel die we naar de groep vormen hebben gemaakt en verwijder de cirkel.
Gebruik Ellipse Tool (U) om nog een perfecte cirkel te tekenen (469x469 px), verminder het vulniveau tot 0 en pas de laagstijlen toe in het voorbeeld.
Gebruik Pengereedschap (P) om een vorm te tekenen, net zoals in het voorbeeld. Maak het rond (425x425 px), zet de voorgrondkleur op # 8d8a8a en pas de overlay met verloop toe met de instellingen in het voorbeeld.
Grijp Ellipse Tool (U) en maak een perfecte cirkel (405x405 px), zet de voorgrondkleur op # 232323 en pas de Layer Styles toe uit het voorbeeld.
Dupliceer de vorige cirkel, verminder het vulniveau tot 0 en pas de laagstijlen toe.
Gebruik Ellipse Tool (U) om een perfecte cirkel te maken (160x160 px), verminder het vulniveau tot 0 en pas een 1 px, zwarte (# 000000) streek toe vanuit het paneel Layerstijl. Dupliceer deze laag nu en verklein hem om het een paar pixels kleiner te maken dan de laag vóór hem totdat je een resultaat krijgt zoals in het voorbeeld.
Selecteer alle lagen, voeg ze samen in een slim object en stel het vulniveau in op 10%. Dupliceer dit slimme object nog 4 keer en plaats de duplicaten op de aangegeven plaatsen in de voorbeeldafbeelding en stel de vulkleur in op 5%.
Maak een nieuwe groep en geef deze een naam als Configuratiescherm. Gebruik Pengereedschap (P) om te tekenen naar vormen zoals in het voorbeeld, één aan de linkerkant en een andere aan de rechterkant van de schijf. Maak de vormen rond 300 px en. De voorgrond is niet belangrijk omdat we een textuur bovenop de vorm zullen toevoegen en de vorm alleen als basis voor onze houten textuur zullen gebruiken. Nadat u de vormen hebt getekend, past u de laagstijlen toe in het voorbeeld.
Open en importeer de Wood Texture van Matthew Skiles en plaats een laag bovenop de linker en rechter basisvorm die we voor het configuratiescherm hebben gebruikt. Transformeer de textuurlagen in uitknipmaskers en ga naar de volgende stap.
Gebruik Pengereedschap (P) om 2 gelijkaardige vormen te tekenen met de vorige, maar een beetje kleiner. Verlaag het vulniveau naar 0 en pas de laagstijlen toe.
In deze stap zullen we de aanwijspijlen maken. Gebruik Pengereedschap (P) om 2 vormen te tekenen zoals in het voorbeeld. Zet de voorgrondkleur op # 000000 en pas de Laagstijlen toe.
Tekst toevoegen met behulp van Horizontal Type Tool (T). Gebruik Tahoma> Vetgedrukt als een lettertype, stel het formaat in op 6 en schrijf onder de linkerpijl "- (haakje) REV" en onder de rechterpijl "+ (haakje) FWD" en pas zowel een slagschaduweffect uit de Laagstijlen toe paneel met behulp van de instellingen uit het voorbeeld.
Nu om wat tekst toe te voegen aan het linkerdeelvenster, dat onze Equalizer wordt. Stel het gereedschap Horizontale lettergrootte (T) in op 4 px, lettertype op Arial> Smal en noteer "10hz 20hz 40hz 80hz 1khz 2khz 3 khz 4khz 5khz 6khz" en pas het effect Slagschaduw toe waarbij de instellingen uit het voorbeeld behouden blijven.
Gebruik het gereedschap Afgeronde rechthoek (U) om de straal in te stellen op 2 px en om 10 vormen te tekenen zoals in het voorbeeld. De voorgrondkleur voor de vormen is # 000000. Stel de overvloeimodus voor de lagen in op Zacht licht en pas de laagstijlen uit het voorbeeld toe.
Nu zullen we de EQ-knoppen gebruiken. Gebruik het gereedschap Afgeronde rechthoek (U) om de straal in te stellen op 5 px en de voorgrondkleur op #ffffff en teken 10 vormen zoals in het voorbeeld. Maak ze ongeveer 30 px hoog en 20 breed. Pas de laagstijlen toe en ga naar de volgende stap.
Met behulp van Horizontal Type Tool (T) zullen we enkele intensiteitsindicatoren invoegen. Als u Tahoma gebruikt> Normaal als een lettertype, noteert u met 6 px als lettergrootte en voorgrondkleur op #ffffff een reeks "..." zoals in het voorbeeld. Zet nu het lettertype op Vetgedrukt en bewaar de vorige instellingen, en noteer, binnen de rode cirkels die u op het voorbeeld ziet, dezelfde volgorde "-", "0", "+" en pas de Laagstijlen toe op alle tekstlagen die we in deze stap hebben gedaan.
Laten we nu naar het rechter paneel gaan. Hier zullen we onze pitch-bediening en verschillende andere knoppen hebben. Gebruik het gereedschap Afgeronde rechthoek (U) om de straal in te stellen op 2 px en teken een vorm zoals in het voorbeeld, pas daarna een afschuining- en reliëfstijl toe vanuit het paneel Lagenstijlen, met behulp van de instellingen in het voorbeeld.
Nu gebruiken we het gereedschap Rechthoek (U) en we tekenen indicatorkleuren aan beide zijden van de vorm die we in de vorige stap hebben gedaan. Zet de voorgrondkleur op # 00ffff en teken een reeks rechthoekige vormen, net zoals in het voorbeeld. Houd een patroon in gedachten en maak bij het tekenen één 22 bij 2 px rechthoekige vorm, teken dan 4 18 px bij 1 px vormen enzovoort totdat je bij de onderkant van de vorm komt. Wanneer u klaar bent met het tekenen van de vormen, selecteert u ze allemaal en voegt u ze samen in een slim object en past u de laagstijlen toe die in het voorbeeld zijn aangegeven. Dupliceer vervolgens het slimme object en spiegel het aan de andere kant van de pitchdia.
Laten we nu de Tempo-knop maken. Gebruik het gereedschap Afgeronde rechthoek (U) om de straal in te stellen op 5 px en een vorm te tekenen zoals in de afbeelding. Maak het rond de 45 px x 55 px en zet de voorgrondkleur op #bdbdb, daarna pas je de Layer Styles toe zoals te zien in het voorbeeld.
Gebruik Afgeronde rechthoekige tool (U) met de straal ingesteld op 5 px en maak een vorm zoals in het voorbeeld. Zet de kleur op #dbdbdb en pas de laagstijlen toe.
Neem het gereedschap Rechthoek (U) op en teken 3 witte #ffffff-vormen zoals in het voorbeeld. Over hen teken nog 3 vormen, dezelfde grootte als de vorige, behalve alle 3 op een pixel hoger dan de witte. Zet de voorgrondkleuren voor deze laatste 3 vormen op # 545353 en ga naar de volgende stap.
Gebruik Ellipse Tool (U) om 2 perfecte cirkels aan de linkerkant van onze applicatie te tekenen, net onder het EQ-bedieningspaneel. Maak de vormen rond de 89 px x 89 px en stel het vulniveau in op 0. Pas de laagstijlen toe zoals te zien in het voorbeeld en lees de volgende stap verder.
Maak nog 2 cirkels met Ellipse Tool (U), deze keer een paar pixels kleiner, zet de voorgrondkleur op # 0a0a0a en pas de Layer Styles toe.
Gebruik Ellipse Tool (U) om 2 kleine cirkels te maken, zoals de vormen in het voorbeeld, stel het vulniveau in op 0 en pas de laagstijlen toe.
Nu om wat tekst en symbolen toe te voegen. Stel op de linkerknop met behulp van Horizontal Type Tool (T) het lettertype in op Calibri> Bold en de tekengrootte op 8 px en noteer in het midden van de knop "/". Voor de rechterknop met dezelfde instellingen noteer "CUE". Teken nu met Rechthoek Tool (U) 2 rechthoeken zoals die in het voorbeeld, aan de rechterkant van de "/" en aan de linkerkant, gebruik Pengereedschap (P) om een driehoek te tekenen zoals in het voorbeeld. Pas de laagstijl toe op alle tekst- en vormlagen die we in deze stap hebben gedaan.
In deze stap zullen we wat interessantere knoppen maken. Gebruik het gereedschap Afgeronde rechthoek (U) om de straal in te stellen op 10 px en om 7 vierkante vormen te tekenen, zoals in het voorbeeld, en maak ze rond de 53 px bij 53 px. Zet de voorgrondkleur op # 000000, verminder het vulniveau tot 10% en pas de laagstijlen toe.
Nu gaan we de knoppen voor de normale modus maken. Gebruik het gereedschap Afgeronde rechthoek (U) en teken slechts 5 vormen, zoals in het voorbeeld is aangegeven, stel de voorgrondkleur in op # 0a0a0a en pas de laagstijlen toe.
Gebruik het gereedschap Rechthoek (U) om de voorgrondkleur in te stellen op #ffffff en rechthoekvormen te tekenen zoals in het voorbeeld. Gebruik nu Pengereedschap (P) om de voorgrondkleur op #ffffff te houden en teken driehoekige vormen zoals in het voorbeeld. Neem het gereedschap Horizontal Type (T) op en noteer op dezelfde plaatsen als in het voorbeeld de woorden "PLAYLIST", "POWER", "EJECT", "TRACK SEARCH", "SEARCH". Wanneer u klaar bent, past u het effect Slagschaduw toe op alle lagen die we in deze stap hebben gebruikt.
Maak een paar rechthoekige vormen, net zoals die in het voorbeeld met behulp van het gereedschap Rechthoek (U) en pas de laagstijl toe. Zorg ervoor dat ze 1 px breed zijn.
Nu om de actieve knoppen te maken. Gebruik het gereedschap Afgeronde rechthoek (U) en zet de straal op 10 px en teken 2 vormen zoals in het voorbeeld. Zet de voorgrondkleur op # 0a0a0a en pas de laagstijlen toe.
Selecteer Pen Tool (P) en teken 2 driehoeken zoals in het voorbeeld. Zet de voorgrondkleur op #ffffff en pas de Layer Style toe.
Nu om de USB-stekker te trekken. Gebruik het gereedschap Afgeronde rechthoek (U) en zet de straal op 10 px en teken een vorm boven de knop Playlist. Maak dezelfde grootte als de basis voor de afspeellijst. Stel het vulniveau in op 10 en pas de laagstijlen toe.
Gebruik Penseel (B) om het formaat in te stellen op 36 en de hardheid op 0 en maak een kleine zwarte # 000000 punt zoals in het voorbeeld. Gebruik nu het Rechthoekige selectiekader (M) om een selectie te maken zoals die in het voorbeeld en verwijder deze. Nu zal onze punt een schaduw worden. Pas het effect Slagschaduw toe op de puntlaag en gebruik het gereedschap Pen (P) om een vorm te tekenen, net zoals in het voorbeeld. Zet de voorgrondkleur op # 000000 en pas de laagstijlen toe.
Selecteer Penseelgereedschap (B) opnieuw en stel het penseel in op 49 px en de hardheid op 70% en maak een zwarte # 000000 punt zoals in het voorbeeld. Gebruik Rechthoekig selectiekadergereedschap (M) om een selectie te maken zoals die in het voorbeeld en verwijder dat deel. Zet het dekkingsniveau op 40% en dupliceer de laag. Verplaats de gedupliceerde laag 1 px naar links en druk op CMD / CTRL + I (omkeren) en zet de dekking voor deze laatste laag op 10%.
Nu om de snelheidsknoppen te tekenen. Gebruik Rectangle Tool (U) om 2 witte #ffffff-lijnen te tekenen zoals in het voorbeeld, schakel vervolgens over naar Ellipse Tool (U) en teken 3 cirkels zoals in het voorbeeld. Stel het vulniveau voor alle vormen in op 0 en pas de laagstijlen toe.
Gebruik Ellipse Tool (U) om 3 cirkels te tekenen, in de vorige 3 cirkels, maar deze keer een beetje kleiner. Dit vertegenwoordigt de knop zelf. Zet de voorgrondkleur op # 0a0a0a voor de middelste knop, dit is onze actieve toestandsknop en pas de Laagstijlen toe uit het voorbeeld.
Zet de voorgrondkleur op # 0a0a0a voor zowel de linker- als de rechterknop, dit is de inactieve status voor de knoppen en pas de laagstijlen toe.
Gebruik Ellipse Tool (U) om 2 kleine cirkels te maken zoals in het voorbeeld, stel het vulniveau in op 0 en pas de laagstijlen toe.
Nu om tekst toe te voegen. Gebruik het gereedschap Horizontale tekst (T) om in het midden van elke knop op te schrijven, van links naar rechts de cijfers "1", "2", "3" en pas de laagstijlen op elke laag toe.
Gebruik het gereedschap Afgeronde rechthoek (U) om de straal in te stellen op 10 px en teken 3 vormen zoals die in het voorbeeld aan de rechterkant. Verlaag het vulniveau tot 10% en pas de laagstijlen toe.
Maak nu een andere vorm met het gereedschap Afgeronde rechthoek (U), waarbij de straal op 10 px blijft maar de vorm kleiner wordt zodat deze bij de vorige past. Zet de voorgrondkleur op # 000000 en pas de Laagstijlen toe.
Teken nog 2 vormen met het gereedschap Afgeronde rechthoek (U), met de straal ingesteld op 10 px, zoals te zien in het voorbeeld, zet de voorgrondkleur op # 000000 en het vulniveau op 10% en pas de laagstijlen toe.
Nu om de actieve toestand te maken. Gebruik het gereedschap Afgeronde rechthoek (U) en zet de straal op 10 px en teken 3 vormen zoals in het voorbeeld. Pas de laagstijlen alleen toe op de bovenste vorm, want dat is onze actieve toestandsknop.
Pas nu, voor de normale status, de Layer-stijlen toe zoals te zien in het voorbeeld van de knoppen.
Tekst toevoegen. Stel met Horizontaal tekstgereedschap (T) het lettertype in op Tahoma> Normaal en de lettergrootte op 6 px en noteer onder elke knop de tekst BPM LOCK, VINIL, RESET TEMPO en pas het effect Slagschaduw toe toe. voor alle tekstlagen.
Gebruik het gereedschap Aangepaste vorm (U) en voer de pijl 18 in uit de pijlen en plaats deze in het midden van de laatste knop. Got to Edit> Transform> Scale en plaats een min in de Set a horizontal scale input, pas daarna het Slagschaduweffect toe, waarbij de instellingen in het voorbeeld behouden blijven.
Gebruik het Custom Shape Tool (U) om het "NEE" -teken in te voegen bij Symbolen en plaats het in het midden van de eerste knop. Hetzelfde als de vorige vorm, ga naar Bewerken> Transformeren> Schaal en plaats een minteken in de Invoer een horizontale schaalinvoer, pas daarna het Slagschaduweffect toe, waarbij de instellingen in het voorbeeld behouden blijven.
Nu om enkele actieve indicatoren te creëren. Gebruik Ellipse Tool (U) om een paar kleine cirkels te tekenen zoals in het voorbeeld. Zet de voorgrondkleur op # 00c52e voor de indicator van de aan / uit-knop en voor de rest, zet deze op # 007dc5 en pas de laagstijlen toe.
Gebruik het gereedschap Afgeronde rechthoek (U) om de straal in te stellen op 4 px en een vorm te tekenen zoals in het voorbeeld. Zet de voorgrondkleur op # 000000 en pas de slagschaduw toe. Pak Rounded Rectangle Tool (U) op, houd dezelfde instellingen aan en teken een andere vorm, maar deze keer een beetje kleiner. Zet de voorgrondkleur op # 000000 en pas de Laagstijlen toe.
Laten we nu de Album Art Holder maken. Gebruik het gereedschap Rechthoek (U) om een rechthoekige vorm te tekenen zoals in het voorbeeld, stel de voorgrondkleur in op # 00fbff en pas de laagstijlen toe. Open en plaats nu elke albumhoes die je leuk vindt. Mijn keuze was Chase en Status, Album "More Than Alot". Verander de albumkunstlaag in een uitknipmasker. Gebruik nu Pengereedschap (P) om een vorm te tekenen zoals in het voorbeeld. Voeg een laagmasker toe en gebruik het met een middelgroot penseel om het masker zwart te maken met kleur # 000000 om een resultaat te krijgen zoals in het voorbeeld. Zet het dekkingsniveau op 20% en ga verder met onze volgende stap.
Ga naar Digital Dream Font en importeer het in Photoshop. Selecteer Horizontal Type Tool (T), zet het lettertype op Digital Dream Fat Skew Narrow en de lettergrootte op 12 px en noteer "Chase & Status", "More than Alot" met wit #ffffff als voorgrondkleur. Bewaar het lettertype, maar verander de grootte van 12 px naar 14 px en schrijf op de maat linksonder, zoals te zien in het voorbeeld de woorden "Pieces - (prestatieplan B)" en aan de rechterkant van onze display "00 00 00 "2 keer en verminder het dekkingsniveau voor deze 2 tekstlagen naar 10 px. Houd nu dezelfde instellingen vast en noteer "02:13. 33" en "04:49. 02" precies zoals in het voorbeeld. Pas het effect Outergloed op alle tekstlagen toe.
Gebruik Pengereedschap (P) om een vorm te tekenen zoals in het voorbeeld, voeg er een laagmasker aan toe en gebruik een zwarte # 000000 middelgrote penseel, ontwijk zodat we een vloeiende overgang krijgen van wit #ffffff naar de informatie onder deze laag. Stel de overvloeimodus voor deze laag in op uitsluiting en het vulniveau op 7%.
Gebruik Pengereedschap (P) om 2 vormen te tekenen zoals in het voorbeeld. Stel het vulniveau in op 0 en pas de laagstijlen toe. Converteer vervolgens elke vorm in een slim object. U zult merken dat de Gradien is veranderd. Voeg laagmaskers toe aan beide slimme objecten en borstel het onderste gedeelte weg met een middelzwart # 000000-penseel.
Selecteer gereedschap Pen (P) en teken 2-vorm, zoals die in het voorbeeld. Zet de voorgrondkleur op # 0c0c0c en pas de Layer Style toe.
Gebruik het gereedschap Rechthoek (U) om een reeks rechthoekige vormen te maken zoals die in het voorbeeld. Zet de voorgrondkleur op #ffffff voor iedereen en groepeer ze opzij EX: "linkerkant groep EQ". Verander de groepen in slimme objecten en ga naar Bewerken> Transformeren> Verdraaien. Trek aan de hoeken om een vergelijkbaar resultaat te krijgen als in het voorbeeld en verminder het vulniveau tot 10%.
Dupliceer de Smart Obkects van onze vorige stap. Stel het vulniveau in op 100% en pas de laagstijlen toe. Gebruik nu het gereedschap Polygonal Lasso (L) om 2 selecties te maken zoals die in het voorbeeld en voeg een laagmasker toe aan elk slim object.
Gebruik Pengereedschap (P) om 2 vormen te tekenen zoals in het voorbeeld. Zet de voorgrondkleur op #ffffff, voeg een laagmasker toe en veeg de onderkant weg met een mediumzwart # 000000 penseel, zoals te zien in het voorbeeld. Verlaag het vulniveau tot 20% en pas de laagstijl toe. Selecteer Pen Tool (P) en teken #ffffff een witte vorm zoals in het voorbeeld. Ga naar Filer> Vervagen> Bewegingsonscherpte en stel de Afstand tot 40 en de Hoek in op 0. Verlaag de dekking naar 30% en we zijn klaar.
Je kunt rond spelen, nieuwe elementen maken, kleuren veranderen en vorm geven. Experiment! Dit was altijd de sleutel tot leren. Ik hoop dat je deze tutorial leuk vond. Bedankt voor het lezen!
Accentsconagua