Share
Folgen Sie diesem Lernprogramm und lernen Sie, wie Sie einen Satz glänzender Beschriftungen und einen Rollover-Status erstellen. Wir werden mehrere Erscheinungsbilder und benutzerdefinierte Pinsel verwenden, um ein glänzendes Aussehen zu erhalten. Wenn wir fertig sind, analysieren wir die Optionen "Für Web speichern". Wir sprechen über Einstellungen und vergleichen verschiedene Dateiformate, um das beste Bild für Ihre Webseite zu erhalten. Viele Farbvariationen erwarten Sie, also fangen wir an!
Öffnen Sie zunächst ein neues Webdokument. Nehmen Sie das Rechteckwerkzeug (M), klicken Sie auf eine beliebige Stelle Ihrer Zeichenfläche, um das Rechteckfenster zu öffnen, und geben Sie die angezeigten Abmessungen ein. Wenn dieses Rechteck ausgewählt ist, gehen Sie zu Objekt> Pfad> Ankerpunkte hinzufügen. Als Ergebnis erhalten Sie einen zusätzlichen Punkt in der Mitte jeder Seite. Wählen Sie nun mit dem Direktauswahl-Werkzeug (A) nur den unteren Punkt aus, gehen Sie zu Objekt> Transformieren> Verschieben, unter Vertikaler Typ minus 55 px, und klicken Sie auf OK.
Wählen Sie außerdem mit dem Direktauswahl-Werkzeug (A) die Umschalttaste aus, während Sie die Umschalttaste gedrückt halten, und wählen Sie dann Datei> Skripts> Runde Ecken. Führen Sie das Skript aus und wählen Sie einen Radius von 10 aus. Wenn Sie dieses Skript noch nicht installiert haben, rufen Sie es hier auf.
Wählen Sie nun den Punkt aus dem Tipp und führen Sie das Skript erneut aus. Wählen Sie diesmal einen Radius von 15.
Füllen Sie die Etikettenform mit dem angezeigten linearen Farbverlauf und ändern Sie den Winkel auf minus 90 Grad. Wenn Sie dieses Füllattribut im Darstellungsfeld ausgewählt haben, klicken Sie unten auf das Symbol "Ausgewähltes Objekt duplizieren", und Sie erhalten eine zweite Füllung. Ersetzen Sie den blauen Farbverlauf durch ein Muster namens Mezzotint Dot, das Sie im Menü Swatch Libraries unter Patterns> Basic Graphics> Basic Graphics_Textures finden. Setzen Sie das Muster auf "Bildschirm" und reduzieren Sie die Deckkraft auf 70%..
Wählen Sie als Nächstes einen blauen Strich aus, und wählen Sie im Menü Effekt> Pfad> Versatzpfad einen Offset von minus 7 px aus. Aktivieren Sie im Strichbedienfeld die Option „gestrichelte Linie“ und wählen Sie einen 5-Punkt-Strich.
Fügen Sie einen weiteren Strich hinzu, indem Sie auf das Symbol "Ausgewähltes Objekt duplizieren" unten im Erscheinungsbildfenster drücken und die Farbe von blau in weiß ändern. Der Strich und die Versatzwerte bleiben gleich. Gehen Sie zu Effekt-Menü> Verzerren und Transformieren> Transformieren und wählen Sie im Bereich Verschieben unter Horizontal minus 1 px aus. Ändern Sie den Mischmodus auf Weiches Licht, jedoch nur für diesen weißen Strich.
Jetzt erstellen wir einen neuen Art-Pinsel. Nehmen Sie das Ellipse-Werkzeug (L), klicken Sie auf eine beliebige Stelle Ihrer Zeichenfläche, um das Ellipse-Fenster zu öffnen, und geben Sie die angezeigten Abmessungen ein. Verwenden Sie das Direktauswahl-Werkzeug (A), um nur die Punkte links und rechts dieser Ellipse auszuwählen und klicken Sie auf die Option Ausgewählte Ankerpunkte in Ecke konvertieren. Wählen Sie die resultierende Form aus, gehen Sie zu Objekt> Pfad> Versatzpfad und wenden Sie einen Minus von 0,7 px an, um eine kleinere Form in der Mitte zu erhalten.
Beide Formen sind mit Weiß gefüllt. Reduzieren Sie die Deckkraft für die größere Form auf 0%, wählen Sie dann beide aus und gehen Sie zu Objekt> Blend> Blend-Optionen. Wählen Sie dort 25 Specified Steps aus und klicken Sie auf OK. Gehen Sie dann zurück zu Objekt> Blend> Make. Ziehen Sie die resultierende Mischgruppe in das Pinselfenster und wählen Sie "Neuer Pinsel".
Kopieren und Einfügen vor der Etikettenform, entfernen Sie die Verlaufsfüllung und geben Sie ihr einen Strich. Wir müssen diese Form schneiden, nehmen Sie das Schere-Werkzeug (C) und klicken Sie auf die angegebenen Punkte. Behalten Sie nur die drei Pfade (schwarz, rot und violett) und löschen Sie die anderen Segmente. Streichen Sie diese Pfade mit dem im vorherigen Schritt gespeicherten Pinsel, und stellen Sie dann die Strichgewichte wie angegeben ein. Ändern Sie den Mischmodus für alle drei auf Überlagerung.
Nun fügen wir den Schatten hinzu. Duplizieren Sie die Farbverlaufsfüllung und ändern Sie die Farbe in Schwarz. Wenn dieses Attribut ausgewählt ist, gehen Sie zu Effekt-Menü> Warp und wenden Sie den Effekt Aufblasen an, um den oberen Bereich breiter zu machen (Bild 1). Gehen Sie dann zu Effekt-Menü> Weichzeichnen> Gaußsche Weichzeichnung und wenden Sie einen 6-Pixel-Radius (Bild 2) an. Gehen Sie dann zu Effekt-Menü> Verzerren und Transformieren> Transformieren. Wählen Sie, um diese schwarze Füllung vertikal um 5 px zu verschieben. Klicken Sie anschließend auf OK (3) und setzen Sie den Mischmodus auf Weiches Licht (4)..
Hier sind die Einstellungen für die Effekte Aufpumpen und Transformieren:
In diesem Schritt maskieren wir die Oberseite des Etiketts. Nimm das Rechteckwerkzeug (M) und zeichne ein Rechteck wie im Bild über dem Etikett. Wählen Sie nun beide Formen (Rechteck + Beschriftung) aus und gehen Sie zu Objekt> Schnittmaske> Erstellen.
Nehmen Sie als Nächstes das Ellipsenwerkzeug (L) und zeichnen Sie zwei Ellipsen mit den angezeigten Abmessungen. Stellen Sie sicher, dass sie zentriert sind, und platzieren Sie sie oben auf dem Etikett. Die linken und rechten Ankerpunkte der Ellipsen sollten mit dem Rechteck ausgerichtet sein, das zuvor für die Maskierung verwendet wurde. Beide Ellipsen werden mit Schwarz gefüllt, nur wenn die größere Deckkraft auf 0% eingestellt ist. Wählen Sie sie aus, gehen Sie zu Objekt> Überblenden> Überblendoptionen und wählen Sie 30 Spezifizierte Schritte. Gehen Sie anschließend zurück zu Objektmenü> Überblenden und wählen Sie Erstellen. Die resultierende Mischgruppe sollte sich hinter dem Label befinden.
Wir müssen eine andere Maske machen. Zeichnen Sie mit dem Rechteckwerkzeug (M) ein Rechteck als schwarzes von unten und senden Sie es hinter das Label, aber vor die Mischgruppe. Bevor Sie fortfahren, richten Sie ihn oben mit dem anderen zuvor verwendeten Rechteck aus. Wählen Sie nun die Mischgruppe und dieses Rechteck aus und gehen Sie zu Objekt> Schnittmaske> Erstellen.
Nehmen Sie das Stiftwerkzeug (P) oder das Liniensegmentwerkzeug (\) und zeichnen Sie einen geraden Weg genau auf der oberen Kante des Etiketts wie unten. Streichen Sie es mit der in Schritt 5 gespeicherten Art-Bürste und stellen Sie das Gewicht auf 0,25 pt. Reduziere die Deckkraft auf 80%.
Zeichnen Sie einen weiteren geraden Pfad über das Etikett und streichen Sie es mit einem Pinsel namens Dry Brush 5, den Sie im Menü Pinsel-Bibliotheken unter Artistic> Artistic_Paintbrush finden. Legen Sie die Strichstärke auf 1,5 pt fest und wählen Sie dann im Menü Objekt die Option Darstellung erweitern und Gruppierung aufheben. Füllen Sie die resultierende Form mit dem angezeigten linearen Farbverlauf und stellen Sie den Winkel auf 90 Grad ein.
Kopieren und Einfügen vor der Etikettenform und bevor Sie fortfahren, löschen Sie alle vorhandenen Erscheinungsbilder. Wählen Sie die Form aus, die Sie im vorherigen Schritt erhalten haben, sowie die Kopie des Etiketts, die sich vorne befinden muss, und wählen Sie Objekt> Schnittmaske> Erstellen (Bild 1). Um ein glänzendes Aussehen zu erzielen, ändern Sie den Mischmodus in "Bildschirm" und reduzieren Sie die Deckkraft für die im vorherigen Schritt erhaltene Form auf 70% (Bild 2). Wenn Sie der Meinung sind, dass die Kanten zu scharf sind, können Sie eine Gaußsche Unschärfe von 1 px anwenden (Bild 3)..
Zeichnen Sie ein kleines Dreieck und gehen Sie zu Datei> Skripts> Runde Ecke. Führen Sie das Skript aus und wählen Sie einen Radius von 5 aus.
Platzieren Sie das Dreieck am unteren Rand des Etiketts und wählen Sie als Füllfarbe Blau (Bild 1). Gehen Sie zu Effekt-Menü> Stilisieren und wenden Sie den Inner Glow-Effekt (2) an. Wenden Sie dann den Schlagschatten-Effekt (3) mit den angezeigten Einstellungen an.
Das letzte, was zu tun ist, ist der Text. Nehmen Sie das Textwerkzeug (T), schreiben Sie Text und verwenden Sie eine Schriftart namens Devinne Swash, die Sie hier finden können. Wählen Sie im Menü Objekt die Option Erweitern aus, um den Text in Formen umzuwandeln und die schwarze Füllung beizubehalten. Gehen Sie zu Effekt-Menü> Stilisieren und wenden Sie den Schlagschatten-Effekt mit den angezeigten Einstellungen an. Ändern Sie den Mischmodus in Überlagerung.
An diesem Punkt ist das Label fertig und wir werden mit dem Rollover-Status fortfahren.
Machen Sie eine Kopie des Etiketts und wir werden nur ein paar Dinge ändern. Einige der Formen sind in den folgenden Bildern versteckt und wir werden zum richtigen Zeitpunkt darüber sprechen. Konzentrieren wir uns auf die Etikettenform und ändern Sie zuerst die Farbverlaufsfüllung. Ändern Sie auch den Blauton, der für den ersten Strich verwendet wird.
Nun werden wir den Schatten verändern. Doppelklicken Sie auf Gaußsche Unschärfe im Erscheinungsbildfenster, um das Fenster Gaußsche Unschärfe zu öffnen und den Radius von 6 auf 4 px zu reduzieren. Doppelklicken Sie als Nächstes auf den angewendeten Aufpumpeffekt, um das Fenster "Warp-Optionen" zu öffnen, und ändern Sie den Wert für "Biegung" von 5 auf minus 5%..
Wählen Sie im Verlaufsfenster die Farbverlaufsfüllung aus und klicken Sie unten auf das Symbol "Ausgewähltes Objekt duplizieren". Als Ergebnis erhalten Sie oben eine weitere Füllung. Behalten Sie den gleichen Farbverlauf bei und wählen Sie im Menü Effekt> Pfad> Versatzpfad einen Minus von 6,5 px. Gehen Sie dann zu Effekt-Menü> Stilisieren und wenden Sie den Inner Glow-Effekt mit den angezeigten Einstellungen an.
Erstellen Sie einen neuen Pinsel, der dem in Schritt 5 gespeicherten ähnlich ist. Zeichnen Sie mit dem Ellipse-Werkzeug (L) eine flache Ellipse (100 x 3 px) und transformieren Sie dann den linken und den rechten Punkt von glatten in Eckpunkte Ecke Option. Gehen Sie zum Objekt-Menü> Pfad> Versatzpfad und wenden Sie einen Offset von minus 1,2 px an, um die kleinere Form in der Mitte zu erhalten. Reduzieren 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 25 festgelegte Schritte und gehen Sie zurück zu Objekt> Überblenden> Erstellen. Ziehen Sie die resultierende Mischgruppe in das Pinselfenster und wählen Sie "Neuer Pinsel".
Strich jetzt die drei Pfade mit dem neuen Art-Pinsel. Stellen Sie das Gewicht für alle drei auf 0,25 pt und den Mischmodus auf weiches Licht.
In diesem Fall möchten wir, dass die glänzende Form weniger sichtbar ist. Verringern Sie daher die Deckkraft von 70 auf 25%..
Ändern Sie den Blauton, der zum Füllen des Dreiecks verwendet wird, und doppelklicken Sie dann auf den im Schattenfenster angewendeten Effekt „Schattenwurf“. Verringern Sie im Fenster die Deckkraft von 80 auf 50%. Der Inner Glow-Effekt bleibt gleich.
Ersetzen Sie für den Text die schwarze Füllung durch blaue und ändern Sie dann den Mischmodus von Überlagerung zurück in Normal, und verringern Sie die Deckkraft auf 80%..
Hier ist der endgültige Rollover-Status des Labels:
Nun, da alles fertig ist, speichern wir sie für das Web. Nehmen Sie das Rechteckwerkzeug (M) und zeichnen Sie ein Rechteck um die Beschriftung. Gehen Sie dann zu Objekt> Beschneidebereich> Erstellen. Sie erhalten das gleiche Ergebnis, wenn Sie das Schnittflächen-Werkzeug oder das Zeichenbrett-Werkzeug (Umschalt + O) verwenden..
Gehen Sie zu Datei> Speichern für Web und Geräte. Dieses Fenster bietet vier Möglichkeiten zum Vergleich des Originaletiketts mit dem, das wir optimieren möchten: Original, Optimized, 2-Up und 4-Up. Ich denke, das Beste ist die 4-Up-Ansicht. Sie können mit verschiedenen Einstellungen spielen, vier Versionen des Labels testen und dann anhand der Dateigröße und der Downloadzeit die beste auswählen. In der oberen linken Ecke befinden sich die Tools. In der oberen rechten Ecke können Sie eine andere Downloadgeschwindigkeit auswählen. In der rechten unteren Ecke haben Sie die Möglichkeit, eine Vorschau des Bildes im Standardbrowser anzuzeigen.
Lassen Sie uns nun einige Einstellungen ändern und vergleichen. Von den sieben verfügbaren Dateiformaten werden nur JPEG, PNG-8 und PNG-24 verwendet. Das GIF-Format eignet sich am besten für Bilder mit flachen Farbbereichen und nicht für solche mit Farbverlauf und Details wie diese Beschriftungen. Ich habe es versucht und sie sahen nicht gut aus.
Das erste Format ist JPEG. Je schlechter die Qualität, desto kleiner die Dateigröße, Sie müssen die Qualität nicht zu sehr verringern. Bei einer Qualität von 60% beträgt die Dateigröße 7,77 KB, aber das Etikett sieht nicht mehr so gut aus und bei maximaler Qualität (100% Qualität) beträgt die Dateigröße 26,11 KB (!!). 70% ist gut. Wenn Sie die Option "Optimiert" aktivieren, ist die Reduzierung der Dateigröße sehr gering, daher werden wir diesmal überspringen. Aktivieren Sie Progressiv, wenn das Bild in Durchgängen geladen werden soll.
Wenn Sie genau wissen, welche Hintergrundfarbe verwendet wird, können Sie eine Mattfarbe auswählen. Der Hintergrund wird mit der ausgewählten Farbe gefüllt, in diesem Fall Rosa, und das Bild wirkt wie eine transparente GIF, verwendet jedoch weiterhin die Millionen von Farben, die JPEGs zu unserem Vorteil darstellen können. Die Dateigröße wird jedoch etwas größer sein.
Nur aus Neugierde habe ich das PNG-8-Format ausprobiert, und Sie können die verschiedenen Einstellungen unten sehen. Wenn Sie „Selektiv“ wählen, wählt Illustrator Farben aus, die das Auge sehen kann, enthält jedoch mehr Farbschattierungen. Die Alternativen sind: Perzeptiv (Farben, die die Augen am besten sehen) und Adaptiv (Farben, die sich tatsächlich im Bild befinden). Lass uns über Dither sprechen. Dadurch werden Pixel verschiedener Farben nebeneinander verteilt, damit das Auge glaubt, dass mehr Farben vorhanden sind, als tatsächlich im Bild vorhanden sind. Der Nachteil ist, dass die Dateigröße wie unten gezeigt um 0% Dither gegenüber 100% Dither erhöht wird. Interlaced entspricht Progressive aus dem JPEG-Format. Keines der Bilder sieht jedoch gut aus, also gehen wir zum nächsten Format über.
Wenn Sie eine Mattfarbe auswählen, erhalten Sie ein besseres Bild, wenn Sie genau wissen, welche Hintergrundfarbe die Webseite sein soll. Wählen Sie auch Kein Transparenz-Dither.
Das mit Abstand beste Ergebnis wird mit dem PNG-24-Format erzielt, obwohl die Dateigröße recht groß ist. Aufgrund des Schatten um das Etikett müssen Sie die Option Transparenz aktivieren.
An dieser Stelle können Sie eine Vorschau des Labels in einem Browser anzeigen, indem Sie auf das in Schritt 24 gezeigte Symbol drücken. Außerdem erhalten Sie einen HTML-Code, den Sie Ihrer Webseite hinzufügen können.
Wenn Sie sich für ein bestimmtes Format entschieden haben, klicken Sie auf die Schaltfläche Speichern, wählen Sie Nur Bilder und einen Zielordner aus, und drücken Sie erneut Speichern.
Wiederholen Sie diesen Vorgang für den Rollover-Status des Etiketts. Im Bild unten sehen Sie die drei Versionen, die ich ausgewählt habe.
Dies ist der Ordner mit den gespeicherten Bildern, und Sie können sie an dieser Stelle beliebig verwenden.
Als Bonus gibt es hier einige Farbvariationen des Labels. Sie müssen lediglich ein paar Dinge ändern, z. B. die Verlaufsfüllung für die Etikettenform, die gestrichelte Strichfarbe, den Verlauf für die Glanzform und die Füllfarbe für das Dreieck. Das ist es!
Dies ist das grüne Etikett:
Hier ist das lila Etikett:
die orange Version…
rot…
und gelb:
Accentsconagua