Share
In deze tutorial ontwerpen we een slanke en schone interface voor MP3-spelers. Het proces omvat veel handmatige tekening en veel laagstijlen. Laten we beginnen!
De volgende items zijn gebruikt tijdens het maken van deze zelfstudie.
Laten we beginnen met het creëren van een achtergrond voor onze mp3-speler. Trek een radiaal verloop van wit naar grijs.
Maak het verloop donkerder door Aanpassingslaag tint / verzadiging toe te voegen. Reduceer de instelling Lichtheid.
Maak een nieuwe laag en vul deze met wit. Zorg ervoor dat je wit en zwart hebt als voorgrond en achtergrond door op D te drukken. Klik op Filter> Ruis> Ruis toevoegen. Stel Distributie in op Uniform en selecteer Monochroom.
Wijzig de overvloeimodus van de laag in Vermenigvuldigen.
Dupliceer de laag door op Command / Ctrl + J te drukken. Laag omkeren door op Ctrl + I te drukken. Verplaats laag 1 px naar links en 1 px naar beneden door de verplaatsing van het gereedschap te activeren en druk dan op de linkerpijl en vervolgens op de pijl omlaag. Wijzig mengmodus naar scherm.
Plaats beide ruislagen in een groepsmap en verminder de dekking tot 50%.
Maak een afgeronde rechthoek op het canvas. Gebruik # 3b484f als zijn kleur. Voeg de volgende laagstijlen toe.
Teken een kleinere afgeronde rechthoek. Voeg de volgende laagstijlen toe.
Voeg een kleine afgeronde rechthoek toe. We gebruiken het als een container voor de albumhoes. Voeg de volgende laagstijlen toe.
Plak een afbeelding bovenop de afgeronde rechthoek. Druk op Command / Ctrl + Alt + G om het naar het uitknipmasker te converteren en in de afgeronde rechthoek te plaatsen.
Voeg artiesteninformatie, albumnaam en het jaar onder de albumhoes toe.
Op de optiebalk moet u de beste Anti-aliasing-methoden selecteren om een wazig uiterlijk te voorkomen. Ik kan niet zeggen welke beter is, omdat het anders is voor elk lettertype en elke lettergrootte. Je moet met elke instelling experimenteren. Zoals je hieronder kunt zien, werkt in dit geval None het beste.
Teken een afgeronde rechthoek. Voeg de volgende laagstijlen toe.
Maak een nieuwe laag. Verf wit met een zachte borstel (hardheid: 0%) met een lage dekking (10-15%). Dit voegt een subtiele lichtbron toe onder de equalizer.
Selecteer lijngereedschap en stel het gewicht in op 1 px.
Teken een witte lijn in de equalizer. Activeer de zoomtool en klik een paar keer om in te zoomen naar de maximale weergave. We moeten ervoor zorgen dat de lijn niet wazig is. Zoals je hieronder kunt zien, is er aan beide uiteinden van de lijn een wazige vlek.
Er zijn twee manieren om deze wazigheid op te lossen. Eerst moeten we de grootte afronden. Ten tweede is het bepalen van de plaatsing.
Druk op Command / Ctrl + T om de lijn te transformeren. Klik met de rechtermuisknop op Breedte (W) en selecteer pixels. Doe hetzelfde in hoogte (H) doos.
We moeten de grootte afronden. In dit geval moeten we 11,97 px wijzigen in 12 px.
Laten we vervolgens de positie ervan bepalen. Selecteer lijnvorm met gereedschapspad. Druk op de pijltjestoets om zijn positie te bepalen. Doe dit totdat we geen wazige vlek hebben.
Dupliceer en transformeer de regel door op Command / Ctrl + Alt + T te drukken. Verplaats hem naar boven met 3 px?
Herhaal het duplicatie- en transformatieproces door op Command / Ctrl + Shift + Alt + T te drukken.
Selecteer alle regels, dupliceer deze en plaats deze rechts. Vergeet niet om het scherp te houden. Zorg ervoor dat de positie perfect is om onscherpe plekken te voorkomen.
Herhaal dit proces totdat we enkele kolommen van 1 px hoogtelijnen hebben.
Wis enkele van de regels tot we een natuurlijke vorm van equalizer krijgen. Voeg de volgende laagstijlen toe. Vulling instellen op 0%.
Voeg de naam van de artiest, de titel van het nummer en de totale speelduur bovenop de equalizer toe. Ik gebruik hier de LCD-telefoon met het lettertype. De anti-aliased methode die hier wordt gebruikt, is Geen.
Hieronder ziet u het resultaat met elke anti-aliased methode.
Voeg meer tekst toe voor meer informatie op de bovenkant van het LCD-scherm. Gebruik het potlood om een kleine zwarte lijn van 1 px te tekenen die elke tekst scheidt. Wis beide uiteinden van deze lijnen.
Raak Command / Ctrl + 1 aan. Laten we een stap terug doen en het resultaat zien dat we tot nu toe in 100% -weergave hebben. Dit is belangrijk om ervoor te zorgen dat er geen wazige plekken in ons ontwerp zijn.
Teken een kleine, afgeronde rechthoek voor de knop.
Nogmaals, we moeten de grootte en positie controleren om onscherpe plekken te voorkomen. Raak Command / Ctrl + T aan en zorg ervoor dat je de grootte afrondt.
Zorg ervoor dat je de positie ervan controleert, we willen geen onscherpe randen zien.
Voeg de volgende laagstijlen toe.
Teken een zwarte driehoek bovenop de knop. Voeg slagschaduw toe met de volgende instellingen.
Herhaal het proces om meer knoppen te maken.
Maak een knopachtergrond gemaakt van twee overlappende afgeronde rechthoeken. Voeg de volgende laagstijlen toe.
Laten we een stap terug doen en het ontwerp in een 100% -weergave bekijken. We moeten ervoor zorgen dat er geen wazige plekken zijn.
Maak een lange afgeronde rechthoek. Voeg de volgende laagstijlen toe.
Dupliceer de laagvorm die we zojuist hebben gemaakt en voeg deze laagstijlen toe.
Breng een laag masker aan. Selecteer de helft van de vorm en vul deze met zwart.
Momenteel worden laagstijlen toegepast op het laagmasker en voegen ze een afgeronde vorm toe aan het rechteruiteinde van de vorm. Als u dit wilt verwijderen, activeert u Laagmasker verberg effecten in het dialoogvenster Laagstijl.
U ziet het verschil hieronder. Het effect van de laagstijl wordt nu verborgen door het laagmasker.
Maak een grotere, afgeronde rechthoek achter de tijdindicator voor de achtergrond ervan. Voeg deze laagstijl toe.
Maak een nieuwe laag bovenop de achtergrond van de tijdindicator. Verf wat hooglicht en schaduw. U kunt de voortgang zien die ik hieronder heb gemaakt.
Maak een afgeronde rechthoek en plaats deze op de goede kant achter de hoofdvorm. Voeg de volgende laagstijlen toe.
Maak een nieuwe laag bovenop de afgeronde rechthoekvorm. Verf wat hoogtepunten en schaduwen.
Maak een aantal driehoeken en plaats ze aan de rechterkant van de vorm. Voeg de volgende laagstijl toe.
Gebruik potlood om twee lijnen van 1 px te tekenen, zwart en wit. Zet de dekking op 10%.
Voeg een laagmasker toe en schilder sommige delen van de lijn met zwart. Hieronder ziet u het masker dat hier wordt gebruikt.
Teken een afgeronde rechthoek en voeg de volgende laagstijlen toe. Vullaag instellen op 0%.
Voeg titels van nummers toe. Stel een van de nummers in op vetjes om aan te geven dat het een actief nummer is.
Voeg slagschaduw toe om het een insekt effect te geven.
Teken een afgeronde rechthoek. Voeg de volgende laagstijlen toe en stel de vullaag in op 0%.
Maak een plusteken gemaakt van twee overlappende lijnvormen. Zet Fill op 0% en voeg deze laagstijlen toe.
Herhaal het proces om andere knoppen te maken.
Dubbele basisvorm van de afspeellijst. Druk op Command / Ctrl + T, klik met de rechtermuisknop en kies Horizontaal spiegelen. Verplaats het naar de linkerkant.
Teken een dunne afgeronde rechthoek en voeg deze laagstijlen toe.
Maak een kleine afgeronde rechthoek voor de schuifregelaar. Voeg de volgende laagstijlen toe.
Deze laagstijlen zijn nog steeds niet genoeg om een overtuigende 3D-weergave te krijgen. Met behulp van de potloodtool moeten we een lijndetail van 1 px toevoegen aan de schuifregelaar. Zie de afbeelding hieronder voor referentie.
Laten we een stap terug doen en het resultaat in een weergave van 100% zien.
Schilder enkele zwarte strepen achter de schuifregelaar.
Laten we label "VOLUME" toevoegen voor de schuifregelaar. Het gebruikte lettertype is Digital-7. Voeg slagschaduw toe.
Maak een andere schuifregelaar door de vorige schuifregelaar te dupliceren en het label te wijzigen.
Laten we ons nu richten op het creëren van de balansschuifregelaar, omdat dit een beetje anders is. Voeg meer ruimte toe tussen de schuifregelaar en het label. Verwijder strepen achter de schuifregelaar. Gebruik potlood om afwisselend 1 px zwart en witte lijn te tekenen. Zet de laagdekking op 10%.
Voeg aan beide kanten plus (+) en minteken (-) toe en voeg slagschaduw toe.
Druk op Command / Ctrl + 1 om het resultaat te zien in een weergave van 100%.
Ons ontwerp is gewoon te schoon en onnatuurlijk. Om dit op te lossen, voegen we enkele hoogtepunten toe. Teken een witte lijn van 1 px met potlood. Wis beide uiteinden.
Herhaal dit proces om nog een aantal hoogtepunten te maken.
Houd Command / Ctrl ingedrukt en klik op de basisvorm, de vorm van de afspeellijst en de vorm van de spelerinstellingen om een nieuwe selectie te maken op basis van de vorm van de mp3-speler. Druk een paar keer op de pijl-omlaag om de selectie lager te zetten.
Maak een nieuwe laag onder alle andere lagen. Vul selectie met zwart. Presst Command / Ctrl + Shift + I om de selectie ongedaan te maken. Maak de schaduw zachter door het filter Gaussiaans vervagen toe te voegen.
Laten we reflectie op het oppervlak van de mp3-speler toevoegen. Kopieer het schermpad (1). Klik op het pictogram Aanpassingslaag en selecteer Effen kleur. U kunt hier elke kleur gebruiken. Maak een ander pad dat het bovenste deel van het scherm bedekt en stel dit in op Intersect (2). Dekking wijzigen in 2% en vullen in 0%.
Nu maken we een nieuwe reflectie op de buitenkant van het hoofdvenster. Maak een nieuw pad dat het bovenste gedeelte van het hoofdvenster bedekt (1). Klik op het pictogram Aanpassingslaag en selecteer Effen kleur. Trek het af van het schermvormpad (2). Snijd het door het pad van het hoofdvenster (3).
Zet Dekking op 23% en vul op 0%. Voeg de volgende laagstijlen toe.
Hieronder ziet u het verschil met en zonder reflectie.
Vervolgens voegen we reflectie toe aan het linker- en rechtervenster. Kopieer het linker en rechter vensterpad, stel hun modus in op Toevoegen (1). Klik op het pictogram Aanpassingslaag en selecteer Effen kleur. Trek het pad af van het hoofdvenster (2). Maak een nieuw pad dat het bovenste gedeelte van de interface bedekt en plaats dit in Intersect (3).
Zet dekking op tot 10% en vul 0%.
Hieronder kunt u het verschil met en zonder reflectie. Heel subtiel maar het geeft meer diepte aan de vorm.
Zet alle vormen en lagen die de mp3-speler maken in een groepsmap. Dupliceer de groep en verplaats het linker- en rechtervenster totdat ze zijn gesloten.
We hebben geprobeerd elke pixel op de interface te verscherpen, maar we moeten hem nog steeds verscherpen. Maak een nieuwe laag bovenop alle lagen. Druk op Command / Ctrl + Shift + Alt + E om alle zichtbare lagen samen te voegen. Nu hebben we exact duplicaat van de afbeelding in één enkele laag.
Klik op Filter> Verscherpen> Onscherp masker. Dit filter verscherpt alle pixels in de laag.
Accentsconagua