Share
Lernen Sie die Schritte zur Erstellung professioneller Oberflächen kennen, vom Entwurf bis zur detaillierten Beschreibung der Erstellung der einzelnen Elemente. Alle hier beschriebenen Techniken sind nicht schwer zu verstehen. Sie zeigen jedoch, wie Sie Ihren Oberflächenentwurfsprojekten ein professionelles Aussehen verleihen.
Erstellen Sie mit dem Rechteckwerkzeug (M) das Rechteck mit der Größe 1024 x 768 px. Die obige Größe passt auf einen iPad-Bildschirm.
Wenn Sie mit Schnittstellen arbeiten, wird empfohlen, dass alle erstellten Elemente in ihrem natürlichen Maßstab sind. Die obige Skala soll es uns ermöglichen, extrem scharfe Grafiken zu erstellen, ohne dass zusätzliche Elemente erstellt werden müssen.
Jetzt erstellen wir den Hintergrund Ihrer Schnittstelle. Der im ersten Schritt unseres Projekts erstellte Hintergrund soll die korrekte Auswahl der anderen Elementfarben ermöglichen. Füllen Sie den Hintergrund mit einem grauen bis dunkelgrauen Farbverlauf, wenn sich der Farbverlauf unter dem Hintergrund befindet.
Öffnen Sie das Erscheinungsbildfenster und fügen Sie eine neue Füllung hinzu, wobei ein grauer bis dunkelgrauer Verlauf darauf angewendet wird. Der dunkelgraue Schieberegler eines solchen Farbverlaufs soll eine Deckkraft von 0% haben. Suchen Sie den Mittelpunkt über dem Hintergrund.
Fügen Sie die neue Füllung im Bedienfeld „Aussehen“ als dunkelgraue Farbe hinzu
Wählen Sie es aus und gehen Sie zu Effekt> Künstlerisch> Schwamm. Stellen Sie nun die Parameter des Effekts ein, der in der folgenden Abbildung gezeigt wird.
Setzen Sie den Überlagerungs-Mischmodus für eine solche Füllung auf 80% Deckkraft.
Lassen Sie uns nun über die Anordnung der Oberflächenelemente nachdenken. Bevor Sie dies tun, müssen Sie die ähnlichen vorhandenen Schnittstellen untersuchen und deren Funktionsmerkmale verstehen. Darüber hinaus müssen die genannten Elemente in einer für die Benutzer günstigen Weise angeordnet sein.
Die Hauptelemente einer DJ-App sind die Vinyl Record-Plattenspieler. Erstellen Sie mit dem Ellipse-Werkzeug (L) zwei Umfänge gleicher Größe. Um die Oberflächenelemente symmetrisch zu lokalisieren, müssen mehrere Richtlinien erstellt werden.
Einige Schlüsselvarianten wurden von mir angewendet, bevor ich meine Wahl traf (siehe Abbildung unten).
Wenn Sie versuchen, die Schnittstelle auf einer natürlichen Skala zu erstellen, haben Sie die Möglichkeit, Ihre Hand auf den Monitorbildschirm zu legen, um zu prüfen, ob die zu erstellenden Elemente bequem positioniert sind. Abgesehen von der günstigen Lage sollte Ihre Benutzeroberfläche schön aussehen.
Die Symmetrie gilt als Ihr zuverlässiger Partner, um die gesetzten Ziele zu erreichen. Wählen Sie die Tasten im linken Teil der Benutzeroberfläche aus und gehen Sie zu Objekt> Transformieren> Spiegeln…. Wählen Sie dann die Option Vertikal und drücken Sie im Dialogfeld die Taste Kopieren.
Bewegen Sie nun den Umfang zum rechten Teil der Schnittstelle.
Verwenden Sie das Rechteckwerkzeug (M), um die Schieberegler der Indikatoren und die Positionen anderer Tasten zu markieren.
Nun können Sie mit der Erstellung von Oberflächenelementen fortfahren.
Füllen Sie den in den obigen Schritten erstellten Umfang mit einer schwarzen Farbe.
Kopieren Sie einen solchen Umfang und fügen Sie ihn vorne ein (Befehlstaste + C; Befehlstaste + F), füllen Sie die Kopie mit einer grauen Farbe und verringern Sie den Durchmesser um 3 px.
Erstellen Sie den neuen Umfang und füllen Sie ihn mit einem vertikalen linearen Farbverlauf, der aus zwei grauen Farbtönen besteht. Und die grundlegende Plattenspielerform wird erstellt.
Lassen Sie uns nun die Vertiefungen auf der Seitenfläche des Drehtellers erstellen. Benutze das Ellipse-Werkzeug (L), um eine Ellipse zu zeichnen.
Ziehen Sie diese Ellipse in das Pinselbedienfeld und speichern Sie den neuen Pinsel als Musterpinsel.
Erstellen Sie den ungefüllten Umfang mit einer zufälligen Farbe.
Tragen Sie den im vorherigen Schritt erstellten Pinsel auf den Umfang auf.
Ändern Sie die Parameter des Musterpinsels. Klicken Sie dazu zweimal im Pinselfenster auf das entsprechende Bild. Stellen Sie die neuen Parameter in der Dialogbox nach dem Fortschritt der Änderungen ein.
Wenn Sie den Umfang wie ausgewählt belassen, gehen Sie zu Objekt> Aussehen erweitern. Jetzt haben die Vertiefungen auf dem Plattenteller separate Elemente.
Füllen Sie jedes Objekt mit einem radialen Verlauf aus schwarzen und weißen Farben.
Die Zentren der Farbverläufe müssen wie abgebildet aus den Objekten heraus verschoben werden.
Lassen Sie uns die abgenutzten Stellen rund um die Vertiefungen auf dem Plattenteller erstellen. Kopieren Sie alle diese Einrückungen und fügen Sie sie hinten ein (Befehl + C; Befehl + B). Füllen Sie sie mit einer grauen Farbe (die Sichtbarkeit der oberen Objekte muss deaktiviert sein).
Wechseln Sie bei ausgewählten Objekten zu Objekt> Weichzeichnen> Gaußsche Weichzeichnung, und legen Sie den Radiuswert im Dialogfeld fest.
Die Position der Gradienten innerhalb solcher Einzüge steht für die Lichtrichtung. In meinem Fall ist das Licht nach unten und nach rechts gerichtet. Lassen Sie uns das Licht und Schatten auf dem Plattenteller erstellen. Erstellen Sie den neuen Umfang, sofern er den Plattenteller vollständig bedeckt. Füllen Sie diesen Umfang mit dem radialen weißen bis grauen Farbverlauf.
Stellen Sie den Modus "Multiplizieren" für den Umfang im Transparenzfenster ein.
Erstellen Sie den neuen Umfang mit einer schwarzen Farbe.
Nun erstellen wir den Umfang, der mit einem konischen Verlauf gefüllt werden soll. Für die Zwecke dieses Projekts sollten die meisten Objekte eine ähnliche Füllung haben. Daher wird empfohlen, diesen Prozess im Detail zu lernen. Erstellen Sie das Rechteck, das mit einem linearen Farbverlauf gefüllt werden soll.
Die Rechteckgröße und die Verlaufsfarben können vorerst auf beliebige Werte eingestellt werden. Die einzige Bedingung, die erfüllt werden muss: Die ersten und letzten Schieberegler des Farbverlaufs sollten dieselbe Farbe haben. Erstellen Sie den Umfang und füllen Sie ihn mit einem radialen weißen bis grauen Farbverlauf.
Lassen Sie den Umfang wie ausgewählt, gehen Sie zu Objekt> Erweitern… und wählen Sie im Dialogfeld die Option Verlaufsgitter.
Gehen Sie jetzt zu Objekt> Schnittmaske> Freigeben
Dann gehe zu Objekt> Pfad> Aufräumen ...
… Und Gruppieren Sie das Verlaufsgitterobjekt auf.
Wählen Sie das mit dem linearen Farbverlauf und dem Verlaufsgitterobjekt gefüllte Rechteck aus. Wenden Sie nun Objekt> Umschlagverzerrung> Mit oberstem Objekt erstellen an.
So entsteht der konische Gradient; Mal sehen, wie man es kontrolliert. Um den Bearbeitungsmodus auszuwählen, drücken Sie die Taste Inhalt bearbeiten in der Steuerleiste.
Nun können Sie den konischen Gradienten anpassen, ebenso den linearen. Erstellen Sie den linearen Verlauf ähnlich dem in der folgenden Abbildung gezeigten.
Erstellen Sie den Umfang, wählen Sie das Objekt mit dem konischen Verlauf zusammen mit dem genannten Umfang aus und gehen Sie zu Objekt> Schnittmaske> Erstellen, oder verwenden Sie die Tastenkombination Befehl + 7
Erstellen Sie mithilfe der obigen Technik ein weiteres Objekt, das mit einem konischen Verlauf gefüllt ist.
Sie können das vorhandene Objekt, das mit dem konischen Farbverlauf gefüllt ist, duplizieren und die neuen Einstellungen dafür vornehmen, indem Sie die Position und Farbe des Schiebereglers für den linearen Farbverlauf ändern. In meinem Fall habe ich zwei dunkelblaue und zwei dunkelgelbe Schieberegler hinzugefügt.
Lassen Sie uns die Audiospuren der Aufnahmeoberfläche erstellen. Erstellen Sie zwei ungefüllte Umfänge, wobei der Strich dunkelgrau ist.
Lassen Sie die Umrisse ausgewählt, gehen Sie zu Object> Blend> Make und dann zu Object> Blend> Blend-Optionen… und legen Sie schließlich die Anzahl der angegebenen Schritte fest.
Gehen Sie jetzt zu Objekt> Überblenden> Erweitern. Einige Tracks auswählen und löschen.
Wählen Sie die Gruppe bestehend aus Audiospuren aus und stellen Sie im Transparenzbedienfeld den Modus „Überlagerungsüberblendung“ ein.
Lassen Sie uns die Blendung der Plattenoberfläche erzeugen. Erstellen Sie zwei Umfänge, die mit dem radialen Schwarz-Weiß-Verlauf gefüllt sind, und legen Sie im Transparenzfenster den Modus für den Bildschirmfüllmodus fest.
Begrenzen Sie die Blendung mit Hilfe einer Schnittmaske.
Erstellen Sie mit dem Ellipse-Werkzeug (L) den mit dunkelgrauer Farbe gefüllten Umfang. Stellen Sie den Überblend-Mischmodus für den Umfang ein.
Der Tonarm muss die radiale Struktur haben. Lernen wir zunächst den Prozess der Erstellung von Anhängen.
Das Aufsatzoberteil muss den Umfang aufnehmen, der mit dem konischen Gefälle gefüllt ist.
Lassen Sie uns nun die Blendungen und Schatten auf der Anbindungsoberfläche erstellen.
Die Blicke und Schatten werden mit Hilfe einer Schnittmaske zurückgehalten.
Lassen Sie uns den Tonarm erstellen. Zeichnen Sie eine Ellipse und duplizieren Sie sie viermal, indem Sie die Alt- und Umschalttaste gedrückt halten, während Sie den horizontalen Versatz anwenden.
Verwenden Sie das Schere-Werkzeug (C), um die Ellipsen, die mit 1, 3 und 5 nummeriert sind, an ihrem oberen und unteren Punkt zu schneiden.
Löschen Sie den linken Teil der Ellipsen.
Verwenden Sie das Zeichenstift-Werkzeug (P), um mit dem Zeichnen der anderen Ellipsenhälften fortzufahren und so die zylindrischen Flächen des Tonarms zu erzeugen.
Halten Sie während des Erstellens die Umschalttaste gedrückt.
Erstellen Sie durch Anwenden der obigen Technik den Tonarmkern.
Um es richtig anzuordnen, füllen Sie die Flächen mit verschiedenen Farben.
Füllen Sie die zylindrischen Flächen mit einem linearen Farbverlauf, der aus Grautönen besteht.
Durch die Anwendung dieses Gradienten müssen wir den metallischen Glanz der Oberfläche erreichen. Die Endflächen müssen mit einer dunkelgrauen Farbe gefüllt sein.
Füllen Sie die Kernoberfläche mit linearen Farbverläufen. Der linke Teil des Kerns soll beleuchtet sein, daher sollte der lineare Gradient einen dunkelroten Schieberegler haben.
Zeichnen Sie die horizontale Linie mit der Umrandung rot.
Wenn Sie die Linie wie ausgewählt belassen, gehen Sie zu Effekt> Weichzeichnen> Gaußsche Weichzeichnung… und legen Sie den Radiuswert im Dialogfeld fest.
Verwenden Sie das Erscheinungsbildbedienfeld, um zwei weitere Striche zu erstellen: rote und rosafarbene. Die Dicke des Endstrichs sollte geringer sein als die vorherigen.
Erstellen Sie die Linie im rechten Kernbereich, indem Sie die obige Technik anwenden. Legen Sie diese Linie als graue Farbe fest.
Lassen Sie uns die Indikatoren im mittleren Bereich des Tonarms erstellen. Erstellen Sie den Umfang, der mit einem radialen Farbverlauf gefüllt werden sollte, der aus einer weißen Farbe und zwei grünen Farbtönen besteht.
Die Hintergrundbeleuchtung des Indikators sollte mit Hilfe zweier sich kreuzender Ellipsen erstellt werden, die mit radialen, Ellipsoid-grünen bis schwarzen Farbverläufen gefüllt sind.
Stellen Sie den Bildschirmfüllmodus für die Ellipsen im Transparenzbedienfeld ein.
Gruppieren Sie alle Elemente des Indikators und duplizieren Sie sie.
Platzieren Sie den Tonarm unter den Befestigungselementen und drehen Sie ihn mit Hilfe des Rotate Tools ®.
Lassen Sie uns den Schatten vom Tonarm erzeugen. Kopieren Sie es und fügen Sie es rückwärts ein (Befehlstaste + C; Befehlstaste + B). Verwenden Sie dann das Drehwerkzeug (R), um es zu drehen, wie in der folgenden Abbildung dargestellt:
Lassen Sie die Gruppe ausgewählt und drücken Sie im Pathfinder-Bedienfeld die Schaltfläche "Unite".
Füllen Sie die Schattenform mit einem schwarzen bis grauen Farbverlauf.
Stellen Sie nun den Overly Blending-Modus für das Objekt ein.
Gehen Sie zu Effekt> Weichzeichnen> Gaußscher Weichzeichner… und legen Sie den Radiuswert im Dialogfeld fest.
Nun sind alle Elemente des Plattentellers fertig. Fahren Sie mit der Gruppierung fort. Duplizieren Sie den Plattenteller und fügen Sie die Kopie im rechten Teil der Benutzeroberfläche ein.
Die Metallknöpfe bestehen aus zwei Umfängen.
Die mit dem konischen Verlauf gefüllte Form befindet sich oben.
Platzieren Sie die Schaltflächen in Bereichen, die im ersten Teil dieses Lernprogramms gezeigt werden.
Lassen Sie uns die Einrückungen unter einigen Schaltflächen erstellen. Verwenden Sie das Stiftwerkzeug (P), um die Linie zwischen den Mittelpunkten der benachbarten Schaltflächen zu zeichnen. Wählen Sie die Strichstärke und stellen Sie die runde Kappe ein. Platzieren Sie diese Linie unter den Schaltflächen.
Lassen Sie das Objekt wie ausgewählt, und wenden Sie dann Objekt> Erweitern an. Kopieren Sie das Formular und fügen Sie es wieder ein (Befehl + C; Befehl + B). Jetzt verschieben wir die Kopie ein wenig nach links und unten.
Kopieren Sie das obere Formular und fügen Sie es vor (Befehl + C; Befehl + F). Wählen Sie das obere und das untere Formular aus und drücken Sie dann die Minus-Front-Taste im Pathfinder-Bedienfeld.
Füllen Sie das Einrückungsformular mit einem linearen Farbverlauf von Weiß nach Grau, und wenden Sie den Modus "Multiplizieren" an.
Die Blendung innerhalb der Formulargrenze sollte mit einer grauen Farbe gefüllt sein.
Erstellen Sie ähnliche Einrückungen in den in der folgenden Abbildung gezeigten Bereichen:
Zeichnen Sie mit dem Stiftwerkzeug (P) die aufrechte Linie mit der runden Kappe.
Gehen Sie zu Objekt> Erweitern. Füllen Sie das Objekt mit dem horizontalen linearen schwarzen bis dunkelgrauen Farbverlauf.
Erstellen Sie eine weitere Füllung im Erscheinungsbildfenster und füllen Sie sie wie gezeigt mit dem vertikalen linearen Farbverlauf:
Wenden Sie den Modus "Multiplizieren" auf die Füllung an.
Verwenden Sie das abgerundete Rechteckwerkzeug, um die Form des Schiebereglers zu erstellen. Füllen Sie dieses Formular mit einem vertikalen linearen Farbverlauf aus, der für die Simulation des Lichtspiels auf den Griffflächen dient.
Erstellen Sie das mit dem linearen Weiß-Schwarz-Verlauf gefüllte Rechteck. Platzieren Sie es unter dem Schieberegler und wenden Sie den Modus "Multiplizieren" an.
Jetzt haben wir die Schattenform des Griffs erstellt.
Lassen Sie uns den leuchtenden Teil des Schiebereglers erstellen. Das in der folgenden Abbildung dargestellte Formular sollte mit einem linearen Verlauf gefüllt werden, der aus zwei schwarzen und einem blauen Schieberegler besteht. Wenden Sie den Screen Blending-Modus auf das genannte Formular an.
Erstellen Sie die anderen Schieberegler der Benutzeroberfläche, indem Sie die obige Technik anwenden.
Lassen Sie uns die Skala so erstellen, dass sie unter den horizontalen Schiebereglern liegt. Verwenden Sie das abgerundete Rechteckwerkzeug, um zwei Formulare zu erstellen (siehe Abbildung unten):
Wählen Sie beide Formulare aus und gehen Sie zu Object> Blend> Make, dann zu Object> Blend> Blend-Optionen… und legen Sie schließlich die Anzahl der angegebenen Schritte fest.
Lassen Sie das Überblendungsobjekt als ausgewählt, und wechseln Sie zu Objekt> Überblenden> Erweitern.
Erstellen Sie das ähnliche Objekt von einer anderen Seite des Schiebereglers, indem Sie die obige Technik anwenden.
Wählen Sie beide Elemente der Skala aus, und wählen Sie Object> Blend> Make aus, dann Object> Blend> Blend-Optionen… und legen Sie schließlich die Anzahl der angegebenen Schritte fest.
Um die Blendung an der Skalenelementkante zu erzeugen, erstellen Sie abgerundete Rechtecke mit einer hellgrauen Farbe, die unter dem ersten und dem letzten Element der Skalierung platziert werden sollte. Wählen Sie die oben genannten Objekte aus und wenden Sie ein Mischwerkzeug an.
Eine ähnliche Skala sollte unterhalb des zweiten horizontalen Schiebereglers erstellt werden.
Das Design des Laseranzeigerkopfes sollte dem Button entsprechen.
Platzieren Sie die verkleinerte Kopie des Kopfes am Punkt der Strahlenausgabe.
Erstellen Sie den Schatten aus dem Indikator mithilfe der Ellipse, die mit dem Grau-Weiß-Farbverlauf gefüllt ist. Wenden Sie jetzt den Multiplikations-Mischmodus auf das Objekt an.
Erstellen Sie den Umfang, der mit dem radialen Rot-Schwarz-Gradienten am Punkt der Strahlenausgabe gefüllt ist. Wenden Sie den Screen Blending-Modus auf den Umfang an.
Verwenden Sie das Stiftwerkzeug (P), um die rechteckige Form über der Seitenfläche des Drehtellers zu erstellen. Füllen Sie dieses Formular mit dem linearen Verlauf aus zwei schwarzen und einem roten Schieberegler. Wenden Sie den Screen Blending-Modus auf das erstellte Objekt an.
Halten Sie den Laserstrahl mithilfe der Schnittmaske mit der Umfangsform und der Größe des Drehtellers fest.
Der Laserstrahl auf der Platte sollte mit Hilfe des Mischobjekts erstellt werden. Die äußere Form des Objekts sollte den verzerrten Umfang haben und eine Deckkraft von 0% haben..
Die innere Form sollte der Umfang sein, der mit einer roten Farbe gefüllt ist, auf die der Screen Blending-Modus und 50% Opacity angewendet werden.
Der Laserstrahl sollte auf die Drehscheibe zentriert werden.
Verwenden Sie das Rechteckwerkzeug (M), um zwei Rechtecke zu erstellen. Die erste sollte eine schwarze Farbfüllung haben, während die zweite mit einem radialen Farbverlauf gefüllt sein sollte, der aus zwei blauen Farbtönen besteht.
Zeichnen Sie eine horizontale Linie mit dem Stiftwerkzeug (P). Die Linie sollte die Stärke 1px haben und blau eingefärbt sein.
Lassen Sie die Linie wie ausgewählt, gehen Sie zu Effect> Stylize> Scribble… und stellen Sie die in der folgenden Abbildung gezeigten Effektparameter ein.
Gehen Sie nun zu Effekt> Verzerrung und Transformation> Zickzack… und stellen Sie die unten gezeigten Parameter ein.
Lassen Sie uns eine weitere Schallwelle erzeugen, die über der ersten liegt. Wenden Sie den Screen Blending-Modus an.
Beschränken Sie die Sichtbarkeit der Schallwelle mit Hilfe einer Schnittmaske.
Erstellen Sie einen ähnlichen Indikator über dem rechten Plattenteller. Es ist zu bevorzugen, dass die Parameter der Effekte, die auf den zweiten Indikator angewendet werden, geringfügig abweichen.
Die Schallwelle hat ein einzigartiges Erscheinungsbild, insbesondere wenn die verschiedenen Spuren wiedergegeben werden.
Erstellen Sie das mit einer schwarzen Farbe gefüllte Rechteck. Gehen Sie zu Effekt> Stilisieren> Runde Ecken ... und legen Sie den Wert der Radiusrundung im Dialogfeld fest.
Gehen Sie nun zu Effekt> Stilisieren> Äußeres Glühen… und legen Sie die Parameter für den Effekt fest.
Fügen Sie die neue Füllung zum Erscheinungsbildfenster hinzu und füllen Sie sie mit einem vertikalen linearen Farbverlauf.
Wählen Sie diese Füllung im Fenster "Erscheinungsbild" aus, gehen Sie zu "Effekt"> "Pfad"> "Versatzpfad" und legen Sie schließlich den Versatzwert im Dialogfeld fest.
Fügen Sie die neue Verlaufsfüllung zum Erscheinungsbildfenster hinzu, und wechseln Sie zu Effekt> Pfad> Versatzpfad, und legen Sie den Versatzwert im Dialogfeld fest.
Um zu vermeiden, dass die im vorherigen Schritt beschriebenen Prozeduren kontinuierlich wiederholt werden, erstellen Sie den neuen Grafikstil.
Nun können wir den besagten Stil auf die Elemente mit beliebiger Form anwenden.
Die Symbole auf den Schaltflächen sollten mit Hilfe von einfachen Formularen erstellt werden, die Werkzeuge wie das Rechteckwerkzeug (M) und das Polygonwerkzeug verwenden. Diese Objekte sollten mit linearen oder radialen Farbverläufen gefüllt werden, die aus dunklen Grautönen bestehen.
Um die Blendung der Kanten des Symbols zu erzeugen, kopieren Sie es und fügen Sie es in den Hintergrund ein. Füllen Sie die neuen Formulare mit Weiß und verschieben Sie sie etwas tiefer.
Die Inschriften sollten mit Hilfe des Type Tools (T) erstellt werden. Nach der Eingabe des Befehls Typ> Umriss erstellen müssen Sie die gleichen Verfahren wie für die Symbole ausführen.
Accentsconagua