Fürs Web arbeiten

Inkscape exportiert jeden Teilbereich einer SVG-Grafik in ein Rastergrafikformat wie PNG. Individuelle Elemente wie Logos und Icons müssen Sie dazu lediglich auswählen und dann den Menüpunkt Datei | Bitmap exportieren aufrufen. Der Exportdialog errechnet automatisch die Höhe und Breite einer Auswahl. Sie können die Menge an Weißraum, der das ausgewählte Objekt umgibt, verändern, indem Sie die Koordinaten (x0,y0) und (x1,y1), welche die obere linke und untere rechte Ecke des Rahmens bezeichnen, umbiegen. Die Größe der Ausgabe beeinflussen Sie, indem Sie die Parameter für Höhe und Breite manuell festlegen (Abbildung 5).

Abbildung 5: Exportieren Sie komplette Grafiken oder Teile davon in das Bitmap-Format, können Sie in einem Dialogfenster eine Auflösung für das Ergebnis festlegen.

Für ein komplettes Seitendesign sollten Sie die Vorteile von Inkscapes Ebenenunterstützung nutzen. Die erlaubt es, ein komplettes Design in handliche Einzelkomponenten zu zerlegen – so genannte Slices (Abbildung 6). In Inkscape wird die Funktion mit Schneider übersetzt, tatsächlich erinnern die Slices an Schnittmuster. Es gibt zwei Inkscape-Erweiterungen, die Ihnen beim Schneidern helfen. Eine von ihnen ist in Inkscape 0.48 integriert: Sie finden sie unter Erweiterungen | Internet | Schneider. Die andere entwickelt Matt Harrison separat, Sie laden sie über Harrisons GitHub-Webseite herunter [2].

Abbildung 6: Die Elemente Ihres Designs, die Sie benötigen, schneiden Sie mit Hilfe von Rechtecken einfach aus. Diese Prozedur nennt sich "Slicen" oder "Schneidern".

Diese Werkzeuge funktionieren nach einem ähnlichen Prinzip. Sie beginnen, indem Sie die Grafik für Ihre Webseite in Form einer Ebene anlegen (oder in so vielen Ebenen wie Sie wollen, wählen Sie dazu Ebene | Ebenen). Als nächstes stülpen Sie den vorhandenen Ebenen eine Slices-Ebene über. Über Rechtecke kennzeichnen Sie die Areale des Designs, die Sie später als einfaches Bild exportieren wollen. Dazu gehören zum Beispiel der Kopfbereich, die Seitenleiste, die Navigationsleiste oder der Fußbereich.

Aus Ihrem so säuberlich unterteilten Design suchen Sie nun jedes einzelne Element heraus und verstecken andere, indem Sie auf das Augensymbol in der Statusleiste klicken und dann Bitmap exportieren aus dem Datei-Menü wählen. Verbergen Sie bestimmte Slices, fliegen diese nicht aus der Auswahl – die betroffenen Objekte landen allerdings nicht in dem exportierten Bitmap.

Der eingebaute Webzerstückler

Soweit die Theorie. Die Slicing-Erweiterungen sind ein Versuch, den beschriebenen Prozess zu automatisieren, damit Sie nicht alle Schritte durchlaufen müssen. Um sie in Aktion zu sehen, erzeugen Sie den Designentwurf einer Webseite in Inkscape und wählen dann Erweiterung | Internet | Schneider | Geschnittenes Rechteck erzeugen. Eine Dialogbox fordert Sie auf, dem Slice einen neuen Namen zu geben und das bevorzugte Bildformat, die DPI-Einrichtung und andere Optionen festzulegen. Sie bestimmen auch die Hintergrundfarbe, was unter anderem wichtig wird, wenn Ihr Design Transparenz verwendet (Abbildung 7).

Abbildung 7: Für jedes Slice legen Sie individuelle Namen fest. Das erleichtert den späteren Einsatz in Ihrem Design.

Die Erweiterung legt automatisch eine Slice-Ebene an, wenn Sie das erste Rechteck definieren und nennt diese Ebene Web Slicer. Für jedes neue Stück, das Sie generieren, erzeugt Inkscape ein halbtransparentes, rötlich gefärbtes Rechteck in der Web-Slicer-Ebene. Egal, wo Sie es nun auf der Seite positionieren und wie Sie seine Größe ändern – den darunterliegenden Inhalt exportiert Inkscape als Slice.

Standardmäßig exportieren Sie alle definierten Slices als Rastergrafiken, indem Sie Erweiterungen | Internet | Schneider | Exportiere Layout-Teile und HTML+CSS-Code auswählen. Das erfasst sämtliche Slices und erzeugt die darunterliegenden Bildelemente wahlweise im PNG- oder JPG-Format. Die Formate legen Sie zuvor im Dialog zum Einrichten eines Rechtecks fest (Geschnittenes Rechteck erzeugen).

In dem Dialogfenster stoßen Sie auf eine Reihe von Registern, über die Sie formatspezifische Einstellungen für die Ausgabe vornehmen. Die JPEG- und GIF-Tabs verhalten sich ziemlich gewöhnlich, sie beeinflussen die Qualität und ähnliches. Der HTML-Reiter verdient hingegen mehr Aufmerksamkeit. Wann immer Sie den Slice-Export vornehmen, exportieren Sie nicht nur PNG-Bilder für jedes Stück, sondern erzeugen auch eine Beispieldatei im HTML-Format. Diese verlinkt die Slices korrekt und ordnet sie in einer CSS-Datei an (Abbildung 8).

Abbildung 8: Inkscape exportiert Slices mitsamt einer HTML- und CSS-Datei. Beide lassen sich problemlos im Browser aufrufen.

Das Feature ist natürlich ein großer Gewinn für Designer. Es erspart Ihnen Arbeit, weil Inkscape das HTML und CSS für Ihr Layout automatisch generiert und auch jedes Mal aktualisiert, wenn Sie es verändern. Da die Software für die Slices allerdings recht generische Namen vorsieht – etwa Element1 – bearbeiten Sie die Ausgabe manuell. Das HTML-Register im besagten Dialog lässt Sie jedem Slice ein HTML id Attribut zuordnen, das dann im finalen HTML landet (Abbildung 7).

Der Dialog erlaubt es zudem, ein HTML Klassen Attribut zu setzen (wenn Sie eines verwenden), den Positionsanker zu platzieren und zwischen verschiedenen Layoutoptionen zu wählen. Die Standardauswahl lautet hier Positioniert html Block-Elemente mit dem Bild als Hintergrund. Wahlweise spezifizieren Sie auch sich wiederholende oder gekachelte Hintergründe (inklusive rein horizontaler oder vertikaler Wiederholungen) oder unabhängige Bilder (mit festen Positionen oder frei schwebend).

Ä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

Ubuntu 14.10 und VirtualBox
Ubuntu 14.10 und VirtualBox
Tim Schürmann, 08.11.2014 18:45, 0 Kommentare

Wer Ubuntu 14.10 in einer virtuellen Maschine unter VirtualBox startet, der landet unter Umständen in einem Fenster mit Grafikmüll. Zu einem korrekt ...

Aktuelle Fragen

Nach Ubdates alles weg ...
Maria Hänel, 15.11.2014 17:23, 4 Antworten
Ich brauche dringen eure Hilfe . Ich habe am wochenende ein paar Ubdates durch mein Notebook von...
Brother Drucker MFC-7420
helmut berger, 11.11.2014 12:40, 1 Antworten
Hallo, ich habe einen Drucker, brother MFC-7420. Bin erst seit einigen Tagen ubuntu 14.04-Nutzer...
Treiber für Drucker brother MFC-7420
helmut berger, 10.11.2014 16:05, 2 Antworten
Hallo, ich habe einen Drucker, brother MFC-7420. Bin erst seit einigen Tagen ubuntu12.14-Nutzer u...
Can't find X includes.
Roland Welcker, 05.11.2014 14:39, 1 Antworten
Diese Meldung erhalte ich beim Versuch, kdar zu installieren. OpenSuse 12.3. Gruß an alle Linuxf...
DVDs über einen geeigneten DLNA-Server schauen
GoaSkin , 03.11.2014 17:19, 0 Antworten
Mein DVD-Player wird fast nie genutzt. Darum möchte ich ihn eigentlich gerne abbauen. Dennoch wür...