Share
In diesem Schnelltipp erfahren Sie, wie Sie mit dem Darstellungsbereich und der 9 Slice-Skalierung von Adobe Illustrator eine skalierbare Webschaltfläche erstellen. Diese Technik ist besonders nützlich für Webdesigner, die dieselbe Stilschaltfläche mit verschiedenen Textlängen verwenden müssen. Lass uns anfangen!
In diesem Lernprogramm erfahren Sie, wie Sie eine skalierbare Vektorschaltfläche mithilfe der 9-Slice-Skalierung in Adobe Illustrator CS5 erstellen. Im folgenden Beispiel sehen Sie, wie die Schaltfläche mit und ohne 9-Slice-Skalierung skaliert. Sie werden feststellen, dass die normale Skalierung alles innerhalb des Schaltflächenbilds verschiebt. Mit 9-Slice können Sie festlegen, wie das Bild skaliert werden soll, um wiederverwendbare Webelemente zu erstellen.
Erstellen Sie ein neues RGB-Dokument mit beliebiger Größe. Option + Klicken Sie mit dem Rechteckwerkzeug (M) auf die Zeichenfläche, und geben Sie die Abmessungen der Schaltfläche ein. Da die Schaltfläche horizontal skalierbar ist, ist die Breite nicht wichtig. Ich habe mein Rechteck auf 200px von 60px gesetzt.
Öffnen Sie den Darstellungsbereich und wählen Sie "Fx"> "Stilisieren"> "Runde Ecken". Legen Sie den Eckenradius auf 8 Pixel fest und klicken Sie auf "OK".
Fügen Sie der Schaltfläche eine Farbverlaufsfüllung mit den folgenden Farben hinzu. Wenn Sie Ihre eigene auswählen möchten, folgen Sie der nachstehenden Anleitung, um die Position und den Farbton der Farben anzuzeigen. Sie werden feststellen, dass Farbe 2 und 3 sehr nahe beieinander liegen. Dies ist der Schlüssel zum superglänzenden Erscheinungsbild des Farbverlaufs.
Wenn Ihre Schaltfläche eine Zeile hat, löschen Sie sie. Fügen Sie im Darstellungsbereich eine weitere Füllung hinzu und positionieren Sie sie unter der Verlaufsebene. Gehen Sie in den Darstellungseinstellungen zu Fx> Pfad> Versatzpfad und setzen Sie den Versatz auf 1 Pixel.
Füllen Sie die zweite Füllebene mit einem Farbverlauf in den folgenden Farben. Auch hier können Sie die Farben selbst bestimmen. Denken Sie daran, die hellen Schatten oben und die dunklen unten zu behalten.
Fügen Sie im Erscheinungsbildfenster unter den beiden Füllungen einen Schlagschatten hinzu, indem Sie zu Fx> Stilisieren> Schlagschatten gehen und die Deckkraft auf 60%, den X-Offset auf 0px und den Y-Offset auf 2px einstellen. Machen Sie die Unschärfe 3px
Vergrößern Sie die Schaltfläche, um die Linien zu sehen, die Sie in diesem Schritt erstellen müssen. Ziehen Sie auf der rechten Seite der Schaltfläche zwei 1px-Linien nebeneinander. Legen Sie für die erste die gleiche Farbe wie für den oberen Rand des Verlaufs und für die zweite Linie die Farbe für den unteren Rand des Verlaufs fest. Ich habe die Farbnummern als Referenz in das folgende Bild geschrieben.
Dieser Teil ist für Adobe Illustrator CS5. Wählen Sie die Schaltfläche und die Linien aus und ziehen Sie sie in die Symbolpalette. Klicken Sie auf "9-Slice-Skalierung aktivieren" (Dadurch wird die horizontale Skalierung aktiviert) und "An Pixelgitter ausrichten" (Dadurch wird verhindert, dass die Schaltfläche auf Websites unscharf wird). Diese beiden Einstellungen machen die Schaltfläche perfekt für die Verwendung im Internet.
Wenn Sie das Symbol erstellen, sehen Sie einen Bildschirm wie in der Abbildung unten. Verschieben Sie die gepunkteten Linien, um die Bereiche hervorzuheben, die nicht skaliert werden sollen. Ich habe die gepunkteten Linien an der Seite des Bereichs positioniert, in den ich ein Symbol einfügen möchte. Dadurch wird sichergestellt, dass sich das Symbol nicht ändert, wenn ich die Länge der Schaltfläche verändere. Doppelklicken Sie auf die Zeichenfläche, um zum Hauptbild zurückzukehren.
Skalieren Sie die Schaltflächen, um die markierten Bereiche zu testen. Wenn Sie Änderungen vornehmen müssen, doppelklicken Sie auf das Symbol, um zu den Einstellungen zurückzukehren.
Fügen Sie den Schaltflächen Text und Symbole hinzu und wählen Sie eines aus, auf das das Erscheinungsbild angewendet werden soll. Sie können das Erscheinungsbild dann auf die restlichen Elemente anwenden, wenn Sie mit den Einstellungen fertig sind. Beginnen Sie mit einer Farbverlaufsfüllung. Dies ist ein einfacher Dunkel-Hell-Farbverlauf. Ich habe die Farben aufgeschrieben, die ich im Bild unten verwendet habe.
Fügen Sie im Verlaufsbereich eine weiße Füllung unter der Verlaufsebene hinzu, und legen Sie fest, dass sie um 2 Pixel vertikal verschoben werden soll. OK klicken.
Fügen Sie ein äußeres Glühen hinzu, indem Sie zu Fx> Stilisieren> Äußeres Glühen gehen. Stellen Sie die Farbe der Schaltfläche auf einen hellen Ton und die Unschärfe auf 1px ein. Dies fügt dem Ebeneneffekt einen subtilen Haze hinzu und lässt die Schaltfläche so aussehen, als würde sie etwas leuchten.
Fügen Sie oben in den Darstellungseinstellungen einen Strich in einem dunklen, von der Farbe der Schaltfläche gesättigten Ton hinzu. Setzen Sie den Strich auf 0.5px.
Testen Sie den Stil mit verschiedenen Symbolen und Schaltflächen. Speichern Sie die beiden Stile in der Grafikstilpalette. Wählen Sie das Objekt mit dem Stil aus und klicken Sie auf die Schaltfläche Stil hinzufügen am unteren Rand der Grafikstile.
Hier hast du es. Ein skalierbarer Web-Button, der einfach zu verwenden und wiederzuverwenden ist. Wenn Sie die abgerundeten Ecken ändern möchten, können Sie wieder in das Symbol klicken und das Erscheinungsbild ändern, indem Sie die abgerundeten Ecken auf unsichtbar setzen. Wenn Sie eine neue Schaltfläche erstellen möchten, ziehen Sie ein Schaltflächensymbol aus der Symbolpalette. auf die Zeichenfläche und die Steuerung Klicken Sie hier, um zu den Optionen zu navigieren, um die Verknüpfung mit dem Symbol zu trennen. Von dort aus ändert der Button die anderen Symbole nicht und Sie können ihn in einen neuen Stil umwandeln. Ich hoffe es hat dir gefallen.
Accentsconagua