May 18 2011

Graphical Design with OSS

Advertisement

Many designers don’t use graphical Open Source Software. This is not a coincidence: usually they don’t understand it, don’t like or even despise it. Since using the free software requires more time and technical knowledge — it seems easier to pay for a working package from a well-known vendor.

This approach is common, but it could be useful to take a peek at another one. Today’s OSS provides so many possibilities, that it becomes relatively easy to create almost anything that’s possible to make with the proprietary software, especially in the web design areas. In my opinion, it happens to be so good, that it may be worth taking a leap of faith.

The WHY

Usually, when it comes to graphical design, few people agree that open source software is capable of producing the same level of quality work that the proprietary software does. My intention in this article is to question this stereotype and to present a strong case for using OSS for graphical web design, without going into a discussion over which one is better to use. The bottom line should sound like this: it’s possible, and isn’t necessarily more difficult to create any type of web graphic or design using only OSS.


Ubuntu Tux Floats to work by Daniel J. Porter

In spite of all the mentioned appeal, most graphical designers prefer to keep using the proprietary software, and for a good reason — it provides in many cases easier, more stable and more intuitive interfaces that save professional designers’ time. In the professional web design environments where a client waits for the results, this is very critical. Also, it takes time to learn something new, so many question why spend it… But for the majority of website creators, and for those who just starting to take their first steps in the web industry and aren’t sure whether they really need to spend money on graphical software, open source software can offer all the necessary tools, educational opportunities needed to enrich and shape your creative thinking and technical skills.

A quick warning: using and learning gOSS usually requires more time than learning proprietary software. How much more? It depends. But if you have some spare time, and are ready to have fun with exploring another mysterious world of software, then you will only benefit from it. However, trying to go for broke right off the bat, expecting to be exactly at the same level you are in other more familiar software and setting somewhat unreasonable or out of reach goals, might not be the best attitude to start with. After all, most things in life become more rewarding after we have taken the time to learn more about them, and our grip on them improves. Same with OSS.

Where gOSS is extremely useful? — In web design agencies it’s common that the web designs and layouts are composed by a graphics expert. Then these designs are passed to the developers, which can decide what and how to slice in order to optimize the graphics better for the general consistency of the web site. For simple operations like these a natural choice would be using an OSS program such as GIMP and not wasting the money on proprietary software.

If you’re new to web design, you’ll quickly learn that the proprietary graphical software is very expensive. So if you’re unsure which one to choose, my advice to you is to first try the open source software. One big plus of using OSS, is that you can get it all for no cost. Another advantage becomes clearer with some of the more popular gOSS programs: they are developed quickly and newer updates include more and more interesting features. The beauty of this quick development is that anyone from anywhere in the world can extend or improve any program. So if someone wants a new feature in their program, every other user can have it as well.

To inspire you, and to let you taste what is possible to create with these free software tools — please have a look at this Sintel open movie, which was entirely created using graphical OSS. I worked in a relatively large animation studio, which couldn’t produce during one year a fraction of what this tiny and talented group produced with gOSS in less than a year. This important lesson in life taught me the following: it’s not the type of software which is important, but the kind of professionalism, passion and will that are keys to succeeding.

To start, let’s separate four common graphical types. Under each type, you’ll see a name of the program that handles it, and it’s brief features list.

Inkscape screenshot by Val Kotlarov

Inkscape screenshot by Val Kotlarov

  • Vector graphics — great for creating icons, illustrations, charts, web decorations, and other usually quick and impressive vector art.
    Inkscape — Spiro curves, Converting rasters to vectors, Gradients, Basic vector shapes and Boolean operations.
  • Photos — probably the most popular graphics type. Software helps you to batch-process photos, for example, when you need to cut down the image size and in the same time to enhance the quality.
    GIMP — Layers, Brushes, Selection tools, Masks, Image and Canvas transformations, Filters etc. A lot of free plugins are available too, such as G’MIC. A lot of file types are supported, so converting to a transparent PNG or creating sprites can be real fun.
  • Rendered 3D graphics — probably the most time-consuming to create, but also very impressive when well done.
    Blender 3D — Basic shapes: cubes, cylinders etc., Lights, Textures, Shaders. Different rendering engines.
  • Drawings — for any artist, the natural way to express himself or herself.
    MyPaint — Provides the ability for a free hand drawing when used with a digital tablet. It has a very impressive set of prebuilt and customizable brushes, Layers, different color pickers and very intuitive keyboard and mouse shortcuts.

Sintel Ishtar wallpaper.

© copyright Blender Foundation | www.sintel.org

Sure, there are many other gOSS programs and tools that can be used for the various types of graphics. However, the programs suggested offer a specialized and a narrower set of tools to handle the graphic type they were associated with on the list. So for example, if one wants to edit a photo, best practices suggest using GIMP instead of something else, because it’s built exactly for that. Similarly, if you want to create a vector icon, although GIMP allows doing it with paths, converting them to selection areas and filling with gradients, it’s much easier and more fun to use Inkscape, and the rasterized result will have better quality in addition to allowing easier changes to it later.

Other related programs which can be interesting are:

  • Krita — allows sketching and painting.
  • Xara Xtreme — handles vector graphics manipulation.
  • Luminance HDR — for High Dynamic Range images processing and tone mapping.
  • exiv2 — a handy utility if you want to modify images’ metadata.

The HOW

Before you start, you need to define your need then use a suitable program. Often you’ll need more than one program. For example, after creating and saving a vector graphics image, you might want to correct the colors or try to optimize it for web. GIMP always comes in handy here.

Generally speaking, using gOSS might initially be a bit confusing. Usually, these programs are initiated by creative developers, for whom the programming languages feel just like a mother tongue. Since they develop it usually for themselves, there might be some lack of good documentation with some programs. Though a quick trip to Google usually satisfies the any beginner’s need: be it the need for good tutorials or documentation, there is plenty online from those who came before you and were willing to contribute.

Exploring the program’s interface also produces greater understanding of available functionality. Many plugins can be found online, if some functionality is missing. For example, GIMP plugin registry has a lot of great plugins. Save for web for example, helps to optimize and preview the image before saving. Liquid rescale is another interesting example – it allows resizing an image without shrinking/stretching of the objects.

Several tips for using gOSS.

  • Like with any graphic work you are doing no matter the software, get in the habit saving your work more often. Unfortunately, some gOSS is not always that stable.
  • You may want to check frequently for the new software updates, and download them. Security updates are of course of the main concern, and they should be updated. Ubuntu linux and other distributions, automatically check for these updates, and suggest you install them.
  • Keep the stable release for your work. You can additionally download and install the development release, with newer features and bug fixes, but they will tend to lack the stability. So they should be used for your main work only if some added feature is indeed indispensable.
  • Participate in online forums to get extra help, or help others. Explaining to someone how to make something can often result in discovering new features or techniques, and lead to a better understanding of the work. Writing a tutorial has a similar effect.
  • The real power of gOSS is, of course, in the open source code. If you feel like coding, you can take the program, and change it the way you like. You can make it really shine, to look and behave exactly as you wish.

What to use, how and when?

GIMP is comparable to Photoshop. You can achieve virtually the same results with it. Usually any tutorial for Photoshop from the web can be done with the GIMP. The missing functionality can be substituted with a few simple steps. For example, in Photoshop, you can apply a shadow effect to a layer. In GIMP, you will need to apply a shadow filter, which will create a separate layer with the shadow below the desired one.

Here is a very handy batch processing plugin for GIMP, David’s Batch Processor. It allows selecting a bunch of images, resizing them, enhancing, changing their format and more with a few clicks.

GIMP can be easily transformed to Gimp Paint Studio (GPS) — additional features that bring in rich sets of brushes and makes GIMP easier to use.

Use Inkscape when you want to create logos, web icons, cartoon-like illustrations which are so commonly used in the web design. It’s possible to create those beautiful, colorful and shiny posters, this blog has many tutorials for Inkscape. Inkscape has the Spiro curves — simpler and more intuitive curves than Bezier. It has plenty of filters, modifiers, layers, paths and so much more. Sketch easily practically any shape. Save vector files as PNGs, in varying dimensions. The interface is very easy, and for the beginner as always it’s advised to explore the menu, as well as going through the documentation.

Since Blender belongs to other graphical programs category, the UI is less intuitive and requires more time to learn. This program is great if you want to bring some realism to your website. Things like adding a realistic shadow to a photo can be done quickly. It’s a really good choice if your drawing skills aren’t good enough and you want to draw realistic objects in space. Another advantage is that you can crate and render an amazing red car from any angle, change the environment, lights etc. Of course drawing these from scratch would require more time and skills. So what’s possible to create with Blender? You can find fine examples here, or here, or here.

The WOW


Shark Ride by Kjartan Tysdal

Shark Ride by Kjartan Tysdal

Finally, I decided to interview some great artists who use OSS. I found their email addresses, contacted them, and they kindly agreed to answer a few questions about using OSS.


A work in progress from Andrew Price.

A work in progress from Andrew Price

David Revoy

David is better known as an art director from the Sintel open movie. He uses programs like MyPaint, GIMP/GPS, Inkscape and many others. More info can be found on his website.


Electron Donor by David Revoy.

Electron Donor by David Revoy

You have many beautiful and interesting works on your website. Which one is your favorite?

Thanks a lot. It’s hard for me to define a ‘favorite’. That’s probably because I still see something to fix in each illustration I did. When I update my portfolio, I always let my wife decide which artwork she would choose for inclusion. My real favorite illustration — is certainly the idea I have in mind just before trying to lay it down with my tools. I still try to get closer and closer to this original idea.

Can you describe some difficulty that you encountered while using Open Source software?

It was a real challenge, and only 2 years ago for me. The first set of difficulties was purely technical : installing and choosing a distribution, makes almost all the hardware working, configure the tablet ; all of this is difficult and I had to spend time and patience to understand how it worked. The second set of difficulties is more related to my artworks. . No other users at this moment did professionals digital painting with graphical OSS. I had almost to invent a way to do it , test many softwares and try to find a professional workflow. I had to find alternative to a lot of things, and change totally my way to think an artwork. Thanks to Mypaint, Alchemy and the fork Gimp-painter , I discovered great tools.

2 years after, I can see things grew so fast that 95% of the difficulties I encountered totally disappeared : Distribution, tablet and most of the OSS I use are really easy to install, and documentation and tutorials now exist.

How do you contribute to the Open Source community?

I contribute as a user can do : I report bugs, I communicate with developers to give them feedback on new features, I use them and I maintain a blog to share my resources/tips/tutorials. I’m mostly around Mypaint, Krita, Ubuntu/Mint and Blender.

As an active user in the community, can you share some of your thoughts about the future of the graphical OSS?

Graphical OSS will grow ‘slowly by surely’ and become stronger tools, this is sure. I already see many studio adopting FLOSS, or schools learning to student with them and I guess it will grow too in the future. So, I’m confident about a very bright future for graphical OSS.

Andrew Price

For many, Andrew is better known as Blender Guru. He has created/creates many great works, you can find more info about him, and a lot of smashing Blender tutorials on his Blender 3D tutorials website.


Dream House by Andrew Price.

Dream House by Andrew Price

Why did you choose Blender? Was it a hard decision to go the ‘Open Source’ way?

Nope! I started way back when I was 15, and had the choice between $3000+ commercial software or the open source Blender. It was a no brainer for me :)

How would you compare Blender to a proprietary 3D software in terms of ability to create great 3D scenes?

One of the great things about blender is that it’s a complete 3d suite. It allows you to create an entire animation or artwork from start to finish without ever leaving blender. Once you’ve used the built-in compositor you won’t ever want to leave ;)

However, Blender is not without it’s shortfalls. The internal render engine is severely lacking when compared with commercial render engines. In my opinion it’s the one thing that is stopping Blender from being production ready, so I hope it’s improved shortly.

Do you think it would be difficult for someone who’s not familiar with Blender to learn to use it?

Of course! But that comes with the territory. All 3d software has a very steep learning curve, it’s up to the artist to persevere through the roadblocks until they become good at it. The hardest part for most beginners is getting used to working in three dimensions. Once you’ve got that down pat, everything else usually falls into place.

Leaving the financial side, would you recommend Blender, or would you suggest buying a 3D editing program? Why?

In all honesty, if you want to get employed in the 3d industry then you need to be using 3ds Max. It’s just a simple fact. It’s the industry standard application and most employers will expect you to know how to use it. However having said that, Blender is the perfect application for beginners to get their feet wet. They can learn the fundamentals in a supportive community, do almost everything with it that commercial applications can and with no costs. It’s a seriously powerful program, but it may take a while before the industry realizes that.

Sebastian Zakrzewski

I found Sebastian’s portfolio on DeviantArt. He uses GIMP / GPS among the other tools. Take a look at his amazing works.

Edgewalk by Sebastian Zakrzewski.

Edgewalk by Sebastian Zakrzewski

Why do you prefer using the open source programs? Which benefits do they give you?

Open source is free and legit. It’s also solid alternative to commercial programs — it offers same basic functionality and performance.
It’s also about flexibility — commercial projects usually stick to one design and approach to work,
while community behind open source doesn’t hesitate to experiment and often comes up with great ideas on how things can be done in different way.

Do you encounter situations when you would prefer using similar proprietary software for your art works instead?

Yes and no: I miss few handy tools like freeform transformation from Photoshop but I can live without them. On the other hand there’s no good alternative in open source for ArtRage or Google Sketchup I sometimes use, but they’re addition to software I’m using on regular basis. If need arises and I won’t be able to find anything suitable in open source, I won’t hesitate using proprietary software.

Would you recommend others use open source software?

Yes, it’s definitely worth trying — it may suit your needs and thanks to popularity it’s constantly gaining I think more and more solid programs will show up.

Useful links

Here’s a bunch of download links for free graphical software to try out. The first four programs were described in this article, and can be downloaded straight away, others can be easily added on Linux machines.

(rb)

About the Author

Val Kotlarov is yet another talented dude, who likes to combine fine and creative arts through software. He tries to express this better through the web development and design. OSS occupies the foreground on (t)his landscape divided by the rule of thirds, and remains in the central rectangle. The background is currently in bokeh.

Homepage

Comments and Discussions
  • Inspirationfeed, 18 May 2011

    Great article, I really enjoyed reading this!

  • Niklas, 18 May 2011

    Great article! I myself am trying to go into OSS completely and the hardest part for me is learning the GIMP work flow when I’m so used to Photoshop.

    • Robert Bowen, 18 May 2011

      As a creature of habit, myself, I totally get that.

    • Val Kotlarov, 24 May 2011

      Hi Niklas & thanks for the comment :)

      It feels more natural when you’re working on an OSS operating system. And for those who experience their first steps in this world, it feels a bit unnatural to “loose control” from the “addiction” to any commercial program that they got used to work with. Of course there’s no substitute in OSS to any proprietary “equivalent”. But I found that it’s helpful to notice all the rich capabilities of the OSS not only in the context of web / programming, but even in areas such as graphical design. And it becomes even more attractive when you find features which are not available in commercial software (Inkscape’s Spiro curves for example)

  • Jorgen Kesseler, 18 May 2011

    I have quite a lot experience in both Photoshop and Gimp. Though Gimp is perfectly capable of creating very nice graphics, it’s just so much easier in Photoshop. Often creating a type off effect in Gimp takes a lot more time than to do that same effect in Gimp.

    • thebettertwin, 18 May 2011

      The problem I have found is that each separate program requires a totally different way of doing things. I know Gimp quite well now. Wouldn’t say i am an expert but i know how it works. (Gimp 2.7.2 is fantastic btw, layer groups, single window, ridiculous amount of brush dynamics etc).

      Being in the web field, I often need to create vector images, so I switch over to Inkscape, and its a totally different interface that I have to navigate and learn.

      Adobe creative suite offers uniformity across programs so people can easily jump between depending upon the job.
      However, it also carries an extortionate price tag.
      The amount of money saved is well worth the effort learning how to use these programs imo.

      Thanks for this post its good to see these programs getting some love.

      • Robert Bowen, 18 May 2011

        I agree that the amount of money saved, can more than make up for the learning curve involved. And I think that many of us forget, that at one time, Photoshop or whatever program we use now, used to feel just as foreign to us as some of these OSS programs can feel.

        Thanks for the comments and back and forths. Glad to see we are sparking some conversation.

  • Leon Ouwendijk, 18 May 2011

    I tried several types of OSS and I have to say that the time and effort put into it by developers is certainly commendable. Some are really powerful. However, it seems that most OSS seem to be developed by developers and not designers. Adobe’s CS on the other hand, is clearly build for flexibility and speed of workflow.

    Some examples:
    I use smart objects a lot in Photoshop. They enable me to work in a more semantic way (for lack of a better word to describe it) and resolution indepent, too. I can put stuff in them and keep tweaking. Afterworths, I can simply alter, replace or add to the content of a smart object and all transformations, filters etc. will aply to the new/ altered content. All the while, the smart objects’ transformation and filters remain editable.

    In Illustrator, I use symbols a lot. They enable me to work on different versions of a graphic, each on it’s own artboard. Once I alter the content of a symbol, al instances of it in my document will update.

    When something needs animating, After Effects will import each Photoshop/ Illustrator layer along with it’s layer size as an After Effects layer. Illustrator layers remain resolution indepent. Flash will import Illustrator symbols as Flash symbols, ready to be used in a Flash project.
    I could go on and on but I think these examples will suffice to state my point.

    Once I learned how to work in GIMP, I tried to find a way to work in a semantic manner and it simply could not be done. I tried Inkscape for a while but it simply didn’t have the functionality that I was looking for. Scribus literally has the same options for working with text as Ms Word so I’ll stick to InDesign for the time being. OpenOffice’s styles are no match for Ms Word’s styles in terms of flexibility and speed.

    While I have not tried all of the OSS out there, it is clear to me that they could be more powerfull if actual users of them were involved in the development. Adobe’s CS is by no means cheap but when you get a package like that, you pay for years of development.

    I would like to see OSS developers look at the way people work with commercial software and why it’s so popular. Not to simply copy functions but to develop software that gives users the flexibility most commercial software does. The technical know-how is already there.

    • Robert Bowen, 18 May 2011

      Thanks for the comments, Leon. I think that if more users would get involved (i.e. provide feedback, critiques, etc…) that were specifically geared towards that end, that we might see OSS developers shift in that direction. Like you said, it seems more developers working on these open source apps than designers, but since they are open source, that does not have to be the case.

      I do think the OSS market could stand to work closer with end users to develop a better workflow like you pointed out, and perhaps we will see that day come about.

    • Val Kotlarov, 24 May 2011

      Thanks for the comment Leon,

      One thing I had in mind while writing this article was the desire to show to people that most of the things even in web design industry can be done using only the OSS.

      I didn’t try to put a question which software is better — it’s a matter of personal preferences.

      However as a separate issue, the comparisons can be really interesting, as both software types can be complimentary to each other. For example, you mentioned the OpenOffice. Some of commercial equivalents are limited in maximal number of rows that a user can have, while OpenOffice’s Calc isn’t. This simple fact can make a big difference…

      I think I tried to talk to those users who are ready for explorations to get some interesting benefits, but aren’t sure where to start…

  • leog, 18 May 2011

    totalmente deacuerdo, no hay nada que haga un software pagado que uno gratis no pueda hacer. Al final y al cabo los softwares solo son herramientas, el verdadero potencial de una web o un diseño dependera del buen criterio del diseñador.

    • Robert Bowen, 18 May 2011

      Gracias por los comentarios. Estoy muy de acuerdo en que todas las caídas al diseñador

  • egiova, 19 May 2011

    Since two years I decided to work with Inkscape, and I’m happy with it. Since the very first time I felt it user friendly and very intuitive, the community have a lot of answers to provide, so I never struggle with it. It opens AI files, so even professionally it’s not a problem to adopt Inkscape. I have to say that, if it’s true some AI features are far more advanced than Inkscape, in many aspect Inkscape is superior to AI. If I want to draw freely, I open Inkscape! For this kind of task, AI is a pin in the …
    GIMP is a little different, its weeknesses are the PS strength, and professionally I can’t live without PS, so… PS still reign here.
    Blender can be very easy to use and can match quickly on your workflow if you’re flexible, and freelance. Because pro 3D, as one of your “guest” mentionned it, propietary software is king.
    As a freelance the switch to OSS is a subtantial help to my finances. It definetly worse a look.

    Very good article by the way:D

  • Raylene Friis, 19 May 2011

    I have linked to this web site, I hope you don’t mind. You’ll find the link on my front page on top of the right side bar. I believe that my viewers would definitely find your website helpful – Thanks

  • juicypixels, 20 May 2011

    I think OSS is a very good option especially for beginners. Of course it is not the same as propietary software, but still you can achieve the same results. However for professionals propietary software (even if it is expensive) is more suitable because it makes work much easier. I hope that some designers – who might be missing functionality – contribute to the development of open source software in order to improve it. This is the idea behind open source.

  • cipro, 23 May 2011

    Wow!! and why don’t I know about this software? I am bookmarking this article right now. Thanks.

  • jackie, 26 May 2011

    Great article with nice resources. I just started to learn both Gimp and Inkscape so I can switch back from Adobe suite. So far so good.

    Gimp is nice replacement for Photoshop/Fireworks, but Inkscape lacks some stuff that are oob in Ai. Nevertheless, I’m making my way to freedom! :)

  • harry, 19 October 2011

    i am a long time user of photoshop .. but every time i upgraded there was a problem .. it always get straightened out but lots of trouble .. so i tried gimp … i had almost no trouble converting. gimp made sense and was fun to get into and learn .. when you just play with things it becomes easy to figure out. i edit thousands of photos a year and time is a big factor .. it took me years to do complex things in photoshop in a reasonable time .. i became very proficient and productive .. but gimp took me much longer at first but after a while i was up to speed and then actually faster than photo shop .. things just make more sense in gimp and flow with less irritating repetitive clicks. at first i would do certain things in photo shop but that’s only because of very long experience .. eventually there was nothing i couldn’t do in gimp. i have both but now use gimp for almost all photo editing .. in photoshop, to save time i would edit about 10 photos at a time .. that requires lots of memory but in gimp i can do the same but prefer individual edits with the same speed or better.. with gimp i have great support .. in photoshop sometimes not so good. in photoshop on win7 i have an occasional crash but with gimp and Linux i cant remember ever having a crash. i pay for photoshop so cost is not the reason i use gimp .. i still use photoshop but now use mostly gimp. my learning curve for photoshop was years and counting .. but gimp was just a month or so. both of these programs do so much i dont think “learning it all” will ever happen .. both keep getting better .. i am happy to have such great programs to make life easier.

search form
 
image description image description