2

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 ?

  • 3
    Well... There are many unknowns here, but the first thing that caught my eye was: "high quality animated backgrounds... gif"...not really possible unless the bg style fits within the limits of that, but I doubt it would. You have to be pretty clever if you want anything better than what existed in late 90's. A video or a canvas animation would likely be better. – Joonas Mar 27 at 7:05
  • Animation takes a long time to do. Period. When the uni I am in teaches animation for those who want to take it as a side track. It takes Students 3 months to realize that the course is indeed 9 months long, and indeed you are expected to be able to put in 15 hours every week for 9 months or your 2-4 minute animation at the end of the course does not get done. – joojaa Mar 27 at 17:13
  • You should post an example of your pattern/elements/particles. People are guessing wildly what you're actually trying to achieve. Vector-based or pixel-based, tiled, or full screen, looped or coded. There are so many options... Also checkout codepen.io and search for #particles... eg. codepen.io/eltonkamami/pen/ECrKd – AAGD Mar 30 at 18:22
2

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 on 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 animating 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 on 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 have random stuff flying around. You normally will use Mp4 video and paste it as a background using again... a 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 gif... you can use Blender (blender.org) which is free and assigning emission materials and turning off shadows, to have a flat look.

enter image description here

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.

  • This answer is beautiful. Thanks ! – Curnelious Mar 30 at 5:11
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.

Plasma Ball

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

Plasma Planet

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:

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.

1

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!

  • 1
    Motion blur is not a good idea for an animated gif. – Rafael Mar 27 at 16:59
  • 1
    Thanks For Editing :) And We Got another solutions too .it might help him for sure – Design Phoenix Mar 28 at 3:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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