In diesem Workshop für Gelegenheits-Photoshopper bauen wir eine amtliche W eb 2.0 Banderole und fixieren sie mit CSS links oben in der Ecke.
Wir brauchen eine Banderolen-Grundfigur in der gewünschten Form und der gewünschten Farbe. Ein roter Stern mit 28 Ecken ist eine gute Wahl. Gezeichnet wird er mit dem Polygon-Werkzeug und den entsprechenden Einstellungen in den Polygon-Optionen:
In den Ebenen-Optionen (Doppelklick auf das Layer in der Ebenen-Palette) stellen wir ein: „Schein nach außen“
und „Kontur“
Das Ergebnis:
Wir legen eine zweite Ebene über der vorhandenen an und wählen die Form auf der Ebene darunter aus – mit Strg Klick auf die Form. Die ausgewählte Form:
Mit rot als Vordergrund- und weiss als Hintergrund-Farbe bringen wir auf der neuen Ebene einen leichten Verlauf an:
Im nächsten Schritt verkleinern wir die Auswahl um vier Pixel (Auswahl – Auswahl verändern – Verkleinern: 4px), kehren die Auswahl um (Auswahl – Auswahl umkehren) und löschen den Rand (Entf):
Jetzt wird die Banderole beschriftet und der Text gedreht (Bearbeiten – Transformieren – Drehen). Ganz unten im Ebenen-Stapel richten wir eine neue Ebene ein, auf die wir mit dem Rechteck-Werkzeug das Banderolen-Band zeichnen. Der Band-Ebene geben wir in den Ebenen-Optionen anschliend noch 1px Kontur aussen in der Farbe grau. Die vorhandenen Ebenen können wir mit Ebene – Sichtbare auf eine Ebene reduzieren vereinen und das Ergebnis mit einem dezenten Schlagschatten versehen:
Die Banderole kann so wie sie ist im PNG-Format abgespeichert werden, das nun auch der IE 7 vollständig beherrscht. Wer Rücksicht auf ältere Microsoft-Browser nehmen muss, muss den Hintergrund jeweils anpassen oder benutzt ein schattenloses GIF.
Eingebaut und positioniert wird die Banderole mit dem folgendem CSS:
#banderole {
position: fixed;
top: 0;
left: 0;
}
Live Demo im neuen Fenster: Banderole auf Musterseite
Erstveröffentlichung 29.12.2006
