Share
Heute zeige ich Ihnen, wie Sie in Photoshop einen etwas anderen, aber sehr hübschen Button entwerfen. Obwohl es ziemlich einfach aussehen mag, fehlt es an anderen Knöpfen; Es ist eine Dropdown-Schaltfläche. Bereit? Auf geht's!
Starten Sie Photoshop. Erstellen Sie ein neues Dokument. Ich verwende ein Dokument im Format 600x350px.
Wählen Sie das "abgerundete Rechteckwerkzeug" aus und verwenden Sie einen Radius von 2. Dies gibt dem Knopf ein scharfes Aussehen mit einer sauberen runden Kante. Wie groß Sie sich dafür entscheiden, spielt keine Rolle. Stellen Sie jedoch sicher, dass Sie sie nicht zu groß haben, da sie am Ende falsch aussehen könnte. Mein Button hat eine Breite von 104px und eine Höhe von 30px.
Jetzt fügen wir der Schaltfläche ein wenig Stil hinzu. Wir beginnen mit der "Verlaufsüberlagerung", um ihr eine gewisse Dimension zu verleihen. Hier ist die Einstellung, die wir verwenden werden:
Fahren Sie fort, um einen "Strich" hinzuzufügen. Wir müssen ihm eine Art Rahmen geben, um ihn hervorzuheben. Verwenden Sie diese Einstellungen und die Farbe # F8F8F8, um das Popup zu aktivieren.
Jetzt fügen wir ein "Inner Glow" hinzu, um den Button etwas zu polieren. Verwenden Sie diese Einstellungen:
Nachdem Sie ein wenig Text hinzugefügt haben, sollte der Button so aussehen:
Werfen wir einen Blick auf die blaue Dropdown-Registerkarte. Dieser Schritt ist komplizierter, da wir das "Stift-Werkzeug" verwenden, um die Form ein wenig anzupassen. Wenn Sie mit dem "Stiftwerkzeug" nicht vertraut sind, lesen Sie es sorgfältig, damit Sie nichts verpassen.
Sie können entweder die Schaltflächenebene kopieren oder eine neue Ebene erstellen. Ich werde eine neue Ebene mit dem gleichen Werkzeug wie zuvor erstellen (Werkzeug für abgerundetes Rechteck). Diesmal sollte es jedoch etwas kleiner sein als zuvor, vorzugsweise nicht breiter als 100px, da sich diese Form unter dem Knopf selbst befinden soll. Füllen Sie diese Ebene mit der Farbe # 57A0FA. Folgendes sollten Sie jetzt haben:
Gehen wir weiter zum "Stiftwerkzeug" und passen Sie die Form etwas an. Stellen Sie sicher, dass Sie das "Ankerpunkt-Werkzeug hinzufügen" verwenden, und wählen Sie die Ebene aus. Um es für Anfänger einfacher zu machen, benutze ich Guides, um die Platzierung genau richtig zu machen. Sie möchten sicherstellen, dass sich eine Führung in der Mitte der Schaltfläche befindet. Platzieren Sie dann auf jeder Seite eine zusätzliche Führung. So sollte es aussehen:
Jetzt vergrößern und mit dem "Ankerpunkt-Werkzeug hinzufügen" die aktuellste Ebene auswählen und die Ankerpunkte an den Hilfslinien platzieren. Schnappen Sie sich den mittleren Anker und ziehen Sie ihn auf die gewünschte Größe. Nur wenige Pixel reichen aus, um einen subtilen Effekt zu erzielen.
Um die Dropdown-Registerkarte noch schöner zu gestalten, fügen wir ein Loch hinzu (bleiben Sie gezoomt, da Sie leichter erkennen können, wo das Loch platziert werden soll). Klicken Sie dazu auf der zuletzt erstellten Ebene auf "Ebenenmaske hinzufügen" und wählen Sie das "Elliptical Marquee Tool", um eine Auswahl zu treffen. Drücken Sie die Rücktaste und löschen Sie diesen Teil von der Registerkarte. So sollte es aussehen.
Damit die Registerkarte hübsch aussieht und mit der Schaltfläche übereinstimmt, werden wir jetzt etwas Stil hinzufügen. Beginnen Sie mit dem "Strich" und verwenden Sie diese Einstellungen:
Gehen Sie weiter zum "Inner Shadow" und verwenden Sie die folgenden Einstellungen, um den Tab ein wenig aufzuräumen und etwas Tiefe in die Registerkarte zu bringen:
Wenn alles richtig gemacht wurde, sollten Sie ein Ergebnis haben, das so aussieht. Wenn nicht, müssen Sie etwas falsch gemacht haben!
Um die Dropdown-Liste "Schwebeflug" zu erstellen, duplizieren Sie einfach den Normalzustand, erhöhen Sie die Höhe und verwenden Sie dieselben Techniken wie zuvor. Fügen Sie etwas Text hinzu und Sie sind fertig!
Hier sehen Sie, wie der Dropdown-Button in verschiedenen Farben aussieht!
Schnell und unkompliziert, ich hoffe, Ihnen hat dieser Design-Schnelltipp gefallen!
Accentsconagua