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:

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.

JessyInk's auto-text dialogue box.

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.

Fancy slide title.

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

Creating Title Slide layer.

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.

Example Title Slide

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.

JessyInk effects dialogue

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…

JessyInk transitions dialogue.

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.

Screenshot of effects configuration.

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!

26 Comments »

  1. stelt says:

    Internet Explorer 9 can do SVG.
    For older versions there are solution in the form of scripting libraries (Google SVGWeb, for example) and plug-ins (Google Chrome Frame, for example)

    I’m looking forward to the next version of Inkscape.

    • Tim Teatro says:

      I’m actually really excited to hear that. If I’m correct that IE 9 is supposed to have hardware acceleration, then JessyInk presentations will be amazingly smooth. Right now they can be choppy on less than powerful machines.

      Thanks stelt.

  2. Pingback: Review of Inkscape 0.48 | t-square

  3. Pingback: Inkscape 0.48: mi primer contacto… «

  4. Pingback: Enlaces en mi del.icio.us, 25 09 2010 | Vectoralia

  5. Pingback: Enlaces en mi del.icio.us, 26 10 2010 | Vectoralia

  6. Pingback: Some of My Favorite Open Source or Free Softwares (not in any particular order) … « arraytool

  7. Pingback: [M]etabrain [E]ntry [L]og » Blog Archive » Teaching Open Source link roundup

  8. Daniel says:

    I’ve been using Prezi, and it’s an incredible tool, but I would like to use Jessyink instead..

    I don’t catch at all how to make prezi-like effects in Jessyink. It seems to me that I must imagine everything, and select effects in a very no-friendly fashion way.

    Is there anywhere a better tutorial on how to use this? If I find it, it would be outstanding! Thanks a lot!

    • xander says:

      I know that this answer is coming really late but I just saw it. To get prezi like effects you have to make use of the view feature. Basically you make rectangles in inkscape, and then position size and rotate them, and set them to a view #, and you can have “sub-views” of a slide. So to completely emulate prezi, make one large slide, place all the content on it, and then draw a series of rectangles that will be your view.

  9. Hannes says:

    Hi Daniel!

    I agree with you that using prezi-like effects in JessyInk is not yet as easy as it should be. For JessyInk 1.X, the idea is that you draw a rectangle and then move/re-size/rotate it until it covers the area of the slide you want to be displayed. You then select the rectangle and use the “view”-option from the JessyInk sub-menu in the effects-menu of Inkscape. You can select the order number and the duration of the effect (i.e. the time it takes to go from the previous view to the one you are about to create). Using the option “remove view” you can remove views that you previously assigned. Note that the rectangle you assigned the view to will not be displayed.

    In version 2.X of JessyInk, which is currently available as a development snapshot, I tried to improve the user experience. If you have time you can have a look the file named “JessyInk_2_0_0_alpha_1.svg” in the download section of the JessyInk website (http://code.google.com/p/jessyink). In the file you will find an explanation of the new way to install JessyInk and assign effects and views. Any feedback you have on whether that’s an improvement over the old way would be highly appreciated.

    Cheers,
    Hannes

    • legion1978 says:

      Hi
      I did get the v2alpha, but its still *very* unclear as to how to apply the effects.
      I followed the steps and couldnt get it to work (yeah maybe im just dumb :P)
      For instance, it says something like “group the module with the object to apply the effect” but it does nothing on browser. I edit the parameters: nothing. If i wanna chain the effects (id think the zoom in/out thing would be the most desired effect, cause of prezi) but still it does not say how to do that and the provided instructions do not work as expected.
      Im tryin to read tutorials and stuff but they pretty much say the same or send u over the jessyink site, which is not clear either.
      hopefully in time when JessiInk is more mature, there will be better documentation (a video would be perfect, i havent found it yet). As for now ill keep looking around for info and developer can keep focus on making this neat tool even better (and hopefully more intuitive :D )

      thank you.

  10. Dennis says:

    It would be great if you could do this as a screen cast… lots of words/confusion (for me)…

    thanks
    Dennis

  11. Pingback: Blinkimp » Creare presentazioni con Inkscape

  12. Franck says:

    Hi,

    thanks for this tutorial but do the steps described still work with inkscape 0.48 and the already installed jessyink? I can’t manage to get a slide show. Firefox keeps displaying all the visible layers (the SVG fo contain the jessyink’s javascript).

    Thanks,
    Franck

  13. Franck says:

    Hi,

    I know the solution to my problem!
    See https://bugs.launchpad.net/jessyink/+bug/852018

    Cheers,
    Franck

  14. Pingback: Quora

  15. Stefan says:

    I have a question about the Master Slide feature. Is there a way to use a master slide in a canvas-based presentation(the prezi-like transitions, if you will)? I can’t figure out if I’m just doing it wrong or if the master slide feature is not intended to achieve what I want…or if it is broken in the JessyInk 2.0Alpha that I am using. I’d be happy if somebody could point me in the right direction. I don’t want to abandon the prezi-like effects as they are the sole reason why I am using JessyInk. I already prepared quite a few presentations using JI and really like the program. Until now I just didn’t have to use a master slide.

    Cheers,
    Stefan

  16. Niko Z. says:

    Wow, thanks so much for the tutorial. I have followed the steps and it works! Zoom feature also works in JessyInk 1.5.5 that I have installed.
    However, as I pile on layers the view gets cluttered. Is there a way to just view elements in the current layer?

    • Tim Teatro says:

      Absolutely. In the layer pallette, there is an eyeball icon beside each layer. Click it and the elements on the corresponding layer become invisible. Hide each layer after you are done with it, except the master slide.

      • Niko Z. says:

        Got it!

        That is really useful. I have been tinkering with JessyInk before, but never managed to get any results. I already thought that it was just a broken software, but when I followed the steps in your tutorial everything came together.

        However, it seems that in my installation I have to run extensions/jessyink/install-update
        every time I want to make a new presentation. Not a big deal, just never saw it mentioned in any online guide.

        It is a really neat tool, I like how I can put several sozi and JessyInk presentations in different tabs and run the whole class with Firefox in fullscreen mode. Just one thing that I couldn’t do is run embedded videos in any of the browsers. Firefox plays the picture of the .ogg video but the sound is off, other browsers just choke when they come to it. I have tried Midori, Chromium and Opera. In Firefox I can right click on the video slide and choose to play the video in external application, but that requires leaving the fullscreen mode first, which spoils the effect a bit.

        Anyway, thanks again for a very detailed tutorial, that was really helpfull! You have hinted in the article that there might be one more tutorial coming that would deal with more advanced features of JessyInk?

        Best,

        Niko

  17. Niko Z. says:

    Actually, I got around the video issue by converting my video files to .webm format using avconv. Now it plays nicely in Firefox, but not other browsers.

    It seems that the trouble with videos was due to conversion from .flv and .mp4 to .ogg format using avconv. It seems that a specific audio codec needs to be specified in order to get an .ogg file that would work well in Firefox, but I don’t know which one. Just posting this workaround in case anyone else has the same problem.

  18. Pingback: Fernando da Rosa Morena » Presentaciones, Prezi vs. JessyInk

  19. kenneth dyson says:

    hi, thanks for the tutorial. i was wondering if there was a way to get the slides/objects to appear/disappear on a timer, ie without having to press the arrow keys? thanks.

  20. ndrini says:

    Very good tutorial.
    Spent a little time to see views too, because they are the more “effective” tools
    :D

  21. Pingback: Bikin Presentasi via JessyInk on Inkscape (bagian 3) | Panduan BlankOn Linux

Leave a Reply