Inkscape/ Glasrand

Inkscape-Crashkurs: Schachbrett | Mensch ärgere Dich nicht | Schachfiguren Kleinere Übungen: Glasbutton | Glasränder | Farbverlauf durch Unschärfe | Gemeinsames Zeichnen | Koordinatengitter | Gekachelte Klone | Schwarzweißzeichnungen vektorisieren und kolorieren | Bilder mit Graustufen vektorisieren | Farbbilder vektorisieren | Beispiel: Weltkarte | Manuell vektorisieren Ideen für Zeichenprojekte: Kleine Monster Archiv Inkscape Lehrbuch Startseite

Glas ist ein faszinierendes Medium, daher versucht man auch in allen möglichen Bereichen, es nachzuahmen – sogar in Vista trifft man auf Glas. Hier erstellen wir nun einen Glasrand für eine Internetseite – etwas vom Einfachsten, und trotzdem kann sich das Resultat sehen lassen.

Glas

Zuerst benötigen wir etwas als Hintergrund, damit man das (weisse) Glas überhaupt sieht. Dazu eignet sich zum Beispiel ein neutrales Blau:

#005291ff

Ein Rechteck, möglichst so gross, dass noch viel darauf Platz finden kann, dient uns nun als Unterlage. Darauf kommt nun einmal die Glasscheibe. Nun ziehen wir ein zweites Rechteck, etwas kleiner, das die Glasscheibe wird. Drücke Shift+Ctrl+F, um den Dialog «Füllung und Kontur» aufzurufen, und fülle das Rechteck mit Weiss und füge ihm einen weissen Rand hinzu. Die Transparenz für die Füllung (Alphakanal) setzen wir auf etwa 25 % (ungefähr 65). Nun können noch die Ränder mit dem Rechtecktool, das du über die Taste r bekommst, etwas abgerundet werden. Ziehe dazu den Kreis am oberen rechten Rand des Rechtecks bei gedrückter Ctrl-Taste (damit die Ränder nicht nur auf den Seiten abgerundet werden) etwas nach unten. Das Resultat:

Nun folgt das Selbe nochmals: Wir erstellen im Glas ein zweites Rechteck, das aber schwarz gefüllt ist und nur etwa 10 % transparent ist. Dies bildet nachher den Hintergrund für den Seiteninhalt.

Zuletzt fügen wir noch einen Schatten hinzu. Dupliziere das Glas-Rechteck mit Ctrl+D, verschiebe es mit PgDown hinter das Glas und entferne den Rand. Der Inhalt wird auch schwarz gefärbt. Setze die Gesamtdeckkraft auf ungefähr 40 Prozent und die Weichzeichnung auf etwa 5 %. Damit es nun wie ein Schatten aussieht, muss es noch etwas nach rechts unten verschoben werden, da der Mensch daran gewohnt ist, dass die Sonne von (links) oben kommt.

Der Schatten darf natürlich nicht zu stark sein, Glas ist immerhin durchsichtig und dunkelt nur wenig ab! Es lohnt sich, mit der Deckkraft zu experimentieren, um zu einem möglichst realistischen Ergebnis zu kommen.

Für die weitere Verwendung solltest du das Bild nun als PNG exportieren (ohne Hintergrund!), das Rechteck sollte die Breite haben, die auch später die Internetseite haben wird. Wie man das Bild nun per CSS als Hintergrund einbaut, ist in anderen Tutorials beschrieben.

Richtig glasig sieht das Bild natürlich erst aus, wenn es vor einem interessanten Hintergrund steht, wie im Bild ganz oben.

Ein so gestaltetes Design ist z. B. in wiki2xhtml enthalten («Glassborders»).