Share
In diesem kurzen Tipp erstellen wir mithilfe von 3D-Effekten in Adobe Illustrator eine Reihe von Web-Schaltflächen. Warum? Auf diese Weise können wir die Verwendung verschiedener Pinsel und Effekte für das Hinzufügen von Glanzlichtern und Schatten vergessen und dies in einem einzigen Schritt unter Nutzung der Lichteinstellungen und der verfügbaren Abschrägungsformen erreichen. Lass uns anfangen!
Beginnen wir mit der grundlegenden Form für diese Web-Schaltfläche. Nehmen Sie das Rounded Rectangle-Tool und klicken Sie auf eine beliebige Stelle Ihrer Zeichenfläche, um das Rounded Rectangle-Fenster zu öffnen. Geben Sie dort die angezeigten Zahlen ein und Sie erhalten die gewünschte Form. Wählen Sie als Füllfarbe hellgrau.
Wenn Sie dieses Rechteck ausgewählt haben, gehen Sie zu Effekt-Menü> 3D> Extrusion & Abschrägung. Auf der rechten Seite des Bildes sehen Sie die Standardeinstellungen. Es werden nur die Rotationskoordinaten geändert. Ich würde gerne die Abschrägungsformen öfter verwenden, aber manchmal erzeugen sie einfach nicht die gewünschten Ergebnisse. Wenn Sie in diesem Fall Tall-Round als Abschrägungsform wählen, ist die Änderung mehr als offensichtlich. Sie erhalten die abgerundete Kante und müssen sich später auch nicht um die Lichter und Schatten kümmern.
Wenn Sie den Wert für Höhe erhöhen, wird die abgerundete Kante dicker.
Klicken Sie im Fenster Extrusions- und Abschrägungsoptionen auf die Schaltfläche Weitere Optionen, um das gesamte Dialogfeld zu öffnen und auf den unteren Teil zu fokussieren. Wenn Sie die obere linke Ecke hervorheben möchten, verschieben Sie das Licht nach links oder unten, wenn Sie die untere rechte Ecke hervorheben möchten.
Zum Schluss noch die Einstellungen, die ich verwendet habe. Ändern Sie die Koordinaten, wählen Sie als abgerundete Form Hochrund, erhöhen Sie die Höhe von 4 auf 6 Punkte und verschieben Sie das Licht leicht nach links.
Wechseln Sie, während die 3D-Schaltfläche ausgewählt ist, zum Menü Objekt und wählen Sie Aussehen erweitern. Wählen Sie nun mit dem Direktauswahl-Werkzeug (A) das innere abgerundete Rechteck aus und füllen Sie es mit dem angezeigten linearen Farbverlauf. Stellen Sie den Winkel auf 90 Grad ein. Doppelklicken Sie bei ausgewähltem Rechteck auf Inhalt (da sich diese Form in einer Gruppe befindet) im Darstellungsbereich. Auf diese Weise werden die vorhandenen Attribute angezeigt. Gehen Sie dann zu Effekt-Menü> Stilisieren und wenden Sie den Inner Glow-Effekt mit den angezeigten Einstellungen an.
Wenn Sie die vorhandene Füllung im Darstellungsbereich ausgewählt haben, klicken Sie unten auf das Symbol "Ausgewähltes Objekt duplizieren". Daraufhin wird eine zweite Füllung angezeigt. Ändern Sie den Verlauf mit Weiß und Schwarz in den angezeigten Verlauf und stellen Sie den Winkel auf 50 Grad ein. Ändern Sie den Mischmodus auf Bildschirm (Schwarz wird transparent) und verringern Sie die Deckkraft auf 75%..
Duplizieren Sie diese zweite Füllung wie zuvor und behalten Sie den gleichen Farbverlauf bei. Stellen Sie den Winkel auf 140 Grad ein und erhöhen Sie den Deckkraftwert von 75% auf 90%..
Wählen Sie nun mit dem Direktauswahl-Werkzeug (A) das innere Rechteck aus, und wählen Sie im Menü Objekt die Option Kopieren und Vorne einfügen. Ziehen Sie im Ebenenbedienfeld das neue Rechteck außerhalb der Schaltflächengruppe, da es dort nicht vorhanden sein soll. Entfernen Sie die vorhandenen Attribute und geben Sie einen schwarzen Strich an. Während dieses Rechteck ausgewählt ist, gehen Sie zweimal zu Objekt> Pfad> Ankerpunkte hinzufügen, um einige zusätzliche Punkte hinzuzufügen. Nehmen Sie dann das Schere-Werkzeug (C) und klicken Sie auf die zwei angegebenen Punkte, um die Form zu schneiden, und löschen Sie den Pfad von unten.
Jetzt brauchst du einen Kunstpinsel. Ich habe in Schritt 9 in diesem kurzen Tipp erklärt, wie das geht. Der einzige Unterschied ist, dass ich dieses Mal mit einer 100 x 3 px Ellipse anstelle von 200 x 5 px begonnen habe. Nachdem Sie es in das Pinselfenster gezogen haben, um es als neuen Pinsel zu speichern, verwenden Sie es, um den Pfad von oben zu streichen. Stellen Sie das Gewicht auf 2 pt.
Kopieren und Einfügen vor dem inneren Rechteck erneut und ziehen Sie es außerhalb der Schaltflächengruppe, davor. Entfernen Sie die vorhandenen Erscheinungsbilder und geben Sie ihr eine schwarze Füllung (1). Jetzt kopieren und in das schwarze Rechteck einfügen und die Füllfarbe ändern, damit Sie sie unterscheiden können. Bewegen Sie das rote Rechteck ein wenig nach oben, indem Sie zweimal die Aufwärtspfeiltaste auf Ihrer Tastatur drücken (2). Das Tastaturinkrement sollte auf 1 px eingestellt sein (Menü Bearbeiten> Voreinstellungen> Allgemein)..
Wählen Sie beide Formen aus, und wählen Sie im Pfadfinder-Bedienfeld die Option Vom Formbereich subtrahieren> Erweitern. Die sich ergebende dünne Form sollte eine schwarze Füllung haben (3). Ändern Sie den Mischmodus in "Multiplizieren" und reduzieren Sie die Deckkraft auf 20% (4)..
Zeichnen Sie anschließend mit dem Stiftwerkzeug (P) einen Pfad wie in der Abbildung unten über der Schaltfläche. Kopieren und Einfügen vor dem inneren Rechteck wieder, entfernen Sie die vorhandenen Erscheinungsbilder und geben Sie ihm einen schwarzen Strich. Wählen Sie dieses Rechteck und auch den blauen Pfad aus und klicken Sie im Pathfinder-Bedienfeld auf "Teilen". Wählen Sie im Menü Objekt die Option Gruppierung auf und löschen Sie die Form von unten.
Füllen Sie die erhaltene Form mit einem linearen Farbverlauf von Weiß nach Schwarz und stellen Sie den Winkel auf minus 90 Grad ein. Ändern Sie den Mischmodus in "Bildschirm" (Schwarz wird transparent) und verringern Sie die Deckkraft auf 30%..
Fahren wir mit dem Text fort. Mit dem Type Tool (T) geben Sie "TRY NOW" mit einer Schriftart namens Anja Eliane, Größe 35 pt. Sie finden die Schrift hier. Wählen Sie im Menü Objekt die Option Erweitern, und füllen Sie den Text mit dem angezeigten linearen Farbverlauf. Stellen Sie den Winkel auf minus 45 Grad ein. Gehen Sie als Nächstes zu Effekt-Menü> Stilisieren und wenden Sie den Schlagschatten-Effekt mit den Einstellungen von unten an.
Geben Sie nun "30 DAY TRIAL" mit Arial Bold (Größe 15 pt) ein und wählen Sie im Menü "Objekt" die Option "Erweitern". Füllen Sie den Text mit Weiß und wenden Sie dann den Effekt "Schatten" erneut an.
Öffnen Sie im Symbolbereich (Menü Fenster> Symbole) das Symbolbibliothek-Menü. Suchen Sie in der Kategorie "Pfeile" den Pfeil 24. Ziehen Sie ihn in Ihren Arbeitsbereich und klicken Sie auf das Symbol "Verknüpfung mit Symbol" am unteren Rand des Bereichs. Heben Sie die Gruppierung zweimal auf, gehen Sie zu Effekt-Menü> Stilisieren> Runde Ecken und wenden Sie einen 3-Pixel-Radius (1) an. Füllen Sie den Pfeil mit dem angezeigten linearen Farbverlauf und geben Sie ihm mit der angegebenen Farbe einen Strich von 0,5 pt. (2).
Bewegen Sie den Pfeil auf die Schaltfläche, und wählen Sie im Menü Effekt die Option Stilisieren, und wenden Sie den Effekt "Schattenwurf" an.
Wenn Sie diesen Pfeil ausgewählt haben, wählen Sie im Menü "Objekt" die Option "Darstellung erweitern", um die beiden angewendeten Effekte zu erweitern. Wählen Sie dann im Menü "Objekt"> "Transformieren"> "Skalieren", wählen Sie 80% und klicken Sie auf "Kopieren". Sie erhalten den kleineren Pfeil. Ordnen Sie sie wie im Bild an und stellen Sie sicher, dass sie horizontal ausgerichtet sind. Wählen Sie beide aus und gehen Sie zu Objekt> Transformieren> Reflektieren. Wählen Sie Vertikale und klicken Sie auf Kopieren. Ordne die zwei neuen Pfeile auf der rechten Seite an und der Button ist fertig.
Alles, was fehlt, ist ein Schatten unter dem Button. Nimm das Ellipsenwerkzeug (L) und zeichne unten eine flache Ellipse. Wähle dann Schwarz als Füllfarbe (1). Senden Sie diese Ellipse hinter die Schaltfläche, und wählen Sie im Menü Objekt> Pfad> Versatzpfad einen Versatz von minus 7 px. Sie erhalten eine kleinere Ellipse in der Mitte (2). Setzen Sie die Deckkraft für die größere Ellipse auf 0%, wählen Sie dann beide aus und gehen Sie zu Objekt> Blend> Blend-Optionen. Wählen Sie dort 25 festgelegte Schritte aus, und kehren Sie zum Menü Objekt> Überblenden> Erstellen (3) zurück. Reduzieren Sie die Deckkraft für die resultierende Überblendungsgruppe auf 75%. Wenn Sie die Schaltfläche vor einem bestimmten Hintergrund platzieren, ändern Sie auch den Überblendungsmodus in "Multiplizieren".
Hier ist der letzte Web-Button:
Über diese Schaltfläche können Sie viele andere Farbvariationen erhalten. Alles was Sie tun müssen, ist eine Kopie der Schaltfläche zu erstellen und ein paar Dinge zu ändern. In den Bildern unten sehen Sie drei Beispiele: blau, grün und violett. Alle Formen, die im Bild unten sichtbar sind, wurden nicht geändert. Behalte sie so wie sie sind. Diejenigen, die verborgen sind, bedeuten, dass sie modifiziert werden und wir nehmen jedes einzeln auf.
Beginnen wir mit dem abgerundeten Rechteck. Wählen Sie es mit dem Direktauswahl-Werkzeug (A) aus und werfen Sie einen Blick auf das Erscheinungsbildfenster. Ändern Sie die erste Farbverlaufsfüllung mit dem neuen angezeigten Farbverlauf und behalten Sie alle anderen Attribute bei. Machen Sie dasselbe für die grünen und violetten Web-Schaltflächen.
Ändern Sie für den Text einfach den mittleren Anschlag des Verlaufs von hellorange zu hellblau bzw. hellgrün und hellviolett. "30 DAY TRIAL" bleibt gleich.
Wählen Sie nun den Pfeil aus und ändern Sie die Verlaufsfüllung und dann die Strichfarbe wie angegeben. Die Effekte bleiben gleich.
Wählen Sie schließlich wie in Schritt 10 Aussehen erweitern aus und skalieren Sie den Pfeil, um den kleineren zu erhalten. Reflektiere die beiden und du bist fertig.
Dies ist das endgültige Bild und hier sind die vier Web-Buttons bereit, die verwendet werden können. Wenn Sie sie für das Web speichern möchten, sehen Sie sich ein anderes Tutorial von mir an, in dem ich Ihnen ausführlich erläutere, wie das geht.
Accentsconagua