Sterne 2.0 vom Himmel holen


Geschrieben am Freitag, 25. Januar 2008 von Henning Franke

Genau wie ein sich spiegelnder Schriftzug oder knallige Farbverläufe, gehören auch die folgenden Sternbuttons zu einer der zahlreichen Erscheinungen in Web 2.0-Layouts. Verwendungszwecke gibt es viele: Ob als simpler Eyecatcher, als Teasergrafik oder einfach nur, weil es fast schon zur Standardausstattung einer Web 2.0-Seite gehört.

Aus diesem Grund soll auch hier im Neukunden-Magnet eine entsprechende Anleitung nicht fehlen:

stern1.jpg 

Wir beginnen mit einem Rechteck auf einer neue Ebene und duplizieren die Ebene anschließend (Fig. 1). Die neue Ebene dann num 45° drehen (Fig. 2). Das Rechteck sollte insgesamt etwas größer sein, als die gewünschte Endgröße des Buttons, da die Kanten durch die Drehung etwas unscharf werden. Durch späteres Runterskalieren der Grafik können wir das verhindern.

stern2.jpg

Nach dem drehen des Rechtecks fügen Sie beide Ebenen zusammen (markieren & Strg+E) und wiederholen danach den ersten Schritt. Diesmal mit einer Drehung um ca. 22°. Das Ergebnis sollte ungefähr wie das obere Bild aussehen. Anschließend verkleinern wir den Stern auf die gewünschte Größe.

stern3.jpg

Die Grundform hätten wir – was fehlt ist der saubere, glänzende Web 2.0 Look. Wir beginnen mit einem Hell-Dunkel Verlauf der Farbe unserer Wahl und wenden anschließend ein paar Ebeneneffekte an. Zuerst einen leichten Schlagschatten nach außen und anschließend einen “Schein nach innen”. Im Eigenschaftenfenster sollte hierbei aufgrund der vielen spitzen Kanten”Präzise” als Technik eingestellt werden.

stern4.jpg

Damit der Stern seinen Glanz erhält, müssen wir zuerst die Ebenentransparenz des Sterns selektieren (Rechtsklick auf die entsprechende Ebene > “Pixel auswählen”). Die Auswahl dann um ca. 5 Pixel verkleinern, je nach Größe des Sterns. Wie benötigen jetzt zwei Verläufe (Weiß > Transparent), einmal an der Oberseite des Sterns, einmal an der Unterseite. Anschließend setzen Sie die Transparenz des oberen Verlaufs etwas herab und wechseln den Ebenenmodus der unteren Verlaufsebene zu “Ineinanderkopieren”.

stern5.jpg

Den letzten Feinschliff erhalten wir, indem wir (ungefähr) die obere Hälfte des Sterns mit dem Ellipsenwerkzeug selektieren und “Helligkeit & Kontrast” soweit erhöhen, bis sich der selektierte Teil deutlich vom unteren Teil abhebt.

stern6.jpg

Das Endergebnis mit Text und leicht schräggestellt. Eigentlich wäre ja “BETA” der passendere Text gewesen, aber das ist dann schon wieder zuviel des Guten… ;-)

Bei Fragen wie immer einfach die Kommentarfunktion benutzen oder per Mail an henning.franke( a t )thoxan( p u n k t )com.

Verwandte Artikel:
4 KOMMENTAR(E)
zum Beitrag “Sterne 2.0 vom Himmel holen”
alex
Am 26. Januar 2008 um 14:11 Uhr

Das wäre was für unsere website, genial. ich zeige es den anderen

Focke
Am 11. Februar 2008 um 12:56 Uhr

Nichts gegen kleine Anleitungen zum Selberbauen, die Bastelanleitungen in Hausfrauenzeitungen haben die Hersteller von Dekoartikeln schließlich auch nicht in die Knie gezwungen ;-)
Ich finde jedoch dieses ganze Web2.0 Optik Gedöns ziemlich vereinheitlichend. Mitmachweb ja, aber wo bleibt der individuelle Charakter eines Angebots, wenn jeder seine Aqua-Buttons, Sterne und Rahmen usw. nach Schema Web 2.0 anfertigt. Was zählt sind die Inhalte eines Angebots und natürlich ein funktionales und ansprechendes Design. Ich denke dieses Einheitsdesign vieler Seiten wird sich ganz schnell wieder verabschieden – zu Gunsten individueller Varianten, die sich aus dem Aquameer wie kreative Inseln hervortun.
Vielleicht könnte man ja einen Wettbewerb anstoßen, “Vielfalt für das neue Internet” – bei dem dann alles erlaubt ist – nur keine Aqua Elemente …

Thomas Kilian
Am 13. Februar 2008 um 17:57 Uhr

Hi Focke aka Logoblogger24, danke für Deinen Kommentar – wobei ich nicht den Eindruck habe, dass sich das widerspricht. “Individueller Charakter”, “funktionales Design” und “Vielfalt” werden doch nicht durch eine grafische Anleitung zur Sternenzucht in Frage gestellt. Du verwendest doch auch Farbverläufe, Hover-Effekte und anderes “Gedöns” auf Deinen Seiten – “das eine tun und das andere nicht lassen” finde ich immer noch am besten. In diesem Sinne: Lasst die Sterne leuchten, so hell und individuell es Euch möglich ist! Gruß, Thomas#

David
Am 12. November 2008 um 00:10 Uhr

Wieso eigentlich nicht. Ist ne Überlegung wert.

2 TRACKBACK(S)
zum Beitrag “ Sterne 2.0 vom Himmel holen”
logoblogger24 » Web 2.0 Optik wo immer Web 2.0 ist?
Am 11. Februar 2008 um 13:09 Uhr

[...] ein Beitrag aus dem Neukundenmagnet-Blog: [...]