Pete Clayton logo Pete Clayton logo
  • Home
  • About
  • Projects
  • Blog
  • Shop
  • Contact

How I Did It: Skater Dude Animation

Oct 10, 2019

Category: Insights

Research

I started studying lots of skateboarding gifs that other animators had done to try and get the motion of the driving leg right. Without doing this it simply wouldn’t look right.

Prep

I began with a lot of sketching, frame by frame if you like so I got the leg positions right and then traced this a few times in ink as I wanted to get the a wobbly line effect like my ink drawings had some life to them. I ended up with various sheets which looked like the below. These formed the various leg positions and were scanned sorted in Photoshop.

Props

From there I added shoes, colour and texture and ended up with various limbs that when seperate looked like the below.

Animating in Photoshop

So I worked at 25fps (don’t know why but I heard it’s good) and used multiple video timelines to compile it all together, a separate layer per limb. My timeline and layers looked like this:

Now, unless I take you through every layer in person it would be a bit hard to explain how I did it, which doesn’t help I know. There are some links at the end to some tutorials so you can learn a bit for yourself about video timelines etc.

The above timeline of layers resulted in this motion:

It’s literally only a 4 second clip but enough for me to take into After Effects and add more movement and a bit of wizardry. Before I did this though I turned off the background layer and saved a transparent video. This would give me with more flex when animating in After Effects.

Animating in After Effects

To be honest, I’m not a seasoned vet when it comes to this programme so there was a lot of Googling involved. You hit a problem, just Google it is my advice. A list of what I did in After Effects is as follow:

  • Added the jerk movement of the skateboard moving forward
  • Gave our friend features using shapes
  • Added movement to the eyes
  • Re-scaled him at various points so he could avoid the cars
  • Used time remapping so the skateboarding clip would last the duration of the timeline
  • Added motion blur for a more ‘real’ moving effect
  • Added in a moving background to give a greater sense of speed

So that’s about it for After Effects… as I mentioned before it would be easier to show in person how I did it but at least this gives you a good overview of what I have done. Remember Google is you friend!

Back to Photoshop

As with a lot of my illustrations I like to add expressive lines to denote movement the same is when I animate too.

So after rendering the video from After Effects I took it back into Photoshop to add in the expressive movement lines again using video layers to draw these frame by frame.

The Result

Further Research

Tutorial by Animade

Tutorial by Alex Grigg

SHARE THIS

PrevGif AnimationsNextIllustrative Icons & Portraits for Studio More

Recent Posts

  • Negativity: A positive kick to the feels 24th January 2021
  • Year One of Freelancing 9th October 2020
  • “Fear”, the annoying but essential ghost 29th February 2020

Categories

  • Animation (5)
  • Illustration (2)
  • Insights (8)
  • News (8)
  • Thoughts (4)

GET IN TOUCH

Got an awesome project in mind? Let’s make something great together!

Contact

NEWSLETTER

All the latest news, insights, thoughts & tips direct to your inbox

Follow me on Instagram

Follow me
Hey folks! I’m interrupting my my journaling pro Hey folks! I’m interrupting my my journaling project today to bring some illustrations from my latest blog post... link in my profile and Linktree... here’s the intro though:
-

2020 had been a very turbulent year for me and for the planet to say the least. I am by no means special or unique in this. Covid has obviously been eating up the airwaves and the thought waves of both yours and my brain. What does make me unique though is that my wife and I split and I moved out. With that my mental health took a battering. I have schizoaffective disorder too if you don’t already know. All of this combined you might think that would leave a person completely down the rabbit hole of despair. Well it did. However, I didn’t stay there and to be honest it took some doing to get back out of that hole, clean myself off and press on despite the massive boot to the emotional feels. ✌️❤️
-
#editorialillustration #blogpost #insights #positivevibes #journeytohealth #mentalhealth #illustration #illustrator #illustrationartists
My creative “groceries”... the prompt was food My creative “groceries”... the prompt was food Groceries and I do like food but I thought that maybe my materials give me greater nourishment at sustenance ✌️❤️ 
-
#creative #illustration #groceries #theessentials #illustrator #illustrationartists #artist #editorial #dailyillustration
Self care habits of mine... some stuff goes in som Self care habits of mine... some stuff goes in some stuff comes out ✌️❤️
-
#selfcare #mentalhealth #illustration #illustrationartists #illustrator #venndiagram
I keep wearing... ok my face furniture isn’t qui I keep wearing... ok my face furniture isn’t quite so fancy but you get the idea 😁✌️❤️
-
#journaling #clothing #vans #facefurniture #illustration #illustrationartists #artoftheday #illustrationoftheday #artist
My current and continual cravings. God dam them co My current and continual cravings. God dam them cookies are good folks 😁✌️❤️
-
#illustration #cravings #cookies #coffee #closeness #illustrator #artist #journaling
Pete Clayton logo
  • Home
  • About
  • Projects
  • Blog
  • Shop
  • Contact
  • Cookies Policy

© 2021 Pete Clayton