December 7th, 2009

Case Study: Balaam’s Donkey Logo

Balaam's-Donkey-logo

Balaam’s Donkey is a Denver-based classic rock band, and they commissioned us to produce a logo for their band.  The logo imagery was to be, not surprisingly, a donkey.  In keeping with the light-hearted, cheeky personality of the band, we decided to create a logo with a bright, cartoon-like feel to it.  We started out by making several pencil sketches of the donkey until we had a sketch that we were satisfied with.

Our finalized donkey sketch

Our finalized donkey sketch

After we had a finalized sketch, we scanned it into the computer and traced it out in Adobe Illustrator.  First we drew it out as a series of fixed-stroke-width lines.  Then we converted the stroked lines to solid shapes so that we could refine the line thickness.  That way we could transform the chunky, single-thickness line drawing into something a bit more elegant, as you can see in the below example for the lines of the donkey ears:

The donkey ears before and after we manually adjusted the line thickness

The donkey ears before and after we manually adjusted the line thickness

We worked on the Illustrator drawing like this until we produced the final black and white version of the logo, seen below.

The finished logo in black and white

The finished logo in black and white

After that we started adding in color and shading…

donkey-logo-shading

Added the background…

donkey-logo-background

And finally added a subtle drop shadow between the donkey and the background to give the illustration some dimension.

logo-drop-shadow

After this was finished, it was time to choose an appropriate typeface to match the illustration.  In logo work, when the lettering is such a prominent part of the visual design — and indeed sometimes the only component of the visual design — finding an appropriate typeface is of utmost importance.  We needed a typeface that was both solid and easy to read, but still with a bit of a whimsical flavor to it.  It took a lot of experimentation to find an appropriate typeface, and we looked at many different typefaces side by side.

Some of typeface finalists that we considered

Some of typeface finalists that we considered

Finally, after choosing an appropriate typeface, we had our finalized logo.

Balaam's-Donkey-logo

Balaam’s Donkey was very pleased with their new logo and will be using it on all their official band materials from here on out.  We enjoyed working with them and wish them the best of success in their musical endeavors.  Whenever Balaam’s Donkey needs additional graphic design and web design work in the future, we at Chris Strom, LLC will be happy to work with them again.

Free e-Book: Social Media for Business

Free e-BookDownload our free e-book to learn how to derive real business value from social media tools.

Download Now

May 29th, 2009

From the Sketchbook: ARMY360

The finished ARMY360 logo

The finished ARMY360 logo

Recently we pulled out some of the doodles we had made as we was brainstorming the visual identity of the ARMY360 software application for InVisM and figured we’d share some of them on our website.

As stated in the project description, the design spec simply listed the product name and called for an ellipsoid, “360°” shape.  Given that this application was built specifically for the US Army, we turned to imagery of military crests, medallions and patches — such as these — for most of our brainstorming.  We also added in part of the application interface — the 360° directional marker — and added it to the center of the image.  The bottom center sketch below became the basis for the final logo.

Sketches made while brainstorming

Various sketches made while brainstorming

Free Download: Website Fundamentals

Free e-BookDownload our free e-book to learn what you need to know about building effective websites.

Download Now

January 6th, 2009

From the Sketchbook: “Waves” logo redesign

A few months back I was commissioned by Prince of Peace Lutheran Church in Virginia to do some graphics work for them. The majority of this work consisted of cleaning up the logos and branding of their various youth ministries. Most of the ministries’ logo files were low-resolution JPG‘s or GIF‘s, and they simply needed to be remade as resolution-independent vector-based images.

However, we decided that the logo for the ministry entitled “Waves” — a middle school youth group ministry — was just not up to par to begin with and needed to be completely redesigned.

The original "Waves" ministry logo

The original "Waves" ministry logo

So I set about redrawing the logo from scratch. We wanted the concept to remain the same — that is, the design would still be dominated by a single crashing wave. After collecting some reference photos of various crashing waves, I started sketching out the new logo in my sketchbook.

Some of my sketches for the new logo

Some of my sketches for the new logo

Most of the initial sketching was done with a non-photo blue colored pencil.  I used non-photo blue quite extensively several years ago when I did a lot of hand-drawn animation; basically it’s a specific shade of blue that the old optical cameras wouldn’t detect — this allows you to roughly sketch out whatever you’re drawing, then when you’re happy with it, you trace it in cleanly out in pen.  Then when shot on the camera, only the cleanly traced ink lines would show up.  As you can see in the picture above, modern digital scanners and cameras obviously have no problem picking up the blue pencil, but the blue is still easily knocked out in Photoshop —much easier than cleaning up extensive graphite sketching would be.

After the image was scanned and the blue sketching knocked out, I then traced the image in Adobe Illustrator, and added colors shadows, shading and text.

The finished image

The finished image

The shading and rendering of the final graphic ended up requiring several layers in Illustrator, with both the water portion and the foam portion each taking up about four layers apiece. Layer one is the original scanned drawing.

The Illustrator layers palette

The Illustrator layers palette

In addition to the nice full-color graphic, Prince of Peace Lutheran Church also needed a black-and-white version of the logo.  This presented a bit of a challenge, as a lot of the visual detail present in the full-color graphic was lost when I converted it to black-and-white. For instance, the part of the text that overlaps the water completely disappeared, and the top of the foam started to disappear against the sky.  I ended up applying a thick white stroke around the text to outline it against the water, and added a thick black stroke outlining the water and the foam against the sky.  I also applied a thick white stroke to the outside of the logo border to keep it visually separated as well.  This regained the visual legibility that had been lost when first converted to black and white.

The finished black-and-white version of the logo

The finished black-and-white version of the logo

And that’s it.  I hope you enjoyed seeing a little bit of the process that goes into designing a graphic like this!

Free e-Book: Website Fundamentals

Free e-BookDownload our free e-book to learn what you need to know about building effective websites.

Download Now

December 21st, 2008

Perfect 1-Pixel Lines in Adobe Illustrator

gfdjkl;

A close-up of an Illustrator mockup for the OFLC Construction website

I always use Illustrator to draw out website layouts.  I know a lot of people like Photoshop for layout comps, but I stick with Illustrator because it’s drawing tools are so much better.  Photoshop is certainly one of the greatest pieces of software in the world today, but when it comes to drawing up button/layout/icon graphics, Illustrator’s vector drawing tools save the day. But one nagging problem that kept coming up was an apparent lack of pixel-perfect drawing options, especially when it came to stroked vector shapes.  The left side of the picture above shows the problem. Even when a particular shape is set to a 1-pixel stroke, it oftentimes straddles the pixel border, resulting in a stroke that’s twice as thick and half as intense.

This problem was driving me crazy until I found a blog posting on Vibr8bros.com that addressed this exact issue.  The solution’s too simple: make sure the stroke is set to center alignment (it usually is by default anyways), then set the line’s position at half values. For instance, if you have a vertical line with an X-position of 1124.293, just change the position to 1124.5.  Problem solved!

You can read the full tutorial on Vibr8bros.com here.

Free e-Book: Website Fundamentals

Free e-BookDownload our free e-book to learn what you need to know about building effective websites.

Download Now

Free e-Book

Social Media For Business

Free e-Book -- Social Media for Business

Download our free e-book to learn how to derive real business value from social media tools.





Sign up for our Monthly Online Marketing Newsletter


Recent Posts

Top 10 Categories

News Archives