Mit Inkscape und JessyInk gestalten Sie grafisch ansprechende Vorträge, die im Webbrowser funktionieren und von Suchmaschinen indizierbar sind.

Einen Vortrag zu halten, gehört heute für die meisten Anwender zum Alltag. Ist es mal wieder so weit, greifen die meisten für das Erstellen der Folien zum bei den meisten Distributionen standardmäßig installierten LibreOffice Impress. Das reicht in vielen Fällen auch völlig aus und lässt sich relativ komfortabel bedienen. Wer mehr will, stößt in der Praxis damit aber schnell an Grenzen.

Zu den möglichen Alternativen zählen etwa LaTeX Beamer [1] oder Impress.js [2]. Sie funktionieren allerdings nicht nach dem WYSIWYG-Prinzip und erfordern einiges an Know-how. Möchten Sie Ihre Vorträge überwiegend in einer grafischen Oberfläche gestalten, sind sie nicht das Richtige.

Für den Autor gibt es da nur eine Lösung: Er gestaltet seine Vorträge in seinem Lieblingsgrafikprogramm Inkscape. Da die Software Dateien im SVG-Format speichert, lassen sie sich problemlos im Webbrowser anzeigen. Um aus einer Sammlung von SVGs einen Vortrag mit den gewohnten Funktionen zu machen, genügt ein wenig Javascript.

Das klingt kompliziert, ist es aber nicht. Inkscape bringt für genau diesen Zweck eine Erweiterung mit. Das birgt sogar weitere positive Aspekte: Wer möchte, der lädt den Vortrag einfach auf einen Webserver hoch und kann ihn so an jedem Ort vorführen, einen Internet-Zugang vorausgesetzt. Suchmaschinen können den Text indizieren, die Folien lassen sich wiederverwenden.

Master-Folie

Die Arbeit in Inkscape beginnt stets mit den Dokumenteneinstellungen. Da viele Projektoren das Widescreen-Format nicht unterstützen, wählen Sie am besten das Format 4:3. Sie öffnen dazu im Menü Datei die Dokumenteneinstellungen… ([Strg]+[Umschalt]+[D]) und geben in das Feld für Breite 1024 sowie für die Höhe 768 ein. Für die Einheit wählen Sie die Option Pixel. Bei Rand im Vordergrund anzeigen setzen Sie das Häkchen. Die Option sorgt dafür, dass der Dokumentenrand immer über der Zeichnung angezeigt wird. Der Schatten am Rand hingegen irritiert viele Nutzer; schalten Sie ihn also am besten aus.

Jetzt wählen Sie das Werkzeug Rechtecke und Quadrate erstellen ([F4]+ oder [R]) und zeichnen ein Rechteck, das über das ganze Dokument geht. Es darf ruhig an allen Seiten ein wenig überstehen. Da Inkscape immer mit den zuletzt gewählten Einstellungen für Füllung und Kontur zeichnet, könnte es nun sein, dass Sie kein Rechteck sehen – keine Panik, es ist da.

Sie füllen das Rechteck nun mit einer Farbe. Am einfachsten gelingt das mit einem Mausklick auf die entsprechende Farbe auf der Palette am unteren Rand des Programmfensters. Für ein ansprechendes Design und einen guten Kontrast wählen Sie hier 90% Grau gleich neben Schwarz. Da einfarbige Flächen langweilig sind, wandeln Sie die Füllung nun in einen Farbverlauf um.

Mit [Strg]+[F1] aktivieren Sie das Farbverlaufswerkzeug und stellen danach in den nun sichtbaren Werkzeugeinstellungen den radialen Farbverlauf ein. Ein einfacher Doppelklick auf das Rechteck wandelt die Füllung entsprechend um. Inkscape füllt dabei immer von der Ausgangsfarbe zur Ausgangsfarbe mit Alpha-Kanal. Mit dem Tastenkürzel [Umschalt]+[R] kehren Sie den Verlauf der Füllung um (Abbildung 1).

Abbildung 1: Drehen Sie die Richtung des Verlaufs um, lässt sich langsam der angedachte Hintergrund erkennen.

Jetzt klicken Sie in den kleinen Kreis der Darstellung des Farbverlaufs. Nach dem Aktivieren wechselt die Farbe des Elements von Weiß auf Blau. Dann können Sie wieder eine Farbe wählen, im Beispiel das 70% Grau. Damit tritt der Verlauf optisch in den Hintergrund, die Fläche wirkt aber lebendiger (Abbildung 2).

Abbildung 2: Das Ergebnis der Hintergrundgrafik, nachdem Sie die Transparenz durch eine Farbe ersetzt haben.

Hintergrund

Für den letzten Schliff importieren Sie mit [Strg]+[I] das Inkscape-Logo [3]. Seit der Version 1.0 zeigt das Programm beim Import von SVG-Dateien einen Dialog an, wie Inkscape mit der importierten Grafik umgehen soll. Sie wollen das SVG weder verlinken noch einbetten, sondern die Grafik als bearbeitbares Objekt in der aktuellen Datei einbinden. Damit lässt es sich dann direkt weiterbearbeiten.

Die Grafik erscheint beim Import ins Dokument immer dort, wo gerade der Mauszeiger steht und ist stets gruppiert. Ist das Logo bei Ihnen auf dem Rechteck gelandet, verschieben Sie es auf eine freie Stelle der Zeichenfläche. Mit [Strg]+[Umschalt]+[G] lösen Sie die Gruppierung auf, wodurch drei Pfadobjekte entstehen. Im nächsten Schritt müssen Sie die beiden weißen Objekte auswählen. Dazu aktivieren Sie mit [F1] das Auswahlwerkzeug und klicken mit gedrückter Umschalttaste nacheinander auf die beiden Objekte.

Mit [Strg]+[+] kombinieren Sie die beiden Pfadobjekte zu einem; dabei verschwinden sie im Hintergrund. Danach wählen Sie wieder mit [Umschalt] das verbliebene Pfadobjekt aus und bilden mit [Strg]+[-] die Differenz aus den gerade markierten Objekten. Das weiße Pfadobjekt wird damit vom schwarzem abgezogen, die zuvor weißen Flecken erscheinen nun transparent. Diese sogenannten booleschen Operationen braucht man bei der Arbeit mit Inkscape immer wieder, man sollte sich also mit ihnen auseinandersetzen.

Jetzt ziehen Sie das Logo auf das Dokument und passen es in der Größe an. Bringen Sie das Logo ruhig auf die komplette Größe der Arbeitsfläche. Um es dabei proportional zu skalieren, halten Sie [Strg] gedrückt. Um das Logo noch ein wenig abzuschwächen, passen Sie nun noch die Sichtbarkeit des Objekts an.

Dazu bietet Inkscape zwei Möglichkeiten: über die Sichtbarkeit des Objekts, die sich auch auf Gruppen anwenden lässt, oder über den Alpha-Kanal der Füllfarbe. In unserem Fall funktionieren beide Wege; es empfiehlt sich jedoch, nur mit der Objektsichtbarkeit zu arbeiten. Den Alpha-Kanal sollten Sie nur dann einsetzen, wenn Sie ihn wirklich benötigen, etwa bei Farbverläufen mit Transparenz.

Um die Objekttransparenz herunterzusetzen, finden Sie ganz unten links im Programmfenster ein Feld mit dem Bezeichner O:. Dort regeln Sie den Prozentwert auf zwischen 20 und 30 herunter (Abbildung 3).

Abbildung 3: Das importierte Inkscape-Logo: Die weiße Schneekuppe wird durch eine boolesche Operation transparent.

Damit ist die Arbeit an der Master-Folie beendet. Speichern Sie die Grafik ab, und kontrollieren Sie die Wiedergabe in einem Browser. Er rendert die Grafik oben links im Fenster beginnend, ohne sie in die tatsächliche Größe zu skalieren oder zu zentrieren. Diese Aufgabe übernimmt später Javascript für uns, sobald Sie die Grafik mit JessyInk in einen Vortrag umwandeln.

JessyInk

Dazu rufen Sie im Inkscape-Menü Erweiterungen | JessyInk | Installation/Aktualisierung… auf und starten die Integration des Javascript-Moduls über einen Klick auf Anwenden. Eventuell zeigt das Werkzeug dabei Warnungen an, die Sie jedoch in aller Regel ignorieren können.

Danach speichern Sie das Dokument wieder und rufen die SVG-Datei erneut im Webbrowser auf. Der skaliert die Grafik nun auf die Größe des Browserfensters und stellt sie mittig dar. Das ist aber noch nicht alles: Drücken Sie [I]+, zeigt JessyInk alle Folien in einer Übersicht an. Mit [D] aktivieren Sie einen Zeichenmodus, der Sie auf die Grafik malen lässt.

Aber nun zurück zur Master-Folie und der Aufgabe, den gerade erstellten Hintergrund in eine solche umzuwandeln. Dazu öffnen Sie über Ebene | Ebenen… den Ebenendialog und benennen die vorhandene Ebene**1 in master_slide um. Danach rufen Sie wieder die JessyInk-Erweiterung auf, wählen aus dem Menü nun allerdings die Option Folienmaster…. Im Dialog tragen Sie wieder den Namen der Ebene ein und übernehmen mit einem Klick auf Anwenden die Änderung. Damit haben Sie Ihre Master-Folie angelegt, sie wird nun automatisch auf allen weiteren Folien im Hintergrund angezeigt. Um zu verhindern, dass Sie die Ebene versehentlich bearbeiten, sperren Sie sie mit einem Klick auf das Vorhängeschloss-Symbol.

JessyInk kennt zwei Arten von Präsentationen: die seitenbasierte, wie Sie sie etwa von LibreOffice Impress oder Microsoft Office her kennen, und die ansichtsbasierte Präsentation. Beide lassen sich miteinander kombinieren. Um nun eine neue Folie anzulegen, müssen Sie im Ebenendialog nur eine Ebene hinzufügen. Die Reihenfolge bestimmt dabei den Platz in der Präsentation. Für das Beispiel erstellen Sie aus dem Ebenendialog nun also eine weitere Ebene, die über der Master-Folie liegt.

Autotext

JessyInk kann mit Autotext auch den Titel der Seite erzeugen. Dafür übernimmt das Programm den Namen der Ebene. Für das Beispiel nennen Sie die neue Eben also Inkscape. Im Dokument benötigen Sie jetzt einen Platzhalter für den Autotext in Form eines simplen Textobjekts. Sie wählen also das Textwerkzeug via [F8] und klicken mittig auf die Zeichenfläche. Anschließend geben Sie einen beliebigen Text ein, JessyInk wird ihn später komplett ersetzen.

JessyInk füllt nachher nur die Zeichen, die Formatierung des Texts bleibt erhalten. Setzen Sie daher gleich die gewünschte Schriftart. Das klappt über die Werkzeugeinstellungsleiste oder komfortabler über den Textdialog ([Strg]+[Umschalt]+[T]); im Beispiel verwenden wir den Font Bebas Neue [4]. Bei dieser Gelegenheit setzen Sie gleich noch die Textausrichtung auf zentriert. Für einen optimalen Kontrast wählen Sie Weiß als Füllfarbe. Jetzt müssen Sie den Text beziehungsweise Platzhalter nur noch ausrichten. Dazu verwenden Sie das Werkzeug Ausrichten und verteilen [Strg]+[Umschalt]+[A] und zentrieren den Platzhalter horizontal und vertikal relativ zum Dokument (Abbildung 4).

Abbildung 5: So sollte das Ergebnis nach Einfügen des Texts und dem Importieren der Taschenmesser-Grafik aussehen.

Durch Skalieren passen Sie die Größe des Texts dem zur Verfügung stehenden Platz an. Inkscape fehlen jedoch die Funktionen einer Textverarbeitung oder eines ausgewachsenen Desktop-Publishing-Programms. Es verarbeitet Text wie ein grafisches Element. So gibt es zum Beispiel keine Möglichkeit, Aufzählungszeichen zu setzen. Mit selbst gezeichneten Punkten lässt sich dieses Manko allerdings leicht ausgleichen.

Sie könnten jetzt das Textobjekt mit den gewohnten Textwerkzeugen anpassen. Falls Sie aber später den Text zeilenweise einblenden wollen, benötigen Sie jede Zeile als einzelnes Objekt. Dafür verwenden Sie Erweiterung | Text | Text teilen… und zerlegen das Objekt zeilenweise. Anschließend wählen Sie das erste einzelne Textobjekt aus und rufen aus dem Menü Erweiterungen die Option Effekte… unterhalb von JessyInk auf. Der Dialog bietet mit Direkt (über Schwarz), Einblenden und Aufpoppen drei verschiedene Effekte. Die Nummer gibt dabei die Ordnung an, in der die Objekte eingeblendet werden.

Jetzt fehlen nur noch die Übergänge zwischen den einzelnen Folien. Auch dazu bietet JessyInk wieder verschiedene Möglichkeiten. Den entsprechenden Dialog öffnen Sie über Erweiterungen | JessyInk | Übergänge…. Möchten Sie einen Übergang für alle Folien verwenden, wenden Sie die Auswahl einfach auf die Master-Folie an. Das Programm erlaubt unterschiedliche Übergänge beim Ein- und Ausblenden einer Folie.

Das war es auch schon: Der seitenbasierte Vortrag ist fertig. Nach dem Speichern rufen Sie die SVG-Datei in einem Browser wie Firefox auf. Mit der Leertaste gehen Sie Schritt für Schritt durch die Folien (in Inkscape: die Ebenen). Alternativ blättern Sie mit den Pfeiltasten durch die Folien. Mit [I] erhalten Sie eine Übersicht aller angelegten Folien des Vortrags.

Ansichten

Jetzt fehlt nur noch die bereits angesprochene ansichtsbasierte Präsentation. Dabei handelt es sich um eine große Grafik, von der Sie in der Präsentation Ausschnitte – eben Ansichten – präsentieren. Die Größe der Grafik selbst spielt dabei keine Rolle. Genau das macht die Sache interessant – etwa, wenn Sie einen größeren Netzwerkplan vorstellen sollen oder eine umfangreiche Mindmap aus dem letzten Team-Meeting präsentieren möchten.

Mit herkömmlichen Präsentationsprogrammen müssten Sie dafür ein Grafikprogramm bemühen und die Grafik in einzelne Bilder zerlegen. Das erfordert einen hohen Zeitaufwand, zudem müssten Sie bei Änderungen auch die exportierten Einzelgrafiken aktualisieren.

Für unser Beispiel legen Sie eine neue Ebene an und importieren die auf OpenClipart angebotene Icon-Übersicht [8]. Mithilfe des Ausrichten-Werkzeugs zentrieren Sie die Grafik auf der Folie (Abbildung 6). Nach dem Auflösen der Gruppierung wählen Sie den schwarzen Hintergrund aus und löschen ihn mit [Entf].

Abbildung 6: Die importierten Icons mit dem opaken Hintergrund. Lösen Sie die Gruppe auf und löschen den schwarzen Kasten.

Nach dem Import erscheinen die Icons noch sehr klein und lassen sich daher auf der Folie nur schwer erkennen. Mithilfe des Menüpunkts Ansicht lassen sich die einzelnen Icons während der Präsentation jedoch leicht vergrößern. Dazu nehmen Sie einfach das Werkzeug Rechtecke und Quadrate erstellen ([F4]) und zeichnen ein Rechteck, das so groß ist, dass eines der Icons hineinpasst. Die Füllung und die Kontur des Quadrats spielen dabei keine Rolle. Um den Hintergrund besser erkennen zu können, empfiehlt es sich, dabei die Objektsichtbarkeit herabzusetzen oder lediglich eine Kontur zu verwenden (Abbildung 7).

Abbildung 7: Das Ergebnis nach dem Entfernen des Hintergrunds mit einem Rechteck mit roter Kontur, das JessyInk als Ansicht dient.

Haben Sie das Rechteck in der richtigen Größe aufs Papier gebracht, müssen Sie es nur noch mit [Strg]+[D] duplizieren – so oft, wie Sie später Ansichten benötigen. Ziehen Sie dann die Kopien auf die einzelnen Icons der Übersicht. Im Anschluss rufen Sie zu guter Letzt Erweiterungen | JessyInk | Ansicht… auf und nummerieren unter Anordnung die Ansichtselemente der Folie durch. Starten Sie bei 1, zeigt die Präsentation zuerst die komplette Folie und geht dann erst in die Details. Starten Sie hingegen bei 0, steigt JessyInk gleich beim ersten Icon in Großformat ein.

Nach dem Speichern laden Sie die Präsentation im Browser neu und betrachten den sanften Übergang beim Wechsel von einer Ansicht zur nächsten. Interessante Effekte erhalten Sie, wenn Sie das Rechteck drehen oder die Orientierung verändern (etwa über Objekt | Horizontal umdrehen). JessyInk übernimmt dann die Ausrichtung in die Präsentation. Am besten experimentieren Sie mit dieser Funktion ein wenig.

Fazit

Wie unser Beispiel demonstriert, fällt das Erstellen von Präsentationen mit Inkscape gar nicht so schwer, sobald man die Funktionen zum Zeichnen ein wenig beherrscht. Einige kleine Wermutstropfen gibt es allerdings: So klappt die korrekte Darstellung der Schriftarten nur dann, wenn sie auf dem Präsentationsrechner vorhanden sind. Im Zweifel sollten Sie daher Standard-Fonts verwenden.

Hier könnte man auch auf Google-Fonts zurückgreifen. Allerdings verfügt Inkscape bisher noch nicht über die Funktion, CSS hinzuzufügen – das müsste man daher von Hand erledigen. Optional könnten Sie die Textobjekte auch in Pfade umwandeln. Damit ginge dann allerdings die Indizierbarkeit verloren, und Sie können die Texte nicht mehr nachträglich mit dem Textwerkzeug bearbeiten.