Think Vitamin offers a decent read in their everthing you wanted to know about designers article. While it’s primarily talking about web designers, and their love-hate relationship with developers, some of the observations are pretty universal and applicable to any client & designer ‘relationship’.

I found this quotable quote particularly germane for anyone trying to understand what makes a designer ‘tick’.

Because design can be very subjective, everyone feels they can have an opinion on it. When’s the last time an business executive chimed in and told a developer how she should set up her CSS? Designers get that sort of advice all the time and it makes us cranky. We begin with very objective design goals, and then have to translate them into a carefully balanced choreography of subjective design elements. It’s a little reminiscent of a line from the movie Amadeus, when the Emperor comments on Mozart’s latest composition, “Your work is ingenious. It’s quality work. But there are simply too many notes, that’s all. Just cut a few and it will be perfect.” And Mozart responds, “Which few did you have in mind, Majesty?”

Related: Ten things you’ll need to be a great logo designer.

One of the issues that crops up at the shop on an almost weekly basis is the subject of logo file formats and the various color palettes required for effective brand management. Seems that this is a portion of the logo design process remains a little foggy for some, and completely misunderstood by others.

Not really surprising - in this, the era of logo contests, web-based do-it-yourself logo generators and home-made logos, a lot of the technical aspects of design are being overlooked (sometimes forgotten) as folks look for faster and cheaper alternatives that bypass working with designers who might have a clue how proper file setup works. Kind of a ‘we’ll fix it in post’ mentality. All fine and dandy, I suppose, if you’re looking to slap a rudimentary logo on a photo-copied flyer to hand out at the mall. If you want to use a logo as part of a branding system, you’re going to need a little more flexibility than that.

Trouble is, if your logo is just a ‘pretty picture’, without the correct file format array backing it up, it will remain so, albeit with a mess of reproduction problems in the not-too-distant future. As it’s a slow news day, and I’m in a tutorial frame-of-mind, thought it might be worth while revisiting some file format basics, specifically the various color palettes and their applications. This tutorial is written with the assumption that your logo artwork is available in vector based formats (Adobe Illustrator .ai, .eps or .pdf). If it isn’t, get one. If you only have access to a pixel based format - Adobe Photoshop .ps, .gif or .jpg for example - you’ll need to repair your logo into the correct formats. We’ll take a look at several types of color systems; Spot Color (using the Pantone Matching System), CMYK (also known as Full-Color and Four Color Process) with a little looksee at Black & White (focusing on Linear and Halftone, also known as Grey Scale or Gray Scale). For this exercise, we’ll use the logo of our imaginary company - The Logo Design Factory - and our characters - Vector and his beloved canine, Pixel.

Read the rest of this entry »

A few posts ago, we featured an anatomy of a Flash logo animation in which we took a general overview of an animation project typical of The Logo Factory. That post glossed over the 3D portion, so I figured this time around, I’d delve a little deeper into spinning logos using Electric Rain’s Swift 3D and Macromedia’s Flash showing you, step-by-step, how we do it. Rather than reverse-engineer an earlier project, I figured I’d pick a previously ‘Un-Flashed’ design to work with, in this case, one of our Vox Underground music logos. Generally speaking, the Vox Underground logo isn’t the type of design for which I’d opt to animate in 3D. It’s a little complex (and the more complex the artwork, the larger the resultant Flash file usually is) and runs the risk of being ‘cluttered’ once we add depth and start spinning it around. On the other hand, creating a 3D logo animation of this home-grown design allows us to demonstrate the concepts involved fairly dramatically, so we’ll give it a shot. The screen captures that follow were all made during the animation process and are actual steps that we’d use if this animation were a live gig. Keep in mind, the tutorial is also written for folks who have a little knowledge of Flash animation and the various concepts involved.

Preparing and importing the .AI file.

Any professional logo design project should end up with vector based file formats of the design, Swift 3D uses vector format, so importing your artwork into the animation software should be a snap. Simply export the logo as an Illustrator .ai file and you should be set, with a couple of important caveats. Swift doesn’t like blends, and as this is primarily an RGB program, you should reset all logo spot colors and CMYK palettes to RGB. Also, Swift sometimes has an issue with complicated compound path objects (items - such as the letter ‘O’ - where there’s a ‘hole’ in the object). You may have to play around in Illustrator, releasing the compound path and then recreating it, to get the artwork to import correctly. I usually back save the original logo artwork as a ‘Legacy’ file into Illustrator 8, and then import onto the stage in Swift. When it’s imported successfully into Swift, your artwork should look something like this. The left panel is how your artwork will look from a ‘front’ view, while the right panel is how your artwork will look from a ‘top’ view.

When Swift 3D imports your .ai logo design file, it is already converted into an extruded object (an object that has depth). The depth of all the elements that make up the logo are uniform, so while the object is technically 3D, it’s not ready to animate just yet. We want to give the pieces of the logo varying depths so that the finished animation is more interesting, and more importantly, gives places for shadows and highlights to appear. We do that by varying the scale of the objects using the ‘Z’ Axis (called the Z Factor in Swift). By Ungrouping the artwork into its various elements, selecting individual elements and adjusting the Z Factor, we can create a multi-tiered 3D object that will make for a much more dynamic movie. In terms of the amount of Z Factor to add, there are no hard rules - simply play around with the amount of Z Factor until you arrive at a satisfactory result. Keep in mind that the parts of your logo that are in front (in this case the text making up Vox Underground) will need to be higher, while background objects (the wings and the heart) will need to be thinner, therefore a smaller Z Factor will be required. Important note - make sure your X Factor and Y Factor scales - the height and width of your logo - remain the same. Changing one or the other will result in a distorted aspect ratio of your original artwork.

By switching from the various camera angles, you can tell how your logo is shaping up in terms of relative depth. In this case, we’re looking at the Vox Underground object from a top view, and the multiple Z Factor depths are readily apparent. The logo is now shaping up to be a multi-planed object that will animate quite nicely once we’re done. Depending on the complexity of the logo you’re working with, and the amount of patience you have, this step can be quite time-consuming. Having said that, keep in mind that the more time you spend here, the better the end-result will be.

Read the rest of this entry »

Hype for the new Green Hornet movie has got to get rolling at some point, and I guess now’s as good a time as any. Not one frame of the flick has been filmed, and from what I’ve been able to dig up, pre-pre-production hasn’t even started on the super-hero movie (correction - crime fighter movie), slated for release in 2010,. That hasn’t stopped Sony Pictures from releasing a teaser logo and Green Hornet website in order to whet our appetites. The 3D logo design isn’t bad, but as movie logos can morph right up to release date, whether or not it remains the official version is anyone’s guess. Most industry talk about the movie revolves on around if Seth Rogen (star of 40 Year Old Virgin and Knocked Up) can pull the revered role off.

Bonus Trivia: The original 1960’s TV show featured martial arts star Bruce Lee as The Green Hornet’s sidekick Kato.

Bonus Bonus Trivia: The 1960’s Green Hornet tooled around in an awesome car called Black Beauty. I only remember than because I have one of the original Dinky Car die-cast models.

Sometimes our morning e-mail brings a smile. Had to share this one.

I have found several spelling errors on your website which makes me wonder if you actually pay attention to detail and whether my project (if I decide to go with you) would also be handled with similar deligence.

I think this is known as irony.

Around the shop, we pride ourselves in coming up with decent animations using client logos and Flash (see here for a few flash animation examples). I’ve always viewed animation and logo design as going hand-in-glove, especially when it comes to the web, and I’ve been messing around with Flash since the mid-ninties (when it was called Future Splash and wasn’t owned by Macromedia).

Certainly, animating a logo in Flash has some limitations, but the file size and compatibility makes the resultant movies well worth-while and if handled correctly, can be quite effective in setting a logo apart from static counterparts. As long as clients aren’t expecting broadcast quality animations (though, that is possible in some instances) we can usually cobble together a Flash logo animation that isn’t too shabby in the ‘wow factor’. I’ve never been content with just ‘breaking’ a logo apart and then having it reassemble into a final form, but always try to push logo animations past beyond just moving bits of the design around the screen.

For what it’s worth, we’ve often been told that The Logo Factory has a certain ’style’ when it comes to logo animation, and I often get asked about the medium and our Flash animation techniques. Accordingly, I thought it would be fun to publish an Anatomy of a Flash Animation - a quasi-tutorial on how we put together fairly complicated animations using the original logo as the animation itself, or as the lynch-pin for a more elaborate movie production. We’ll use a recently completed project, Junk Boys, a Toronto based ‘junk removal service’ for whom we designed their company logo (above) and other branding bits and pieces like business cards (below) and brochures. In order to illustrate the various parts of the animation, we’ve broken the movie down into a scene-by-scene anatomy, and each scene can by viewed individually, followed by the entire shebang. If you’re impatient, you can view the full animation here.

As this was a new launch, when it came to an animation for their website, Junk Boys wanted a ’slick’ presentation that somehow illustrated what it was their company did - namely pick-up of garbage and junk using a small fleet of trucks and vans. As we’d worked on several previous design projects with the client, I was given free reign on the direction of the project and allowed a bit of time to brainstorm on how to portray the service effectively.

We had decided fairly early on (after a few motion studies) that a simple looped animation - say with the two Junk Boys characters sweeping and moving the featured garbage can about - wasn’t going to have enough ‘oomph’ for the client’s needs. We figured that the only way to illustrate the client’s services was to create a mini-movie that illustrated, in very graphic terms, the various steps in the company’s clean=up services. That would require the development of a full-blown Flash movie that incorporated the logo (as opposed to featuring only the logo) and a production that was a little more complicated than your average animation. A project of this scope also requires more pre-production planning than usual - often, I’ll create a Flash logo animation ‘on the fly’, winging it through trial and error until I get something that clicks. Animations of the type we planned for Junk Boys requires much more detailed planning and storyboarding.

Pre-production. Setting up for the animation.

As this animation was primarily destined for website use, I had to be cognicent of file size, and needed to use the Flash’s symbol ability (symbols are items that are labeled with a certain name, stored in an object library, and can be used repeatedly without bloating the animation file size). Wherever possible, I also wanted to embed symbols within symbols, duplicating images wherever possible.

In terms of style, I realized quite quickly that the two Junk Boys characters, while cool in the logo, where illustrated in a highly-stylized manner that didn’t lend itself to animation without looking ‘canned’. To get around that, I created a new set of derivative characters with a little more personality and more importantly, the ability to be animated fairly easily. On top of the new character treatments, the animation also required various bits and pieces developed, from the Junk Boys trucks (developed from photographic reference) to the house that the two Junk Boys characters would be ‘cleaning’ up as well as the garbage that would need to be scattered about.

Read the rest of this entry »