watercolor painting, illustration of cactus flower. lady portrait

I made GIF animations in Adobe Photoshop from a watercolor illustration

How I made GIF animations in Adobe Photoshop from a watercolor illustration

I painted this watercolor illustration of a cactus flower 🌺 lady recently with Winsor and Newton’s professional watercolor.

View this post on Instagram

A post shared by Kaori Tsuchimoto (@kaoritsuchimoto_art)

And suddenly an image of her hair moving around came up to my mind.

So, I couldn’t stand without animating her.

These are the final creations.

The Workflow for creating GIF from just an illustration to looping animation

This is the workflow.

The work flow image explaining how to animate a watercolor illustration in 8 steps: sketching, finding references, painting, scanning, retouching, cutting into pieces, and animating in Timeline Panel.

There are basically 8 steps.

  1. Sketching
  2. Finding a references
  3. Painting
  4. Scanning or taking a good photo
  5. Opening in Photoshop (I don’t know why I included this as a step!)
  6. Cleaning the background and adjusting the image.
  7. Cutting the image into separated, individual pieces
  8. Use the Puppet Warp tool in the Edit menu and make frames in the Timeline panel

I didn’t start painting this image because I was planning to animate it later so the hardest part was cutting her hair into pieces.

And I know the time frames were only 5-8 frames, so the movement is not smooth.

Also, unlike Adobe After Effects, Photoshop is not for animating, so there is no Easy Ease function to make the animation smooth and more natural.

However, even this just a super easy process of animating, I am very content with how she looks alive in the GIF!

That’s why I can’t stop loving animations!

I think I make animations for just my selfish, pure joy.


Thank you for visiting and reading.





Scroll to Top