Highlighted

Converting artwork into a malleable animation

Community Beginner ,
Sep 23, 2020

Copy link to clipboard

Copied

Hi all, 

I have made some abstract artwork which has been hand drawn and scanned in, and I want to pick it apart and mess with it using layers and warp tool to create an animated video. 

 

I've used Illustrate to do an image trace, so that I can convert the artwork into a vector (or at least, I think that's what I need to do, I'm still very much learning at the mo). I had to be quite heavy on colour and detail because I want it as close to life as possible. 

 

This has meant though that when bring it into Animate and I use, for example, warp tool - the warp map is so fine that it usually crashes the program if I try to add warp handles. 

 

I also am not entirely sure that I'm exporting the artwork from illustrator in the best way - when I try to export as bitmap, I only get the option for 1 bit on OS. I try as .png and .pdf but I really feel like I don't know what I'm doing, so I could use a bit of help just getting this set up. I can't seem to find much on youtube etc, I generally can only find info on large, basic shapes - this is much more detailed. 

 

Also any suggestions for less convoluted ways to go about what I'm trying to do would be great.

 

Cheers, 

Amy 

 

 

Hi Amy,

kglad's suggestions are correct, though, it that really want you want? I mean creatively. It took me almost 5 minutes only to download kglad's warp example. And it just warps at the top-right edge and waves like a flag. So what? I think that's not creative and realistic at all.

Your style of painting is too complex to work with it in Animate in this way. The result wouldn't be in any way exciting. Animate is not an application for complex animated bitmap manipulations. It's a vector animation tool.

Let me explain the difference between bitmap resp. raster graphic and vector graphic.

A raster graphic is basically a 2D plane like a very fine grid made of many pixels. And each pixel can have a different colour value. This makes it possible to display images of photographic quality. Let's take your image you've embedded in your post. It contains 1883 by 1371 pixels. If we multiply these numbers we get 2,581,593 individual pixels. Each one of them can carry a colour value of red 256 * blue 256 * green 256 colour tones (24bit). That are roughly 16.7 million different tones. If we ignore the possiblity that the pixels could also contain information about transparency or semi transparency (alpha channel) that would add 256 alpha values (32bit) which means 4,2 billion different possible colour values for each pixel. Although your image doesn't contain that many, the number of unique colours is already a whopping 243,761 (according to my raster graphic editor).

A vector graphic is a completely different beast. It consists of paths (or vectors) and anchors (or anchor points). A vector can be a straight line between two anchors or a rounded one with many anchors. Basically an anchor is always there where a straight line changes direction. If a vector shape is closed, ends there where it started, like a square or a circle, it contains information about the fill, which can be either a solid color or a gradient. The advantage of a vector graphic is that it is quasi mathematically evaluated always when one enlarges the size of the graphic. Vectors get longer, the distance between anchors increases. But it will stay crispy with very well defined edges and outlines. A raster grid, when enlarged, can only increase the number of pixels, multiplies pixels with equal or similar colour values and, as a result, will become blurry.

Now, if you want to trace your raster graphic in order to work in Animate with the advantage of a vector graphic (you were talking about an image trace in your original post), and you want it as "as close to life as possible", then all the intricacies of your hand painting must be translated into a multitude of vectors and anchors. I've tried that in Illustrator with your image and got this:

Screenshot 2020-10-01 at 19.43.45.png

You can see that it takes 19,752 paths (vectors) and 162,163 anchors. And with (only) 16,285 colors this is already a significant reduction of those 243,761 unique colours of the PNG raster version. These numbers a too many to work with them in Animate in order to achieve subtle animative effects. It would be like modulating an ants nest by moving each ant seperately.

Well, okay, my conclusions:

Either, you create something in Illustrator or Animate, which is truly vector oriented, meaning much more cartoon stylisch, or you work in a raster graphic editor (like Photoshop) with your scanned painting and maybe use the lasso or polygon selection tools to cut your image into segments and animate those in an interesting way in Animate.

Sorry for this long 'essay', but I thought, it might help you to make creative decisions.

Klaus

Views

123

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Converting artwork into a malleable animation

Community Beginner ,
Sep 23, 2020

Copy link to clipboard

Copied

Hi all, 

I have made some abstract artwork which has been hand drawn and scanned in, and I want to pick it apart and mess with it using layers and warp tool to create an animated video. 

 

I've used Illustrate to do an image trace, so that I can convert the artwork into a vector (or at least, I think that's what I need to do, I'm still very much learning at the mo). I had to be quite heavy on colour and detail because I want it as close to life as possible. 

 

This has meant though that when bring it into Animate and I use, for example, warp tool - the warp map is so fine that it usually crashes the program if I try to add warp handles. 

 

I also am not entirely sure that I'm exporting the artwork from illustrator in the best way - when I try to export as bitmap, I only get the option for 1 bit on OS. I try as .png and .pdf but I really feel like I don't know what I'm doing, so I could use a bit of help just getting this set up. I can't seem to find much on youtube etc, I generally can only find info on large, basic shapes - this is much more detailed. 

 

Also any suggestions for less convoluted ways to go about what I'm trying to do would be great.

 

Cheers, 

Amy 

 

 

Hi Amy,

kglad's suggestions are correct, though, it that really want you want? I mean creatively. It took me almost 5 minutes only to download kglad's warp example. And it just warps at the top-right edge and waves like a flag. So what? I think that's not creative and realistic at all.

Your style of painting is too complex to work with it in Animate in this way. The result wouldn't be in any way exciting. Animate is not an application for complex animated bitmap manipulations. It's a vector animation tool.

Let me explain the difference between bitmap resp. raster graphic and vector graphic.

A raster graphic is basically a 2D plane like a very fine grid made of many pixels. And each pixel can have a different colour value. This makes it possible to display images of photographic quality. Let's take your image you've embedded in your post. It contains 1883 by 1371 pixels. If we multiply these numbers we get 2,581,593 individual pixels. Each one of them can carry a colour value of red 256 * blue 256 * green 256 colour tones (24bit). That are roughly 16.7 million different tones. If we ignore the possiblity that the pixels could also contain information about transparency or semi transparency (alpha channel) that would add 256 alpha values (32bit) which means 4,2 billion different possible colour values for each pixel. Although your image doesn't contain that many, the number of unique colours is already a whopping 243,761 (according to my raster graphic editor).

A vector graphic is a completely different beast. It consists of paths (or vectors) and anchors (or anchor points). A vector can be a straight line between two anchors or a rounded one with many anchors. Basically an anchor is always there where a straight line changes direction. If a vector shape is closed, ends there where it started, like a square or a circle, it contains information about the fill, which can be either a solid color or a gradient. The advantage of a vector graphic is that it is quasi mathematically evaluated always when one enlarges the size of the graphic. Vectors get longer, the distance between anchors increases. But it will stay crispy with very well defined edges and outlines. A raster grid, when enlarged, can only increase the number of pixels, multiplies pixels with equal or similar colour values and, as a result, will become blurry.

Now, if you want to trace your raster graphic in order to work in Animate with the advantage of a vector graphic (you were talking about an image trace in your original post), and you want it as "as close to life as possible", then all the intricacies of your hand painting must be translated into a multitude of vectors and anchors. I've tried that in Illustrator with your image and got this:

Screenshot 2020-10-01 at 19.43.45.png

You can see that it takes 19,752 paths (vectors) and 162,163 anchors. And with (only) 16,285 colors this is already a significant reduction of those 243,761 unique colours of the PNG raster version. These numbers a too many to work with them in Animate in order to achieve subtle animative effects. It would be like modulating an ants nest by moving each ant seperately.

Well, okay, my conclusions:

Either, you create something in Illustrator or Animate, which is truly vector oriented, meaning much more cartoon stylisch, or you work in a raster graphic editor (like Photoshop) with your scanned painting and maybe use the lasso or polygon selection tools to cut your image into segments and animate those in an interesting way in Animate.

Sorry for this long 'essay', but I thought, it might help you to make creative decisions.

Klaus

Views

124

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 23, 2020 0
Adobe Community Professional ,
Sep 23, 2020

Copy link to clipboard

Copied

you can import your bitmap into animate and then use modify>bitmap>trace bitmap and experiment with the settings to find one with adequate detail but not some much that it overwhelms your computer.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 23, 2020 1
Community Beginner ,
Sep 23, 2020

Copy link to clipboard

Copied

I'll give that a go, much appreciated x

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 23, 2020 0
Adobe Community Professional ,
Sep 26, 2020

Copy link to clipboard

Copied

you're welcome.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 26, 2020 0
Advocate ,
Sep 25, 2020

Copy link to clipboard

Copied

Hi Amy,

could you supply a visual view of your abstract artwork? Maybe a downsized version if it is very large in pixels. Then it would be easier to judge whether the modify>bitmap>trace bitmap method makes sense or it is just too complex.

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 25, 2020 1
Community Beginner ,
Oct 01, 2020

Copy link to clipboard

Copied

Hi, 

 

Thanks for your response. Here's a screenshot of one of the pieces - it would be great to be able to take it apart and manipulate the different elements of it and to be able to trace certain parts to zoom in on and use as a starting point to evolve it, but it's hard to tell as a newbie what is as easy thing to do vs what is manageable, or what is likely to take much longer to learn!

 

I also have this odd problem when I try to save it as a bitmap image - im only offerred the option to save as 1bit when i select Mac as an option. I'm running a 2014 macbook pro. 

 

Anyway, any thoughts really appreciated. 

 

Amy 

 

Screenshot 2020-10-01 at 18.36.59.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 0
Adobe Community Professional ,
Oct 01, 2020

Copy link to clipboard

Copied

that's a lot of pixels to manipulate as a bitmap (1883 x 1371).  that took about 1/4 of my 32gb ram for animate and the warp tool, but it's doable, http://www.kglad.com/Files/forums/art_v1.html

 

i'd recommend using 1/2 that width and 1/2 that height for something that's easier on the hardware while editing and faster to display when downloading.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 0
Advocate ,
Oct 01, 2020

Copy link to clipboard

Copied

Hi Amy,

kglad's suggestions are correct, though, it that really want you want? I mean creatively. It took me almost 5 minutes only to download kglad's warp example. And it just warps at the top-right edge and waves like a flag. So what? I think that's not creative and realistic at all.

Your style of painting is too complex to work with it in Animate in this way. The result wouldn't be in any way exciting. Animate is not an application for complex animated bitmap manipulations. It's a vector animation tool.

Let me explain the difference between bitmap resp. raster graphic and vector graphic.

A raster graphic is basically a 2D plane like a very fine grid made of many pixels. And each pixel can have a different colour value. This makes it possible to display images of photographic quality. Let's take your image you've embedded in your post. It contains 1883 by 1371 pixels. If we multiply these numbers we get 2,581,593 individual pixels. Each one of them can carry a colour value of red 256 * blue 256 * green 256 colour tones (24bit). That are roughly 16.7 million different tones. If we ignore the possiblity that the pixels could also contain information about transparency or semi transparency (alpha channel) that would add 256 alpha values (32bit) which means 4,2 billion different possible colour values for each pixel. Although your image doesn't contain that many, the number of unique colours is already a whopping 243,761 (according to my raster graphic editor).

A vector graphic is a completely different beast. It consists of paths (or vectors) and anchors (or anchor points). A vector can be a straight line between two anchors or a rounded one with many anchors. Basically an anchor is always there where a straight line changes direction. If a vector shape is closed, ends there where it started, like a square or a circle, it contains information about the fill, which can be either a solid color or a gradient. The advantage of a vector graphic is that it is quasi mathematically evaluated always when one enlarges the size of the graphic. Vectors get longer, the distance between anchors increases. But it will stay crispy with very well defined edges and outlines. A raster grid, when enlarged, can only increase the number of pixels, multiplies pixels with equal or similar colour values and, as a result, will become blurry.

Now, if you want to trace your raster graphic in order to work in Animate with the advantage of a vector graphic (you were talking about an image trace in your original post), and you want it as "as close to life as possible", then all the intricacies of your hand painting must be translated into a multitude of vectors and anchors. I've tried that in Illustrator with your image and got this:

Screenshot 2020-10-01 at 19.43.45.png

You can see that it takes 19,752 paths (vectors) and 162,163 anchors. And with (only) 16,285 colors this is already a significant reduction of those 243,761 unique colours of the PNG raster version. These numbers a too many to work with them in Animate in order to achieve subtle animative effects. It would be like modulating an ants nest by moving each ant seperately.

Well, okay, my conclusions:

Either, you create something in Illustrator or Animate, which is truly vector oriented, meaning much more cartoon stylisch, or you work in a raster graphic editor (like Photoshop) with your scanned painting and maybe use the lasso or polygon selection tools to cut your image into segments and animate those in an interesting way in Animate.

Sorry for this long 'essay', but I thought, it might help you to make creative decisions.

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 1
Community Beginner ,
Oct 02, 2020

Copy link to clipboard

Copied

Thanks for the response and example xx

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2020 0
Community Beginner ,
Oct 02, 2020

Copy link to clipboard

Copied

Hi Klaus, thankyou so much for taking the time to give me such an in depth answer. I really appreciate the info, and I can go away and asess my options now. 

 

Just FYI, the picture I gave you was a mac screenshot of the artwork so the pixel count would have been quite different to the scan - but I take your point nonetheless. The artwork itself is 1053 x 753, so probbly not a huge difference but yes, I see how trying to manipulate it as a photo-realistic piece of art would be incredibly time consuming, so it looks like as you say I need to come up with a happy balance. 

 

Ill post the result in 6-8 years 😉 

 

Amy 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2020 1
Adobe Community Professional ,
Oct 01, 2020

Copy link to clipboard

Copied

For the question about bitmap, that was the original Mac 1 bit graphic system. I'm not even sure where you saw that option. If you get good results in Illustrator you can copy and paste them into Animate.

The Asset Warp tool seems to work well on pasted Illustrator elements.

As for how demanding an animation would be if you played it in Animate, you don't have to play it. If you export to video, the final animation will play smoothly.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 1
Community Beginner ,
Oct 02, 2020

Copy link to clipboard

Copied

Oh brilliant thanks, I didn't realise I could just copy and paste! Truly a rookie mistake 🙂 thanks! xxx

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2020 0