30 Sep

3D und Beveleffekte mit Inkscape

Lange Zeit gab es keine OpenSource Alternative zu Adobe Illustrator, Freehand oder Corel Draw. Seit einiger Zeit wird aus einem hässlichen Entlein ein stolzer Schwan. Es ist dass Programm Inkscape (www.inkscape.org), das es in der Version 0.42 für Linux, Windows und Apple system X gibt.
Auch wenn noch einige Funktionen der Profiprogramme fehlen, so ist Inkscape eine kostenlose Alternative für alle, die einfache Bedienung wünschen und auf Features wie Vierfarbseparation verzichten können.

Um die Mächtigkeit von Inkscape zu demonstrieren, habe ich ein kleines Tutorial verfasst. Anhand einer Kugel möchte ich die Stärken der Verlaufsfunktion von Inkscape aufzeigen.

Schritt eins


Wir zeichnen einen einfachen Kreis. Danach rufen wir über das Icon oder (Shift+Strg+F) den Fülldialog auf.
Der Schieber "Gesamt-Transparenz" (unten) sollte auf 1 stehen. Unter "Füllen" suchen wir uns eine helle Grundfarbe aus und klicken auf das "Kreisverlauf" Symbol. Jetzt erhalten wir einen Verlauf von unserer Grundfarbe nach transparent.
Über den Klick auf "Bearbeiten" kommen wir zum Verlaufseditor. Auch dieser Dialog erklärt sich fast von selbst. Wir selektieren oben den Endpunkt des Verlaufs (durchsichtig) und wählen einen deutlich dunkleren Ton unserer Grundfarbe.
Wir schließen danach beide Dialoge und wählen das "Verlaufstool" aus der linken Werkzeugleiste. Damit können wir den Mittelpunkt der hellen Farbe etwas nach links oben verschieben.

Schritt zwei


Zwar sieht die Kugel schon plastisch aus, aber wir brauchen noch einen Glanzeffekt. Hierfür duplizieren wir den Kreis mit (Strg+D) verkleinern ihn etwas. Das machen wir mit der Tastenkombination (Strg+(). Nun rufen wir den "Füllen Dialog" auf (Shift+Strg+F).
Die dünne schwarze Linie sollten wir entfernen. Einfach auf "Linie" gehen und auf das kreuzförmige Symbol klicken.
Im "Füllen" Dialog wählen wir das Symbol "einfarbig" und suchen uns eine rein weiße Farbe. Die Gesamttransparenz sollte etwas reduziert werden (ca. 60%). Danach klicken wir af das Symbol für den kreisförmigen Farbverlauf. Voila! wir haben einen neuen Farbverlauf von Weiß nach durchsichtig.
Mit dem "Verlaufstool" kann nun der Verlauf so angepasst werden, dass er wie Glas wirkt.

Schritt drei


Kugeln sehen besonders plastisch aus, wenn sie einen Lichtreflex entgegengesetzt des Highlights haben. Wir kopieren daher die Ebene (Strg+D) und rufen den Füllen Dialog auf (Shift+Strg+F) dort klicken wir wieder einmal auf das "Einfarbig" Symbol und suchen uns ein sehr helles Blau aus. Danach klicken wir wieder auf "Kreisverlauf" Symbol um einen Verlauf nach Transparent zu erhalten. Über das "Verlaufstool" in der Hautwerkzeugleiste passen wir den Verlauf so an, dass er unten rechts als inverse Corona in der Kugel erscheint.

Schlussbemerkung

Das Tutorial ist nur eine Anregung. Über Gimp lassen sich die SVG-Grafiken auch direkt als Bitmap einlesen und für Webseiten bearbeiten. Ich habe festgestellt, dass die Beveleffekte einen eigenen Look haben, der sich durch Plugins wie Eye Candy nicht erzeugen lässt. So lassen sich tolle technische Oberflächen für Webseiten gestalten. Dies sind nur ein paar einfach Beispiele. Je mehr Ebenen eine Grafik hat, desto komplexer sehen die Elemente aus. Im Grunde genommen basieren sie aber alle auf der selben Technik.


Die Grafik des Tutorials könnt ihr hier auch direkt im SVG-Format herunterladen. Durch das Verschieben der Ebenen erkennt man sofort wie die Effekte zustande kommen.

Beispiel: glossy-svg.zip

viel spaß!!!!