German (Deutsch) translation by Valentina (you can also view the original English article)
Befolgen Sie dieses Tutorial und erfahren Sie, wie Sie eine Reihe von Glänzenden Etiketten und einen Rollover-Status erstellen. Wir werden mehrere Erscheinungsbilder und benutzerdefinierte Art-Pinsel verwenden, um das glänzende Aussehen zu erhalten, und wenn wir fertig sind, werden wir die Für Web speichern-Optionen analysieren. Wir werden über Einstellungen sprechen und verschiedene Dateiformate vergleichen, um das beste Bild für Ihre Webseite zu erhalten. Viele Farbvarianten erwarten Sie, also fangen wir an!
Schritt 1
Öffnen Sie zuerst ein neues Webdokument. Nehmen Sie das Rechteck-Werkzeug (Rectangle Tool) (M), klicke auf eine beliebige Stelle auf deiner Zeichenfläche, um das Rechteck-Fenster zu öffnen und die angezeigten Abmessungen einzugeben. Wenn dieses Rechteck ausgewählt ist, gehen Sie zu Menü Objekt > Pfad > Ankerpunkte hinzufügen (Object menu > Path > Add Anchor Points). Als Ergebnis erhalten Sie einen zusätzlichen Punkt in der Mitte jeder Seite. Wählen Sie nun mit dem Direktauswahl-Werkzeug (Direct Selection Tool) (A) nur den unteren Punkt aus, gehen Sie unter Vertikaler Typ minus 55 px zum Menü Objekt > Transformieren > Verschieben (Object menu > Transform > Move) und klicken Sie auf OK.
Schritt 2
Verwenden Sie auch das Direktauswahl-Werkzeug (A) und wählen Sie bei gedrückter Shift-Taste die beiden angegebenen Punkte aus. Gehen Sie dann zu Menü Datei > Skripte > Jede Ecke abrunden (File menu > Scripts > Round Any Corner). Führen Sie das Skript aus und wählen Sie einen Radius von 10 aus. Wenn Sie dieses Skript noch nicht installiert haben, klicken Sie hier, um es abzurufen.
Wählen Sie nun den Punkt aus der Spitze aus und führen Sie das Skript erneut aus. Wählen Sie diesmal einen Radius von 15.
Schritt 3
Füllen Sie die Etikettenform mit dem gezeigten linearen Farbverlauf und ändern Sie den Winkel auf minus 90 Grad. Wenn Sie dieses Füllattribut im Darstellungsfenster ausgewählt haben, drücken Sie unten auf das Symbol Ausgewähltes Element 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. Stellen Sie das Muster auf Bildschirm und reduzieren Sie die Opazität auf 70%.
Schritt 4
Wählen Sie als Nächstes einen blauen Strich aus, gehen Sie zu Menü Effekt > Pfad > Versatzpfad (Effect menu > Path > Offset Path) und wenden Sie einen Versatz von minus 7 px an. Aktivieren Sie im Strichbedienfeld die Option Gestrichelte Linie und wählen Sie einen 5-Punkte-Strich aus.
Fügen Sie einen weiteren Strich hinzu, indem Sie auf das Symbol Ausgewähltes Element duplizieren unten im Darstellung-Bedienfeld klicken und die Farbe von Blau in Weiß ändern. Der Strich und der Versatz bleiben gleich. Gehen Sie zu Effektmenü > Verzerren & Transformieren > Transformieren und wählen Sie im Abschnitt Verschieben unter Horizontal minus 1 Pixel aus. Ändern Sie den Mischmodus auf Weiches Licht, jedoch nur für diesen weißen Strich.
Schritt 5
Jetzt erstellen wir einen neuen Kunstpinsel. Nehmen Sie das Ellipsen-Werkzeug (L), klicken Sie auf eine beliebige Stelle auf Ihrer Zeichenfläche, um das Ellipsenfenster zu öffnen und die angezeigten Abmessungen einzugeben. Verwenden Sie das Direktauswahl-Werkzeug (A), um nur die Punkte links und rechts von 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 Menü Objekt > Pfad > Versatzpfad und wenden Sie einen Versatz von minus 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 beide aus und gehen Sie zum Menü Objekt > Mischung > Mischungsoptionen. Wählen Sie dort 25 festgelegte Schritte aus und klicken Sie auf OK. Kehren Sie dann zum Menü Objekt > Mischung > Erstellen zurück. Ziehen Sie die resultierende Mischgruppe in das Pinselbedienfeld und wählen Sie Neuer Kunstpinsel.
Schritt 6
Kopieren Sie die Etikettenform und fügen Sie sie vor, entfernen Sie die Verlaufsfüllung und streichen Sie sie einfach an. Wir müssen diese Form schneiden, nehmen Sie daher das Scherenwerkzeug (Scissors Tool) (C) und klicken Sie auf die angegebenen Punkte. Behalten Sie nur die drei Pfade (schwarz, rot und lila) bei und löschen Sie die anderen Segmente. Strichen Sie diese Pfade mit dem im vorherigen Schritt gespeicherten Kunstpinsel und stellen Sie dann die Strichgewichte wie angegeben ein. Ändern Sie den Mischmodus für alle drei in Überlagern.
Schritt 7
Fügen wir nun den Schatten hinzu. Duplizieren Sie die Verlaufsfüllung und ändern Sie die Farbe in Schwarz. Wenn dieses Attribut ausgewählt ist, gehen Sie zu Menü Effekt > Verziehen und wenden Sie den Effekt Aufblasen an, um die Oberseite breiter zu machen (Bild 1). Gehen Sie als Nächstes zu Effektmenü > Weichzeichnen > Gaußscher Weichzeichner und wenden Sie einen Radius von 6 Pixel an (Bild 2). Gehen Sie dann zu Effektmenü > Verzerren & Transformieren > Transformieren. Verschieben Sie diese schwarze Füllung minus 5 Pixel vertikal, drücken Sie OK (3) und stellen Sie den Mischmodus auf Weiches Licht (4).
Hier sind die Einstellungen für die Effekte Aufblasen und Transformieren:
Schritt 8
In diesem Schritt maskieren wir die Oberseite des Etiketts. Nimm das Rechteck-Werkzeug (M) und zeichne ein Rechteck wie im Bild über das Etikett. Wählen Sie nun beide Formen (Rechteck + Beschriftung) aus und gehen Sie zu Objektmenü > Schnittmaske > Erstellen (Object menu > Clipping Mask > Make).
Schritt 9
Nehmen Sie als Nächstes das Ellipsen-Werkzeug (L) und zeichnen Sie zwei Ellipsen mit den gezeigten Abmessungen. Stellen Sie sicher, dass sie zentriert sind, und platzieren Sie sie oben auf dem Etikett. Der linke und der rechte Ankerpunkt der Ellipsen sollten an dem Rechteck ausgerichtet sein, das zuvor zum Maskieren verwendet wurde. Beide Ellipsen sind mit Schwarz gefüllt, nur dass bei der größeren die Deckkraft auf 0% eingestellt ist. Wählen Sie sie aus, gehen Sie zu Menü Objekt > Mischung > Mischungsoptionen und wählen Sie 30 festgelegte Schritte aus. Gehen Sie anschließend zurück zum Menü Objekt > Mischung und wählen Sie Erstellen. Die resultierende Mischungsgruppe sollte sich hinter dem Etikett befinden.
Wir müssen eine andere Maske machen. Zeichnen Sie mit dem Rechteck-Werkzeug (M) ein Rechteck wie das schwarze von unten und senden Sie es hinter das Etikett, jedoch vor die Mischgruppe. Bevor Sie fortfahren, richten Sie es oben an dem anderen zuvor verwendeten Rechteck aus. Wählen Sie nun die Überblendungsgruppe und dieses Rechteck aus und gehen Sie zu Objektmenü > Schnittmaske > Erstellen.
Schritt 10
Nehmen Sie das Stiftwerkzeug (Pen Tool) (P) oder das Liniensegmentwerkzeug (Line Segment Tool) (\) und zeichnen Sie einen geraden Pfad genau wie oben unten auf die Oberkante des Etiketts. Streichen Sie mit dem in Schritt 5 gespeicherten Art-Pinsel darüber und stellen Sie das Gewicht auf 0,25 pt ein. Reduzieren Sie die Opazität auf 80%.
Schritt 11
Zeichnen Sie einen weiteren geraden Pfad über das Etikett und streichen Sie ihn mit einem Kunstpinsel namens Dry Brush 5, den Sie im Menü Pinselbibliotheken unter Artistic > Artistic_Paintbrush finden. Stellen Sie das Strichgewicht auf 1,5 pt ein und wählen Sie im Menü Objekt die Option Darstellung und Gruppierung aufheben. Füllen Sie die resultierende Form mit dem gezeigten linearen Farbverlauf und stellen Sie den Winkel auf 90 Grad ein.
Schritt 12
Kopieren Sie die Beschriftungsform und fügen Sie sie ein, bevor Sie fortfahren. Löschen Sie alle vorhandenen Darstellungen. Wählen Sie die im vorherigen Schritt erhaltene Form und auch die Kopie des Etiketts aus, die sich vorne befinden muss, und gehen Sie zu Objektmenü > Schnittmaske > Erstellen (Bild 1). Um ein glänzendes Aussehen zu erhalten, ändern Sie den Mischmodus auf Bildschirm und reduzieren Sie die Opazität 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 1-Pixel-Gaußsche Unschärfe anwenden (Bild 3).
Schritt 13
Zeichnen Sie ein kleines Dreieck und gehen Sie dann zu Menü Datei > Skripte > Jede Ecke abrunden (File menu > Scripts > Round Any Corner). Führen Sie das Skript aus und wählen Sie einen Radius von 5 aus.
Setzen Sie das Dreieck am unteren Rand des Etiketts ein und wählen Sie Blau als Füllfarbe (Bild 1). Gehen Sie zu Effektmenü > Stilisieren und wenden Sie den Inner Glow-Effekt (2) an. Wenden Sie dann den Schlagschatteneffekt (3) mit den gezeigten Einstellungen an.
Schritt 14
Das Letzte, was zu tun ist, ist der Text. Nehmen Sie das Textwerkzeug (Type Tool) (T), schreiben Sie Text und verwenden Sie eine Schriftart namens Devinne Swash, die Sie hier finden. Wählen Sie im Objekt-Menü die Erweitern-Option, um den Text in Formen umzuwandeln und die schwarze Füllung beizubehalten. Gehen Sie zu Effektmenü > Stilisieren und wenden Sie den Schlagschatteneffekt mit den angezeigten Einstellungen an. Ändern Sie den Mischmodus in Überlagern.
Zu diesem Zeitpunkt ist das Etikett fertig und wir werden mit dem Rollover-Status fortfahren.
Schritt 15
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 zuerst die Verlaufsfüllung. Ändern Sie auch den Blauton, der für den ersten Strich verwendet wird.
Schritt 16
Jetzt werden wir den Schatten modifizieren. Doppelklicken Sie im Darstellung-Bedienfeld auf Gaußsche Unschärfe, um das Gaußsche Unschärfe-Fenster zu öffnen und den Radius von 6 auf 4 Pixel zu verringern. Doppelklicken Sie anschließend auf den angewendeten Inflationseffekt, um das Fenster Verziehen-Optionen zu öffnen, und ändern Sie den Biegewert von 5 auf minus 5%.
Schritt 17
Wählen Sie die Verlaufsfüllung im Darstellung-Bedienfeld aus und klicken Sie unten auf das Ausgewähltes Element duplizieren-Symbol. Als Ergebnis erhalten Sie oben eine weitere Füllung. Behalten Sie den gleichen Verlauf bei und gehen Sie zu Menü Effekt > Pfad > Versatzpfad und wenden Sie einen Versatz von minus 6,5 px an. Gehen Sie als Nächstes zu Effektmenü > Stilisieren und wenden Sie den Inner Glow-Effekt mit den angezeigten Einstellungen an.
Schritt 18
Erstellen Sie einen neuen Kunstpinsel ähnlich dem in Schritt 5 gespeicherten. Verwenden Sie das Ellipsen-Werkzeug (L), um eine flache Ellipse mit 100 x 3 Pixel zu zeichnen, und transformieren Sie dann den linken und rechten Punkt mit dem Konvertieren ausgewählter Ankerpunkte in von glatten in Eckpunkte Eckoption. Gehen Sie zu Objektmenü > Pfad > Versatzpfad und wenden Sie einen Versatz von minus 1,2 px an, um die kleinere Form in der Mitte zu erhalten. Reduzieren Sie die Opzität für die größere Ellipse auf 0%, wählen Sie beide aus und gehen Sie zu Objektmenü > Mischung > Mischung-Optionen. Wählen Sie 25 festgelegte Schritte und kehren Sie dann zum Menü Objekt > Mischen > Erstellen zurück. Ziehen Sie die resultierende Mischgruppe in das Pinselbedienfeld und wählen Sie Neuer Kunstpinsel.
Schritt 19
Streichen Sie nun mit dem neuen Art-Pinsel über die drei Pfade. Stellen Sie das Gewicht für alle drei auf 0,25 pt und den Mischmodus auf Weiches Licht.
Schritt 20
In diesem Fall möchten wir, dass die glänzende Form weniger sichtbar ist. Reduzieren Sie daher die Opazität von 70 auf 25%.
Schritt 21
Ändern Sie den Blauton, der zum Füllen des Dreiecks verwendet wird, und doppelklicken Sie dann auf den Schlagschatteneffekt, der im Darstellungsfenster angewendet wird. Reduzieren Sie im Fenster die Opazität von 80 auf 50%. Der Inner Glow-Effekt bleibt gleich.
Schritt 22
Ersetzen Sie für den Text die schwarze Füllung durch blaue, ändern Sie den Mischmodus von Überlagerung wieder auf Normal und reduzieren Sie die Opazität auf 80%.
Hier ist der endgültige Rollover-Status des Etiketts:
Schritt 23
Nachdem alles fertig ist, werden wir sie für das Web speichern. Nehmen Sie das Rechteck-Werkzeug (M) und zeichnen Sie ein Rechteck um die Beschriftung. Gehen Sie dann zu Menü Objekt > Zuschneidebereich > Erstellen (Object menu > Crop Area > Make). Sie erhalten das gleiche Ergebnis, wenn Sie das Zuschneideflächen-Werkzeug (Crop Area Tool) oder das Zeichenflächen-Werkzeug (Artboard Tool) (Shift + O) verwenden.
Schritt 24
Gehen Sie zu Menü Datei > Für Web & Geräte speichern. Dieses Fenster bietet vier Möglichkeiten, um das Originaletikett mit dem zu optimierenden zu vergleichen: Original, Optimiert, 2-Up und 4-Up. Ich denke, das Beste ist die 4-Up-Ansicht, da Sie mit verschiedenen Einstellungen spielen, vier Versionen des Etiketts testen und dann anhand der Dateigröße und der Downloadzeit die beste auswählen können. Oben links befinden sich die Werkzeuge. In der oberen rechten Ecke können Sie eine andere Download-Geschwindigkeit auswählen. In der unteren rechten Ecke haben Sie die Möglichkeit, eine Vorschau des Bildes im Standardbrowser anzuzeigen.
Schritt 25
Lassen Sie uns nun einige Einstellungen ändern und vergleichen. Von den sieben zum Speichern verfügbaren Dateiformaten werden nur JPEG, PNG-8 und PNG-24 ausprobiert. Das GIF-Format eignet sich am besten für Bilder mit flachen Farbbereichen und nicht für Bilder mit Verlaufsfüllungen und Details wie diesen Beschriftungen. Ich habe es versucht und sie sahen nicht gut aus.
Das erste Format ist JPEG. Obwohl die Dateigröße umso geringer ist, je schlechter die Qualität ist, müssen Sie die Qualität nicht zu stark verringern. Bei 60% Qualität beträgt die Dateigröße 7,77 KB, aber das Etikett sieht nicht mehr so gut aus. Bei maximaler Qualität (100% Qualität) beträgt die Dateigröße 26,11 KB (!!). 70% sind in Ordnung. 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 matte Farbe auswählen. Der Hintergrund wird mit der ausgewählten Farbe gefüllt, in diesem Fall Pink, und das Bild wirkt wie ein transparentes GIF, verwendet jedoch weiterhin die Millionen von Farben, die JPEGs zu unserem Vorteil anzeigen können. Die Dateigröße wird jedoch etwas größer sein.
Schritt 26
Nur aus Neugier habe ich das PNG-8-Format ausprobiert und Sie können unten die verschiedenen Einstellungen sehen. Wenn Sie Selektiv wählen, wählt Illustrator Farben aus, die das Auge sehen kann, enthält jedoch mehr farbsichere Farbtöne. Die Alternativen sind: Wahrnehmung (Farben, die die Augen am besten sehen) und Adaptiv (Farben, die tatsächlich im Bild enthalten sind). Reden wir über Dither. Dadurch werden Pixel verschiedener Farben nebeneinander verteilt, damit das Auge glaubt, mehr Farben zu sehen, als tatsächlich im Bild vorhanden sind. Der Nachteil ist, dass es die Dateigröße erhöht, wie Sie unten sehen können, 0% Dithering gegenüber 100% Dithering. Interlaced entspricht Progressive aus dem JPEG-Format. Da jedoch keines der Bilder gut aussieht, fahren wir mit dem nächsten Format fort.
Sie erhalten ein besseres Bild, wenn Sie eine matte Farbe auswählen, falls Sie genau wissen, welche Hintergrundfarbe die Webseite sein wird. Wählen Sie auch Kein Transparenz-Dithering (No Transparency Dither).
Schritt 27
Das mit Abstand beste Ergebnis wird mit dem PNG-24-Format erzielt, obwohl die Dateigröße ziemlich groß ist. Aufgrund des Schattens um das Etikett müssen Sie die Option Transparenz aktivieren.
Schritt 28
Zu diesem Zeitpunkt können Sie eine Vorschau des Etiketts in einem Browser anzeigen, indem Sie auf das in Schritt 24 gezeigte Symbol klicken. Außerdem erhalten Sie einen HTML-Code, den Sie Ihrer Webseite hinzufügen können.
Schritt 29
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 klicken Sie erneut auf Speichern.
Schritt 30
Wiederholen Sie diesen Vorgang für den Rollover-Status des Etiketts. Im Bild unten sehen Sie die drei Versionen, die ich ausgewählt habe.
Schritt 31
Dies ist der Ordner mit den gespeicherten Bildern. An dieser Stelle können Sie sie nach Belieben verwenden.
Abschluss
Als Bonus gibt es hier verschiedene Farbvarianten des Etiketts. Sie müssen lediglich einige Dinge ändern, z. B. die Gradient-Füllung für die Etikettenform, die gestrichelte Strichfarbe, den Gradient für die Glanzform und die Füllfarbe für das Dreieck. Das ist es!
Das ist das grüne Etikett:
Hier ist das lila Etikett:
die orange Version…
rot…
und gelb:
By
