So erstellen Sie 3D-Schaltflächen mit Adobe Photoshop

So erstellen Sie 3D-Schaltflächen mit Adobe Photoshop

Es gibt viele erstaunliche Dinge, in denen du erschaffen kannst Adobe Photoshop die online nützlich sind und von einfachen Bilderrahmen bis hin zu komplexen Benutzeroberflächen reichen. Eines der nützlichsten Dinge, die Sie in Photoshop erstellen können, sind 3D-Schaltflächen, die sich als praktisch erweisen, wenn Sie einen Blog oder eine Website mit einer benutzerdefinierten Benutzeroberfläche betreiben.





In diesem Artikel zeigen wir Ihnen, wie Sie mit Photoshop 3D-Schaltflächen erstellen, zusammen mit visuellen 'Auf'- und 'Ab'-Zuständen, damit Sie sie animieren können. (Wir werden die Animation selbst in diesem Artikel nicht behandeln.)



Schritt 1: Bereiten Sie Ihr Dokument vor

3D-Schaltflächen werden zwar am häufigsten auf Websites angezeigt, es ist jedoch wichtig zu beachten, dass es dafür andere Anwendungen gibt, z. B. animierte GIFs, nachgebaute Produktdisplays und mobile Spiele. Je nachdem, wofür Sie diese Schaltfläche erstellen, können Ihr endgültiges Dateiformat und die Abmessungen davon abweichen.





Um eine 3D-Schaltfläche in Photoshop zu erstellen, müssen Sie ein benutzerdefiniertes Dokument dafür erstellen. Öffnen Sie dazu Photoshop und klicken Sie auf Neu erstellen > Benutzerdefiniert . Beginnen Sie mit der Eingabe Ihrer Werte.

Um eine 3D-Schaltfläche zu erstellen, benötigen Sie ein horizontales Dokument. Für unsere haben wir verwendet:



  • 900 x 300 Pixel hoch
  • 300 Pixel/Zoll
  • RGB-Farbmodus

Obwohl diese Spezifikationen definitiv keine feste Regel sind, stellen Sie sicher, dass Sie mehr als genug Platz zum Arbeiten haben und die Schaltflächengröße nach Bedarf vergrößern oder verkleinern können.

Schritt 2: Richten Sie Ihr Rechteck für Ihre 3D-Schaltfläche ein

Nachdem Sie die Spezifikationen für Ihre Datei eingerichtet haben, werden Sie in Ihren Arbeitsbereich gebracht. Sie haben eine horizontale weiße Leinwand in einer einzigen Ebene, und hier beginnen Sie mit dem Erstellen Ihrer Schaltfläche.



Um Ihre 3D-Schaltfläche zu erstellen, klicken Sie auf das Werkzeug für abgerundetes Rechteck auf der linken Seite Ihres Bildschirms, hier rot dargestellt. Sie können auch die Verknüpfung verwenden U um darauf zuzugreifen.

Klicken Sie einmal auf Ihre weiße Ebene: Dadurch wird automatisch Ihr Abgerundetes Rechteck erstellen Kasten. Sie verwenden dieses Feld, um die Abmessungen Ihres Rechtecks ​​anzugeben.



Für unseren Button haben wir uns für Folgendes entschieden:

  • 300 Pixel breit
  • 75 Pixel hoch

Außerdem haben wir darauf geachtet, dass die Ecken um 10 Pixel abgerundet wurden. Nicht zu hoch und auch nicht zu niedrig. Dann haben wir gedrückt OK .

Notiz: Die Knöpfe variieren je nach Größe und Form, Sie müssen also nicht diese genauen Abmessungen verwenden. Wenn Sie weitere Informationen zu Verknüpfungen suchen, finden Sie hier einige von die nützlichsten Photoshop-Tastaturbefehle .

Wenn du drückst OK , Photoshop erstellt ein abgerundetes Rechteck mit diesen Abmessungen innerhalb Ihrer Ebene. Du kannst es ändern Füllen und Schlaganfall Farben, indem Sie die Dropdown-Menüs in der oberen linken Ecke Ihres Bildschirms verwenden.

Zum Zweck dieses Tutorials --- und um zu veranschaulichen, wie ein „Auf“- und „Ab“-Button aussehen könnte – werden wir unseren „Abwärts“-Button rot machen.

Schritt 3: Machen Sie Ihre Schaltfläche 3D

Nachdem Sie Ihre grundlegende Schaltfläche erstellt und ihre Farbe ausgewählt haben, möchten Sie sie im Ebenenstil Dialogbox. Dies soll es mehr 3D aussehen lassen.

So greifen Sie auf Ihre Ebenenstil Dialogfeld, Sie können gehen Ebene > Ebenenstil aus dem oberen Menü. Sie können auch auf die Ebene doppelklicken, die Ihre Schaltfläche enthält, um sie automatisch anzuzeigen. Dieser Weg ist viel schneller und wir persönlich bevorzugen ihn.

Sobald Ihr Ebenenstil-Feld geöffnet ist, gehen Sie zur Option Abschrägung & Prägung . Mach es an.

Dies ist eine schnelle und einfache Möglichkeit, den Rändern Ihrer Schaltfläche ein erhabeneres „3D“-Aussehen zu verleihen. Für dieses Tutorial haben wir die folgenden Einstellungen verwendet:

Struktur

  • Stil: Innenfase
  • Technik: Meißel weich
  • Tiefe: 605
  • Richtung: Hoch
  • Größe: 5
  • Erweichen: 1

Schattierung

  • Winkel: 90
  • Höhe: 37
  • Highlight-Modus: Color Dodge, 55% Deckkraft
  • Schattenmodus: Mehrfach, 25 % Deckkraft

Der Trick besteht darin, die Einstellungen hoch genug einzustellen, um einen Unterschied zu sehen, aber nicht so stark, dass er überwältigend ist.

Nachdem wir mit Bevel & Emboss fertig waren, gingen wir zu Kontur und habe das auch eingeschaltet. Contour macht die Definition von Bevel & Emboss etwas stärker, und für dieses Tutorial haben wir die Einstellung gewählt Kegel - Invertiert .

Als nächstes schalten Sie ein Verlaufsüberlagerung . Dies verleiht einem Knopf ein abgerundetes, leicht „glänzendes“ Aussehen. Die Einstellungen sind wie folgt:

  • Mischmodus: Überlagerung
  • Opazität: 90
  • Stil: Linear
  • Winkel: 90
  • Skala: 100

Endlich haben wir eingeschaltet Schlagschatten , um die Schaltfläche vom weißen Hintergrund einer Website oder eines Blogs etwas 'erhaben' erscheinen zu lassen. Hier nochmal die Einstellungen:

Daten von toter Festplatte wiederherstellen

Struktur

  • Mischmodus: Mehrere
  • Opazität: 35
  • Winkel: 90
  • Distanz: 2
  • Ausbreitung: 6
  • Größe: 8

Qualität

  • Kontur: Linear
  • Lärm: 0
  • Ebene macht Schlagschatten aus: Auf

Jetzt ist es an der Zeit, diese Spezifikationen als Ebenenstil zu speichern.

Schritt 4: Als Ebenenstil speichern

Sobald Sie mit den Einstellungen Ihrer Schaltfläche fertig sind, sieht sie in 3D aus. Da die Wahrscheinlichkeit hoch ist, dass Sie mehr als eine 3D-Schaltfläche erstellen, müssen wir einen schnellen und einfachen Weg finden, dies zu tun.

Hier ist wie.

Vor dem Klicken OK in dem Ebenenstil Dialogfeld, klicken Sie auf Neuer Stil . Wenn Sie dies tun, speichert Photoshop diesen Ebenenstil, den Sie für Ihre Schaltfläche erstellt haben.

Wenn Sie Photoshop CC verwenden, wird dieser neue Stil in Ihrem Bibliotheken Abschnitt, wie Sie oben sehen können. Es ist sehr schnell und einfach zugänglich.

Schritt 5: So verwenden Sie einen gespeicherten Ebenenstil

Nachdem Sie Ihre Schaltfläche entworfen und als Ebenenstil gespeichert haben, sehen wir sie in Aktion für Ihren 'Up'-Status. Kein Wort von einer Lüge, das wird Ihre Arbeitszeit halbieren.

Lassen Sie uns zunächst eine weitere Schaltfläche direkt über der roten Schaltflächenebene erstellen. Lassen Sie es uns zur Betonung grün machen.

Weiter---anstatt auf die Ebene selbst zu doppelklicken, um die Ebenenstile Dialogfeld--doppelklicken Sie auf den Ebenenstil in Ihrem Bibliotheken Tafel.

Wenn Sie dies tun, wendet Photoshop Ihren gespeicherten Stil automatisch auf Ihre neue Schaltflächenebene an und behält dabei die neue Farbe und Form bei. Sie haben jetzt zwei Tasten – eine im oberen und eine im unteren Zustand – und es ist so einfach zu tun. Ich liebe diese Abkürzung.

Schritt 6: Text zu Ihrer Schaltfläche hinzufügen

Als Nächstes fügen wir der Schaltfläche Text hinzu.

Um Text hinzuzufügen, erstellen Sie eine neue Ebene über Ihren beiden Schaltflächenebenen. Drücke den Tippwerkzeug um mit der Eingabe zu beginnen.

Für dieses Tutorial schreiben wir das Wort 'Abonnieren', weil es ziemlich oft auf Websites und Social-Media-Plattformen vorkommt.

Wir werden auch eine websichere San-Serif-Schrift verwenden. Die endgültige Wahl, welche Sie für Ihren eigenen Button verwenden, liegt bei Ihnen. Montserrat, Proxima Nova, Arial und Verdana sind weit verbreitete Alternativen und sicher für das Internet.

Danach müssen Sie jedoch noch ein paar subtilere Änderungen vornehmen, damit dieser Text 'pop' wird.

Doppelklicken Sie zuerst auf die Ebene, die Ihren Text enthält, damit Sie ihn in Ihrem Ebenenstil Dialogbox.

Klicken Sie als nächstes auf Inneren Schatten , um Ihrem Text eine kleine Vertiefung (oder einen vertieften Bereich) hinzuzufügen. Dadurch sieht es so aus, als wären die Buchstaben in den Knopf eingraviert. Die genauen Einstellungen, die wir für dieses Tutorial verwendet haben, sind unten aufgeführt.

Struktur

  • Mischmodus: Multiplizieren
  • Opazität: 35
  • Winkel: 90
  • Distanz: 2
  • Drossel: 4
  • Größe: 1

Qualität

  • Kontur: Linear
  • Lärm: 0

Als nächstes wenden Sie a . an Verlaufsüberlagerung zu diesen Buchstaben, damit sie sich leichter in die Schaltfläche einfügen, ohne flach zu erscheinen. Auch hier sind die Einstellungen für unsere:

  • Mischmodus: Farbbrand
  • Opazität: 90
  • Stil: Linear
  • Winkel: 90
  • Skala: 100

Schritt 7: Fertigstellen

Nachdem Sie diesen Textstil erstellt haben --- besonders wenn Sie ihn wieder verwenden möchten --- gehen Sie zu Neuer Stil und speichere es, bevor du klickst OK .

Wenn das erledigt ist, können Sie die Sichtbarkeit zwischen Ihren beiden Schaltflächenebenen schnell hin- und herschalten, um zu sehen, wie die Zustände 'oben' und 'unten' aussehen.

Ziemlich cool, oder? Um Ihre Datei zu speichern, gehen Sie zu Datei > Speichern unter , und speichern Sie es im richtigen Dateiformat für jedes Projekt, an dem Sie arbeiten.

Passen Sie Ihren Blog mit 3D-Buttons und Widgets an

Nachdem Sie nun wissen, wie Sie 3D-Schaltflächen in Photoshop erstellen, können Sie damit kreativ werden und Ihre eigenen 3D-Schaltflächen nach Ihren Wünschen gestalten. Und mit diesen Fähigkeiten in Ihrem Arsenal können Sie ein Produkt herstellen, das nicht nur professionell, sondern auch persönlich aussieht.

Möchten Sie mehr über andere Dinge wissen, die Sie mit diesem Programm tun können? Hier ist So entfernen Sie einen Hintergrund in Photoshop .

Teilen Teilen Tweet Email So greifen Sie auf die integrierte Wasserwaage von Google auf Android zu

Wenn Sie jemals sicherstellen mussten, dass etwas zur Not eben ist, können Sie jetzt in Sekundenschnelle eine Wasserwaage auf Ihrem Telefon abrufen.

Weiter lesen Verwandte Themen
  • Kreativ
  • Adobe Photoshop
  • Tipps zur Bildbearbeitung
  • Photoshop-Tutorial
Über den Autor Shianne Edelmayer(136 veröffentlichte Artikel)

Shianne hat einen Bachelor-Abschluss in Design und einen Hintergrund im Podcasting. Heute arbeitet sie als Senior Writer und 2D Illustrator. Sie deckt kreative Technologie, Unterhaltung und Produktivität für MakeUseOf ab.

Mehr von Shianne Edelmayer

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um zu abonnieren