Verwenden Sie Fireworks, um exquisite Details auf Symbolen zu erstellen

In diesem Artikel verwenden wir die Fireworks-Software, um einige Details auf einem vorgefertigten Symbolbild zu erstellen, um das Symbol raffinierter und schöner zu machen!

Bei der Verwendung von Fireworks (im Folgenden als FW bezeichnet) für das Icon-Design sind zwei Hauptpunkte zu beachten:

Erstens konzentriert sich FW auf Webdesign und ist nicht für die Erstellung übermäßig komplexer PS-Effekte geeignet. Sie können sich auf die PS-Filter von FW CS5 freuen.
Zweitens ähnelt die Bearbeitungsmethode von FW der von AI. Wenn Sie es gewohnt sind, in einer PS-ähnlichen Pixel-Shading-Umgebung zu arbeiten, können Sie dieses Tutorial ignorieren.

Kommen wir als Nächstes zur Sache. Lassen Sie uns zur Erklärung ein relativ normales Symbol kopieren, das es für alle einfacher macht, es zu verstehen.

Das Bild unten ist eine Reihe von Symbolen, die vom bekannten inländischen Eico-Design erstellt wurden. Das Objekt, das wir kopieren möchten, ist das im Bild eingerahmte Umschlagsymbol. Lassen Sie mich im Voraus erklären, dass wir aufgrund des Themas des Tutorials einige Details zu diesem Symbol hinzufügen werden, sodass unser endgültiges Kopierergebnis vom Originalbild abweichen wird.

Schritt 01

Schneiden Sie das Symbol aus, das Sie als Referenz kopieren möchten, und sperren Sie die Ebene. Das Pfad-Panel meiner FW hier ist aus Fireworks CS4 extrahiert, hat aber keinen Einfluss auf die nachfolgenden Vorgänge, da ich alle in CS3 enthaltenen Funktionen nutze.

Schritt 02

Zeichnen Sie mit dem Werkzeug „Abgerundetes Rechteck“ ein abgerundetes Rechteck ähnlich dem Beispielbild, passen Sie mit den vier Kontrollpunkten für abgerundete Ecken den Radius der abgerundeten Ecken an und drücken Sie dann Strg+Umschalt+G, um die Form aufzubrechen.

Kopieren Sie dann das erste abgerundete Rechteck, verschieben Sie mit dem weißen Pfeilwerkzeug ein Pixel in vier Richtungen und erstellen Sie zwei abgerundete Rechtecke, wie im Bild gezeigt (beachten Sie, dass die acht Knoten an den abgerundeten Ecken mit weißen Pfeilen bearbeitet werden, das müssen sie auch sein ausgerichtet).

Wir können Stroke nicht verwenden, um einem Rechteck einen äußeren Rand hinzuzufügen, da der virtuelle Rand Sie umbringen würde. Wenn das abgerundete Rechteck, das Sie mit dem Werkzeug „Abgerundetes Rechteck“ gezeichnet haben, virtuelle Kanten aufweist, die keine Kontur sind, streuen Sie die Knoten, wählen Sie den Pfad mit dem Werkzeug „Schwarzer Pfeil“ aus und klicken Sie im Bedienfeld „Pfad“ auf „Punkte zu Pixeln runden“, um alle Knoten des Pfads zurückzugeben . Positionieren Sie auf den Pixelschnittpunkt (Sie können auch das weiße Pfeilwerkzeug verwenden, um einen Knoten für die individuelle Referenzierung auszuwählen).

Schritt 03

Kopieren Sie das große, abgerundete Rechteck und legen Sie es auf die oberste Ebene. Verwenden Sie die Tastenkombination Umschalt+Pfeil, um ein umgekehrtes Dreieck zu erstellen. Füllen Sie dann das obere umgekehrte Dreieck mit einem durchgehenden braunen Farbverlauf Stellen Sie 1 Pixel Rand ein.

Schritt 04

Verwenden Sie die weißen Pfeile, um die in der Mitte angezeigten Knoten auszuwählen, und bewegen Sie sich dann mit den Pfeiltasten der Tastatur um zwei Pixel nach unten, damit der Umschlag länger aussieht (da ein einzelnes Symbol hier nicht durch den Gesamtstil eingeschränkt wird).

Schritt 05

Drehen Sie das zuvor gezeichnete umgekehrte Dreieck mit Farbverlauf um, erstellen Sie eine Kopie und platzieren Sie es. Ihre Positionsbeziehung ist wie in der Abbildung unten dargestellt. Die beiden umgekehrten Dreiecke sind von oben nach unten durch etwas mehr als 1 Pixel voneinander getrennt. Sie können das weiße Pfeilwerkzeug verwenden, um die vier Knoten über dem dunkelbraunen umgekehrten Dreieck auszuwählen, und die Maus mit der Hilfslinie ziehen, um die Knoten um 0,3 bis 0,5 Pixel nach oben zu verschieben. Dadurch wird das Dunkelbraun zuerst (und dann) weniger verschwommen angezeigt Geben Sie die Idee, Stroke für Ränder zu verwenden, so schnell wie möglich auf (dies ist kein Photoshop).

Schritt 06

Beachten Sie, dass sich über dem Symbol im Beispielbild eine Hervorhebung befindet und es sich dabei nicht um eine übliche strahlende Einzelpixel-Hervorhebung handelt (die 1-Pixel-Hervorhebung über der Hervorhebung von etwa zwei Pixeln ist heller als die 1-Pixel-Hervorhebung darunter). Sie können also die Verwendung einer Hervorhebung in Betracht ziehen Ein elliptischer Strahler wie Ellipse erzielt diesen Effekt.

Wir wählen das untere abgerundete Rechteck zweimal aus und kopieren es. Nachdem wir die Position verschoben haben, erhalten wir zwei abgerundete Rechtecke mit einem Abstand von 2 Pixeln. Wir verwenden die Methode der Subtraktion der beiden rechteckigen Pfade, um einen neuen Pfad zu erhalten, und füllen ihn mit Ellipse (weiß 0). -100 Transparenz) und stellen Sie schließlich den Überlagerungsmodus dieses Hervorhebungspfads auf Überlagerung ein.

Schritt 07

Fügen Sie unten eine 1-Pixel-Hervorhebung hinzu.

Schritt 08

Das aktuelle Ergebnis ist wie folgt: Machen wir eine Pause und trinken Sie Tee. Als nächstes werden wir Details hinzufügen.

Schritt 09

Wenn wir den Hintergrund vorübergehend auf Weiß ändern, können wir sehen, dass aufgrund der im vorherigen umgekehrten Dreieck verwendeten Ausfransungen einige Pixel von beiden Seiten der Hülle etwas überliefen.

Es gibt zwei Methoden, um diese Pixel zu verarbeiten, und die andere ist die Maskierung unter Beibehaltung des Pfads, da diese den Pfad beibehält und bei Bedarf später bearbeitet werden kann unten:

Schritt 10

Kehren wir zum dunklen Hintergrund zurück. Fühlen Sie, dass die Seiten des Umschlags etwas flach sind? Verwenden Sie eine Balken- oder Radialfüllung, um einen gewissen Effekt zu erzielen.

Schritt 11

Fügen Sie als Nächstes Einzelpixel-Hervorhebungen zu den oberen und unteren Dreiecken der Hülle hinzu. Da der Vorgang der Pfadsubtraktion (Pfad stanzen, Sie finden ihn im Menü „Ändern – Pfade kombinieren“) bereits mehrfach besprochen wurde, werde ich ihn nicht erklären hier, wie unten gezeigt:

Schritt 12

Fügen Sie auf die gleiche Weise Hervorhebungen zum Dreieck unten hinzu.

Schritt 13

Da der Hintergrund eine dunklere Farbe hat, können wir erwägen, einen Glanz hinzuzufügen. Hier verwenden wir nicht den Projektions- oder Lumineszenzfilter von FW, sondern den Pfad. Warum? Weil es einfacher zu steuern ist, nur weil es persönliche Vorlieben sind. Wir können ein neues abgerundetes Rechteck erstellen, das oben, unten, links und rechts 1 Pixel größer ist als das untere abgerundete Rechteck des Umschlags, ohne Auslaufen und mit einer Transparenz von 30.

Schritt 14

Fügen Sie dann unten ein 1-Pixel-Highlight hinzu.

Schritt 15

An diesem Punkt ist das Symbol im Wesentlichen fertig und wir treten nun in die Polierphase ein. Wir wählen alle Ebenen aus und „kopieren“ sie, drücken dann schnell Strg+Alt+Umschalt+Z, um die Ebenen in Bitmaps zu reduzieren, und stellen dann den Überlagerungsmodus auf Überlagerung und die Transparenz auf 60 ein, damit wir die Sättigung sehen können Das Symbol wurde verbessert. Dies ist meine persönliche Lieblingsmethode zum schnellen Polieren, aber sie ist nicht immer anwendbar, um Parameter wie Kurven, Kontrast usw. manuell anzupassen. und Sättigung.

Beenden

Der endgültige Effekt (das Dreieck unter der Hülle verwendet den Pfad als Projektion)