Erstellen von Schaltflächen für mobile Benutzeroberflächen in Photoshop CS6

Diese Arten von Schaltflächen sind sehr beliebt, insbesondere wenn wir Teile für mobile Schnittstellen herstellen, wie z iPhoneTatsächlich war es dieses Gerät, das diese Art von Tasten enthielt, die wie eine kleine glänzende Plastiklasche aussehen, auf die eine kleine Lichtreflexion trifft.
Um diese Art von Schaltflächen zu bauen, verwenden wir grundlegende Techniken wie rechteckige Formen mit abgerundeten Kanten, die Verwendung von Farbverläufen und die Verwendung von Farbpaletten, um die gewünschten Effekte zu erzielen.
Zuerst müssen wir den Prozess starten, indem wir die Grundform unseres Buttons generieren, dazu folgen wir den folgenden Schritten.
1- Beginnen wir mit der Erstellung von a Vektor geformt wie ein Rechteck mit abgerundeten Kanten und im Ebenenmenü werden wir einen Effekt von . anwenden überlappender Verlauf:

2- Der Farbverlauf muss im oberen Teil eine dunkle Farbe haben und eine Variation der gleichen Farbe, aber im unteren Teil heller sein, das Verhältnis kann unterschiedlich sein 80% dunkel und ein 20% Klarheit.
3- Jetzt müssen wir Ebene duplizieren, dafür können wir die Tastenkombination drücken STRG + JWir tun dies, um den Farbverlauf in der duplizierten Ebene ändern zu können, daher doppelklicken wir nach dem Duplizieren auf den Farbverlaufseffekt.
4- Wir werden den Farbverlauf bearbeiten, indem wir seine Deckkraft auf a . setzen 50% und wir werden die Farben im Hintergrund in Weiß ändern und der hellste Teil wird transparent:
5- Als nächstes müssen wir die Anker löschen, dafür wählen wir die Punktwerkzeug, besteht die Idee darin, die Referenzen der duplizierten Ebene so zu verschieben, dass sie nur etwa ein Drittel der Leinwand bedeckt.
6- Jetzt erstellen wir eine Krümmung am unteren Rand der duplizierten Ebene, dazu verwenden wir das Werkzeug Richtungsauswahl und in der Mitte der Linie erzeugen wir die nötige Bewegung.
7- Wenn wir fertig sind, werden wir die Ebene ändern und die Deckkraft auf ungefähr 65% und den Füllparameter ändern Füllen Wir belassen es bei 0, damit alles Gestalt annimmt.
8- Schließlich können wir ein Bild oder einen Text hinzufügen, dabei müssen wir einen kleinen Schatten platzieren, damit er das Element hervorhebt und wir es mit einer Schaltfläche verknüpfen können:

Wie wir sehen, haben wir einen Button generiert, der denen von mobilen Interfaces sehr ähnlich ist, diese geben uns ein markantes und frisches Erscheinungsbild, das wir in unsere Skizzen und Vorschläge für mobile Interfaces einfließen lassen können, sie werden vor allem verwendet, um Anwendungen darzustellen und Elemente wie diese, nicht für grundlegende Benutzeraktionen, aber jeder kann seine Kreativität nutzen, um ihnen eine Position zu verschaffen.
Damit beenden wir dieses Tutorial, da wir gesehen haben, dass wir mehrere grundlegende Techniken anwenden, um das Endergebnis zu erzielen. Es sollte beachtet werden, dass wir umso schneller sind und diese Elemente mit größerer Sicherheit generieren können, je mehr wir üben.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben