Creating high quality animated backgrounds from Illustrator files

Question

I have some artwork in illustrator that I would like to animate and get a gif.

Say I have a background pattern and I want to randomly move the elements inside to get a natural look of particles moving for a website background (should I use a gif for an animated background on a website ?)

The simple way is just to create many backgrounds with different locations of the elements, which takes long time and never look natural.

How would you do that on a mac ? Do I need After Effects ? or other software to make it quickly ?

Answer 1

Hold your horses! :o)

Ok. First of all, you need to define if an animated gif is what you need. This depends on the image you have, the type of animation you want, and the place where you are going to put the animation.

I am making a semi-random list of ideas of several options you have to animate stuff... especially for a web page, (Which I am assuming you want the animation for)

1. Animated Gif

• Normally it is best to use it at real scale, if the image is 400x400px display it as 400x400 px, do not scale it or blow it up to cover all background.

• Use as few frames as possible, normally for a loop.

• Use flat design style images, with a limited palette.

• The background of the GIF should match (since the planning stage) the final background it will have.

---

But you have several other options:

2. Animate using JavaScript.

The main point here is your requirement "to randomly move the elements" the only way to randomly move elements is using JavaScript. There are some libraries that can help you animate stuff https://greensock.com/

It can animate exported assets from Illustrator to PNG or SVG...

But probably this is out of the realm of graphic design and more into programming... so let's forget this for now.

3. Using a specific JS

For example, if the thing you want to animate is snow... search for some codes already made you can use:

https://duckduckgo.com/?q=snow+js

4. Animating using CSS

This is in the realm of graphic web designers... But you need how to code HTML and CSS.

https://duckduckgo.com/?q=css+animations

But this will not be random at all, this will be keyframe animations.

5. Video

This will assume your "randomness" is inside the video itself... an explosion has random stuff flying around. You normally will use Mp4 video and paste it as a background using some JavaScript.

6. Looping a background

This is the approach you are describing... which is not a good idea because this needs to load the entire image each time.

You can do it using PNG sprites animation, and animating them using CSS.

https://duckduckgo.com/?q=css+sprite+animation

---

If you still want to go with animated gifs... you can use Blender (blender.org) which is free and assigns emission materials and turns off shadows, to have a flat look.

Normally you will have keyframe animation... or you can add particle systems to generate really random stuff... or you can use parametric animation... The possibilities are endless.

Answer 2

I have some artwork in illustrator that I would like to animate and get a gif.

The animated image should be quite small and the animation optimized.

That can be combined with some JavaScript to create a custom background for your website. Maybe to obtain a result such as this:

Say I have a background pattern and I want to randomly move the elements inside to get a natural look of particles moving for a website background (should I use a gif for an animated background on a website ?)

Animated .GIF backgrounds are difficult to make: 1. small filesize, 2. interesting effect, 3. not tiresome or outdated - the same can be said of animated JavaScript backgrounds, but at least the technique isn't outdated (and very difficult to do effectively).

The simple way is just to create many backgrounds with different locations of the elements, which takes long time and never look natural.

Agreed, and the loading time, especially for users with slower connections and hardware (BTW: I'm using a Cellphone, the above image is OK as an example with the limitations set forth with respect to uploading here into an answer).

How would you do that on a mac ? Do I need After Effects ? or other software to make it quickly

The quickest way is to find a particle that looks like what you want (by searching for a free image), an open source JavaScript library (like suggested above and the links below), and combine them to create the background for your webpage. A how-to on graphics design and integrating it with your website is an art form that is difficult to teach in a Q&A format, there are free courses available, I'd prefer to stick with the first few questions.

Some particle animation libraries:

• Particles.js

• Three.js canvas - particles - waves

• The whole particle can be coded on your webpage and animated (without using Illustrator, making .GIFs of various sizes appropriate for different screen resolutions, and losing the advantage of modern vector graphics).

• WebGL Tutorial

  • WebGL Jellyfish Demo (Just, wow).

  • Flying Macaroni (Now that's a tasty particle demo, but heavy on resources).

  • UltraNoir (A mashup of WebGl graphics and Twitter hashtag search).

Learning WebGl is the correct tool for flashy webpages, but as I've demonstrated above it's easy enough to create a simple animation using Illustrator (and many other tools) to create a simple design. It a matter of how much time you want to invest and the results you hope to achieve.

Answer 3

If you want animated backgrounds which is vector form there are many aspects to do this but according to your after effect point, there are many uses of it.

If you thinking about after effects then its already good cuz of some core feature of After Effects like Motion Blur and Easy Ease will let you make animations flawless and natural. You can watch some examples here.

The good thing is that you don't need to be a pro to create some natural motion graphics. So as per my suggestion I would recommend you to go with After Effects For now!