Dieses Blog ist nicht länger aktiv!

Hier wird es in Zukunft keine neuen Inhalte geben, allerdings bloggen die Autoren weiter. Die Designartikel werden nun auf dem persönlichen Blog von Ivo Mynttinen veröffentlicht, während Artikel in denen es um Webdevelopment geht demnächst hier veröffentlicht werden.

Weitere Projekte der Autoren: Fireworks Lab - Kostenlose Adobe Fireworks Dateien

April 9th, 2010 | von Ivo Mynttinen | Design, Freebies, Icons, Tutorials

Webdesigns mit ansprechende Icons sind aus dem Web kaum noch wegzudenken, noch besser ist es wenn der Designer einer Webseite auch die Icons erstellt hat, so kann ein gewisser persönlicher Stil gewahrt werden. Da es nicht jedem Designer liegt Vektor Icons zu erstellen zeige ich euch heute wie man einen ansprechenden Server Icon in Adobe Fireworks CS4 erstellt.

Schritt 1: Das Gehäuse

Als erstes werden wir ein schönes Gehäuse für unseren Server erstellen, hierzu zeichnen wir ein neues Rechteck (U) welchem wir anschließend noch eine Rundung von 4 Pixeln zuweisen.
Rechteck in Fireworks
Nun ändern wir die Füllkategorie von Einfarbig auf Linear und erstellen anschließend einen etwas komplizierten Farbverlauf mit dem wir bereits einige Licht/Schatten-Effekte erzeugen.
Linearer Farbverlauf
Da wir nun die Vorderseite bereits erstellt haben wollen wir nun die obere Fläche des Gehäuse anfügen. Hierfür erstellen wir ein Rechteck welches genauso breit sein sollte wie die Vorderseite. Mit dem Neigen-Werkzeug (Q) sorgen wir dafür dass ein 3D-Effekt entsteht. Nachdem wir die Form entsprechend angepasst haben weisen wir ihr die Füllkategorie “Radial” hinzu. Als Verlaufsfarben verwenden wir hierbei #999FA6 und #5A6471.
Server Gehäuse

Schritt 2: Slotblenden

Wir werden nun die für Serverracks charakteristischen Slotblenden erstellen. Hierzu zeichnen wir zunächst mit dem Stift-Werkzeug (P) die Form freihand. Anschließend zeichnen wir eine Ellipse welche wir auf der eben erstellten Form positionieren. Nun markieren wir unsere Form sowie die Ellipse mit Shift+Maus1. Um nun die Ellipse aus der Form “auszuschneiden” wenden wir die “Pfad öffnen” Funktion an, welche wir unter “Modifizieren > Pfade kombinieren > Öffnen” finden. Jetzt weisen wir unserer Form den selben Farbverlauf zu, welchen wir schon für die Vorderseite unseres Gehäuses verwendet haben. Um letztendlich noch einen leichten eingestanzt Effekt zu erwirken weisen wir unserem Slotblech nun noch den Filter “Abgeflachte Kante außen” zu. Für den Filter verwenden wir folgende Eigenschaften:

  • Breite: 2
  • Farbe: #343944
  • Kontrast: 75%
  • Weichheit: 4
  • Winkel: 135

Fireworks Pfade öffnen
Nun müssen wir unsere Slotblende noch einmal kopieren und über “Modifizieren > Transformieren > Horizontal spiegeln” spiegeln. Jetzt können wir so weit noch nicht geschehen die beiden Slotblenden an den richtigen Stellen positionieren.
Server Icon

Schritt 3: Lämpchen

Glühende Dioden
Wir werden nun 2 kleine Lämpchen an der Vorderseite des Servers zeichnen. Hierzu erstellen wir einfach zwei kleine Ellipsen (z.b 4×4 Pixel), welchen wir dann den Filter “Glühen” zuweisen. Als Farbe für den Glühen-Effekt verwenden wir die selbe welche wir für die Lampe selbst verwenden. Nun kann neben den Lämpchen noch ein kleiner Text wie “Power” oder “Traffic” eingefügt werden.

Schritt 4: Power-Knopf

Power-Knopf
Jetzt werden wir unserem Server noch einen Power-Knopf spendieren. Hierfür zeichnen wir zunächst eine Ellipse (U), als Farbe verwenden wir #21242D. Um den Eindruck zu erwecken dass der Knopf ein wenig tiefer liegt fügen wir unserer Ellipse den Filter “Innerer Schatten” hinzu, als Eigenschaften verwenden wir hierbei:

  • Abstand: 1
  • Weichheit: 2
  • Winkel: 315

Das bekannte “Power”-Symbol können wir entweder mit einer Ellipse und einem kleinen Strich erzeugen, oder aber wir bemühen die Google-Bildersuche und schneiden uns das Symbol passend zurecht.

Schritt 5: LAN-Port

Silberner Verlauf in FireworksVermutlich existiert auf dieser Welt kein Server ohne einen LAN-Anschluss, weshalb auch unser Server einen spendiert bekommen sollte. Als Basis zeichnen wir ein Rechteck, dessen Füllkategorie wir anschließend auf “Linear” umstellen. Um einen Silber-Effekt zu erzielen erstellen wir einen Verlauf dessen Farben immer wieder von einem hellen zu einem dunklen Grau wechseln.
Nun werden wir mit dem Pinsel-Werkzeug das “Loch” zeichnen, wie dies etwa aussehen sollte seht ihr in der unten stehenden Grafik. Dieser von uns erstellten Form weisen wir nun noch ein Inneres Glühen zu. Als Eigenschaften verwenden wir hierbei:
Lan-Stecker Vektor

  • Breite: 2
  • Farbe: Weiß
  • Deckkraft: 17%
  • Weichheit: 1
  • Versatz: 0

Jetzt fehlen nur noch die Pins, welche wir einfach mit dem Bleistift-Werkzeug malen. Was zunächst etwas kompliziert klingt könnte leichter nicht sein: wir malen zwei übereinander liegende Pixel, für den oberen Pixel verwenden wir die Farbe #B29861, für den unteren #F5E2AA. Die erstellte Bitmap kopieren wir nun 7 oder 8 mal und positionieren sie mit ein wenig Abstand zueinander am im unteren Teil unseres LAN-Ports.

Schritt 6: USB-Anschluss

USB-Port Vektor
Den USB-Anschluss können wir nach dem selben Prinzip erstellen wie den LAN-Port, es muss lediglich zu Beginn eine andere Form gezeichnet werden.

Schritt 7: Kühlerrippen


Nun möchten wir die Kühlerrippen unseres Servers entwerfen und an der Front des Gehäuses positionieren. Zunächst erstellen wir ein Rechteck mit einem linearen Verlauf (#1E212B zu #11121A), als Rundung wählen wir das Maximum. Anschließend wenden wir den Filter “Innerer Schatten” mit folgenden Eigenschaften an:

  • Abstand: 2
  • Weichheit: 1
  • Winkel: 315

Jetzt werden wir unserer Form über Modifizieren > Transformieren > Numerisch Transformieren etwas schief stellen. In dem Dialogfeld wählen wir als Transformationsart “Drehen” und einen Winkel von 125°.
Transformieren
Nun können wir unsere fertige Kühlerrippe beliebig oft kopieren und entsprechen mit ein wenig Abstand zueinander anordnen. Ein mögliches Resultat könnte dann zum Beispiel so aussehen:
Kühlerrippen in Fireworks

Schritt 8: Lichteffekte

Unserem Icon fehlt noch ein wenig Glanz, deshalb werden wir das nun mit Hilfe einiger Lichteffekte ändern. Für die Lichteffekte werden wir eine Technik verwenden die ich bereits einmal hier etwas genauer erläutert habe.
Zunächst erstellen wir drei verschiedene Formen mit dem Pinsel-Werkzeug (alternativ können wir auch 3 sehr dünne Ellipsen zeichnen), für diese Formen wählen wir als Rand “Weiche Kante”, mit einer Intensität von 10.
Lichteffekt in Fireworks CS4
Außerdem setzen wir die Deckkraft auf 55% herunter und wählen als Mischmodus “Ineinanderkopieren”.
Weiche Kante in Fireworks
Nun positionieren wir die Formen an der Ecke zwischen Front und Oberseite sowie an den Slotblenden. Um an bestimmten Stellen einen stärkeren Effekt zu erwirken können auch zwei bis vier Formen direkt übereinander kopiert werden.
Lichteffekte in Fireworks

Das Ergebnis

Unser Resultat ist ein Icon der einen edlen Eindruck bei dem Betrachter hinterlässt.
Glossy Server Icon Tutorial

Download
Creative Commons License

Ein Kommentar

  1. Mato sagt:

    Hi,
    ein sehr gutes Tutorial, habe es selber gerade Probiert, sieht echt gut aus bis auf die *Spiegeleffekte* die hab ich weggelassen :-).

    Danke und Grüße

    Antworten

Hinterlasse einen Kommentar