"Wild & Free: A True Story" or how we forgot about Professor Porpoise: Adjunct Faculty Advisor to the Apocalypse and learned to love the boto

Mike and I have been chipping away at a little weekend side project of ours for a month or so. He’s got a prototype up and running, and while the swimming mechanic is similar to PP:AFAA, we’ve added some cool new stuff that I think will be pretty compelling gameplay wise. Basically it’s a very simple deathworm-like, where you command the likes of a studious Boto (amazon river dolphin) and fight the evil river-polluting humans on their way to refineries and such. With the aid of schools of flesh-starved pirahnas, you summon the power of the riverbed to take on impossible odds.

I’ve mainly been working on the logo, (this is actually a school project, so the logo was our first assignment) but have started in on the rough art style to help me finish the logo. It’s pretty close to done, hopefully we’ll have an alpha posted up here pretty soon.

Logo. Done. (mostly)

Celebrate.

Here is the high detail raster version of the logo…..that I wasn’t supposed to make. It’s mainly for the title screen and posters if we ever decide to make any. I felt that it was really important to work the logo more for those things. I’m really happy with it.

And yeah, I paid for that piñata picture. It was worth every penny.

It’s Biznass Time! - Business cards and the importance of a developer’s identity

We’re going to GDC! Come hell or high water, we booked the tickets, marked the calendar and laid out our nerd uniforms for GDC 2008. Now what? Maybe we’re missing something…

Business cards!

As a soon-to-be card-carrying graphic designer–and by “card-carrying” I mean diploma-carrying–why not create our own identity, or any such materials we may need to promote ourselves? Really that’s what graphic design is all about, visual communication for some end, and in a lot of cases that end has something to do with money. The identity system can be a very complex task, and cost a great deal of money to get it done right. This kind of work is reserved for large business who can hire a firm to overhaul their look completely, but being an indie dev, that just isn’t going to happen. Devs are smart enough to figure this stuff out on their own, right? So I offer you this:

A cake! Baked with logos and typography. But really, this is just a rough recipe for that cake. There are always exceptions to these guidelines, but I’m going to assume that the reason you’re reading this is because you need guidance, and if that’s the case, then follow the guidelines. Get it? I know dev teams are made up of a variety of creative people, so if you have an artist, that will be a big help when designing the logo and just general aesthetics along the way.

1. A logo.
This needs to come first above anything else. The logo can be just text, a simple circle or illustration. The logo (sometimes called a “mark” or if it’s text, “logotype”) will inform every other decision you have about the identity, the typeface (font) you choose and the way it’s applied to different applications (letterheads, business cards, stickers).

I’m sure you have all seen logos, and they seem simple enough, they are for the most part… However, since you’re a developer, mainly promoting your stuff on the internet, the idea of doing a bad ass full-color raster (bitmap) logo illustration may seem like a really good idea. It’s not. Most of the time. When it comes time to translate over to the printed page, you’ll be faced with a disaster, and with little to no print experience, and even less budget for professional printing and file preparation assistance things will get messy. That being said, if a simpler logo can’t express your indie spirit then so be it, go with the tattered warrior illustration scaling a dark and smoky mountain. Just remember the Aqua Teen Hunger Force episode when Master Shake assumes the role of “The Drizzle” and has those t-shirts made with his “logo.”

2. Color
Colors should usually be limited to 2-3. Our identity uses one color (pantone 297U) along with black. Again if you do the full-color illustration, at least leave one dominant color, in order to give your identity some direction when you design other applications. If you don’t choose a color for the logo, then you’ll have to decide on colors at some point, when you design the website and etc. so it may as well be now.

3. A typeface (font)
Typography separates professional from amateur design. It is the easiest thing in the world to slap some text down on a page, but if you do that, your identity may look like a middle-aged crafty housewife printed something out from her word processor. Don’t make that mistake and pay attention to details!

A typeface should reflect the feeling and structure of the mark it will sit beside. If your mark is an oak tree, then perhaps a serifed font (times new roman, baskerville) would be best to complement the shapes of the branches. [Serif fonts have horizontal bars often terminating the vertical strokes of a typeface by linking the two with curves. Zoom in on the Baskervile or Times “T”, and you’ll see what I mean. If your mark is simpler, with less decoration or intricate shapes, maybe a sans-serif font (helvetica, verdana, univers) would be better due to its simpler shapes. If a shape-to-shape relationship doesn’t do it for you, then perhaps what a typeface “says” would be more your style. Blackletter fonts (lucida blackletter, isn’t the best, but it gives you the idea of what I mean by blackletter) can give a more medieval tone, or even a Latin or tattooed sort of look. Engravers, a font with very wide letter forms, can reference the early part of the 20th century. Even serif fonts in general can make things more traditional or older looking, while a sans serif can communicate a modern or clean feeling.

4. Setting the type
After selecting the typeface, it’s important to continue scrutinizing the details. In graphic design, there are a few simple terms with weird words that refer to the layout of a typed word or group of words.

Leading:
The value assigned to the vertical space between two lines of text.
Tracking:
The value assigned to the width between a group of letters, for instance: a sentence.
Kerning:
The value assigned to the width between two letters. This allows for really detailed tweaking of letter-spacing.

When setting your logotype (the title of your company that will accompany your mark, if you have one) you can either convert the type to outlines and use a vector-editing program to maneuver the letters left and right, or you can use the kerning option in your chosen program. Most of the time, every word that is typed out based on the default settings of any program will not be optimal. Evaluate the spaces between letters and kern them so they appear even. Problems can arise with different letter combinations like “WL” or “AT.” It’s best to do this by hand and use your discerning eye, instead of with a mathematical process.

Finally, decide where that logotype is going to go in relation to your logo. Sometimes this can be really easy and logical, and others it can be a huge pain. Use your eye, maybe find a natural point of alignment running through your mark. Be open to alternative relationships, such as side-by-side instead of just below the mark, or even off-center.

4. Hierarchy and grids
Now you have your colors, your finished mark, logotype and everything ready to go. Now how do you put it on your business card?

Grids.

Yes, a grid can save you a lot of trouble. Instead of pushing elements like the block of contact info around incessantly, put down some straight grid lines, and decide on some conventions for the layout. For a business card, there aren’t many options for layout, since you want things to be legible and your brand to be dominant. Hierarchy built into your grid in a business card can solve a lot of confusion when first laying things out. If you put section off a piece larger than the rest, that’ll be where the logo goes. Then the remaining section can be divided once more to separate things once again, and that can be where the name, title and contact info will go respectively.

This is a completely oversimplification of grid systems. They are the foundation of any layout, and bad ones are easy to come by. Overall, err on the side of large margins, even spacing, and points of alignment. If your grid isn’t working start over, maybe try some pre-made grids, like the golden section which I used for a layout of Intuition’s business card.

5. Other applications
With other types of promotion, such as brochures, letterhead, posters and etc. things can get a lot more complicated. Frankly, with the knowledge imparted to your here, I would suggest not attempting anything without first doing more research. There are publications out there that can provide a great deal of inspiration. One such periodical, Before&After magazine is designed for novice to intermediate designers and provides electronic .pdf tutorials and will mail you a binder-buddy type issue as they are made available. Other than that, there is always the internet, but if you find yourself in dire need of a brochure, perhaps either need to evaluate that need, or find the money to hire someone to lay it out. There are plenty of starving graphic design students out there that would get wide-eyed with a chance to add a line to their resume.

Flash Lesson: Always Hack It In First

I’m going through Foundation Actionscript for Flash 8 in an effort to re-learn how to code. In chapter 9, there’s some talk of tweening, so I thought I’d try to apply my knowledge to our logo to make a simple animation.

In doing this, I learned an important lesson: always hack it in first. The first thing I did, in an effort to be fancy and add the utmost scalability, was try to create a timed delay that called a tweening function that could be applied to each ball. I was convinced that I would have to manually set the delay so the balls could fall in sequence. I needed to dynamically name a variable based on the input of the function. I couldn’t figure out how to do that and wracked my brain for almost an hour. And then I realized that I could simply set the tween to be longer for each ball. So much simpler and you couldn’t tell the difference.

Here’s the code for it:

//OMG Tweens. They’re so, like, cool and stuff!
import mx.transitions.Tween;
import mx.transitions.easing.*;

//activating the tweens so the balls bounce
//the onMotionFinished event handler needs to go here or it wont work - for scope reasons?
function bounceBalls()
{
//bounce the balls in sequence, coming from off-stage at the top
var ball1Tween:Tween = new Tween(ball1_mc, “_y”, Bounce.easeOut, -100, 112.0, 1.2, true);
var ball2Tween:Tween = new Tween(ball2_mc, “_y”, Bounce.easeOut, -100, 112.0, 1.4, true);
var ball3Tween:Tween = new Tween(ball3_mc, “_y”, Bounce.easeOut, -100, 112.0, 1.6, true);
var ball4Tween:Tween = new Tween(ball4_mc, “_y”, Bounce.easeOut, -100, 112.0, 1.8, true);

//after the last tween finishes, reset the animation
ball4Tween.onMotionFinished = function()
{
//set a delay, reset the animation, and store the return in a variable
var initDelay:Number = setTimeout(init, 3000);
};
}

//the animation for the logo
function animation():Void
{
//fade out help text quickly so you don’t get distracted by it
var helpTextTween:Tween = new Tween(helpText_mc, “_alpha”, Strong.easeIn, 100, 0, 0.5, true);

//fade in the logo text - slowly at first, then speed up
var textTween:Tween = new Tween(text_mc, “_alpha”, Strong.easeIn, 0, 100, 1.5, true);

//after the text fades in, bounce the balls
textTween.onMotionFinished = bounceBalls;
}

//set things up
function init():Void
{
//we are ninjas in the TREES
ball1_mc._y = -100;
ball2_mc._y = -100;
ball3_mc._y = -100;
ball4_mc._y = -100;
text_mc._alpha = 0;

//fade in help text so you know what to do
var helpTextTween:Tween = new Tween(helpText_mc, “_alpha”, Strong.easeIn, 0, 100, 0.5, true);
}

//you’re supposed to store the return of the delay function in a variable
//that is this variable
var initDelay:Number = 0;

init();

//play the animation once you click down on the mouse
this.onMouseDown = animation;

Logo Workness

Even though we’re further down the road with development of both the game and the identity/website, I thought it would be neato to post the “mother ship” pdf of all the logo ideas for the intuition identity. Some are good, some are bad and others are just pieces of a larger good/bad logo; you decide!

Logo Sweetness

We finalized our logo tonight! I think we’re all really happy with it. Man, I just love working on a team. It seemed like we all put our heads together and had some great input and thoughts about making things work. We wanted bright colors and Greg had this pretty sweet green, but unfortunately it didn’t read very well on white when it got really small. So we settled on blue since it seemed to read well on both black and white. Seemingly by coincidence we ended up with something that, when converted to print colors, is pure Cyan! (well, 60% Cyan) So that means it will still print fairly well. Greg totally rocks by the way - he came up with the idea for the circles. I thought it was awesome that there really isn’t any meaning to them at all. I’m sure a lot of people will attach meaning to it after the fact, which should be interesting. I was experimenting with sans-serif fonts and found Myriad Pro Light. In the end, we compromised with Myriad Black. The whole thing really just seems to fit. w00t!