von Dirk Metzmacher

Firefox hat es, andere Browser folgen. Ein neues, frisches RSS-Icon, das in kurzer Zeit zu einem Standard gereift ist. Wir bauen es selbst und variieren das Ausgangsmaterial.

Von Matt Brett gibt es eine Kollektion mit fertigen Vektorbildern. Enthalten sind 14 Photoshop-Vorlagen (PSD) und 4 für Adobes Illustrator. Die Vorlagen für unsere Entwürfe können in einem ZIP-Archiv herunter geladen werden.

RSS Standard-Icon

1. Die Grundlage
Ein neues Dokument wird über »Datei --> Neu« in der Größe geöffnet, die später auch das Icon besitzen soll. Mit dem Abgerundeten-Rechteck-Werkzeug zieht man die Grundform auf. Es ist wichtig, dass »Formebenen« in der Optionsleiste aktiviert ist, damit selbsttätig eine neue Ebene entsteht, was für den weiteren Verlauf des Tutorials relevant ist.

Der Radius des Abgerundeten-Rechteck-Werkzeugs ist abhängig von der Größe des Icons. Bei dieser großen Variante habe ich einen Radius von 25 Pixel gewählt, bei den üblichen Icongrößen von 16x16, 24x24, 32x32 und 48x48 Pixel reicht ein Radius von etwa 10 bis 20 Pixel aus. Mit #cc6611 (RGB 204, 102, 17) als Vordergrundfarbe entsteht die erste Fläche.

Grundform des Icons

2. Zweite Form
Die Vordergrundfarbe wird auf #ee7722 (RGB 238, 119, 34) umgestellt und eine etwas kleinere Form aufgezogen, so das die untere Fläche als Kontur dient. Alternativ könnte man auch einzig diese Form erstellen und die Kontur als Ebenenstil einrichten, was bei kleineren Versionen durchaus sinnvoll ist, hier aber zu unsauberen Ergebnissen führen würde. Für einen leichten 3D-Effekt aktiviert man den »Ebenenstil --> Schein nach innen« mit Umgekehrt multiplizieren, Deckkraft 75% und Größe 8.

3D-Effekt dank Ebenenstil

3. Leichtes Glühen
Der 3D-Effekt wird mit Hilfe des »Ebenenstils --> Verlaufsüberlagerung« verstärkt, der mit den Einstellungen Füllmethode Überlagern, Deckkraft 20%, einem Verlauf von Schwarz nach Weiß und einem Winkel von 130 Grad übernommen wird und somit für ein schwaches Glühen sorgt. Wer mag, kann für ein leicht schwebendes Icon noch den »Ebenenstil --> Schlagschatten« bei der größeren Form, also eine Ebene tiefer, aktivieren.

3D-Effekt verstärkt

4. Glühen verstärken
Das Original-Icon glüht weit mehr, weshalb auf einer neuen Ebene, die man über »Ebene --> Neu --> Ebene« erstellt, mit dem Pinsel-Werkzeug, einer weichen Pinselvorgabe und weißer Farbe von rechts oben nach links unten einen Strich gezogen wird. Dazu wird die Shift-Taste gedrückt gehalten und erst in die eine, dann in die andere Ecke geklickt.

Die Füllmethode dieser Ebene stellt man in der Ebenenpalette auf Überlagern, die Deckkraft auf 80% ein. Im Menü klickt man daraufhin auf »Ebene --> Schnittmaske erstellen«. So ist sichergestellt, dass nur die kleinere Form aufgehellt wird. Man kann das Glühen noch mit dem »Filter --> Weichzeichnungsfilter --> Gaußscher Weichzeichner« abschwächen.

Fertige Grundlage

5. Zeichen - Teil 1
Mit weißer Farbe und dem Ellipse-Werkzeug wird der kleine Kreis für das RSS-Symbol aufgezogen. Die runde Form erhält man ganz leicht, wenn beim Aufziehen die Shift-Taste gedrückt gehalten wird. Die zwei Bögen werden mit gleicher Technik geformt. Erst zieht man einen großen Kreis auf. Dieser wird mit dem Rechteck-Werkzeug links und unten so beschnitten, dass nur ein Viertelkreis stehen bleibt. Dazu muss in den Optionen »Vom Pfadbereich subtrahieren« aktiviert sein.

Aufbau des RSS-Symbols

6. Zeichen - Teil 2
Zuletzt wird die Form mit dem Ellipse-Werkzeug beschnitten. Der Kreis wird beim ersten Versuch kaum an der richtigen Stelle stehen. Hier hilft das Pfadauswahl-Werkzeug aus, mit dem der Kreis aktiviert und verschoben werden kann. Im Anschluss wird der kleinere Bogen geformt.

"Original" RSS-Icon

Individualisierte Version

1. Von Orange zu Gelb
Für den Einsatz auf der Website kann das RSS-Icon an deren Design angeglichen werden. Das Dr.Web Magazin etwa zeichnet ein 2D-Design und die dominanten Farben Schwarz und Gelb aus. Für einen abgeschwächten 3D-Effekt habe ich die Ebene mit dem weißen Strich gelöscht, was per Drag & Drop der Ebene auf den Mülleimer oder über »Ebene --> Löschen --> Ebene« schnell erledigt ist. Ein Doppelklick auf die Ebenenminiatur der kleinen Form in der Ebenenpalette ruft den Farbwähler auf. Hier wurde die Farbe auf #ffff00 (RGB 255, 255, 0) gestellt. Die Farbe der größeren Form wurde so auf #cccc00 (RGB 204, 204, 0) geändert.

Farben individuell angepasst

2. Von Weiß zu Schwarz
Auch das weiße RSS-Symbol ändert seine Farbe über einen Doppelklick auf die entsprechende Ebenenminiatur, wonach im geöffneten Farbwähler statt Weiß Schwarz ausgewählt wird.

Dr.Web Version des RSS-Icon

3. Kombinatorik
Auf diesem Wege erstellt man verschiedenste Varianten des RSS-Icons. Dank der Formen reicht ein Doppelklick aus, um im Farbwähler eine andere Farbe zu aktivieren. Es können dabei Farbabstufungen, komplementäre Töne oder gar Unfarben eingesetzt werden.

Zahlreiche Farbkombinationen sind denkbar

Gespiegelte Version

1. Kopiert und gedreht
Für eine Spiegelung blendet man die Hintergrundebene aus, reduziert alle sichtbaren Ebenen auf eine Ebene und kopiert diese über »Ebene --> Neu --> Ebene durch Kopie«. Ein Klick auf »Bearbeiten --> Transformieren --> Vertikal spiegeln« dreht die Kopie, die auch gleich unter dem Original positioniert wird. Die Deckkraft stellt man auf 40% ein, um dann im Menü über »Ebene --> Ebenenmaske --> Alles einblenden« der Ebene eine Ebenenmaske zu spendieren. Mit dem Verlaufswerkzeug wird ein Verlauf von Weiß nach Schwarz und von oben nach unten über der Kopie aufgezogen.

Von der Kopie zur Spiegelung

Gestanzte Version

1. Füllmethode
Die Farbe des Original-Symbols wird von Weiß auf Schwarz abgeändert, die Füllmethode in der Ebenenpalette von Normal auf Überlagern umgestellt. Für die Änderung der Farbe reicht, wie schon beschrieben, ein Doppelklick auf die entsprechende Ebenenminiatur und die nachfolgende Auswahl im Farbwähler.

Farbe geändert

2. Wie gestanzt
Mit einem Klick auf »Ebene --> Ebenenstil --> Schatten nach innen« sorgt man für die Illusion der Tiefe. Der Stil wird mit den Einstellungen Füllmethode Multiplizieren, Winkel 45 Grad, Distanz und Größe 5 übernommen.

Stil aktiviert

RSS-Symbol mit Kontur

1. Button löschen
Wer die Buttonform nicht mag, löscht die zwei Ebenen mit den Formen und die Ebene mit dem weißen Streifen und stellt die Farbe des RSS-Symbols nach eigenem Geschmack ein. Man kann auch im Hintergrund eine Textur einfügen, wie hier zu sehen.

RSS-Zeichen

2. Kontur
Damit sich das Symbol besser vom Untergrund abhebt, wurde noch der »Ebenenstil --> Kontur« mit ein Pixel Stärke und der Farbe #ff8800 (RGB 255, 136, 0) aktiviert, dann die Deckkraft auf 60% reduziert. Mit dem Text-Werkzeug kann unter dem Symbol eine erklärende Bezeichnung geschrieben werden.

Icon mit Text

Mehr Stil

1. Holzbutton
Für ein RSS-Icon aus Holz aktiviert man den »Ebenenstil --> Musterüberlagerung« mit der Füllmethode Normal, Deckkraft 100% und der Holz-Textur, die unter Muster ausgewählt wird. Der Ebenenstil wird kopiert. Dazu geht man in der Ebenenpalette über das f-Symbol der Ebenenstile, klickt die rechte Maustaste, dann auf »Ebenenstil kopieren«.

Mit Musterüberlagerung

2. Ebenenstil einfügen
Die Deckkraft der Ebenen der weißen RSS-Form wird auf 60% reduziert, dann über die rechte Maustaste der gerade kopierte Ebenenstil eingefügt. Über »Ebene --> Ebenenstil« wird eine Farbüberlagerung mit Füllmethode und der Farbe #440000 (RGB 68, 0, 0) aktiviert. Der Schein nach innen wurde hier noch auf Füllmethode Überlagern und schwarzer Farbe umgestellt.

Holz-Button

Andere Icons

1. Entfärben
Wer die gleiche abgerundete Grundform auch für andere Symbole nutzen möchte, löscht einfach das RSS-Zeichen und stellt die Farben der zwei Formen beliebig ein. Für diese Del.icio.us-Version habe ich die Farben auf Hell- und Dunkelgrau umgestellt.

Grundlage für weitere Icons

2. Del.icio.us-Logo
Das Logo von Del.icio.us wurde auf einer eigenen Ebene über der Grundform erstellt. Mit dem Auswahlrechteck und gedrückter Shift-Taste zieht man eine quadratische Auswahl auf, die man mit Weiß füllt. Die Auswahl wird mehrfach verschoben und mit Blau, Grau und mit Schwarz gefüllt, wonach die Auswahl aufgehoben werden kann.

Das Del.icio.us-Logo

3. Logo angepasst
Das Logo soll die Form des Icons annehmen. Dazu klickt man im Menü auf »Ebene → Schnittmaske erstellen«. Sollte das Logo nicht ganz in der Mitte stehen, nutzt man einen kleinen Trick. Über »Auswahl --> Alles auswählen« wird die Arbeitsfläche ausgewählt, dann Strg X und Strg V auf der Tastatur gedrückt. Der Inhalt der Ebene wird damit ausgeschnitten und zentriert wieder eingefügt.

Del.icio.us Icon

Weitere Icons sind denkbar. Da die Grundform immer gleich ist, kommt es automatisch zu einer Uniformität, wodurch Ordnung und Übersichtlichkeit entstehen.

Die Vorlagen für diese Entwürfe können in einem ZIP-Archiv herunter geladen werden.

Erstveröffentlichung 26.02.2006

Verwandte Artikel

• Zielgruppengerechte Farbwahl (0) €
• Was sind Piktogramme? (1)
• RSS: Streit ums Icon (12)
• RSS: kreative Icons für mehr Leser (37)
• News-Feeds oft schwer zu finden (21)
• Logodesign Teil 5: Gitter, Raster, Konturen & Kontraste (0) €
• Ikonenmaler: Mit spezieller Software zum perfekten Icon (0) €