Trace Loops Rotoscoping GIF Tutorial

Hi everyone, this is the tutorial I promised which gives the basics for creating your own rotoscoped GIF similar to this one created by traceloops. You’ll definitely want to fast-forward through some of the drawing parts (like my failed attempt at using the tablet), but you’ll figure it out!

I got started on an image from a recent sculpture show at York. I’ll try to finish it by Thursday. But in the meantime here’s the started piece – nothing too fancy.


EDIT: So I finished my demo.Β I reworked the bird cage after having used a better paint brush to draw the bear on the ball. Which is something I left out in the tutorial. You should consider trying out the different brush types available above the paintbrush tool.


I chose a something that was finer and left a bit of digital smudge. Here’s the final version:


9 thoughts on “Trace Loops Rotoscoping GIF Tutorial”

  1. Thanks for breaking this process down. I like the traceloops animations and I think you’ve really captured the gist of likely process. I’m interested in animating svgs and possibly trying to do it without tracing old school but it takes bloody forever πŸ™‚

      1. It does! You can see a face morphing experiment I did on my codepen at: codepen dot io /roblevin (I’ve updated website on your comments form with that). But that’s more using GSAP’s morphing plugin, what I hope to do is do a sort of step animation using cells. But I’m also keen on doing the whole photoshop animated gif thing too and just experiment with different processes. I think what I’m really interested in is the feel of analog over digital that this brings. Another thing I’m looking at is taking a video to image sequence and then tracing over my iPad with the brightness jacked up high so it acts as a lightbox. It works well (although I’m not pressing hard as I’m concerned I’ll “F UP” my iPad!)

        The only thing with drawing analog is that I then have to scan it in, using something like AI’d live trace, delete junk nodes from the paths, yada yada and it just sucks so much time. I need to get a wacom or something so I can just do it in PS or AI directly. Did you ever get comfortable with that tablet? I’m hoping I can make an excuse and get one for myself for xmas or something. That said, Sarah Drasner (someone whom I really admire for her digital drawing prowess amongst many other skills), told me she just uses a mouse!

        1. The face morphing experiment is really interesting and cool to see that you present the process. It’s looks like something I’d like to try at some point.

          I haven’t yet gotten comfortable with a tablet, I need to make the time. But drawing with the mouse can be ‘ok’ and I used to do work that involved drawing and then making vectors in AI from rasters. Definitely slow but a great process still.

          And I’d never heard of Sarah Drasner. Thanks for the mention, her work looks great!

          1. Yeah tracing that many frames is so tedious. I tried a bit tonight and maybe I just wasn’t in the right mood, but just wasn’t feeling it. I think it’s evident that even though he utilizes tracing, Mattias does a very good and creative job at sort of inbetweening the traced keys. In any event, I’ll definitely need to improve my patience for any likely workable process πŸ˜‰

  2. So I did something similar but a bit different process wise:
    I’m really bummed that when I do PS Video Frame to Layers and then open the Window -> Timeline tool, that there’s no real easy way to “paint” ex with Brush and create paths. Seems like what most will do for paths is use Pen tool etc. in PS. What I really want is the use Brush tool but get paths. Obviously Illustrator or any vector program is more ideal for this sort of thing. So what I do is File Place the images in AI and then turn each layer on manually as I do drawing. This works, but I really wish I could have the nice Timeline view from Photoshop.

  3. Just to be clear, the reason I want to pain in PS but create paths, is that I’d eventually bring in to Illustrator and export an SVG for animating on the web. Obviously, if I’m after an animated gif, just drawing over the Photoshop Timeline based layers works perfectly…just was hoping I could use that same process for taking it back in to a vector workflow.

  4. Ok, sorry for so many replies here, but I did find this process (I can’t yet vouch for it’s effectiveness yet but it “mechanically works”):

    Photoshop Workflow (TBD)

    – File Import -> Video Frames to Layers
    – Window -> Timeline
    – Create new layers for each animated layer
    – Use Square Brush and trace
    – Command Click the Thumb for that layer
    – Open Path and from side menu do Make Work Path
    – Copy and paste that working path from PS to AI

    The only issue with this to me is copying from PS to AI which would seem to take you out of a creative mindset but maybe not I dunno.

Leave a Reply

Your email address will not be published. Required fields are marked *