A Tutorial Introduction to JessyInk: Presentations in Inkscape.

Sure, presentation slides are becoming passe in the business office. (And it’s about time too.) But in technical fields which require a lot of illustration and visualization, there simply is no better way to have an ordered discussion.

PowerPoint and alike place far too much emphasis on text elements and distracting effects and transitions. For my presentations, I usually use the beamer class in pdfLaTeX since two things are handled very well: math and vector graphics. But as my style has honed towards minimalism with attractive and illustrative graphics, I’m spending more and more time in Inkscape. Wouldn’t it be great to just create presentations in a vector graphics editor? Hannes Hochreiner certainly thought so. While a chemistry Ph.D student at Canada’s Dalhousie University, Hannes began developing a set of Inkscape extensions called JessyInk.

JessyInk, to be included in the next major release of Inkscape, adds functionality for creating slide-show presentations to Inkscape. The de facto output (and internal memory) format for Inkscape is SVG, which is a human-readable XML that can be rendered by all major modern browsers except Microsoft Internet Explorer. JessyInk embeds JavaScript within the SVG files adding the dynamic functionality required for presentations.

JessyInk gives users the ability to embed slide-transitions, text reveals, navigation, hot-keys, video embedding, mouse event handling and much more. It provides more than what anyone should need to create effective, clean, efficient and impressive slides.

What remains in this article is intended as an introduction to JessyInk work-flow. I’ll demonstrate the creation of a basic slide-show with text-reveals and navigation. I’ll build upon these fundamentals in later tutorials.

Files to download before moving on:

• Example slides for this tutorial
• Official JessyInk showcase presentation

Note: If you don’t already have JessyInk installed, I have a tutorial on installing JessyInk for Ubuntu, Linux and Windows.

Note: Of course, one may still need elegant mathematics in Inkscape. Click here for my article on TeXtext for math in Inkscape.

A word on viewing.

As you work along with this tutorial, it will be useful for you to preview your slides. Once you have saved your Inkscape SVG, open it with your browser. Each time you save your Inkscape file, refresh the browser window to view your changes.

When you are presenting, remember to make your browser full-screen (usually F11) so that the browser buttons don’t distract your audience.

JessyInk Basics

JessyInk causes your browser to render each layer in the SVG as an individual slide. This is how we can define many slides within a single SVG. To better understand the concept, download the example slides used for this tutorial. Clicking on the link should bring the presentation into your browser. Save the file to your hard drive and open it in Inkscape to get a closer look.

Elements common to all slides may be placed on the master-slide, which is a special layer that is rendered across all slides. For example, it is a good idea for the master-slide to contain your presentation’s theme and auto-texts for slide numbers and slide titles. We’ll cover auto-texts later in the tutorial.

If you are not already familiar with JessyInk, you should first download and explore the official JessyInk showcase slideshow which gives an overview of JessyInk’s capabilities and briefly discusses many of the functions demonstrated in this tutorial.

Let’s get started by defining our slide geometry and background colour: start a new document and press SHFT+CTL+D or File > Document Properties.

Fig. 1 - Document properties window showing document dimensions and background color.

Slide geometry

Before moving on, you need to choose the geometry of your canvas. It should depend on your intended target. If you plan that most of your audience will view the slides in their browsers, then I prefer 864×486, which has an aspect ratio of 16:9. Web browser rendering areas tend to be wider than tall due to the tool-bars and buttons adorning the browser window. So a wide aspect ratio will utilize more of the window. Also, 16:9 is a standard aspect supported by most projectors and many computer monitors made in recent years. However, if you know that you intend to present using a projector that has 4:3 aspect and aren’t worried as much about how it appears in a web-browser, then I suggest 640×480 or 800×600. Remember: vectors will scale so size isn’t important unless you will be using raster graphics in the slides.

Once you’ve chosen your slide geometry, enter the width and height in the appropriate text boxes in the Document Properties window. For this tutorial, I’ll use 864×486 (See Fig. 1).

Background colour

While still at the Document Properties window, we may also choose the background colour. Note that background colour is not going to be the colour of your slides; it’s the colour of the area around the slides if they don’t fill the entire browser window. You’ll see what I mean, but the idea is akin to the black bars at the top and bottom of a movie when it doesn’t fit your TV screen. For my example file, I’m going to choose a nice blue, #052b59ff.

The master slide

Press SHFT+CTL+L to bring up the layers dialogue or go to Layer > Layers. It is a good idea to have the layers dialogue open while using JessyInk since we will be working with layers a lot.

Fig. 2 - JessyInk's master-slide dialogue box with blank canvas in background.

Right click on Layer 1 in the layers palette and rename it to Master or something else meaningful. It’s going to become our master-slide. Go to Extensions > JessyInk > master slide and enter Master, or the name you just chose for your master-slide (Fig. 2). Once you apply, JessyInk will define the slide you renamed as the master-slide for the presentation. Anything on this layer will appear on all slides within your presentation.

To construct the basic backdrop for our slides, with the master-slide selected draw a rectangle and make it the same size as the canvas. Fill it as you wish and centre it on the page with align dialogue box (CTRL+SHFT+A). For my example, I’m going to use a simple white/grey gradient which is both simple and rich looking. Now as we create slides, this backdrop will appear on all slides.

Auto-texts: slide titles

Auto texts are text elements in the slide which are dynamically generated for each slide. For example, if we want to put the slide number or title on each slide, there is no need to manually number or title each slide. We can add a placeholder text and have JessyInk insert the proper text on each slide.

For our example, I’m going to put the title at the top of each slide. Since it will appear on all slides, let’s add it to the master-slide.

I’ll start by putting a dark rectangle across the top of the slide which will distinguish the titling text. Then, I’ll use the text tool (press t or select it from the tool palette) and place the simple text Slide Title on top of the rectangle.

Fig. 3 - JessyInk's auto-texts dialogue box inserting slide title.

We obviously don’t want the literal text, Slide Title to appear at the top of each page. In order to have the title automatically inserted instead, highlight the text block and click Extensions > JessyInk > auto-texts to bring up the auto-texts dialogue box. Select the radial indicator beside slide title and click apply (see Fig. 3). Now, when we add slides to our presentation, the title will appear in place of the text Slide Title.

You can be quite clever about using auto-texts for aesthetic effect. For example, in the screen-shot to the right, I have created a reflection and drop-shadow for the slide titles. Note: I realize that a reflection and a drop-shadow is stylistically overboard, but I’m making a point here. Remember: less is more. When presenting you always want to have maximum affect by minimal means.

Fig. 4 - I've added a drop-shadow and translucent reflection to the slide title, that will appear as the actual slide title during the presentation.

To make the reflection, simply duplicate the auto-text (highlight it and press CTRL+D) and then flip it vertically (press v) and then move the reflected text below the title text. Then open the fill and stroke dialogue (CTRL+SHFT+F) and set the fill to a gradient. Set the gradient stop colours to a grey and then a fully transparent grey. Using the gradient tool (press the g key or select it from the tools palette) move the gradient end-points until you get something that looks like a reflection.

To make the shadow, duplicate the title text again and set the fill colour to black. Using the pg dn (page down) key, drop the black copy of the title text behind the white copy. Open the fill and stroke dialogue and add a Gaussian blur and reduce the transparency until you get something you like.

Titling slide

Fig. 5 - Creating Title Slide layer.

Well, we’re all dressed up! Let’s go out. There’s no real trick to adding slides. Just add a new layer by clicking the + symbol on the layers palette (Fig. 5). The only issue is that when we are making a titling slide, we might not want the master slide showing through. No big problem here, just cover it up. To make my titling slide, I’m going to copy the background gradient from the master slide and paste it onto the title slide. Now just make it look as you wish.

Revealing bullet points: build-in effect

Think before you include bullet points. There are very few cases where they are actually justified. You never want your audience to read while you’re trying to talk to them.

Fig. 6 - The effects dialogue for JessyInk applying a fade-in reveal for the second bullet point. Also note the vertical rules for aligning bullets and text.

That said, one of the most commonly seen formats for slides is the step by step reveal of bullet points. This is easily done in JessyInk. First, set up your bullet points. There’s no convenient tricks here: just use the text tool to make text and draw the bullets. I do recommend using a couple of vertical rules and a horizontal rule (see Fig. 6) to align the bullets and text. Use the align and distribute dialogue to arrange things nicely (CTRL+SHFT+A).

Once you have created at least two bulleted text elements, select and group (CTRL+G) each bullet with its corresponding text so that each bulleted text element is only one object. We want this so that we can apply effects to the text and bullet simultaneously instead of having to do it separately for text and bullets.

Now we can program the reveal for each of the elements. If you want to have an element visible when the slide first appears, leave that one alone since it will of course be visible by default. Select the first element that you want to be revealed and click Extensions > JessyInk > effects to invoke the effects dialogue (Fig. 6). I’ll explain the settings in the next paragraph but for now just copy the settings from the last figure. That is, order: 1, duration: 0.4, type: fade. Leave the build-out effect settings at default values. Click apply when finished.

The two effects available in the effects menu, build-in and build-out, reveal and hide elements respectively. The order will indicate 1st, 2nd, 3rd, etc to be revealed. So for the first element you want to be revealed, set the build-in effect by changing the type radial selector from none to one of appear, fade or pop, and set the order to 1. The next item you want revealed should have an order of 2, and so on.

Slide transitions

Slide transitions are also something that should be used with reservation. Transitions are applied so that as the slides progress, new slides are brought onto the screen with an animated effect.

Create a new layer and put some text on it. I’m simply calling the new layer Slide transitions and placing the text This slide should fade in smoothly…

Fig. 7 - JessyInk transitions dialogue.

To create the slide transition, go to Extensions > JessyInk > transitions. In Fig. 7, you will see my settings. Simply input the name of the slide which you want to apply the transition to and select the animation type (fade, pop, etc). You can program a transition-in and transition-out. The transition-out is only needed if you would like a smoother transition. For example, if I am using the fade transition, and I only set transition-in effects, then when I change slides my current slide disappears and the next slide fades-in from nothing. If I set my slides to transition-out then as I go to a new slide, the current slide fades out as the new slide fades-in, creating a nice smooth transition.

Bringing it all together

I think by now I have covered the basics which should suffice for most presenters needs. I’m going to create one last slide which emcompasses most of the concepts covered so far.

I’m calling my last slide Conclusion. After it’s created, I’ll start by applying a slide transition. I’m going to apply a fade-out on the second to last slide and a fade-in on Conclusion to get a nice smooth fade. I know I’m using a lot of fades. I want to leave it to the user to explore the other animation effects.

Now, I’m going to create several blocks of text. I do not want all of the blocks to appear at the same time. In fact, I only want one block at a time to appear, so this means that as one text element fades in, the previous one needs to fade out.

As before, pick one of the blocks of text to be present when the slide comes in. This means it will have no build-in effect. Open the effects dialogue by clicking Extension > JessyInk > effects. The build-in type should be set to none, but set the build-out to fade, the order to 1 and set the duration to 0.3. Now click apply.

Fig. 8 - Screenshot of effects configuration with my overlapping text in the background.

Select the next block of text that you will want to appear. Set the build-in to fade with duration 0.3 and order 1 and set the build-out to fade duration 0.3 and order 2. Select the next block and set the same options with build-in order 2 and build-out order 3. Hopefully you can see the pattern forming. We want the order of the fade-out to be one higher than the order of the fade-in (see Fig. 8). We also want the fade-out order of the previous text to be the same as the fade-in order of the new text. The effect is quite interesting. Now use the align and distrubite dialogue to center all of the text on top of eachother.

Conclusion

Thank you for reading and following along. I hope this tutorial was useful. There will be more to come on more advanced JessyInk and Inkscape topics. If you have a request, feel free to contact me, and I’ll be happy to consider creating a tutorial for your need.

Be Sociable, Share!

• 

Related posts:

1. Installing JessyInk Although JessyInk is to be included in the next release...
2. TeXtext for Math in Inkscape Recent versions of Inkscape have functionality for creating math from...