Dani Ward

Graphic Designer

Tag Archive for Calligraphy

There Are No Strings On Me: From Sketch to Vector

Last year, when Avengers: Age of Ultron came out on Bluray, my brother came over to watch the film at my house. While watching, I suddenly had an idea for a lettering project: I wanted to draw the phrase Ultron seems obsessed with throughout the movie (which is, of course, from Pinocchio): “There are no strings on me.” My thought was to use lots of swashes and embellishments, then finally ink it with my flex nib dip pen.

I ended up vectoring the piece, but was unsatisfied with the first finalization. I sat on it for several months, then decided to rework it after reading Jessica Hische‘s fantastic book, In Progress. The final result is something I can say I’m quite proud of.

For more on how I’ve started vectoring my projects, see “Cleaner bezier curves in typography.

Pencil sketch on dot-grid paper of italicized Copperplate-esque script with swashes linking the words together, reading "there are no strings on me."

The initial sketch.

Inked calligraphy on dot-grid paper of italicized Copperplate-esque script with swashes linking the words together, reading "there are no strings on me."

After inking with a flex-nib dip pen.

Digital edit of the inked calligraphy, on a red grungy painted background. Calligraphy with swashes linking the words together, reading "there are no strings on me."

First edit in Photoshop.

Second digital edit of the inked calligraphy, on a blue grungy painted background. Calligraphy with swashes linking the words together, reading "there are no strings on me."

Second edit in Photoshop.

Digitized monoline calligraphy with swashes linking the words together, reading "there are no strings on me."

First vector. I’d planned on adding shading like the original inking, but ended up preferring the monoline look. I was unsatisfied with this result overall, however. But I couldn’t put my finger on why.

Digitized and shaded calligraphy with swashes linking the words together, reading "there are no strings on me."

I thought that perhaps further stylizing the design would help, but it still felt “off” to me. I decided to sit on it for a while.

Animation of vectored calligraphy with swashes linking the words, with anchor points appearing and disappearing, text reading "there are no strings on me."

Several months later, after reading In Progress by Jessica Hische, I decided to take the knowledge I’d gained from her book (along with experience in lettering since that first sketch) to rework the vector for greater precision in my curves and more balance overall. This is a look at my progress, with and without anchor points, to illustrate how the lettering was structured.

Animation of final vectored calligraphy with swashes linking the words, with anchor points appearing and disappearing, text reading "there are no strings on me."

This is the final vector version, before adding embellishments.

Calligraphy swashes of the phrase "there are no strings on me," written with frayed rope.

I found a fantastic vector rope brush set online (I wish I could remember where!), and added it to the design. Then I moved into Photoshop to add further depth and correct where some of the rope brush didn’t quite work out around curves. Lastly, I added a grunge texture to the rope to help distinguish it from the clean black background.

A close-up of some of the rope intersecting, highlighting the texture and depth.

A close-up of the fine detail in the piece.

Cleaner bezier curves in typography.

I do a lot of custom typography and lettering in my graphic design and personal calligraphy work. I aspire to create vector images that are clean, crisp, and intuitively drawn so as to make the job easier for the next designer who has to touch my work. As I continue to read and watch tutorials from experts in the business, like Jessica Hische and Sean McCabe, I’m really enjoying pushing myself to adopt best practices and really hone my craft.

I really enjoyed this tutorial quite a bit.

Last night, I sketched and then lettered a line from Meghan Tonjes‘ powerful song, “Oh, Father.” I sketched and erased and sketched and erased until I was sure I had the letterforms and layout about how I wanted it.

2015-07-01 20.34.32 HDR-1When I’m doing a conceptual sketch like this, I’m not very fussed about getting everything perfect. I know I’ll be going in and vectoring soon thereafter, and I’m more concerned with expressing an emotion than I am with perfection of form.

So today over my lunch break, I cleaned up the image in Photoshop, then took it into Illustrator and ran the dreaded lazy Live Trace on the image. I’ve taken to doing this with a lot of my lettering, because it gives me a rough vectored outline of all the shapes I’ll be working with, so I can move things around a little bit and get my layout nailed down, then focus on perfecting the letterforms themselves.

I’ve been really interested in seeing how typographers and letterers I admire vector their artwork, and so this evening, I’ve been trying to incorporate their practices into this round of vectoring. Namely: using as few anchor points as possible and making sure my handles are all at 90 degree angles to really fully utilize the power of bezier curves in typography.

It took me an embarrassingly long time to really understand how powerful bezier curves are. My first light-bulb moment came in my computer illustration class in college, while watching my classmate use the pen tool for a few moments. I suddenly realized it was exactly like what I had learned in pre-calculus the year before. (Oh, to be young and understand math again!) But for far too long after that, I was quite prone to using too many anchor points and under-utilizing my handles. As I’ve grown as a designer, I’ve been moving towards simplicity in my vector images, particularly as I work more and more with custom typography and vectoring my own lettering work.

While frustrating at first, I’m finding that it really is producing much more natural and graceful curves, even if I have to work a little harder at them. I’m really thrilled with the result so far, and can’t wait to continue and then show the final piece.


Update: July 29, 2015

Final pieces! I’m really pleased with how this turned out. So clean and clear while still retaining the personality of the original inking. I created a one-color version for T-shirts and other products, and a full-color version for prints. All available here!

youre-not-the-end-of-me You're Not the End of Me Black