Note: Pencil is supported in Windows, OSX and Linux. In this article, we will be focusing on the Linux version of Pencil.
Installation
Pencil is no longer available in the Ubuntu repositories (as of Raring, at least), but it is an easy install via DEB package from the project’s website. Install by double-clicking on the downloaded package, or with the following terminal command: The only dependency is Firefox, so if you’re on a system that doesn’t include this by default, you’ll need to install it (or use a GUI package manager, which will handle the dependency for you).
Usage
Whereas with a program like GIMP or Krita, you generally need to create your own graphic pieces. Pencil provides you with a wide array of shapes you can quickly drag onto a page and modify to your liking. The pane on the left lists available shapes, in groups such as “Common Shapes” (basic squares and circles), “Desktop – GTK Widgets” (if you wanted to prototype a Unity or GNOME application), and “Sketchy” (one of my favorite for web mock-ups, which looks like a pencil sketch). Items in these groups can be mixed and matched.
To add one of these to the drawing, simply click-and-drag it onto a page (new pages can be added via the “New Page” button in the upper right). Once on the page, the size can be changed by dragging one of the corners or borders of the shape, or via the “Location & Size” toolbar fields (useful if you need the drawing, such as a web mock-up, to fit a certain resolution).
Double-clicking most shapes allows text to be added, which can be customized with alignment, font, bold/italics, and point size using the “Text format” toolbar buttons.
Mock-up Basics
I draw wireframes and other diagrams all the time, and the basic process I use is as follows (using the example of a homepage mock-up for a website).
Background
For a webpage, this starts with the browser window – The “Window Frame” item from the Sketchy collection is used here for simplicity’s sake. To place this at 0px x 0px (i.e. the top-left of the screen), the “Location & Size” controls are used. The bottom and left edges are dragged so it fills the entire screen.
A “Box” shape is added all the way across the top to indicate the URL bar … sometimes placing things exactly with the mouse is difficult, but the arrow keys can also be used to move a shape once it’s selected:
Page Elements
A big slider can be added to the page at the top. The “Image” shape is used to indicate the slide, and two “Sketchy Triangles” to act as forward and back controls. Clicking twice on an object turns the edge/corner handles pink, which allows them to be rotated:
Lastly, three regions are added at the bottom to hold news, a video, and a contact form (The “Box” shape is used to outline each region). The news will just be a heading and some text (using the “Label” Sketchy shape with some varying text sizes), the video region is made by dropping a “Sketchy Triangle” inside a “Sketchy Circle” within a “Box” (i.e. a “Play” button), and the last will be a “Label” accompanied by three “Text Fields” and a “Button”:
By using the pre-made shapes, drawing programs allow you to very quickly (the above took about ten minutes) illustrate ideas in a way that others can understand. This Microsoft Visio alternative allows you to create diagrams in an intuitive and portable (Evolus Pencil itself is cross-platform, and drawings can be exported to PDF or PNG) way to share with colleagues.
