Share
In diesem Tutorial zeige ich Ihnen, wie Sie eine Schaltfläche in Photoshop erstellen und mit allen verschiedenen Status in einem Adobe Muse-Projekt verwenden. Nachdem wir unsere Photoshop-Assets entworfen und in Adobe Muse importiert haben, schauen wir uns an, was passiert, wenn wir die PSD weiter aktualisieren möchten.
Laden Sie das Video herunter oder abonnieren Sie Tuts + Web Design auf Youtube.
Willkommen bei diesem Kurztipp über Adobe Muse. Das obige Video zeigt, wie Sie eine Schaltfläche in Photoshop erstellen und in Adobe Muse platzieren können.
Eine Schaltfläche in Adobe Muse hat vier Zustände. Wenn Sie also ein Rechteck hier in Adobe Muse platzieren, wissen Sie, dass Sie standardmäßig vier Zustände haben
Um eine Schaltfläche zu erstellen, zeichnen Sie ein Rechteck und füllen es mit einer Farbe oder einem Farbverlauf oder fügen Sie ein Bild im Hintergrund hinzu.
Das ist großartig, aber manchmal möchten Sie alles in Adobe Photoshop entwerfen und die Zustände von dort importieren.
Öffnen Sie Photoshop und erstellen Sie eine Vektorform. eine normale grüne Taste. Gestalten Sie es nach Ihren Wünschen, mit abgerundeten Ecken, einem Rand und so weiter. Ich möchte vier Zustände erstellen, also benenne ich diese erste Ebene Schaltfläche Normal.
Dann werde ich die Ebene duplizieren. Diese nächste Ebene wird mein Mouse Over-Status sein.
In diesem Fall ändern wir einfach die Farbe und machen sie heller.
Wiederholen Sie den Vorgang für alle vier Status, die Sie benötigen, und speichern Sie die Datei als ButtonGreen.psd.
Wenn ich jetzt in Adobe Muse dieses Design verwenden möchte, ohne die Ebenen in PNG-Dateien zu exportieren, kann ich das direkt tun Datei> Photoshop-Schaltfläche platzieren, Wählen Sie ButtonGreen.psd aus und parst dann alle in der Photoshop-Datei verfügbaren Ebenen.
Weisen Sie jeder Ebene einen Schaltflächenstatus zu, platzieren Sie sie auf der Bühne und passen Sie die Größe bei Bedarf an.
Dann können Sie mit dem Textwerkzeug ein Etikett darüber hinzufügen (z. B. SUBSCRIBE)..
Wenn Sie jetzt eine Vorschau im Browser anzeigen, werden Sie feststellen, dass es in der Tat vier Zustände gibt. Wenn wir rollen und wenn wir klicken, ändert sich der Status der Schaltfläche.
Was passiert nun, wenn ich mein Design in Photoshop ändere oder ändere??
In Photoshop ändern wir beispielsweise die Farbe des Normalzustands. Wir machen daraus einen blauen Button und speichern dann die PSD-Datei. Wenn wir jetzt zu Adobe Muse zurückkehren, gibt es keine sichtbaren Änderungen. Wenn Sie jedoch das * Assets-Bedienfeld * öffnen, wird eine Warnmeldung angezeigt.
Es wird gesagt, dass sich das Asset seit dem Import der Daten geändert hat. Wir können also mit der rechten Maustaste klicken und sagen, dass wir das Asset aktualisieren möchten.
Dies zeigt, dass die Arbeit mit Assets zwischen Adobe Photoshop und Adobe Muse einfacher ist als je zuvor. Ich hoffe, Ihnen hat dieser schnelle Tipp gefallen!
Für einen detaillierteren Blick auf Adobe Muse werfen Sie einen Blick auf meinen kostenlosen Kurs "Gestalten und Veröffentlichen von Websites mit Adobe Muse".
Accentsconagua