Share
In diesem Lernprogramm erfahren Sie, wie Sie ein halbdurchsichtiges, von Vista inspiriertes Menü mit Verläufen, Schatten und Unschärfen erstellen, um einen beeindruckenden modernen Effekt zu erzeugen.
Öffnen Sie eine neue Leinwand, die 600x335px ist. Beginnen Sie mit der Anzeige von Linealen (Ansicht> Lineale) und erstellen Sie dann zwei Hilfslinien, die der Abbildung unten ähneln. Erstellen Sie einen bei 285px und den anderen bei 310px.
Erstellen Sie ein Rechteck (U), das den unteren Linealbereich ausfüllt, und beschriften Sie die Ebene als "untere Leiste". Öffnen Sie das Effekte-Menü für die Ebene. Navigieren Sie zur Eigenschaft "Verlaufsüberlagerung" und wenden Sie einen Farbverlauf zwischen # 000000 und # 0c0c0c bei 90 Grad an.
Erstellen Sie nun ein weiteres Rechteck im oberen Regelbereich und benennen Sie die Ebene als "obere Leiste". Öffnen Sie erneut das Effektmenü und wenden Sie eine Farbverlaufsüberlagerung zwischen # 35393d und # 787b7d bei 90 Grad an. Wählen Sie die zwei bisher erstellten Rechtecke aus und ändern Sie die Deckkraft auf 90%. Wenn ein Hintergrund später hinzugefügt wird, hat dies einen schönen Effekt, da der Hintergrund leicht durchscheinen kann.
Der nächste Schritt besteht darin, das Menü mit dem Linienwerkzeug (U) hervorzuheben. Wählen Sie das Linienwerkzeug und ändern Sie das Gewicht in 2px. Ziehen Sie eine Linie über die Leiste und ändern Sie die Farbe in # 9fa2a4. Benennen Sie diese Ebene in "untere Hervorhebung" um. Zeichnen Sie nun eine weitere Linie direkt über der vorherigen und ändern Sie die Farbe in # 484b4d und ändern Sie den Namen in "obere Markierung". Gruppieren Sie diese Ebenen mit Balkenebenen in einer Gruppe namens "Balken". Diese Stufe vervollständigt die Grundlage des Menüs.
Nun, da die Menüleiste fertig ist, können wir eine Reihe von Trennlinien erstellen, um zwischen den Text zu wechseln. Wählen Sie das Linienwerkzeug erneut und belassen Sie das Gewicht bei 2px. Zeichnen Sie eine vertikale Linie aus der mittleren Linealmarke, die einige Pixel vor der Hervorhebung stoppt. Dies muss nicht exakt sein und kann später leicht angepasst werden. Öffnen Sie das Effektmenü und wenden Sie bei 90 Grad zwischen # 676a6d und # 4d6672 eine Verlaufsüberlagerung an. Beschriften Sie diese Ebene mit "oberer Teiler".
Zeichnen Sie eine weitere vertikale Linie vom mittleren Lineal, indem Sie nach unten gehen und den gleichen Abstand von der Kante wie oben halten. Dieser Abschnitt hat keinen Farbverlauf. Ändern Sie die Farbe in # 43474b. Benennen Sie diese Ebene in "Untere Trennlinie" um. Gruppieren Sie die beiden Abschnitte des Teilers und nennen Sie die Gruppe "Teiler".
Wähle das Textwerkzeug (T) und ändere die Farbe in Weiß (#FFFFFF). Die Schriftart, die ich für das Menü ausgewählt habe, heißt Segoe-Benutzeroberfläche, da es sich um die in der Vista-Benutzeroberfläche verwendete Schriftart handelt. Allerdings hat nicht jeder diese Schriftart, so wie es Arial ersetzen kann. Legen Sie die Größe auf 11pt fest und geben Sie Ihre Links in gleichem Abstand ein. Gruppieren Sie sie und benennen Sie die Gruppe "Links".
Kopieren Sie nun Ihre Trennwände und platzieren Sie sie zwischen den Links. Sie sollten mit etwas Ähnlichem enden.
Die Menüleiste ist nun im Wesentlichen abgeschlossen, sodass Sie einen Hintergrund Ihrer Wahl hinzufügen können. Der Hintergrund, den ich ausgewählt habe, ist ein Foto von Gras. Alles, was bunt oder landschaftlich ist, reicht aus.
Kopieren Sie Ihren Hintergrund in das Menü und benennen Sie die Ebene Hintergrund um. Stellen Sie sicher, dass sich diese Ebene in der Ebenenpalette hinten befindet. Beachten Sie die Transparenz im Menü, damit der Hintergrund durchscheint, ohne zu stark zu wirken.
In diesem Schritt wird das verschwommene abgerundete Rechteck erstellt, das sich hinter dem Text befindet. Dieser Effekt ist in Vista recht häufig und ist eine gute Technik. Es fokussiert den Hintergrund und platziert ihn auf dem Text, zeigt jedoch immer noch die schöne Szene dahinter.
Kopieren Sie zunächst den Hintergrund. Diese Ebene ist nicht permanent, aber wir werden eine Auswahl daraus entfernen. Zeichnen Sie dann mit dem Werkzeug "Abgerundetes Rechteck" (U) eine Form, die am linken Rand der Leinwand beginnt. Dies bedeutet, dass die Form nur zwei abgerundete Kanten hat.
Rastern Sie die Ebene, und wählen Sie dann mit dem Zauberstab-Werkzeug (W) das Rechteck aus und löschen Sie die Farbe, während Sie die Kontur beibehalten. Wählen Sie nun die Hintergrundkopie und schneiden Sie diese Ebene aus. Löschen Sie die Hintergrundkopieebene und fügen Sie eine weitere neue Ebene mit dem Namen "Unschärfe" hinzu.
Fügen Sie die Form in die Ebene "Unschärfe" ein und wenden Sie dann eine Gaußsche Unschärfe von 5 Pixeln an (Filter> Unschärfe> Gaußsche Unschärfe). Wenden Sie dann einen Schlagschatten an (siehe unten).
Fügen Sie nun Ihren Text in die Unschärfe ein. Verwenden Sie die gleiche Schriftart wie die Links (Segoe-Benutzeroberfläche), und geben Sie Ihren Namen und die Tagline ein. Wählen Sie einen Teil des Textes aus und machen Sie ihn fett und behalten Sie den Normalzustand bei, wenden Sie einen Schlagschatten und einen Verlauf an. Dadurch entsteht ein modern aussehender Text, der auffällig wirkt.
Dieser Schritt ist optional, da er das blau hervorgehobene Glühen erzeugt, das zu unserem Hover-Effekt wird. Zeichnen Sie eine große Ellipse (U), die den Bereich zwischen den Trennwänden ausfüllt. Ändern Sie die Farbe der Ellipse in # 5c94c5 und wenden Sie eine Gaußsche Unschärfe von 10 Pixeln an. Die Form ist jetzt eine Rasterebene, und Sie können die überflüssige Unschärfe mit dem Marquee-Tool (M) entfernen..
Dieses Menü erzeugt einen beeindruckenden Effekt, wenn es mit einem hellen szenischen Hintergrund gekoppelt wird. Es nutzt Transparenz und moderne Farbverläufe. Die Verwendung von Highlights ist ein großer Trick, um Bildern einen modernen Look zu verleihen. Dieses Menü lässt sich leicht aufteilen und wird zu einem sehr funktionalen, webbasierten Menü mit Hover-Status.
Accentsconagua