Einen simplen RSS-Button aufpeppen

Einleitung

Im ersten Teil des Tutorials habe ich Euch gezeigt, wie Ihr einen simplen RSS-Button relativ schnell mit Illustrator erstellen könnt. Dieser Beitrag soll nun einen Anreiz geben, wie Ihr Eurem Button eine persönliche Note geben könnt und ihn besser in das Design Eurer Seite integrieren könnt.
Ein neues Dokument anlegen
Als erstes empfiehlt es sich, ein neues Dokument anzulegen. Für dieses Tutorial habe ich mich für 50*40Px entschieden. Im Hintergrund öffnet Ihr am besten auch gleich das Dokument aus dem ersten Teil mit Eurem eigenen RSS-Button. Diesen kopiert Ihr nun in das neue Dokument und positioniert Ihn auf der rechten Seite der Arbeitsfläche.

Am Ende sollte das Ergebnis dann so aussehen:

Pimped RSS-Button - Finale Version

Button Drehen und Einfärben

Pimped RSS-Button - Einfügen und Drehen

In meinem Blog spielen die Farben Grün sowie ein dunkles Blau eine wichtige Rolle. Mit diesen Farben soll nun auch der personalisierte RSS-Button versehen werden. Ihr markiert also zunächst den Hintergrund des Buttons und öffnet die Verlaufspalette. Dort wird der aktuelle orange Verlauf angezeigt. Die orangen Farbtöne ersetzt Ihr durch zwei Grüntöne, wie sie auch auf der Webseite verwendet werden. Als nächstes markiert Ihr den gesamten Button und drehen ihn leicht im Uhrzeigersinn.
Um den Effekt zu erhalten, dass der Button aus der Seite herausschaut, wird einen Teil der unteren Ecke mit einer weißen Fläche überdeckt.

Stilelemente hinzufügen

Pimped RSS-Button - Schlagschatten einfügen

Um das Erscheinungsbild weiter zu unterstreichen werden nun ein paar Stilelemente eingefügt, die zum Beispiel im Banner oder bei den Überschriften mit verwendet werden. Aber Vorsicht! Weniger ist auch hier meist mehr!
Für einen guten Abschluss nach unten könnt Ihr nun noch mit dem Ellipsen-Werkzeug eine flache Ellipse aufziehen, diese in dem dunklen Blau einfärben und so positionieren, dass sie genau die Stelle ein wenig überdeckt, an der der Button scheinbar aus dem weißen Hintergrund herausragt. Über Dateimenü > Effekte > Stilisierungsfilter >  Schlagschatten könnt Ihr der Ellipse noch einen dezenten Schatten verpassen. Damit dieser nicht zu globig wird, habe ich mich für eine sehr geringe Verschiebung von 0,5Px entschieden sowie eine dezente Weichzeichnung.

Fazit

Pimped RSS-Button - Finale Version

Mit wenigen Handgriffen könnt Ihr im Adobe Illustrator Euren eigenen RSS-Button aufpeppen und ihn damit zum einen besser in das Design der eigenen Seite integrieren und zum anderen Euch mit dieser Variante vom Rest ein wenig abheben.
Ich hoffe, ich konnte Euch ein paar nützliche Tipps und Anregungen vermitteln und freue mich auf Euer Feedback.

// Gefällt Ihnen diese Seite oder empfinden Sie den Inhalt als besonders interessant?

Mit einem einfachen Klick können Sie es in Ihrem Sozialen Wunschmedium teilen: [Google+] |  [Facebook] |  [Twitter]

Dieser Eintrag wurde gepostet in Tutorials. Lesezeichen auf diesen Post.

2 dachten über “Einen simplen RSS-Button aufpeppen

  1. Pingback: WebDESIGN und Programmierung » Einen simplen RSS-Button erstellen - Klinger webDESIGN

Schreiben Sie eine Antwort

Ihre Mail-Adresse wird nicht angezeigt.

Folgende HTML-Tags und Attribute dürfen verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>