/ #backstage 

Design with freedom in mind

Hello friends, today I thought I could take you through the whole creative process in creating Portucalio. I will be showing all the different phases and the obstacles we have faced so far. This intends to be a simple and concise article but, hopefully, packed with a lot of interesting information.

The name

First Veronika and I started by exchange a couple of ideas in person, written on paper and using a synced folder with notes and images. Since these early stages, we relay on mind-maps to organize our thoughts, to foster new iterations of initial concepts and even to decide the final name. And for that, we started out with Coogle a cross-platform mindmapper.

Mindmap from Portucalio using freeware software as a service Coggle

Coggle proved to be a very good option but the requirement to be online was kind of a bummer since our barnstorming meetings were normally in a cottage house without any internet and very weak mobile signal network. Plus the fact that it’s a Freeware as a service and not opensource was a concern, we really wanted to keep it as open as possible using likewise open tools. So we went ahead and moved our efforts to Freeplane, another mindmapper with a lot of documentation, more features, open-source and for offline use. Freeplane’s UI might not be its forte but keep in mind that you can adjust or even create your own styling and saved as a theme. In practice, you can set a different theme for different types of mindmaps. We recommend it.

Mindmap from Portucalio using opensource software FreePlane

Sketching

This phase is quite simple to explain. We gather all our photos, and organize them by category and or priority. While Veronika was helping with these processes I was in parallel sketching ideas for the layout of the page as well as its illustrations.

Few sketches were drawn by hand

Both on paper and on screen, I tried to avoid being obsessed with details and pay more attention to the big picture and the concept I wanted to convey. All motifs are based but not exclusively, on our trips to Portugal and the photos we took there (We use Shotwell to import and organize all the photo material).

Screenshot: On the left a photograph taken by us in Porto; On the right, the February illustration inspired by the photo and done in Inkscape

Tools and Set Up

Upon having a couple of ideas drawn out I would move back to my computer and start to play around with those concepts on Inkscape, and testing those motifs on newly created tests of layouts on Scribus. Going back and forward between computer and sketching while printing some of those iterations.

Screenshot: On the left a house from Aveiro region done with Inkscape; On the right a page from the calendar in Scribus, it's possible to see the design grid and the same house but now in color and with a work in progress composition

Here is what I would test on those print samples:

  • Margins and other dimensions like gutters
  • Test colors and adjust
  • Take notes and refine Prepress process

Our workflow is quite compatible between design and marketing tasks, without any complications and using Linux. I used Pop OS to design Portucalio and Veronika writes content and exports assets directly from Inkscape for social media purposes in her Kubuntu.

Obstacles

The fact that Inkscape doesn’t support CMYK it’s a downside, nevertheless, I tried to turn this into an opportunity to simplify the process by focusing on drawing and not that much on color. I would set up an illustration with basic colors but where the main point would be to set the main direction with care for lines and shapes and then I would use Scribus to refine that “color search” by using the menu:

edit > Replace Colors...

In doing so I would take my time in selecting the right color and taking advantage of Scribus’ color management system. So basically Inkscape was used as a digital sketcher and tool for going through illustration’s iterations.

Oh and the fact that Scribus still crashes sometimes it’s not that great but it’s getting better each year. Plus it always ensures that your work will not be lost by saving right before it closes. Oh and having a complex SVG structure with groups inside of a group it’s not a great idea. So instead, I would ungroup and would try to simplify as much as possible before opening it up on Scribus.

Advantages

1) Inkscape

  • Vector format with great gradient tools
  • SVG as file extension: this means less mess in our file structure with fewer file types from the same illustration.
  • SVG as standard: this means we can check on those designs even when we are away from our computer. We just need a browser! and on top of that, it makes our work easier to use on the digital mediums.
  • Easy to export even from non-designers and with a lot of options whiting the same export panel
  • Inkscape commands7: the ability to use Inkscape actions without requiring GUI and thus using fewer computer resources while having the possibility to execute otherwise repetitive tasks at once. This is an example of what we use, in some case, to export each illustration as an individual PNG.

    for file in *.svg; do inkscape $file -e ${file%svg}png; done
    

If you hate doing something on terminal do not despair someone already created an SVG2PNG Nautilus scripts with a user interface for you :)

2) Scribus

  • Good CMYK support
  • Good file format with readable file structure, similar to an XML. It’s quite easy to spot and understand elements by simply opening a Scribus file with a text editor. Downs
  • “Dockable” interface, so you are able to arrange it according to your taste and your screen size.
  • Story editor helps you with the task of editing a text by doing so in a separate place, away from the text box, and it allows you to see metadata (invisible characters).

Printing

Before the actual final print, I would visit the Printshop to investigate paper options and their cost. I believe it’s important to have a good close relationship with the establishment, knowing their workflow and which standards they accept. I would request and analyze a sample and iterate upon that.

Please note that these phases were not sequential. Many times we would cycle through all of them just for one month, illustration or detail.

To be continued

Please stay tuned for the upcoming article in these Backstage series

Here are some topics I will be covering:

  • How my Inkscape files look like
  • Why I used that grid on Scribus
  • Which color Profiles it was used
  • Fonts, and other specifics

Footnotes
Freeplane

Freeplane is a free and open source software application that supports thinking, sharing information and getting things done at work, in school and at home. The software can be used for mind mapping and analyzing the information contained in mind maps. Freeplane runs on any operating system that has a current version of Java installed. It can be run locally or portably from removable storage like a USB drive.

Freeplane.org

Shotwell

Shotwell is a personal photo manager. – Shotwell page by Gnome

Inkscape

Inkscape is professional quality vector graphics software which runs on Windows, Mac OS X and GNU/Linux. It is used by design professionals and hobbyists worldwide, for creating a wide variety of graphics such as illustrations, icons, logos, diagrams, maps and web graphics. Inkscape uses the W3C open standard SVG (Scalable Vector Graphics) as its native format, and is free and open-source software.

Inkscape

Scribus

[…] Scribus is designed for layout, typesetting, and preparation of files for professional-quality image-setting equipment. It can also create animated and interactive PDF presentations and forms. Example uses include writing newspapers, brochures, newsletters, posters, and books.

Wikipedia

Linux

Or actually GNU/Linux is is a family of free and open-source software operating systems compound by libraries and utilities (GNU) and a system core that monitors and manages process, kernel (Linux)

Linux is a family of free and open-source software operating systems built around the Linux kernel. Typically, Linux is packaged in a form known as a Linux distribution (or distro for short) for both desktop and server use. The defining component of a Linux distribution is the Linux kernel[[…] Many Linux distributions use the word “Linux” in their name. The Free Software Foundation uses the name GNU/Linux to refer to the operating system family, as well as specific distributions, to emphasize that most Linux distributions are not just the Linux kernel, and that they have in common not only the kernel, but also numerous utilities and libraries, a large proportion of which are from the GNU project.]

Wikipedia, the free encyclopedia

Pop OS

A Linux distribution based on Ubuntu. It came with my system76 computer and I highly recommend it. Especially for those who own a high-end machine.

We believe the computer and operating system are the most powerful and versatile tools ever created. We’re building an OS for the software developer, maker, and computer science professional who uses their computer as a tool to discover and create.

Pop!_OS by System76

Kubuntu

A Linux disto based on ubuntu with KDE Plasma Desktop Visit Kubuntu page

Inkscape commands

Inkscape has the ability to batch process SVG files without opening up the Graphics User Interface (GUI). The available options can be divided into a few categories: general commands, exporting commands (including printing), and query commands. Inkscape will also open PDF files from the command line.

Inkscape: Guide to a Vector Drawing Program by Tavmjong Bah

Credits

Author

Pedro

I hope it's clear!