[gss-content-box color=”red”]Article license. | Level: Medium | Category: Grafics&DTP[/gss-content-box]
Inkscape can be used to easily generate digital presentations that can be opened with any browser that has support for the SVG standard. The presentation we will create can be opened without issues in Firefox, Google Chrome and Opera. The presentation can also be saved in PNG or PDF format if it is necessary.
[gss-content-box color=”red”]Note: current modern browsers have support for the SVG 1.1 standard; Inkscape has already implemented features from SVG 1.2 standard; if you use such elements they will not be visible in the browser but in the PDF or PNG files. So this means that you need to test the presentation in the browser and if you want to use more advanced effects, saving the presentation in PDF is recommended.[/gss-content-box]
Install Linux and Inkscape. Select a color palette that you would like to use in your presentation. For this particular example I used one of the Inkscape’s color palettes – “Echo Icon Theme Palette”.
[gss-content-box color=”red”]Note: you can generate your own color palette with the help of the Agave application and than bring the palette in Inkscape.[/gss-content-box]
We will use the Inkscape layers to create the “slides” for the presentation; similar to what we have done for the magazine cover mock-up article. Inkscape has a very usefull extension that we can use to generate & control the presentation – “JessyInk”; this extension will take each layer and assigned as a slide in the final presentation.
Other options in “JessyInk”:
Auto-text – slide title, slide number etc.
Create a “master slide” that can be used throughout the presentation;
Save the presentation as PDF or as PNG files in zip archive.
We create a new document in Inkscape with the size we want; because this is a digital presentation we will use a size specific for a computer display; in this case I have chosen a document size of 1024×768 pixels.
The final document should look like the below image:
We run the “JessyInk” extension from the main menu – Extensions -> JessyInk -> Install/update
The following up window will appear and we will need to click “Apply”.
[gss-content-box color=”red”]Note: it is recommended to run the “Install/update” command when you will finish the presentation or whenever you are doing changes to it so that JessyInk can take into consideration all the new elements.[/gss-content-box]
At this stage we need to create the “slides” by using the Inkscape layers feature. I didn’t use a “slide master” for this presentation; feel free to create one if you want.
Here is my Inkscape presentation structure, using the layers:
By using the lock and view actions for each of the layers, we can focus creating each slide without affecting the ones we already have done; again by using the commands below the layer list we can add, delete, or move the layers/”slides” in the presentation.
[gss-content-box color=”red”]Note: if we do a right-click on one of the layers we will have access to a very usefull function – “Duplicate Current Layer”.[/gss-content-box]
About blocks of text
Text is important for a presentation; if we want to introduce a large block of text, we will use the Text tool in Inkscape; this particular tool has two main usage scenarios:
Scenario 1 : if we select the tool and click directly on the “slide” we can start typing and enter the text we want; this is usefull especially for the slide title, sub-title etc. This function is recommended only for short blocks of text. If we try and paste a large paragraph we will not get a very important feature – “word wrap” and the end result will look like the below image.
Scenario 2 : In order to load a full paragraph of text or more, we will still using the same Text tool but this time we click and drag with the mouse across the slide in order to mark with a text box, the area where we want the text to be position.
As you can see the text block is now properly aligned within the boundaries of the slide presentation.
[gss-content-box color=”red”]Note: the text block from the image above is specific to SVG standard 1.2; this means that it won’t be visible in the current browsers. However we have a solution in place, implemented by the Inkscape developers. Select the block of text and than in the main menu – Text -> Convert to Text. It won’t affect the Inkscape document in anyway but the text will be visible in the browser when you will open the presentation.[/gss-content-box]
I created some sample slides with the color palette I mentioned at the start of the article. I have chosen as a domain – a short introduction to CSS3.
SVG format with the posibility of opening the presentation directly in the browser; the SVG file can be saved on a server or sent via email. The slide navigation can be done either with the Space key, or the arrows keys or by just clicking with the mouse. We can also use the Full-Screen mode in the browser to maximize the view of the presentation.
PNG or PDF formats; in order to obtain such an export we need to use JessyInk – main menu – File -> Save As – “JessyInk zipped pdf or png output”.
SVG format – opening the presentation in the browser
PNG or PDF formats
So what is this approach of using Inkscape to create digital presentations, instead of a dedicate office suite?
First things first – the Impress presentation app from Libreoffice doesn’t have the graphical capabilities Inkscape offers to the user.
Second – Inkscape has greater flexibility when creating the slide content by adding graphical elements, effects etc.
Third point – in Inkscape it is much easier to position and change each element compared to Impress.
This is my point of view after testing and using both solutions 🙂 ! Have fun 🙂 !
[gss-content-box color=”red”]Final Presentation in SVG format – save the file
Preview in the browser – click on the below: [/gss-content-box]