Programming Tip: Learn a Graphics Editor

One lesson I took from MIX is that software development and graphic design are increasingly interrelated disciplines. Although they are very different skillsets, it's important for developers to have some rudimentary design skills, and vice-versa. There's a lot of useful cross-pollination going on between developers and designers.


This is a companion discussion topic for the original blog entry at: http://www.codinghorror.com/blog/2007/05/programming-tip-learn-a-graphics-editor.html

Jeff,

I’d recommend checking out Gimpshop, it’s GIMP but redone to act like Photoshop.

http://gimpshopdotnet.blogspot.com/

  • Mike

I have to agree whole heartedly… in fact just today I was talking to a group of developers (at our weekly local Architecture Chat over coffee) about the importance of design skills and in particular the ability to rapidly mockup interfaces.

The days of massive written specifications to agree functionality with IT niave clients are long gone…

…Jeff Atwood of coding horror has re-iterated a thought that has been running around in my trouble head for a long time… as Jeff puts it “Programming Tip: Learn a graphic editor”…

I will sound like a programminn\g n00b for a sec:

I installed gimpshop, it looked like GIMP to me, and then after a few days it started crashing and I had to uninstall it. I instaleld GIMP and Paint.NET . The latter has a wonderful interface! Why can’t more programs be like that?

Totally agree! Regarding the tools… don’t forget two of my favorite ones:

These two are vector based graphics programs, but Xara works with bitmap graphics as well.

Is it just me, or is there absolutely no defense of the thesis in the blog post I just read?

“Is it just me, or is there absolutely no defense of the thesis in the blog post I just read?” – Chris Barts on May 2, 2007 10:10 PM

It’s just you.

Also consider the free vector-based graphic design Creative Docs .NET editor at http://www.creativedocs.net/

I’d like to add a related tip: Get and grow a graphics library

Whether commercial (I’e’ http://www.iconshock.com/professional-icons.php) or accumulated free icons/textures/drawings (I.e. http://www.famfamfam.com/) it can really cut down the amount of time you are stuck in a graphics workshop. I find that once I get started, 4-5 hours goes easily before I have a result I am half satisfied with.

/Casper

I love the simplicity of Paint.NET but unfortunately, this editor is too basic for any advanced use (there is some support for levels but I don’t find it too useful). The editor of my choice is Ulead Photoimpact which nicely mixes vector and bitmap graphics editing and rather than layers, it promotes the concept of objects - e.g. text label is an object, rectangle is an object, bitmap image is an object etc. This is the mindset that fits me best. If you like PainShop Pro, you could like PhotoImpact as well.

Jeff you should consider adding Inkscape (free) and Adobe Illustrator (not free at all) to the “poison list”, they’re both vector-based drawing programs, the learning curve is even higher than for bitmap-based drawing software but the result is potentially much better (especially if you want to output e.g. SVG, and they have no problem rasterizing images).

You also forgot Fireworks CS3, which replaces the former ImageReady in the “lowest” CS3, and is a fairly flexible drawing tool with a slant towards vector-based drawing.

It’s good to learn graphics programs to get your feet wet, but I’d say that going the extra mile to learn a little bit about the fundamentals of graphic design will help you much more than just knowing how the marquee tool and gaussian blur work.

The main things to learn are:

Typography: font choices (using real fonts and not the garbage on all the free sites), leading (the space between lines), sizing different blocks of text to show their relationships, using fonts big enough to read (even for old fogies like me), alignment, and weight.

Color: not just what colors go together, but what colors read best against each other. What do colors communicate?

White space: maybe the most important element in design. The copy, interface buttons, or whatever, have to have breathing room. There’s a reason that text doesn’t go all the way to the edge in books. When blocks of copy and other design elements aren’t crammed together the overall design is more successful.

On the Mac, make sure you learn a vector graphics editor. Raster editors like Photoshop are still useful, but this will decline in the future, with Leopard’s resolution-independent UI. You want vector graphics so that your art is future-proof: as the resolution goes up, you want your images to become sharper, not blurrier.

I recommend Lineform (http://freeverse.com/lineform/). It’s inexpensive—$80—and highly effective.

Instead of those Paint applications, why not use a 3D modeling tool instead? Poser from e-frontier.com for example. It will allow you to create images of people and objects in different poses and different clothing but most importantly, it makes you think before you create an image. You need to work out the image you want before you start painting it. Basically, it forces you to design first, develop later.
Then, when you created some picture, the next step would be to integrate it with some background image. Combining a picture of your living room with a pose of a model sitting in a chair, for example. And then make it look as if the model is really sitting in one of the chairs in your living room. It’s not easy and requires some advanced techniques like the use of transparency and layers.
But one more advantage… You can create a model in Poser and use the model in your application to point at special actions. Makes the interface more interesting too. They just have to be small icons but every image can speak a thousand words or more.

I just want the .NET code (VB) to be able to take an uploaded .jpg and brighten, contrast, and sharpen as good as Photoshop does. I know it is out there, but it is always bundled with 1,000 other functions.

I handle few and it is a big help.

There’s a lot of useful cross-pollination going on between developers and designers.
Esp for web related stuffs

As I said, I’m a Paint Shop Pro kind of guy, but occasionally I do need fuller Photoshop compatibility for various things. It is the de-facto standard in a lot of areas.

If you need Photoshop compatibility, I recommend Photoshop Elements 5.0. I just picked up a copy on eBay for under $40 including shipping.

The GIMP interface is really neat once you get used to it. Worth saving 500$ on.

How about Firewire, does that count, i find it usefull along side Photoshop