OpenSchedule for Android

Back in mid-February, I was offered the opportunity to create some graphics for an Android application called OpenSchedule. It’s an application which lets you view and manage information on upcoming conferences and events registered with the OpenSchedule web app. This tied in nicely with the Linux conference stuff I’ve worked on (more on that in some upcoming posts), so I was glad to help out.

I had done a little bit of Android graphical work a while back for the ILF App which consisted of coming up with some background images and an icon. This was a little big more involved in that I needed to create the launcher icon, tab icons and promo images for the Android market.

As usual I learned a few things along the way:

  1. Eclipse can seem like a mystery inside an enigma wrapped in a straitjacket to the non-developer like me. I jumped through my fair share of hoops to get updated resources to show up properly in the emulator. This mobile development thing is not something you come at likely. Full respect to those who do it well.
  2. Guidelines for the creation of Android launcher icons can be found here.
  3. Guidelines for the creation of Android tab icons can be found here.
  4. Likewise, a good description of the promo image requirements (as well as other graphic requirements) is over here. And lastly,
  5. Daniel Frey (the creator of OpenSchedule) is one patient bastard. I peppered him with a stream of newbie questions related to point #1 and he didn’t flinch. – Thanks Dan!

 

So I ended up creating this launcher icon:

And for the Event, Schedule, and Venue Tabs, the following icons (selected and unselected versions as per guidelines):

And once that was all out of the way, Dan pointed out that there were some optional promo/feature graphics. These show up when you see the app’s market page on your phone and what you see on the web market page as well. Again, sticking to their requirements, I came up with the following two versions:

180px x 120px version:

and a 1024px x 500px version:

All in all a very enjoyable little project.  Thanks for the opportunity Dan.

If you want to try out the app, you can get it here, or hit the QR code below with your Android phone:
qrcode

 

The OpenPilot Logo

op_logo

A little over two weeks ago, I got an email from one of the developers of a project called OpenPilot asking if I’d be interested in creating a logo for the project. OpenPilot is an open source project developing an autopilot system for model aircraft – interesting stuff. Always looking for a creative challenge to focus on, I accepted the offer. It was an interesting challenge and I thought I would post a little about the process I went through.

Before I get started I must thank Troy Sobotka for doing his usual best and being a great soundboard for ideas and great creative discussion. It’s good to have someone around who’s willing to encourage but also throw out some really honest opinions on things – even if you don’t ask for them! :)

I emailed the developer back and asked for some background information on the project. Its primary use was on model aircraft, so the audience for this would most likely be aircraft enthusiasts. Also figuring that they’d be more technically minded, I knew I wanted it to be simple, but interesting. The goal was to give the project an identity that was modern, and which expressed a feeling of quality and accuracy. After all, would you want to risk your expensive model aircraft by using an autopilot system consisting of duct tape, and a few bungee cords?

I first frittered around and sketched a few things. The first idea I had involved a sort of ‘horizon flyover’ concept:

click for larger version

A quick trip to Inkscape yielded this:

concept

That initial quicky mockup felt devoid of any character to me – and it looked a bit too thin and wispy. The bottom line was that I didn’t like it, so I dropped it and decided to pursue other ideas.

More sketching yielded this sketch of a sort of takeoff flight path:

click for larger version

While I thought it had some potential, it looked like it would end up too complicated for a logo. So I simplified the concept somewhat and came up with these:

click for larger version

The lower one really caught my fancy as something that had real potential so I chose to pursue it. First I attempted a traceover of the sketch in Inkscape but immediately realized that I’d get the perspective all wrong, so I dropped that and decided to model a simple square path in Blender to get it right (the initial part of the path is semi-transparent so that I could see the shadow beneath):

click for larger version

I took the result into Inkscape and traced that. An initial mockup gave this:

click for larger version

This really had potential. Unsurprisingly, I made my usual mistake of going a bit far with gradients and shadows. This was too complicated and fiddly for a logo. Troy suggested stripping it down until it broke – and that didn’t take long. ;)

I found that without the gradients I lost the feeling of slope in the path. And without the drop shadows.. well, let’s just say it broke – big time. I had to try playing with the path more to get that elevation feeling without the drop shadows and gradients.

I found that by crossing the path over itself, I could ensure that the path moved ‘up’ in elevation. Even better, I found that by adding some subtle breaks in the path I could even give the feeling of a shadow at that crossover:

click for larger version

At this point I also had to confirm how this would work in monochrome options as well:

click for larger version

Two things became apparent. First, I had the happy accident of getting the letter P in some of those orientations. Second, it was so much better to have the plane going up instead of heading down. Even with the paths crossing, (arguably) inferring increasing elevation, the overall direction of the plane is downward. And that can’t be good. ;)

So the next iteration involved horizontally flipping one of the options and coming up with:

click for larger version

In addition to rotating the logo slightly to better achieve the ‘P’ effect, and squaring off the dark grey background pill, I also decided to have a play at the text. While I hadn’t been terribly disappointed with it, I wanted to try something different just to see:

click for larger version

I felt I was almost there. Troy suggested I man up and create a simple style guide for the logo. This would better guarantee against misuse of the logo (stretching, colouring, bling-ifying etc) and may teach me a thing or two about how these things should actually be done in the ‘real’ world.

Also useful is that creating a style guide can surface issues you hadn’t initially considered. In fact at this point I had to come with a horizontal orientation of the logo for potential uses as a wider format web header graphic. I simply hadn’t thought of that. Of course Troy had to stage a mock conversation between a few swarthy Italian-Canadian web designers over Google chat for me to understand how this situation might arise. If you don’t believe me, I’ll post the chatlog. ;)

The final logo with alternative horizontal layout turned out like this:

click for larger version

I’m proud of the style guide as well. Not proud that I used Inkscape instead of Scribus to do it. That’s kind of like using the back of the pliers to hammer in a nail. It works, but it’s far from the best way. In any case I plead newbieness for mistakes like that. It’s all a learning process.

Here’s the completed style guide if you want to have a look.

OpenPilot Logo Style Guide

This was a fun project. I’m proud of the logo because it took a lot of work (at least compared to most things I’ve worked on in the past), it proceeded rather logically, and I feel good about the result. As usual I learned a lot of useful things along the way which can’t be a bad thing either.

Doing fun things for a couple of great projects

I’ve had some fun the past night or two helping out a couple of guys on a couple of cool projects. I’m not much of a cartoonist (wish I was) but it was great fun sketching some ideas up and making them come to life in Inkscape. It’s never been something I’ve been really interested in, but after the great fun I had doing these I think I’ll spend more time on stuff like this. You can probably see lots of places where my skills need work.. but if you don’t try you’ll never improve.

First, I came up with a fun little logo/mascot to help out rowinggolfer, who is trying to solve his proprietary (aka Crap) software problem at his dental practice. He (along with many other dentists apparently) are stuck with poor quality and poor service when it comes to their expensive dental database management software. After trying to help them solve the problem with constructive feedback and getting nowhere, rowinggolfer has decided to bite the bullet and create his own open source solution. Check out the OpenMolar project to see what he’s up to. Here’s what I came up with for him:

Another fine project I’ve recently helped out on is the newly created freelinuxbox.org site. Created by Linc Fessenden, one of the original hosts of TLLTS,  freelinuxbox.org is a great site that tries to connect up people who want to give away fully functional computers running open source software to individuals who need a computer, free of cost. Absolutely awesome idea. I had fun creating this one too.

Stop Recommending (Quality) Free Software with a Proviso

Just noticed this post about “35 Tutorials to create amazing Vector Graphics using Inkscape” come across Twitter. And while I was quite happy to see a post aggregating some great tutorials on Inkscape, I was a little bothered by the blurb at the top of the post itself:

“Inkscape is a free vector graphic design alternative software similar to Adobe Illustrator and CorelDraw, only it doesn’t cost you a penny. It is maybe not as powerful as its higher priced rivals, but certainly powerful enough to design high quality vector graphics.
If you are looking to venture into vector design, I recommend using Inkscape first, learn as much as you can and then if you need something with more kick splash out on Illustrator.”

Why does there have to be an immediate proviso that somehow it’s not as powerful? The last sentence is even a little more bothersome to me. I can see someone saying, ‘hey, learn all about vector illustration with Inkscape, it will help you if you ever have to use Illustrator or CorelDraw’ or something like that.. but I really don’t see how using Illustrator is going to somehow give my work more ‘kick’.

If you need something with more kick.. then obviously you should sit in front of whatever you’ve created and give it more kick. I can’t stand the insinuation that somehow if you need higher quality artwork, you’d obviously have to go with the paid option.

While recommendations for free software alternatives are increasing daily (or it seems to me that they are), it bugs me that they always seem to come with a proviso. And sure, while in many cases those cautionary notes are completely valid, in other cases they are not.

Rant over. ;)

I got published in Linux Journal… well sort of… :)

About 6 or 7 months ago I was invited to submit some logo concepts for the SouthEast LinuxFest. I was absolutely thrilled that they chose one of my submissions. Since then, I’ve done a few ancillary things with the logo such as a flyer design and some web site badges.

The venerable Dave Yates of the LottaLinuxLinks podcast is one of the organizers of the event. Several weeks back he asked if I could provide a couple of print ads for the event and I was thrilled (and to be honest, quite nervous) about accepting. There was something a little nerve-wracking about creating something that will actually appear in a publication. It’s one thing to create some web site graphics or desktop wallpaper, but it’s another to actually create a print ad… at least for me. I’ve never created an ad before but it actually turned out to be quite easy.

I created a half-page ad for Linux Journal (which you will find on page 55 of the May 2009 issue of LJ) and it turned out quite well I think. I created the graphic for the ad in Inkscape (of course!), exported the PNG file and then made a CMYK TIFF version using the Separate+ plugin for the GIMP. From there I used Eckhard M. Jager’s fantastically useful CMYK Tiff 2 PDF plugin to create a PDF in CMYK. Like most things I try, it was a real seat-of-the-pants sort of process for me.

Eckhard by the way, has a really fantastic blog called appropriately enough Linux For Designers. I’ve been subscribed to it for ages and I encourage anyone interested in design on Linux to check it out. There’s lots of great stuff over there.

The fact that I know absolutely nothing about CMYK or creating print ads is a testament to how useful those two plugins really were to me. It was satisfying to know that I could really create an honest to gosh print ad using free software tools and come up with what looks like a decent result.

There is another full page SouthEast LinuxFest ad I created that is supposed to run in the next two upcoming issues of LinuxPro Magazine too, so keep an eye out for them. Hopefully my sparse knowledge of CMYK will not fail me in those ones either. :|

While to most people they’ll just be another (hopefully attractive) magazine ad, to me they’re definitely getting stored safely away so I can brag to my grandkids about them someday. :)

Blathering on about creativity and an icon set

 

icon_blankFor quite a while now I’ve been harbouring a desire to embark on a longer term graphics project. I love diving into a variety of smaller projects, like the recent Lumiera logo entries, playing around with a gPodder logo and even more recently contributing a little of my play time to Crunchbang linux.

However I would like to stretch my right brain a little further by coming up with my own icon set. Now, I know pretty much diddly-squat about actually creating an icon set, but I imagine it’s somewhat tedious, time consuming (if done well), but entirely possible. So since I have been secretly wanting to do this, why post about it now? There are two reasons:

First, very recently (like on the drive home last night) I listened to an interview with Merlin Mann by Leo Barbauta. While it was an interesting interview, the highlight for me was a question that Merlin asked of Leo (and I’m paraphrasing here of course): If you woke up tomorrow with 60% of the required materials, knowledge or information already in hand, what creative thing would you do?

So knowing you would already be 60% of the way there, what would the project be? Forget about starting from scratch, forget about facing that mountain of initial effort to get moving – what would it be if you were already more than halfway there? Now, I’m nowhere near 60% of the way there (more like 0.1%), but it really gets you to question yourself about what to do creatively.

The second thing that prompted this post was a fascinating post that popped up over on VectorTuts this morning about 10 Tips For Effective Icon Design. It has some really inspiring examples and great useful advice for people who are designing icons.

So I’m really putting this post up to get myself started on this little project. I’m not sure what the scope would be, but it can’t hurt to try. You know there might even be a potential screencast in there somewhere too, you never know.

At least I now have something I know I can put in my Moleskine knockoff. :)

Lumiera’s new logo concept – tweaks part deux

Based on the great constructive comments on my previous post from Thorsten and Troy about Lumiera’s new logo concept, I thought I’d make another slight tweak to what I had already posted and came up with this:

lumiera_tweak02

I added (somewhat crudely) the additional film sprocket hole and used the mgOpen Cosmetica type with slighter tighter tracking (which is the spacing between letterforms across the whole word). I think it looks pretty cohesive as a logo. One of the things I liked about the winning concept was its simplicity and the way it could be used on both dark and light backgrounds.

Anyway, I’m not sure what the Lumiera guys will end up doing, but I think it’s an interesting and attractive concept nonetheless.

Lumiera’s New Logo Concept – and a couple of suggested tweaks

Back in mid-November, I posted about Lumiera’s logo contest over on the screencaster’s blog. I made several entries, some of which are below:

lum_entries

The winning concept (which I really liked) was this one by anamii:

lum_winner_orig

Now the aim of the contest was to select a “concept”, so there is some ongoing discussion about tweaking the logo. While I loved the concept and it’s simplicity, I never really liked the typeface that was used. It seems somewhat unbalanced or unfinished to me. Over at Thorsten Wilm’s blog he proposed using a significantly heavier typeface. I wasn’t crazy about the results. And he also made some alternative suggestions of a slightly lighter weight. I would propose something light too but definitely thicker than the type originally proposed. I’ve shown two options, one using mgOpen Cosmetica, and one using Gentium. I like both.

lum_winner_texttweak

But something else has bothered me a bit about this logo from the start. I love the concept, but the geometry seems very non-square and maybe a little too flattened for my tastes. So as another idea, I propose simply stretching it upwards to give it a more square geometry. I think it makes it look more dynamic as well. Remember that this symbol will have to suffice from the largest graphic sizes way down to 16px favicon sizes. Having something more square in nature might help that. Here’s a quick and dirty attempt at it. It would still need some additional polishing – like the missing sprocket hole near the upturned corner:

lum_winner_geomtweak

Of course these are all just opinions. But now that’s exactly what blogs are for right? :)

gPodder doodling

Yeah, I know that gPodder already has a logo. But after listening to the recent interview on Linux Outlaws 67, I figured it might be a nice creative exercise to come up with something anyway. Not most people’s idea of a fun evening, but it relaxes me after a stressful day of engineering work.

Anyway, I think what I came up with looks kinda neat. But I think it’s too complicated and fiddly to work as a logo or icon, and unless you want to have gPodder wallpaper (hey – whatever floats your boat) it’s likely one of those images that serves no purpose at all… except giving me something to de-stress over. :)

[UPDATE: Late last night after a little more fiddling, I made the same modification as raydancer made in the comments to this post and shortened the horizontal stroke of the "G", making it look more like a "G" and less like an "E". The revised one is below.]

gplogofun2