HOW TO MAKE FRAME-BY-FRAME ANIMATION A VIABLE OPTION.

I’ve long loved animation and I have a weird, rich history of not ever getting to do it. Like, really do it. This from the guy who, in dot-com’s infancy, was the ONLY ART DIRECTOR IN SAN FRANCISCO WHO KNEW HOW TO MAKE AN ANIMATED GIF. True story.

When I was studying marketing at the Art Center College of Design in the super late 80’s a Hollywood production company (in an hilariously Cohen-brother-style meeting on Sunset Blvd.) invited me to be a part of a breakthrough, episodic animation project for adults that eventually became some dumb show about a guy named Homer and his weird family who lived someplace called Springfield. If you ever run into me, ask me about this experience because it’s super funny (sometimes I think I dreamt it).

The very first animation I did for Kelly’s marriage book, Hey, I Love You…. The hardest part was building the end title with the book closing. I knew it would be, so I made it so I could swap out the art and use the base animation as a template for every video after.

Once I figured out the basics, it was time to play with more layers, masking and more complicated animations.

Eventually I added unique title art to the front of each new video and kept pushing myself to do more complex scenes.

With all the booty shaking, this was the most detail I put into one of these animated shorts. And the most adventurous transition (to the dropped penny) I’d attempted.

Since the brand calls for stylish simplicity, you’d have to really be paying attention to see that the clip that begins at 00:22 is the most complex frame-by-frame animation so far. Can you guess why?

Soon after, Dick Clark Productions (another funny story) asked me to turn a comic series I’d won an award for in LA into commercial bumpers for a season of American Bandstand. I gave them an enthusiastic “YES” despite not knowing at ALL how I’d actually fucking deliver (it was the late 80’s and we didn’t even have clamshell phones yet for God’s sake!). Shit, I was still in school and only 19, for crying out loud, but I was all about it! When they said it’d be a great unpaid project on my resume, I bounced.

I’ve actually been creeping up on real animation for a bit. In 2017 I created a polished series of successful animated videos for a tech startup by supplying layered illustration files to a talented, local After Effects animator. Then I started a series of time-lapse illustrations that I made for Mr. Dave’s Best. Drawn in real-time, all one take.

But my real opportunity came when I got to promote the marriage book my wife had been contracted to write for Hachett – Hey, I Love You… To research her concept, Kelly had been interviewing all kinds of couples to learn more about all kinds of marriage experiences – the good, the bad, and, yeah, the sometimes terrible. Since I’d designed and illustrated her book to be as unisex and inclusive as possible, Kelly had a cool idea to set those candid insights to stylistic animation that would be right on brand.

Once animations were done, they were easily converted to animated gifs. Like this endless sharing of Hey, I Love You…

SImple, yes. Pain in the ass, not really. What I love about conceptual animation is that your can do a lot with little when you put a little thought into it beforehand.

Simple, yes. Pain the ass, also yes. But I do love this tedious-to-execute animated gif of the endless search for love. This was a part of the puck to fill Giphy with our cute little animations.

This concept for this animation was pretty simple so it had to get juiced up with some slightly difficult renderings of the word bubbles and the chair bounce on the refresh. Not hard, but nice thinking, I think. haha.

Frame-by-frame, onion skinning, multiple layers, Procreate, and my left hand – all in one photo. But this is what goes into every sequence on this page (and more on the Hey, I Love You… Vimeo channel.

The process wasn’t much different than the video work I did on those earlier tech-startup videos. I’d discovered the Procreate illustration app for those and it was a short leap to teach myself how to use its ridiculously simple animation assist to onion-skin myself to frame-by-frame-glory. Trying to do a whole video in one file was technically impossible anyway due to file size limitations which is fine because it would also have been an unworkable hellscape of layers to deal with. So I animated all the scenes as short clips. Once I had a scene down, I exported it as an mp4 file thatI then pulled into Adobe Premiere. There I could loop, extend, or slow, depending on how the VO timing worked out. And if I ran into trouble, I’d just zip back to the iPad to quickly animate a filler sequence or fix bugs in the scenes. Easy squeezy. 

Soon we had over 40 short animations for Hey, I Love You… And there’s more in production. It’s funny to watch my progress as I became more comfortable through experience. And the best part is that since I did all the animations as individual sequences, now we can mix and match previous work to make new narratives in just minutes. Or animated gifs of those scenes. Despite having so many options to economically repurpose the work into the future, I still prefer animating new ideas since I figured out how to do it so easily!

DAVE SOPP – Creative

Yep, that’s me. I’ve got over 20 years of marketing strategy, graphic design, advertising art direction, and illustration experience. Want to use some of it? Email me at dave@davesopp.com

 

HOW TO DRAW OVER 300 ILLUSTRATIONS FOR A 258 PAGE BOOK THAT'S NOT EVEN A PICTURE BOOK.

My wife wrote a book called, Hey, I Love You… and she asked me to design it. Then she asked me to illustrate it. It’s in the contract with our publisher. They paid me in the advance to do 50 illustrations for the book. Well, they paid Kelly to have me do the work. Hahaha. Anyhoo, you know how many illustrations I did for the book? Over 100. And that’s why I like being a strategic designer who can draw. I didn’t HAVE to overdeliver because it’s my wife’s project. I did it because it simply HAD to be done. I’ll explain.

Hey, I Love You… by Kelly Sopp. Illustrations (so many illustrations) by me, Dave Sopp. This is an early drawing I made for the Hey, I Love You… website because we didn’t have an actual copy of the book to show off. Hey, we still don’t!

Hey, I Love You… by Kelly Sopp. Illustrations (so many illustrations) by me, Dave Sopp. This is an early drawing I made for the Hey, I Love You… website because we didn’t have an actual copy of the book to show off. Hey, we still don’t!

Kelly’s book is beautiful. Hey, I Love You… gives couples practical marriage wisdom, and an effortless way to exchange heartfelt words that need to be said, or unsaid, or aren’t said often enough. It’s so unique. Not just because of the way you use it or how anyone who’s married can find incredible value in it. It’s unique in the space of Relationships and Marriage. Have you ever looked in that section? It’s D-E-P-R-E-S-S-I-N-G. It’s mostly for people trying to fix what’s very broke or, in the dustier lower shelves, trying to teach people how to NOT get into that situation in the first place. Kelly’s book tackles all that (and more) handily and expertly, but in such a refreshingly positive way. This is starting to sound like I’m the president of her fan club (I am, but I’m also the president of every businesses fan club on this site), but it’s important because when you illustrate a book, it’s not about your talents. It’s all about the content.

Didn’t I just say that I don’t have a sample of the book? I don’t. So I did that Illustration to use while I made my own dummy! I’m like that. Anyhoo, now you get to see what the book design looks like. Super airy and light. That yellow is so bright and happy and positive (just like the writing.). Below are some illustrations of how the book works – “it puts the bookmark in the book.” (Sorry, Silence of the Lambs joke).

Didn’t I just say that I don’t have a sample of the book? I don’t. So I did that Illustration to use while I made my own dummy! I’m like that. Anyhoo, now you get to see what the book design looks like. Super airy and light. That yellow is so bright and happy and positive (just like the writing.). Below are some illustrations of how the book works – “it puts the bookmark in the book.” (Sorry, Silence of the Lambs joke).

I’ve collected my favorites (but not all my favorites) to share. The book is so light and bright and airy, so the illustrations really needed to just be seasoning for the words Kelly wrote. I chose a loose style using the colors we already established in designing the book together. The drawings are cute and happy, but still rough around the edges and almost sketchy, just like my marriage. Kidding! Just seeing if you’re paying attention.

I’ve collected my favorites (but not all my favorites) to share. The book is so light and bright and airy, so the illustrations really needed to just be seasoning for the words Kelly wrote. I chose a loose style using the colors we already established in designing the book together. The drawings are cute and happy, but still rough around the edges and almost sketchy, just like my marriage. Kidding! Just seeing if you’re paying attention.

I tried to keep everything as simple as possible at every level. I use three brushes: Rough Crayon, Tight Crayon (for any type), and Messy Dotted. There are only three colors: White, Yellow, and Black. Even conceptually I tried to be super simple without being lazy. I mention that the Life Preserver was an easy out, but I tried to at least make it look really interesting. And it turned out to be one of my favs.

I tried to keep everything as simple as possible at every level. I use three brushes: Rough Crayon, Tight Crayon (for any type), and Messy Dotted. There are only three colors: White, Yellow, and Black. Even conceptually I tried to be super simple without being lazy. I mention that the Life Preserver was an easy out, but I tried to at least make it look really interesting. And it turned out to be one of my favs.

d_blog_hily_illust_04.jpg

In this case, the content is composed of two parts. The first is an introduction to the book to explain it (it’s that unique) and give you an entertaining breakdown of tried and true marriage best practices. The second part is the bulk of the book - bookmarkable spreads that convey your romantic thoughts, encouraging words, mild concerns, deepest worries, and your most sincere apologies. That’s a lot of emotional content, right? Sound kind of heavy? Well, it IT IS! And that was what made it so tricky.

The Hey, I Love You… bookmarkables are divided into five categories. The first two, Romance and Encouragement, were super easy and fun. Then it started getting challenging. I feel like such a baby even writing that because you honestly, have NO idea how much thought and research went into the writing of this book. For example, consider this spread: I’m Worried About You. / It seems like you might be having a tough time right now. Want to talk about it? While the sentiment is clear, it’s also intentionally vague. Because this bookmark may be appropriate for someone who’s going through a really hard project at work as well as someone who might be suffering from deep depression. The overall tone of the book is upbeat, but it’s not tone deaf. As a person who identifies as “married for more than 25 years”, I’ve (we’ve) experienced a lot of the experiences in this book. So what would you illustrate to represent that bookmarkable message?

Did it just get moodier in here? The romantic and encouraging illustrations were really fun, but every relationship has its ups and downs. And as much as this marriage book is about the good times, it’s responsible enough to get you through the bad. I explain how bad in this post, and that illustration is bottom center.
d_blog_hily_illust_07.jpg

For every message in the book, I had to put myself in the shoes of the bookmarker AND the recipient in both the most mild of circumstance AND the most dire. All the while I had to keep with the book’s upbeat voice and palette. For example,“I’m Worried About You.”. For this I illustrated a door outlined in white in a very dark room. Under the door there’s a bright yellow light showing from the other side. From other side comes a bright, hopeful love note that travels a playful path into the room. Fine for anyone who’s just sort of shut off emotionally from their loved one and open to interpretation by the recipient to speak to just how dark that room is that they’re holed up in. See what I mean?

Of course, not everything in the book called for something this heavy. Even in the serious parts. If you know me, you know I can’t stand an easy way out. But for a small part of this assignment, the easy way out led to more time and effort to tackle the harder stuff. “Maybe We Can Learn a Lesson in This.” = Graduation cap. “I Will Never Give Up on You.” = Life Preserver. Not lazy. Just accurate, appropriate, and efficient to tackle the harder spreads. Besides, remember what I said about the book not being about the illustrations? It’s true. They were always meant to be seasoning for the content.

At this writing, I’m still making more and more drawings. Once we sent the final files to our publisher, there was the website and all the marketing materials to produce. Right now I’m at over 300 unique illustrations for this project. This isn’t even counting the animated book trailers and animated gifs viewed by over 3 million on GIPHY. I hope there’s even more to add to this story when the book is available October 5. If you want to be in the loop, subscribe to the Hey, I Love You…Newsletter. If you preorder the book before October 5, you’ll get a cool little Sneak Preview Gift. from Kelly and I :-)

DAVE SOPP – Creative

Yep, that’s me. I’ve got over 20 years of marketing strategy, graphic design, advertising art direction, and illustration experience. Want to use some of it? Email me at dave@davesopp.com

 

How to Not Really Animate Something.

Illustration > Mr. Dave’s Best

When I was a student at Art Center, a producer for Dick Clark Productions somehow got my number and called me up with a gig (I still don’t know how that even happened). He asked me if I could do some animation titles for American Bandstand. I said, “Yes, absolutely” (as I’m want to do) and of course I’d never animated anything before in my life. Luckily I had an out when he said he didn’t have any money to pay me but I’d be in the end credits. No. Thanks.

Anyway, I never did learn how to animate. I’ve come close by doing some TV spots in San Francisco with talented animation studios. I even sort of animated some low budget stuff for VersaMe and Continuum, but those weren’t the same as the real deal. But then I found that Procreate, my favorite tablet drawing app, had a feature that recorded your pen strokes while you drew! So when your drawing was done you’d have a time-lapse animation of your drawing...well, drawing itself. I know what you’re saying. “That’s not real animation either!” I know, but it’s closer? Hahaha.

Anyway it was fun to take that app feature and figure out how to use it in a unique way. I mean, you could just record yourself drawing a character or something, but in the end you just have that finished character or something. So I had the idea of doing a slow reveal. Where you really didn’t know what the drawing would be until the very end. Or maybe you’d know what it was, but you didn’t know why I drew it until the end.

I’d been putting a lot of creative energy into my Mr. Dave’s Best brand and I’d been sharing one theme a week on Mr. Dave’s Best Instagram account. I made these little videos the “Saturday Night Mystery Movie”, where I challenged viewers to try and guess the video topic before it was revealed at the end. Fun, right?

I’m sharing here a collection of my most favorite Mr. Dave videos. I don’t think any of these represent my best illustration work. Not at all. The whole thing was more of a conceptual piece. My challenge to myself was to get through each of these drawings quickly. I didn’t want the videos to be too long or illustrate themselves too fast. I also did each drawing in one take. Maybe this was just user error, but if you screw up a lot (like I do), it’ll totally mess up your video. And I was working with no previous sketch or practice at all. I was just banging them out. I exported the videos from Procreate to my Mac, where I’d pop them into Adobe Premiere for a quick edit and some title additions. The music is all SUPER public domain from a website I found filled with all kinds of terrible, scratchy, atrocities. Mostly a bunch of recordings of Edison (yeah, Thomas), recorded by Edison, telling terrible jokes. Anyway, I thought the clunky antique music fit well with my retro brand and bounced hard against my decidedly non-traditional themes. How many video topics can you guess before they end?

DAVE SOPP – Creative

Yep, that’s me. I’ve got over 20 years of marketing strategy, graphic design, advertising art direction, and illustration experience. Want to use some of it? Email me at dave@davesopp.com

 

How to Draw Yourself Out of Trouble.

Illustration > VersaMe

Being able to draw gets you out of a lot of sticky design situations. Maybe I lean on it too much, but if I need a technical illustration of a product I’m doing a brochure for, it’s easier for me to just whip one out myself without having to go find someone to do it, get an estimate, get an ok to spend the money, wait for them to fuck it up a couple of times before I like it and then get back to work. Who’s got time for that?

CHEATING: Yep. This is my animation cheat. Same head, different mouths. This is what I gave my talented After Effects friend so he could do the fake animations for our video.

CHEATING: Yep. This is my animation cheat. Same head, different mouths. This is what I gave my talented After Effects friend so he could do the fake animations for our video.

CHEATING: Same with this. I gave him a ton of different mouths for both characters so they’d look like they were blabbing.

CHEATING: Same with this. I gave him a ton of different mouths for both characters so they’d look like they were blabbing.

CHEATING: Same here. Below is all this cheating in action. :-)

CHEATING: Same here. Below is all this cheating in action. :-)

d_versame_illustration_04.jpg
d_versame_illustration_05.jpg

Being an illustrator also comes in handy getting ideas across. Fast. When I was working with VersaMe (they made the Starling early education wearable), I had LOTS of opportunities to put my drawings to work. I’d had to make a series of YouTube videos, from scratch, in about a week. So I figured out an idea that would work, populated the spots as much as I could with stock photos and then filled in the gaps by hand. The spots were heavy on After Effects (lots of stuff zooming in and out and such) so the drawings had to have a little extra something something to spice things up.

Oh, I’m no animator. I mean, I’d love to be, but I don’t have the time. So I faked it. I drew out tons of key frames and handed them over to my After Effects editor to do his magic with ‘em.

There were also a lot of technical drawings to be used in gif animations I’d end up building for onboarding tutorials. But the really fun stuff, personally, was concepting story ideas for an educational gaming app we were developing to tie into the Starling. We had a handful of story ideas that we wanted to test via Facebook ads. Really shoestring market research – the ad with the most clicks for more info was the theme that won. I’m a big fan of those old Bell Science Films, and I wished and wished that the child-brain-cross-section idea was the winner. It totally wasn’t. Mad Face Emoji!

dave_bug.jpg

DAVE SOPP – Creative

Yep, that’s me. I’ve got over 20 years of marketing strategy, graphic design, advertising art direction, and illustration experience. Want to use some of it? Email me at dave@davesopp.com