JessyInk

Giving presentations is a regular part of life at many jobs. For this task, Linux fans often choose LibreOffice Impress, which is installed by default in most distributions. In many cases, this will meet your needs and be relatively easy to use. But what if you want more than the options available in LibreOffice? The potential alternatives include LaTeX Beamer [1] or Impress.js [2]. However, these do not rely on the WYSIWYG principle, and they require some know-how. For this author, there is only one solution. I design my talks with my favorite graphics program, Inkscape [3].

Since the Inkscape software stores files in SVG format, they can be easily viewed in a web browser. To turn a collection of SVGs into a presentation with the usual functions, a little JavaScript is all you need. This may sound complicated, but it is not. Inkscape comes with an extension called JessyInk that is designed for precisely this purpose. Using this extension has other positive aspects. If you want, you can simply upload the presentation to a web server and present it at any location, provided you have Internet access. Search engines can index the text, and the slides can be reused. It's easy once you have familiarized yourself with the workflow, which is very different from that in office suites, and the results will make your presentation stand out from the PowerPoint crowd.

Master Slide

In this article, I'll show how to create a presentation using Inkscape, starting with how to create a master slide with a custom background. Any task in Inkscape always starts with the document settings. Since many projectors do not support the widescreen format, it is best to select the 4:3 format by opening Document Properties… (Ctrl+Shift+D) in the File menu and entering 1024 for Width and 768 in the field for Height. For Units, select the px option. Check the Border on top of drawing box. This option ensures that the document border is always displayed above the drawing. The border shadow, on the other hand, irritates many users, so it is best to turn it off.

Now select the Create Rectangles and Squares tool (F4 or R) and draw a rectangle that runs across the entire document. It can protrude a little on all sides. Since Inkscape always draws with the settings last selected for fill and outline, you might not see a rectangle now – don't panic, it's there.

The next step is to fill the rectangle with a color. The easiest way to do this is to click on the corresponding color on the palette at the bottom of the program window. For an appealing design and good contrast, select 90% gray right next to black. Since monochrome areas are boring, let's convert the fill to a gradient.

Press Ctrl+F1 to activate the gradient tool and then select a radial gradient in the tool settings, which are now visible. A simple double-click on the rectangle applies the fill using the alpha channel. Use the Shift+R shortcut to reverse the fill process (Figure 1).

Figure 1: Create a simple background by using the gradient tool.

Now click on the small circle of the gradient display. When enabled, the color of the element changes from white to blue. Then you can choose a color again – in the example I have used 70% gray. This makes the gradient fade into the background, but the area looks more lively (Figure 2).

Figure 2: With a few tweaks to the gradient, you end up with a background that is unobtrusive but more lively than a solid-colored slide.

Background

For the final touch, use Ctrl+I to import the Inkscape logo [4]. Beginning with version 1.0, when importing SVG files, the program displays a dialog that shows how Inkscape will process the imported graphic. You don't want to link or embed the SVG, but instead include the graphic as an editable object in the current file. It can then be modified directly.

The graphic always appears at the mouse pointer position when imported into the document, and elements of the graphic are grouped. Once the logo has made it into your rectangle, move it to a free space on the drawing area. You can use Ctrl+Shift+G to ungroup the objects, creating three path objects. In the next step you want to select the two white objects. To do this, press F1 to activate the selection tool and click on the two objects one after the other while holding down the Shift key.

Use Ctrl++ (a plus sign) to combine the two path objects into one; they will disappear in the background. Then use Shift to select the remaining path object and press Ctrl+- (a minus sign) to perform the difference operation. The white path object is thus subtracted from the black one; the previously white parts now appear transparent (Figure 3). These Boolean operations are needed time and time again when working with Inkscape, so you need to understand them.

Figure 3: The imported Inkscape logo: The white snowcap becomes transparent thanks to a Boolean operation.

Now drag the logo onto the document and resize it. Scale the logo uniformly to the full size of the workspace. To scale it proportionally, hold down Ctrl. To make the logo a little more subtle, adjust the visibility of the object.

Inkscape offers two ways to do this: via the visibility of the object, which can also be applied to groups, or via the fill color's alpha channel. In our case, both ways work, but it is recommended to work with object visibility only. You should only use the alpha channel when you really need it, such as for gradients with transparency.

To reduce the object transparency, you will find a field with the identifier O: at the bottom left of the program window. You can adjust the percentage value to between 20 and 30.

This concludes the work on the master slide. Save the graphic and check the results in a browser. It renders the graphic starting at the top left of the window without scaling or centering it to the actual size. JavaScript will do this for us later on, as soon as you convert the graphic into a presentation with JessyInk.

JessyInk

To convert the graphic, go to the Inkscape Extensions | JessyInk | Install/Update… menu and start the integration of the JavaScript module by clicking on Apply. The tool may display warnings, but you can usually ignore them.

Then save the document again and call the SVG file in the web browser again. This will now scale the graphic to the size of the browser window and display it in the center. But that is not all: Press I and JessyInk shows all slides in an overview. Press D to activate a drawing mode that lets you paint on the graphic.

Back to the master slide. The task is to convert the background we just created into a master. To do this, open the Layers dialog via Layer | Layers… and rename the existing Layer 1 to master_slide. After that, you call the JessyInk extension again, but now select the Master slide… option from the menu. In the dialog, enter the name of the layer again and accept the change by clicking on Apply. You have now created your master slide, and it will automatically appear on all other slides in the background. To avoid accidentally editing the layer, lock it by clicking on the padlock icon.

JessyInk supports two types of presentations: the page-based presentation, which you will be familiar with from LibreOffice Impress or Microsoft Office, and the view-based presentation, which I will discuss in more detail later.

To create a new slide, you only need to add a layer in the Layers dialog. The order determines the place in the presentation. For this example, I will now create another layer from the Layers dialog, which will sit on top of the master slide.