Advertisement


Wobble a simple sketch to animate it


Question

I'm wondering if there is a tool or simple method that will allow me to turn a simple pencil/pen sketch into something like the two images below.

I received these in a newsletter from a Kickstarter project and wondering how someone would go about making them.

Simple wobble Wobble with some animation

2015/10/27
1
3
10/27/2015 5:55:00 PM

Accepted Answer

Here is the full Tutorial

It's easier to see when you take the frames apart and then it becomes apparent that the line tickness and placement are randomized. There are a range of filters you could use, especially in Illustrator.

  1. Wobble One

  2. Wobble TWO

  3. Wobble THREE

There are in fact ten frames, I've only uploaded three...Then, slowing down the animation, to one frame per second, so you can see the differences....

TenFramesonepersec

ADOBE WORKFLOW PRODUCTION NOTES:
1. Create the illustration as Vector art (in Illustrator)
2. Duplicate the Art to ten separate layers (just copy the content through the layers)
3. Use Pucker and Bloat and other filters in Illustrator on each layer- move elements
4. Turn Transparency Grid on (in View) if you want a transparent GIF
5. Use EXPORT as PSD feature (FILE> EXPORT> Photoshop PSD)
6. Specify that you want layers exported
7. Open in Photoshop
8. In the animation panel, switch to FRAMES and set each of the ten frames to 0.3 secs
9. Export as "Save for Web And devices" Select GIF and make sure to select if you want it to play continuously (yes)
10. You could use this as an element in a JavaScript animation.

Special note to self Should take about an hour and a half per segment. Remember to get the storyboard approved first, or you will have to redo all this tedious S*[email protected] to change just one word.

Finally, sit back and wait for your Webby Award/ Animation OSCAR nomination and the invevitable moment when Cameron Diaz asks for your cell number... don't worry about the patent mentioned above - an illustration style can not be patented, only the software.

2014/01/23
6
1/23/2014 9:09:00 AM

This could be done by creating a GIF in Adobe Fireworks.

  1. Add the first image.
  2. Add the same image to the second frame, but take some of the anchor points and move them.

The more anchor points you move and the further you move them - the more the animation will wobble.

2014/01/22