Share
Lassen Sie uns ein stimmungsvolles UI-Element bauen. Wir verwenden Photoshop, um subtile Texturen zu erkunden und ein großartig aussehendes Lautstärkeregler zusammenzustellen. Lass uns gehen!
Öffnen Sie ein neues RGB-Dokument mit einer Größe von 800 x 600 Pixel und einer Auflösung von 72 dpi.
Wählen Sie eine stimmungsvolle dunkelblaue Farbe für den Hintergrund (in diesem Fall lautet der Farbcode # 1b1c20), und füllen Sie dann den Hintergrund mit dem Farbeimer-Werkzeug aus.
Wenden Sie ein wenig Rauschen auf den Hintergrund an, um ihm eine weiche Textur zu geben (1% Gaußsches Rauschen und monochromatisch)..
Überprüfen Sie nun den Quell-Download. Dort finden Sie eine Pattern-Datei, die Sie zur Installation in Photoshop doppelklicken müssen. Wenden Sie das Muster auf eine neue Ebene an und füllen Sie die gesamte Ebene mit dem Muster.
Stellen Sie die Deckkraft für die Musterüberlagerung je nach Ihren Wünschen auf 15-20% ein, um etwa Folgendes zu erhalten:
Erstellen Sie eine neue Gruppe mit dem Namen "button" und fügen Sie eine Kreisform hinzu (tun Sie dies, indem Sie das Werkzeug für elliptische Form auswählen und die Umschalttaste gedrückt halten, damit sie perfekt kreisförmig wird). Geben Sie ihm eine lebendige Farbe, damit Sie die Ebene deutlich weiter unten sehen können?
Ändern Sie die Deckkraft der Füllung der Ebene auf 0% und wenden Sie einen Schatten mit den folgenden Eigenschaften an:
Wenden Sie dann einen leichten inneren Schatten an, damit dieser eingerückt erscheint.
Danach einen inneren Glanz anwenden, damit die Basis voll aussieht.
Machen Sie für den nächsten Schritt einen weiteren Kreis und geben Sie ihm eine weiße Farbe. Dies ist die Grundform unseres UI-Elements. Es wird für ein paar weitere Detailebenen verwendet. Nennen Sie es "button_base" oder ähnliches.
Wenden Sie eine abgewinkelte Verlaufsüberlagerung an, beginnen Sie mit Weiß und fügen Sie zwei hellgraue Stops hinzu. Verwenden Sie die zwei weißen Stopps in der Mitte, um mit der Schärfe der Schaltfläche zu spielen. Sehen Sie sich während der Arbeit eine Vorschau des Elements an, um zu sehen, wie es wirkt.
Wenden Sie eine Abschrägung und eine Prägung auf die Basis an, damit sie ein wenig dreidimensional aussieht.
Nun zu den Details. Erstellen Sie eine Kopie der Basisebene und legen Sie sie unter der Schaltflächenbasis ab. Drehen Sie nun die Füllung auf 0%, um nur die Filter anzuzeigen, die Sie auf diese Ebene anwenden, und nicht den Inhalt. Erstellen Sie einen Schatten mit den folgenden Einstellungen:
Damit die Schaltfläche noch ein wenig herausspringt, kopieren Sie die Tastenbasis erneut, und platzieren Sie sie unter der Tastenbasis und über der Schattierung. Geben Sie ihm eine dunkle Farbüberlagerung, damit er fantastisch aussieht.
Erstellen Sie nun eine weitere Kopie der Button-Basisebene, aber wandeln Sie sie in eine größere Größe um. Legen Sie es auf die Basisebene der Schaltfläche und rastern Sie sie!
Wenn dies erledigt ist, gehen Sie in das Filterfeld und geben Sie einen maximalen Rauschfilter (Sie denken also, Sie schauen auf einen kaputten Fernseher).
Wenden Sie dann einen Radial Blur-Filter an und setzen Sie ihn auf den Maximalwert, um einen schönen Effekt zu erzielen.
Sie sollten die Deckkraft dieser Ebene auf etwa 20-40% reduzieren und dann die Mitte mit der Schaltfläche zentrieren. Wenn Sie es in der Mitte haben, wählen Sie die Schaltflächenebene aus und wählen Sie> Umkehren. Wählen Sie dann die Kratzschicht aus und drücken Sie die Löschtaste. Sie sollten einen schönen verkratzten Effekt auf der Schaltfläche haben.
Um zu überprüfen, dass wir alles in Ordnung tun, sollten Sie etwas Ähnliches haben:
Machen Sie einen kleinen Kreis für die Kerbe (oder den Indikator) auf der Schaltfläche.
Geben Sie ihm einen weißen Schatten, um ihm ein geprägtes Aussehen zu verleihen.
Geben Sie der Kerbe einen kleinen inneren Schatten.
Und erwecken Sie es schließlich mit einer Farbe Ihrer Wahl zum Leben.
Sie sollten so etwas haben:
Nun lasst uns in die letzten kleinen Details einsteigen! Machen Sie ein kleines Rechteck für die Kerben in der Basis der Schaltfläche.
Drehen Sie die Füllung wieder auf 0% und geben Sie einen weißen Schatten an.
Es muss auch innen etwas schattiert werden, so dass ein kleiner innerer Schatten entsteht.
Kopieren Sie es jetzt und drehen Sie es auf die andere Seite.
Geben Sie Ihren Textinhalt dort mit einer Schriftart Ihrer Wahl ein (ich habe mich für Myriad Pro entschieden)..
Wenden Sie einen Schlagschatten auf den Text an, damit er eingerückt erscheint.
Dann einen leichten inneren Schatten auftragen.
Dies sollte das sein, was Sie in Ihrer Datei sehen:
Und dies ist unser abschließendes UI-Element, ein einfacher Lautstärkeregler zum Aufpumpen der Musik!
Ich hoffe, dass Ihnen dieses Tutorial gefallen hat, es wird das erste von vielen sein, also folgen Sie mir auf Twitter oder abonnieren Sie den Newsletter meiner Website. Viel Spaß beim Entwerfen und cool bleiben!
Accentsconagua