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.

Stückwerk

Webseiten entwerfen mit Inkscape

Ein alternativer Web Slicer

Die eingebaute Web-Slice-Erweiterung ist nett, aber ziemlich neu, weshalb noch einige Funktionen fehlen – das schließt die Dokumentation ein. Beschäftigen Sie sich mit dem Zusammenstückeln von Web-Designs, schauen Sie sich einmal die andere Option an und laden Sie die alternative Inkscape-Schneider-Erweiterung herunter. Beide Erweiterungen lassen sich parallel installieren, insofern ist es sicher, damit zu experimentieren.

Die Erweiterung zu installieren ist einfach: Sie laden zwei Dateien von der GitHub-Seite des Projekts herunter, layer2png.inx und layer2png.py. Dazu klicken Sie auf den Download-Button und entpacken dann das TAR.GZ- bzw. ZIP-Archiv. Kopieren Sie die darin enthaltenen Dateien in das Verzeichnis .config/inkscape/extensions/ in Ihrem Home und starten Sie Inkscape neu.

Wie beim eingebauten Slicer erzeugen Sie zunächst Ihr Design. Diese Erweiterung erfordert es allerdings, dass Sie die Slices selbst erzeugen und dann die Rechtecke direkt zeichnen – es gibt kein Pop-up-Fenster, das den Prozess begleitet. Legen Sie also manuell eine neue Slice-Ebene an und zeichnen Sie Rechtecke über die Grafik der Webseite, deren Deckkraft Sie am besten in den Ebeneneigenschaften reduzieren. Haben Sie sämtliche Slices eingezeichnet, klicken Sie mit der rechten Maustaste auf diese und wählen jeweils die Objekteigenschaften aus. Dabei handelt es sich um einen Inkscape-Dialog, nicht um einen Teil der Erweiterung. In dem Fenster sehen Sie die generische Objekt-ID, die Inkscape für das Rechteck erzeugt hat, etwa rect2994. Ändern Sie diese Bezeichnung und nennen Sie das Slice nun beispielsweise header oder footer (Abbildung 9).

Abbildung 9

Abbildung 9: In den Objekteigenschaften ändern Sie die generischen Namen für Ihre Slices. Die exportierten Dateien tragen dann diese Namen, was das Identifizieren erleichtert.

Sind Sie fertig, rufen Sie den Menüpunkt Erweiterungen | Internet | Export Layer Slices auf – die einzige Dialogbox für diese externe Slicer-Erweiterung. Sie tippen hier das Verzeichnis ein, in dem die Ausgabedateien landen sollen und geben in der Zeile darunter an, welche Ebene Sie als Slice-Ebene definieren. Klicken Sie auf Anwenden, durchforstet die Erweiterung die Slices und erzeugt die Ergebnisse.

Die Erweiterung scheint weniger Optionen zu haben, aber automatisiert mehr Aufgaben für Sie. Anders als der integrierte Slicer, benutzt sie automatisch die Objekt-ID als Ausgabename für das Slice. Sie färbt zudem die Slice-Rechtecke ein, um anzuzeigen, ob beim Export eine neue Datei erzeugt (grün) und eine alte Datei überschrieben wurde (rot). Welche Erweiterung Sie hilfreicher finden, hängt davon ab, wie Sie arbeiten.

Mit CSS-Gittern und Vorlagen arbeiten

Um das beste aus der Slice-Erweiterung zu holen, benötigen Sie davor natürlich ein ansprechendes Webseiten-Design. Die gute Nachricht ist, dass Inkscape es Designern einfach macht, mit populären Gittersystemen für CSS-Frameworks zu arbeiten, etwa 960 Grid System [3], Golden Grid [4] und Blueprint [5].

CSS-Gittersysteme sind Werkzeuge, die Web Designern mit Hilfe von Gittern helfen, saubere Formatierungen einzuhalten, mit konsistenten Spaltenbreiten und genügend Abstand zwischen den Elementen zu arbeiten. Sie definieren gewöhnlich ein bestimmtes Gitter mit einer fixen Zahl an Spalten (gewöhnlich 12 oder 16) sowie die dazugehörigen Zwischenräume. Die Spalten werden als CSS-Klassen definiert. Um etwa ein zwei Spalten breites Element zu definieren, erweitern Sie die HTML-Attribute um den Eintrag class="grid_2".

Um in Inkscape mit einem Gitternetz zu arbeiten, müssen Sie entweder ein Inkscape-Template herunterladen oder eine einfache Vektorgrafik-Vorlage im SVG-Format. Beide erhalten Sie gewöhnlich auf den Webseiten der Grid-Systeme. Das 960-Grid-System-Paket bringt zum Beispiel Code-Dateien mit (etwa die tatsächlichen CSS-Dateien, die Sie auf dem Server benötigen) sowie Vorlagen für eine Vielzahl an Designwerkzeugen – sowohl für quelloffene als auch für proprietäre. Die Inkscape-Vorlagen liegen im SVG-Format vor. Jedes besteht aus einem leeren, 1020 Pixel breiten, Dokument mit einem vordefinierten rechteckigen Gitternetz und vertikalen Hilfslinien, welche die Spalten und Abstände vorzeichnen (Abbildung 10).

Abbildung 10

Abbildung 10: Anbieter von Grid-Systemen wie 960 Grid System bieten auch Vorlagen für Inkscape an. Hier sehen Sie ein typisches 16-Spalten-Layout.

Inkscape unterscheidet nicht zwischen Vorlagen und gewöhnlichen Dateien, also sollten Sie Ihr Design sobald wie möglich unter einem neuen Namen speichern. Benutzen Sie das vorgefertigte Gitternetz, um Seiten nach dem Grid-System zu entwerfen. Noch einmal: Wenn Sie in den Voreinstellungen wie anfangs erwähnt Immer einrasten aktivieren, hilft Ihnen das, alle Elemente der Webseite pixelgenau zu positionieren.

Nutzen Sie den eingebauten Web-Slicer, geben Sie einfach den passenden Klassennamen in das HTML-Register ein, das beim Anlegen eines Rechtecks erscheint (HTML Klassen Attribut). So integrieren Sie das Gittersystem nicht nur in das finale Ergebnis, die Seitenelemente sind auch bereits richtig getaggt, wenn Sie die HTML-Seiten exportieren. Sie müssen allerdings noch die zum Grid-System gehörenden CSS-Dateien auf den Webserver laden und die passenden Klassen-IDs deklarieren.

Machen Sie in Ihrem Design freigiebig Gebrauch von Ebenen, um den Hintergrund von den Seitenelementen zu trennen, Blindtext auf einer eigenen Ebene zu behalten usw. Sie nutzen Ebenen auch gut als Platzhalter für Widgets, die ein JavaScript-Framework serverseitig generiert. Das Yahoo User Interface (YUI) enthält zum Beispiel Open-Source-Elemente für Webdesign und zwar in alle möglichen Formen [7]. Das reicht von Formularfeldern über Tabs bis hin zu Texteditoren mit integrierten Bedienelementen. Yahoo bietet Code an, um sowohl YUI-Widgets in Ihre Seite einzubauen als auch Widgets im SVG-Format, die Sie in Inkscape als Designelemente verwenden.

Tip a friend    Druckansicht Bookmark and Share
Kommentare

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...