Problem solve Get help with specific problems with your technologies, process and projects.

Doing design with open source: Five graphics programs

Learn what features open source design software such as Gimp, Inkscape, Dia, Pencil and Shutter offer enterprise design shops that need images for website graphics or print.

The open source community has historically been subject to criticism due to a lack of focus on consumer-centric applications. Writing from the perspective of somebody who uses open source desktop and server environments every single day, I can certainly sympathize with the complaint that many open source applications lack the polish of commercial solutions, the irony is that there are some great graphics applications. Whether you need to create a simple banner ad or a work of exacting specifications such as a book cover, an array of impressive open source design solutions are capable of going toe-to-toe with their expensive counterparts.

Here are five open source graphics manipulation applications capable of solving a wide variety of needs, and they will appeal to hard-core Linux users and Windows and Mac as well.

Of the five applications discussed in this article, GIMP (GNU Image Manipulation Program) is by far the best known thanks to an array of features so dazzling that it rivals Photoshop for most purposes. Actively developed since 1995, GIMP supports all of the features necessary to manipulate images, including advanced color adjustment, path manipulation, channels and layers, and an array of editing tools. Extensibility has long been a major selling-point, with almost 700 plugins available for download, each capable of expanding GIMP's capabilities in unique ways.

Figure 1: GIMP supports layers, font editing, filters, plugins, and more.

Another attractive GIMP characteristic is the hyperactive user community. More than a dozen books have been written about the topic, and several community websites boast thousands of users (e.g., Gimpology and Gimptalk forum).

But GIMP does have an area that has been a sore spot for many users. It uses the unconventional single document interface rather than the far more common multiple document interface, a trait which requires the user to constantly hunt for hidden palettes. Support for a "single-window mode" is forthcoming in version 2.8, as is detailed in GIMP UI designer Peter Sikking's blog. For those of you not willing to wait for the official 2.8 release, check out GIMPshop, a GIMP adaptation which eases the transition of Photoshop users by modifying the menu structure and layout to match that used by Photoshop.

Whereas GIMP excels at image manipulation, Inkscape has become the de facto open source solution for vector graphics manipulation. First released in 2003, Inkscape's roots actually stretch back to 1999 as the project is a fork of Sodipodi. Boasting a heavy emphasis on the Scalable Vector Graphics (SVG) format, and available in more than 50 languages, Inkscape is well worth a look if you're in search of an attractive alternative to Adobe's pricey Illustrator product.

Figure 2: Inkscape offers powerful path manipulation capabilities.

Draw technical diagrams with Dia
Whether you're designing a database, network, or software, sometimes having a reference picture really can be worth a thousand words. In any of these cases, a successful implementation is based on an exacting set of requirements that can be depicted in technical diagrams. While Microsoft's immensely capable Visio product has long been the market leader, an open source alternative called Dia is perfectly suitable for a great many purposes.

Available for all major platforms, Dia is bundled with 40 shape packages useful for building a wide variety of technical drawings, including network, flowchart, circuit, and hydraulic diagrams. Additional shape libraries are also available for download.

Figure 3: Creating a database diagram with Dia

Diagrams can be exported in a wide variety of formats, among them PNG, PDF, PS, and DXF. It's even possible to use Dia to create custom shapes to suit the specific needs of future projects.

Building wireframes with Pencil
While it can be tempting to jump right into the coding of a new website project, most veterans recommend creating wireframes will save a great deal of time in the long run. While some prefer to use graph paper several great applications allow you to build wireframes using drag-and-drop widgets. However, open source solutions were lacking until a fantastic tool called Pencil was released in 2009. Originally available as only as a Firefox Add-on, Pencil is now available as a standalone application for Linux and Windows (OS X users can use Pencil via the Firefox Add-on).

Despite its age, Pencil can compete with the most mature wireframing solutions thanks to its rich set of shape collections, among them Web, forms, GTK, Windows XP, and assorted UI widgets. Numerous other collections are available via the download page. A set of "hand-drawn" widgets are also available for those interested in participating in the latest fad.

Figure 4: Wireframing with Pencil

Several page templates are available in standard dimensions, including 800 x 600, 1024 x 768, and 1280 x 800, in addition to a 960 pixel-conformant version for users of the 960 Grid System. Wireframes can be exported using a variety of formats, including PNG, PDF and even to HTML for easy sharing over the Web.

Taking screenshots with Shutter
My programming books contain hundreds of screenshots, each of which is painstakingly staged and edited in order to achieve maximum effect. Because of this, I've become a bit of an aficionado of screenshot applications, and have found Shutter to be the best solution.

Shutter can take screenshots from a variety of perspectives, including full screen, the currently active window, or a user-defined selection. A timer is also available should you want to capture the mouse pointer performing a certain action such as opening a menu. It's even possible to capture just an application menu listing, as depicted in Figure 5.

Figure 5: Isolating a menu screenshot with Shutter

Another time-saving feature built into Shutter is the ability to designate a default save directory. Shutter will automatically save the screenshot to the designated directory and assign it a name indicative of the order in which it was taken (e.g. figure_001.png, figure_002.png). This is incredibly useful when you want to rapidly take multiple screenshots in succession without having to constantly fiddle with the location and filename.

Alas, according to the Shutter FAQ there are no plans to create Windows- or OS X-specific versions of Shutter, primarily because Shutter depends upon several libraries currently only available for Linux/Unix-based platforms.

ABOUT THE AUTHOR: Jason Gilmore is founder of the publishing, training, and consulting firm He is the author of several popular books, including "Easy PHP Websites with the Zend Framework""Easy PayPal with PHP", and "Beginning PHP and MySQL, Fourth Edition."Follow him on Twitter at @wjgilmore.

Dig Deeper on Linux servers

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.