Erstellen Sie ein Vektorsymbol in Adobe Fireworks

Eines der faszinierendsten Gebiete im visuellen Design ist das Icon-Design. Heutzutage werden wir überall von Ikonen angegriffen und bombardiert: auf Produkten, Drucksachen, Verpackung , das Web und insgesamt in Software. Entwerfen Symbolsätze stellt natürlich einige Herausforderungen dar, aber es ist auch eine sehr interessante Übung, mit der Sie neue Dinge lernen und mehr Aufmerksamkeit für Details entwickeln können.

Symbole können eine Nachricht sehr schnell kommunizieren, gelegentlich auf eine Weise, die schneller als Worte ist. Am wichtigsten ist, dass sie, wenn sie gut gestaltet sind, von jedem verstanden werden können, unabhängig von seiner Sprache oder Kultur. In diesem Tutorial erfahren Sie, wie Sie ein Cloud-Symbol für eine Cloud-basierte Software zum Freigeben und Hochladen von Dateien entwerfen.

In den letzten Jahren ist das Geschäft in der Cloud explodiert (auf positive Weise!). Wenn Sie also im visuellen Design arbeiten, werden Sie höchstwahrscheinlich auf eine Aufgabe stoßen, bei der ein Symbol mit einer Art Cloud-Element entworfen wird dazu. Für diese Aufgabe verwenden wir Adobe Fireworks, ein vektorbasiertes Tool, das auch Rastergrafiken unterstützt.



Von Webdesign über UI-Design-Icon-Design bis hin zu Wireframing bietet Fireworks Geschwindigkeit und Flexibilität, die teurerer Software überlegen sind. Obwohl Adobe beschlossen hat, die Weiterentwicklung von Fireworks einzustellen, verwenden viele Designer es immer noch, da es über eine einfache Benutzeroberfläche, Genauigkeit und Kapazität verfügt, um in relativ kurzer Zeit pixelgenaue Ergebnisse zu erzielen.

01. Fangen Sie an

Beim Entwerfen eines Symbols beginne ich im Allgemeinen, Ideen auf einem Notizblock zu skizzieren, um ein klareres Bild davon zu erhalten, wohin ich gehe. Ein Wolkensymbol hat jedoch eine starke kreisförmige Geometrie. Wenn Sie also nicht gerne Stift und Papier verwenden, können Sie zunächst Fireworks oder Ihr bevorzugtes Vektorwerkzeug öffnen.

Der Hauptteil dieser Übung basiert auf kreisförmigen Formen und einer starken Rationalität. Anstelle von Photoshop ist Fireworks beispielsweise eher objektorientiert als schichtenbasiert. Machen Sie sich also keine Sorgen über die Benennung Ihrer Ebenen. Sie können das Objekt direkt auf die Leinwand ziehen, indem Sie es mit dem Zeiger-Werkzeug auswählen ( V. ).

02. Zwei Kreise

Richten Sie Ihre Leinwand auf 800px breit und 1000px hoch. Geben Sie ihm einen hellgrauen Hintergrund (z. B. #CCCCCC) und wählen Sie das Ellipsen-Werkzeug ( U. ).

(Die Größen der verschiedenen Kreise, die wir entwerfen werden, werden absichtlich ausgewählt, aber wir werden in Schritt drei darauf zurückkommen.)

Drücken Sie bei ausgewähltem Ellipsen-Werkzeug Verschiebung und zeichnen Sie einen perfekten Kreis von 180 x 180 Pixel. Kopieren Sie es und fügen Sie es ein ( Cmd + C. , Cmd + V. ) und skalieren Sie den neuen Kreis auf die Größe von 291 x 291 Pixel.

Wählen Sie dazu die Form aus und verwenden Sie die Verknüpfung Befehlstaste + Umschalttaste + T. Wählen Sie dann im Fenster für die numerische Transformation die Option Größe ändern.

03. Goldener Schnitt

Die beiden Kreise, die wir entworfen haben, folgen einer gemeinsamen Regel in der Mathematik und in der Natur, die allgemein als Goldener Schnitt bezeichnet wird und auf Fibonaccis Theorie basiert. Der goldene Schnitt kennzeichnet die Beziehung zwischen zwei Proportionen. Diese beiden Kreise folgen einem Verhältnis (Fibonacci-Verhältnis genannt) von 1: 1,61. Das heißt, wenn der erste Kreis 180 Pixel groß ist, können wir diesen mit 1,61 multiplizieren und den anderen Durchmesser für den Kreis erhalten, der ungefähr 290 Pixel beträgt.

Im Design im Allgemeinen ist die Verwendung des Goldenen Schnitts ziemlich häufig, da dadurch für das Auge ansprechende Kompositionen entstehen.

04. Kopieren und einfügen

Kopieren Sie den kleineren Kreis (180 Pixel) und verschieben Sie ihn nach links, bis die erste Hälfte des Kreises das Quadrat genau in der Mitte schneidet. Dazu können Sie die Form entweder kopieren und einfügen ( Cmd + C. , Cmd + V. ) oder wählen Sie den Kreis aus, indem Sie die Alt-Taste auf der Tastatur drücken und nach rechts ziehen. Dieser Befehl dupliziert die Form. Wenn Sie noch genauer sein möchten, können Sie die Form auswählen und drücken Alt + Umschalt und verschieben Sie die Form. Mit diesem Befehl bewegt sich der Kreis auf einer festen horizontalen Achse, ohne sich auf und ab zu bewegen.

05. Formbildung

Unsere Wolke nimmt Gestalt an. Im Moment haben wir eine Übersichtsansicht. Wenn Sie ein Illustrator-Benutzer sind, können Sie sehen, wie sich Fireworks ähnlich verhält, aber auch, wie schnell Sie Formen erstellen können. Kopieren Sie zu diesem Zeitpunkt die Formen auf der linken Seite des großen Kreises, reflektieren Sie sie und positionieren Sie sie rechts vom Kreis, um eine symmetrische Form zu erstellen. Wählen Sie dazu die Formen links aus, klicken Sie mit der rechten Maustaste und wählen Sie im Kontextmenü Transformieren> Horizontal spiegeln. Bewegen Sie sie dann nach rechts, um das Rückgrat der Cloud zu erstellen.

06. Verliere die unerwünschten Bits

Jetzt können Sie beginnen, die unerwünschten Formen (wie die Kreise auf der linken und rechten Seite sowie die Quadrate) zu entfernen. Wählen Sie sie mit dem direkten Unterabschnitt aus ( ZU ) und drücke Löschen . Andernfalls können Sie dies über das Ebenenbedienfeld tun.

Das Schöne an Fireworks ist, dass Sie Objekte auswählen, kopieren, einfügen und direkt bearbeiten können, anstatt sich zu sehr auf Ebenen zu konzentrieren. Füllen Sie nach dem Löschen der unnötigen Formen die drei verbleibenden Formen mit einer hellgrauen Farbe (#BBBBBB).

07. Spaß mit Pfaden

Wir werden jetzt eines der wichtigsten Panels in Fireworks verwenden: das Path-Panel. Wählen Sie im Symbolleistenfenster Pfad aus, und das Pfadfenster wird angezeigt. Mit dem Unterauswahl-Tool ( ZU ) Wählen Sie alle drei Kreisformen aus. Stellen Sie sicher, dass Sie das Unterauswahlwerkzeug verwenden und dass die drei Kreise nicht gruppiert sind, da sonst das Werkzeug 'Vereinigungsform' aus 'Pfad' nicht funktioniert. Sobald Sie die drei Formen ausgewählt haben, klicken Sie auf das Symbol Verbindungspfade. Die Formen werden zu einer einzigen zusammengeführt. Dies ist dem Pathfinder-Tool in Illustrator sehr ähnlich, verfügt jedoch über einige nette Funktionen, die wir weiter untersuchen werden. Sie sollten jetzt eine Form auf Ihrer Leinwand haben und die Ankerpunkte sehen können.

08. Verfeinern Sie die Details

Wir haben eine Grundform einer Wolke auf der Leinwand. Der Job verfeinert nun die Details und stellt sicher, dass das Symbol für unsere Aufgabe von Bedeutung ist. Wählen Sie das Rechteck-Werkzeug ( U. ) und entwerfen Sie eine rechteckige Form von 264 x 64 Pixel. Positionieren Sie es am unteren Rand der Wolke, um den unteren Rand der Wolke zu einer geraden Linie zu machen.

Beachten Sie, dass in Fireworks standardmäßig alles auf Pixel ausgerichtet ist. Die Snap-to-Pixel-Funktion muss nicht wie in Photoshop aktiviert werden. Wenn Sie andererseits die Größe einer Vektorform ändern und halbe Pixel entfernen möchten, drücken Sie einfach Cmd + K. und dies wird das Problem beheben.

09. Machen Sie einen Umriss

Nun ein bisschen Spaß für den nächsten Teil. Wir möchten, dass das Symbol einfach und leicht ist. Daher verwenden wir eine Umrissform anstelle einer vollständigen Form. Setzen Sie im Eigenschaftenfenster die Füllung auf null oder transparent und den Konturstrich auf 30 Pixel schwarz. Stellen Sie den Wert der Kante auf 3 ein, um die Härte des Strichs etwas weicher und ansprechender für das Auge zu machen. Sie sollten den Strich auch mit dem Befehl dedicate unter der Strichgröße im Eigenschaftenfenster nach außen ausrichten. Ihre Wolkenform sollte jetzt schwarz umrandet sein. Mit dem Stiftwerkzeug ( P. ) Entfernen Sie bei Bedarf unnötige Ankerpunkte.

10. Ändern Sie den Strich

Einige Änderungen am Symbol sind erforderlich, um ein weiteres Element hinzuzufügen. Fügen Sie im Idealfall einen Pfeil nach oben hinzu, um das Hochladen von Dateien in die Cloud darzustellen. Dazu müssen wir den Strich ändern. Hier untersuchen wir eine der interessantesten Funktionen des Pfadbedienfelds in Fireworks. Wählen Sie die Form aus und klicken Sie im Pfadbedienfeld auf das Symbol 2S (Striche in Füllungen konvertieren). Es wird den Strich zu einer festen Form erweitern und kann ein wenig Gedächtnis beanspruchen. Seien Sie also geduldig. Es ähnelt der Expand-Funktion in Illustrator, ist jedoch etwas einfacher zu erreichen.

wie man Schwarz-Weiß-Pop-Art zeichnet

11. Erstellen Sie etwas Platz

Wir müssen etwas Platz für den Pfeil schaffen. Zeichnen Sie dazu mit dem Ellipse-Werkzeug einen Kreis mit 180 Pixel neu. Positionieren Sie den Kreis in der Mitte des Wolkenbodens. Sie können das Ausrichtungsbedienfeld verwenden, um eine 100-prozentige Genauigkeit zu erzielen. Wählen Sie im Fenster die Option Ausrichten.

Sobald die Form in der Mitte ausgerichtet wurde, kehren wir zu unserem Pfadbedienfeld zurück und verwenden das Stanzpfad-Werkzeug.

12. Mehr Verfeinerung

Die Form, die wir jetzt haben, muss verfeinert werden, da wir keine geraden oder rauen Kanten hinterlassen möchten, an denen die Lücke in der Wolkengrundlinie geöffnet wurde.

Zeichnen wir zwei Kreise mit einer Größe von jeweils 30 x 30 Pixel und positionieren Sie sie an den Kanten, an denen die Kreisform abgeschnitten wurde, um die Wolkensilhouette glatt und ordentlich zu machen. Sobald dies erledigt ist, fügen wir sie mit dem Pfadbedienfeld-Werkzeug Union Path mit der Wolkenform zusammen.

13. Schauen Sie mal rein

Bevor wir mit dem Pfeil fortfahren, werfen wir einen Blick auf die Geometrie des Symbols. Alles sollte gut ausgerichtet und glatt sein. Der goldene Schnitt, den wir verwendet haben, macht das Endprodukt definitiv angenehm für das Auge.

14. Starten Sie den Pfeil

Schauen wir uns den Pfeil genauer an. Zeichnen Sie mit dem Rechteck-Werkzeug eine vertikale rechteckige Form mit einer Breite von 36 Pixel und einer Höhe von 200 Pixel. Stellen Sie dann im Eigenschaftenfenster die 'Rundheit' auf ein 100%.

15. Beenden Sie den Pfeil

Wir können jetzt die Form des nach oben zeigenden Pfeils beenden. Stellen Sie sicher, dass die Unterseite des Pfeils am Rand der Wolke ausgerichtet ist.

Entwerfen Sie eine rechteckige Form (35 x 120 Pixel) und drehen Sie sie um 45 Grad. Richten Sie es oben an der Pfeilbasis aus. Kopieren Sie es, fügen Sie es ein und drehen Sie es horizontal, um eine abgerundete Pfeilform zu erstellen.

16. Füge alles zusammen

Nachdem die Form des Pfeils festgelegt ist, fügen wir alle Vektoren zusammen und wenden einen Verlauf an, um das Wolkensymbol interessanter zu gestalten. Wenden Sie einen linearen Verlauf an, der von oben nach unten verläuft (# 0085B2 bis # 0059B2), um einen Blauton zu erhalten, der uns an den Ton eines klaren Himmels erinnert.

17. Schauen Sie noch einmal hin

Lassen Sie uns die Geometrie noch einmal überprüfen. Schauen Sie sich an, wie alles perfekt ausgerichtet ist und wie die Form mit Logik und Konsistenz gestaltet ist.

18. Fertig!

Nachdem das Symbol fertig ist, können Sie es an einer beliebigen Stelle platzieren. Sie können es als Begrüßungsbildschirmelement, in einem Anmeldeformular, sogar auf einem Desktop oder in Online-Shops verwenden. Da es vektorbasiert ist, können Sie es vergrößern und verkleinern, ohne Details zu verlieren. Genießen!

Wörter :: Fabio Benedetti

Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 253.