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 Firerfox die integrierten Bilder nicht ganz richtig. Anfängern ist die hervorragende Online-Dokumentation von Inkscape zu empfehlen.

Weiterführende Links

 

Kommentar hinzufügen

E-Mail: Für Antworten. Wird nicht angezeigt.
  Sicherheitscode zur Prüfung. Nur Kleinschreibung. Keine Leerzeichen.
Kommentare (2)
RE: Schön... aber
07. Juli 2009
Dirk H.
Die Verläufe werden natürlich ausgeschnitten und als jpg oder png gespeichert. Dann kann man sie zu Beispiel rechts und links in eine Tabelle einfügen oder als Hintergrund für ein äußeren DIV-Container verwenden, der ein inneres Element mit genau dem Abstand der Schattenbreite umschließt. Die Größe der Seite verändert sich dabei nur unwesentlich.

Grundsätzlich ist es natürlich möglich den gleichen Effekt in Photoshop zu erreichen. Ein Vektorgrafikprogramm wie Inkscape hat den Vorteil, dass die Verläufe nachträglich angepasst und verschoben werden können.
Schön... aber
05. Juli 2009
Harald Hoellner
Das sieht wirklich nett aus, aber wie bekomme ich den schtten auf die seite ohne ein riesenbild zu haben?
Dann könnte ichs auch direkt in photoshop machen.
 

be.bra wissenschaft - Verlagsseite
Der Internetauftritt des be.bra wissenschaft Verlages wurde von... weiter

Altgold-Kauf.de - Landingpage
Die Seite Altgold-Kauf (www.altgold-kauf.de) wurde im Auftrag... weiter

Kunstleihhaus.de - Webkatalog
Das Kunstleihhaus (www.kunstleihhaus.de) ist ein Spezialverleih... weiter

Kunstleihhaus.de - Webkatalog