Installing Pencil

Pencil is a tool for storyboarding and sketching user interface designs. It is a Firefox extension, but runs basically as a separate application from the browser.

• In Firefox go to http://pencil.evolus.vn/en-US/Home.aspx and click the big orange button.

• It may try to open the .xpi file in archive manager, don't let it do this. Open the .xpi file with Firefox.
• Firefox will prompt you to install the extension, let it do this.
• From the Firefox tools menu you can launch the "Pencil Sketching..." option.

Pencil will now run, have a play with it, you can add pages, and drag stuff from the collections on the left to make up your GUI design. Multiple pages can be used to make a storyboard or sequence of steps, each one can have page notes (right click the page tab to edit these). You can download a base starting point with a TV on it that is the right ratio and a quarter of full HD resolution, this can be opened in pencil using the menus. You can save your design as a .ep file, which contains all the images and you can share that with others to open in pencil. If you want a wider audience you might want to save it as HTML, we have an Ubuntu themed export template to help with this.

• Download the export template and save it somewhere.

• In pencil use the menu to go to tools-Manage Export Template and click the Install New Template button, and go find the zip file.
• To export your storyboard go to the menu Document-Export Document...
• Select Single web page
• Select All pages in the document
• Select "Ubuntu Theme" in the template dropdown
• Choose a destination folder, it will drop index.html there and some other files like an image of each page and some jquery libraries below.
• Put this lot somewhere people can see it and add a link to your wonderful work on the designs page.