1

I want to hand-draw an arrow, on either an ipad or the trackpad of a macbook, and generate an animated gif which 'replays' the drawing in real time.

I want the animation to look like an arrow being drawn in black marker pen on a whiteboard - so just a black line with a pea-sized circular brush stroke, and ideally on a transparent background so it can be overlaid on other things on a webpage, though I could live with a white background as a workaround.

Basically, I want the arrow to end up looking like this example of what the arrow should look like

Are there any tools, free or paid, which will allow me to generate such an animated gif, and export it?

I had a look at this question but it seems like the OP's requirement is in the opposite direction to mine (generate a drawing animation from an already-completed drawing). So not sure if that accepted answer is applicable for the reverse direction (I don't really understand it to be honest, but if it is, I will learn!) or if I should use that solution from a finished version of the arrow, but this seems a pretty complex workaround.

Improve this question
2
  • 1
    I would do this by erasing the final arrow one little chunk at a time in the opposite sequence that they are drawn. Maybe 30 or 40 chunks total. I would use photoshop's gif/animation feature. As I erase I create a new layer. Put these layers in order and tweak the settings. Reasonable playback speed should fool the eye. Take smaller eraser bites if necessary.
    – jqning
    Commented Jul 8, 2015 at 1:54
  • 1
    @jqning you should make this an answer, I find it a better solution than the other proposed one.
    – Jascha Goltermann
    Commented Aug 6, 2015 at 23:52

4 Answers 4

Reset to default
2

Essentially what you do is grab a screen video of the work, then convert those video frames to a gif image. As far as I'm aware, there's no "automatic" gif creation software for recording screen movies. Everything generates a video file. There are several apps which can use that video file to generate a gif though.

arrow

This meta question may be relevant: How to embed screen capture videos as animated gifs in answers?

Improve this answer
1

I think what you want is to create an SVG file. There is an excellent piece of free Windows software that does this here: https://inkscape.org/

Then you need something that will run SVG files as animations. I use VideoScribe, which cost me a pretty penny back in the days when I used to get a study grant, but if you Google around you'll find plenty of apps that will do the job.

Improve this answer
1
  • 2
    GSAP has a DrawSVG library and there's other similar SVG animation libraries that make animating SVGs like this easy and consistent across browsers.
    – Zach Saucier
    Commented Jul 20, 2019 at 1:49
0

You could draw the arrow by creating a motion tween in Adobe Flash CC and then save it in the ".gif" format. All you need to do is, go to "publish settings" and check the "gif" checkbox and publish to your hard drive.

Improve this answer
0

I would do this by drawing the arrow how I like and then erasing the final arrow one little chunk at a time in the opposite sequence that they are drawn. Maybe 30 or 40 chunks total. I would use photoshop's gif/animation feature. As I erase I create a new layer. Put these layers in order and tweak the settings. Reasonable playback speed should fool the eye. Take smaller eraser bites if necessary.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.