Sterne 2.0 vom Himmel holen

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:

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.

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.

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.

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”.

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.

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.

Diesen Artikel bookmarken...

Hide Sites

• Backstage – Hinter den Kulissen
• Logo + Banner für 3. Business-Blog-Karneval
• Aufnahmen im Filmstudio für Videocast
• Origami für Fortgeschrittene
• Got Problems?

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

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 …

Wieso eigentlich nicht. Ist ne Überlegung wert.