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

Ähnliche Artikel

  • Kreative Inkscape-Effekte in der Praxis
    Das Vektorzeichenprogramm Inkscape beherrscht nicht nur spröde Bleistift- oder Tuschelinien: Es imitiert bei Bedarf auch die eleganten Pinselschwünge eines Ölgemäldes. Drei leicht nachvollziehbare Beispiele stellen das unter Beweis.
  • Inkscape-Effekte gekonnt einsetzen
    Neben den grundlegenden Zeichenfunktionen bietet Inkscape ausgefeilte Effekte, die Vektorlinien in weich fließende Pinselschwünge verwandeln oder das Zeichnen von feingezähnten Papierrisskanten automatisieren.
  • Kreativität pur
    Inkscape war bisher schon gut. In der Version 0.45 präsentiert sich das Vektorzeichenprogramm allerdings noch kreativer.
  • Vektorzeichenprogramme
    Nach Jahren der Abstinenz gibt es mittlerweile einige Linux-Programme zum Zeichnen von Karten, Schaubildern und anderen Illustrationen. Wir haben uns sieben Programme angesehen, die angetreten sind, CorelDraw oder Designer vergessen zu machen.
  • Web-Seiten layouten mit Gimp
    Übersichtliche Homepages definieren sich über's Layout. Da liegt es nahe, mit einem Grafikprogramm zunächst die Oberfläche festzulegen und daraus den HTML-Code zu generieren. Der Alleskönner Gimp macht's möglich.
Kommentare

Infos zur Publikation

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

Grammatikprüfung in LibreOffice nachrüsten
Grammatikprüfung in LibreOffice nachrüsten
Tim Schürmann, 24.04.2015 19:36, 0 Kommentare

LibreOffice kommt zwar mit einer deutschen Rechtschreibprüfung und einem guten Thesaurus, eine Grammatikprüfung fehlt jedoch. In ältere 32-Bit-Versionen ...

Aktuelle Fragen

Fernwartung oder wartung im haus
heide marie voigt, 29.06.2015 10:37, 0 Antworten
gerne hätte ich jemanden in Bremen nord, der mir weiter hilft - angebote bitte mit preis HMVoigt
Druckeranschluss DCP-195C
heide marie voigt, 29.06.2015 10:35, 1 Antworten
installiert ist linux ubuntu 15.04 offenbar auch der treiber für den Drucker DCP-195C. Die Konta...
keine arbeitsleiste beim einloggen
heide marie voigt, 27.06.2015 13:31, 0 Antworten
seit der neu-installierung von linux ubuntu 15.04 erscheint die arbeitsleiste rechts oben erst na...
raid platte an linux mint 17.1
andreas schug, 23.06.2015 19:44, 0 Antworten
folgende thematik NAS Iomega Storage Center wird auf einmal nicht mehr im netzwerk erkannt .....
SUSE 13.2 - Probleme mit kmail
kris kelvin, 03.06.2015 13:26, 2 Antworten
Hallo, nach dem Umstieg auf 13.1 hatte ich das Problem, daß kmail extrem langsam reagierte. Nun...