Verlaufsschatten für Profilayouts mit Inkscape

Verläufe sind schick. Waren es früher runde Ecken, so kommt kaum noch ein Layout ohne Verläufe aus. Besonders interessant wird ein Verlauf, wenn man ihn zu den Rändern hin verblassen lässt. Mit Inkscape sind solche Effekte eine Sache von Minuten.

schattendemoUnser Lieblingstool für das Erstellen von Weblayouts ist das freie Verktorgrafikprogramm Inkscape. Die neuste Version ist so stabil und vielseitig, dass sie auch professionellen Ansprüchen genügt. Inkscape gibt es kostenlos für fast alle Betriebssysteme. Die Bedienung ist unserer Meinung nach einfacher, als z. B. beim überladenen Corel-Draw. In Verbindung mit Gimp ist Inkscape unschlagbar.

So wird's gemacht
Einfach in Inkscape den gewünschten Hintergrund erstellen. Danach zieht man sich eine Box in der gewünschten Länge und Breite auf und füllt diese mit einem hellen Grau oder der abgedunkelten Hintergrundfarbe. Nun wählt man das Verlaufstool, selektiert einen kreisförmigen Verlauf und zieht mittig in Querrichtung der Box einen Verlauf. Um einen rechten Winkel zu erhalten reicht es, die Strg-Taste zu drücken. Die Mitte der Box sollte man sich vorher mit einer Hilfslinie markieren. Danach exportiert man einfach sein Design und schneidet es mit Photoshop oder Gimp zurecht.

Selber ausprobieren

schattendemo2Standardmäßig werden Verläufe in Inkscape nicht dem Objekt angepasst. Sobald man also seinen Rahmen dreht oder verschiebt, bleibt der Verlauf an der Stelle und in der Form, wo er gerade ist. Das ist natürlich äußerst lästig. Zum Glück gibt es Abhilfe: Einfach mit Shift-Strg-P die Einstellungen aufrufen und unter Transformation ein Häkchen bei "Gradienten transformieren" machen.

Damit man die Möglichkeiten besser nachvollziehen kann, haben wir mit Inkscape eine SVG-Datei erstellt. Einfach downloaden, auspacken und ausprobieren.

Download: schattendemo.zip (560KB)

Die Datei lässt sich mit Firefox direkt betrachten. Leider vergrößert Firefox die integrierten Bilder nicht ganz richtig. Anfängern ist die hervorragende Online-Dokumentation von Inkscape zu empfehlen.

Weiterführende Links