Home / Online-Artikel / Ubuntu User / 2011 / 04 / Webseiten entwerfen mit Inkscape

Newsletter abonnieren

Lies uns auf...

Folge LinuxCommunity auf Twitter

Top-Beiträge

Eingedost
(161 Punkte bei 4 Stimmen)
Aufteiler
(161 Punkte bei 4 Stimmen)

Heftarchiv

LinuxUser Heftarchiv

EasyLinux Heftarchiv

Ubuntu User Heftarchiv

Ubuntu User Heftarchiv

Partner-Links:

Das B2B Portal www.Linx.de informiert über Produkte und Dienstleistungen.

AA_puzzle.jpg

© James Thew, Fotolia

Stückwerk

Webseiten entwerfen mit Inkscape

27.07.2011 Nicht zu unrecht hat sich das Vektorgrafikprogramm Inkscape mittlerweile einen Platz in der Werkzeugkiste der Grafikprofis erarbeitet. Wir zeigen, wie Sie mit der freien Software Webseiten gestalten.

Mit Inkscape [1] entwerfen Sie sowohl druckfähige Designs als auch Icons für den Desktop sowie zahlreiche weitere Typen von Grafiken. Vermutlich wissen Sie bereits, wie Sie mit Inkscape einfach komplexe Freihandgrafiken im Vektorgrafikformat SVG gestalten. Daneben eignet sich die Software aber auch als Werkzeug zum Erstellen von Designs für Webseiten (Abbildung 1). Dank ihres XML-basierten Unterbaus und eines Plug-in-Systems, erzeugen Sie nicht nur ein sauberes, strukturiertes Design. Sie integrieren es auch in existierende Content-Management-Systeme (CMS).

Abbildung 1

Abbildung 1: Aktivieren Sie das Gitternetz von Inkscape und wählen Sie geschickte Voreinstellungen, entwerfen Sie sehr präzise Designs.

Um Ihnen zu zeigen, wie Sie Inkscape als Webdesign-Tool einsetzen, werfen wir zunächst einen kurzen Blick auf die Einstellungen. Dann lernen Sie Wege kennen, um Mock-ups zu entwerfen, die Sie exportieren und in HTML-Seiten integrieren. Sie erfahren, wie Sie Designelemente als individuelle Rastergrafikdateien exportieren, aber auch, wie Sie mit Designvorlagen für Webseiten arbeiten, Gittersysteme einsetzen und CSS-Frameworks verwenden.

Weboptimierte Voreinstellungen wählen

Der erste Schritt beim Webdesign besteht darin, Inkscapes Myriaden Einstellungen so zu justieren, dass die Software saubere und professionelle Zeichnungen erzeugt. Wählen Sie dazu aus dem Menü Datei den Eintrag Dokumenteinstellungen. Die Größe der Arbeitsfläche stellen Sie auf A4, als Standard-Einheiten bietet Inkscape u.a. Millimeter, Pixel und Punkte an – das ist insbesondere für den Print-Bereich wichtig (Abbildung 2).

Abbildung 2

Abbildung 2: Wenn Sie nicht sicher sind, welche Auflösung für Ihr Design Sie wählen sollen, versuchen Sie es mit 1020 x 1020 Pixeln.

Setzen Sie die Standard-Einheiten zunächst auf Pixel (px). Dann geben Sie die gewünschte Höhe und Breite in dem Bereich unterhalb der Seitengröße an. Im Zweifelsfall verwenden Sie eine Auflösung von 1020x1020 Pixel. Sie sollten dabei stets an die komplette Auflösung des Browsers denken und nicht nur an den aktiven Bereich Ihrer Webseite. Generell visualisieren Sie das Design einfacher, wenn die Vorlage die gesamte Bildschirmfläche inklusive der Freiflächen für Werbebanner umfasst.

Wechseln Sie nun zum Reiter Gitter (Abbildung 3) und erzeugen Sie ein rechteckiges Gitter, indem Sie auf Gitter | Neu klicken. Versichern Sie sich, dass es bei den Koordinaten 0,0 beginnt (Ursprung X, Ursprung Y) und verwenden Sie jeweils einen 1-Pixel-Leerraum in die Richtungen der X- und Y-Achse (Abstand X, Abstand Y).

Abbildung 3

Abbildung 3: Gitter helfen Ihnen, punktgenau am Design zu arbeiten. Über die Pfeiltasten verschieben Sie markierte Elemente in 1-Pixel-Schritten.

Wechseln Sie dann zum Reiter Einrasten und aktivieren Sie Immer einrasten im Bereich Am Gitter einrasten. Kombinieren Sie diese Wahl mit dem 1-Pixel-Gitter, das erscheint, wenn Sie nah genug an die Zeichnung heranzoomen. So kleben Sie Ihre Konstruktionen an exakten Pixelgrenzen zusammen, was zu einer scharfen Darstellung des Resultats führt.

Tipp

Entwerfen Sie mehrere Designs, speichern Sie die Datei als Vorlage, und bewahren so die Einstellungen für das nächste Dokument, das Sie entwerfen.

Eine weitere modifizierbare Option ist das Verhalten der Pfeiltasten. Im Bereich Schritte, in den Sie über Datei | Inkscape-Einstellungen gelangen, sorgen Sie dafür, dass ein Druck auf die Pfeiltasten den Cursor lediglich um einen Pixel verschiebt, was ein sehr präzises Anordnen von Elementen ermöglicht. Im Gegensatz zu den oben erwähnten Dokumenteinstellungen handelt es sich hier um eine systemweite Konfiguration, die auch einen Neustart von Inkscape überlebt.

Webgrafiken erzeugen

Inkscapes Werkzeugkiste liefert, was Sie benötigen, um Ihr Layout zu entwerfen. Dabei ist es egal, ob es sich um Logos und Freihand-Icons handelt oder um ausgefeilte Anordnungen aus Rechtecken (Slices) und Farbverläufen, um die verschiedenen Bereiche einer Webseite zu markieren. Die aktuelle Version 0.48 von Inkscape, die Sie in Ubuntu 11.04 vorfinden, unterstützt fortgeschrittene Grafikprimitive wie Spiralen, 3-D-Boxen und Diagrammkonnektoren. Die neuen Zeichenwerkzeuge umfassen kalligraphische Pinsel, Sprühfarben-Objekte sowie ein Verformungs-Tool, das es erlaubt, Bézierkurven und -linien zu verbiegen, indem Sie sie mit diesem Werkzeug "übermalen".

Vor allem aber besteht eine der größten Stärken von Inkscape in puncto Webdesign darin, dass die Software Filtereffekte für Vektorgrafiken beherrscht. Arbeiten Sie gewöhnlich mit einem Rastergrafikprogramm wie Gimp, hält SVG schöne Überraschungen für Sie bereit. Beim Bearbeiten der Bilder kommt unter der Haube XML zum Einsatz. Das bedeutet, dass Sie das Bild beim Bearbeiten zwar verändern, die Modifikationen aber nicht direkt anwenden (nicht-destruktives Arbeiten).

Es gibt mehrere hundert vordefinierte Filtereffekte für Inkscape, die Sie über das Filter-Menü erreichen und die von einfachen Schmier- und Weichzeicheneffekten bis hin zu kombinierten Effekten wie Schattenwerfen und Glühen reichen. In Abbildung 4 sehen Sie den integrierten Filter-Editor. Wenn Sie also den Filter Schatten und Lichter | Leuchtender Umriss auf einen Text anwenden, lassen sich sämtliche Parameter ändern – von den X-Y-Rändern bis hin zum Unschärfe-Faktor.

Abbildung 4

Abbildung 4: Inkscape bietet – ähnlich wie Gimp – Filter an, über die Sie Grafiken verändern. Allerdings erhalten Sie im Ergebnis Vektorgrafiken, die Sie verlustfrei vergrößern und verkleinern.

Ein weiteres hervorragendes Merkmal von Inkscape besteht in der Möglichkeit, Objekte zu klonen. Anders als beim einfachen Duplizieren eines Objekts (das auch möglich ist), verlinkt das Klonen ein kopiertes Objekt zu seinem Original. Es erbt dadurch alle Eigenschaften des Originals inklusive der Füllung sowie Typ und Breite der Striche.

Tip a friend    Druckansicht Bookmark and Share
Kommentare

5246 Hits
Wertung: 213 Punkte (18 Stimmen)

Schlecht Gut

Infos zur Publikation

Infos zur Publikation

title_2012_01

Aktuelle Ausgabe kaufen:

Ubuntu User ist bis Ausgabe 02/2013 vierteljährlich erschienen, aktuelle Artikel zu Ubuntu finden sich ab Ausgabe 04/2013 im LinuxUser.

Tipp der Woche

Bilder vergleichen mit diffimg
Bilder vergleichen mit diffimg
Tim Schürmann, 01.04.2014 12:40, 1 Kommentare

Das kleine Werkzeug diffimg kann zwei (scheinbar) identische Bilder miteinander vergleichen und die Unterschiede optisch hervorheben. Damit lassen sich nicht nur Rätsel a la „Orignial und Fäls...

Aktuelle Fragen

programm suche
Hans-Joachim Köpke, 13.04.2014 10:43, 8 Antworten
suche noch programme die zu windows gibt, die auch unter linux laufen bzw sich ähneln sozusagen a...
Funknetz (Web-Stick)
Hans-Joachim Köpke, 04.04.2014 07:31, 2 Antworten
Bei Windows7 brauche ich den Stick nur ins USB-Fach schieben dann erkennt Windows7 Automatisch, a...
Ubuntu 13.10 überschreibt immer Windows 8 Bootmanager
Thomas Weiss, 15.03.2014 19:20, 8 Antworten
Hallo Leute, ich hoffe das ich richtig bin. Ich habe einen Dell Insipron 660 Ich möchte gerne Ub...
USB-PTP-Class Kamera wird nicht erkannt (Windows-only)
Wimpy *, 14.03.2014 13:04, 15 Antworten
ich habe meiner Frau eine Digitalkamera, AGFA Optima 103, gekauft und wir sind sehr zufrieden dam...
Treiber
Michael Kristahn, 12.03.2014 08:28, 5 Antworten
Habe mir ein Scanner gebraucht gekauft von Canon CanoScan LiDE 70 kein Treiber wie bekomme ich de...