Putting the Face Back in Typeface

So the other day, Zeldman opined that he’s not seeing the sort of creative explosion he once expected from the web. I can’t say I disagree too much with that, but if you look in the right places, new jewels pop up every week.

Take Ni9e.com’s latest typographic illustration project. After watching it 20 or so times, I think it might really be the coolest thing I’ve ever seen in Flash. It’s creative, artistic, simple, and brilliant. The Bob Dylan (Garamond) one is my favorite, although all others are fantastic as well. Sometimes when I see stuff this good, it makes me want to get out of design altogether. I mean, when the bar is set this high, what’s the point of even jumping!

I can only guess how this was done:

  1. Use a pressure-sensitive tablet to draw a musician.
  2. Record every stylus movement using a custom-built Flash routine.
  3. Compile a text file containing the lyrics of a song from that musician.
  4. Write some Actionscript which recreates the original movement of the stylus, but using letters from the lyrics instead of a plain black line.
  5. Use the pressure-sensitivity to create bigger letters for when the stylus was pressed down hard, and smaller letters for when the stroke was light.
  6. Import the song and play it while the figure is being drawn.

It is great work like this which keeps me inspired about the web industry. Kudos Ni9e.com.

5 comments on “Putting the Face Back in Typeface”. Leave your own?
  1. You should also check out the ribbon page. I’m no designer, but it might help you see how they created it. I don’t think it was done with a stylus. I think they just recorded the mouse movement and put letters to them.

    Still, it doesn’t detract from how awesome it is. I sat there staring at it forever too (the biggie smalls one).

    P.S. ESPN.com ROCKS!

  2. CoryR says:

    I contacted Evan Roth, the creator of the Typographic Illustrations, and there will be a forthcoming tutorial on the process.

    He’s presenting at FlashForward 2004 about how to create your own Typographic Illustrations, and soon after he will post the tutorial at: http://www.ni9e.com/flashforward/ (nothing there yet of course).

    Thanks Mike for sharing this with us, I never would have seen them otherwise.

  3. Jonathan says:

    Are there any written out (step by step) tutorials on how to create typographic illustration projects such as the Biggie one? If so, where can I find such tutorials?

  4. hi-fi lover says:

    this one reminds me an ascii and ansi art in late 90es

  5. a true jewel

    This is quite possibly the coolest flash demo I have ever seen: ni9e.com Baskerville Old Face does Notorious B.I.G., Garamond does Bob Dylan, and Book Antiqua does the Beatles. Check it out… NOW! [caught this on mikeindustries.com/, the site of…

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe by Email

... or use RSS