Hot answers tagged

14

A lot of this answer is also posted in this related question on how to animate illustrations for the web. Avoid SMIL animations Sara Soueidan, probably the best animator of SVGs on the web, wrote "I know I wrote the guide to SMIL animations but, seeing their future, I don’t personally use them anymore." You shouldn't either. SMIL animations don't work ...


9

If you are targeting free, possibly GIMP and Inkscape will do. Other free/open source wares like Synfig Studio, a 2D animation software and Blender, for 2and3D are worth a short. But since you are talking about working from MS Paint there may be a steep learning curve for you on the latter. But if you really wish for serious animation, you have to put your ...


6

Animation is not terribly hard, per se. It is just that doing animation is time consuming and requires some practice. The reason why you do not see very many people around you doing animation is in the tediousness. So unless you have a burning passion in telling the kinds of micro stories that animation requires, then most likely even a few minute long ...


6

Something to consider is traditional art tools. They are really cheap, and there are many high-quality ways to digitize your work later. You don’t have to create the art digitally to make digital art when we have really high-quality cameras and scanners today, which you can rent or borrow if on a tight budget, because you only need them when a whole notebook ...


5

I'm guessing this is the case actually, no, that's not the case. Animated GIFs are optimized in exactly this way...each frame only contains the parts of the image that actually changed from the previous frame. Wikipedia doesn't go deep into detail, but does mention it here: Some economy of data is possible where a frame need only rewrite a ...


5

I am going to concur with the, use traditional media eg. pen and paper. Sure its not software, but for drawing comics it is invaluable. You then move over and either ink in real life or ink digitally, and scan your work. If you do not have a scanner use a camera to capture the image but a scanner is super cheap these days. But if you are after software for ...


4

You can create animations in illustrator. Its a bit slow, and the tools aren't really meant for that (but nothing a few scripts can not fix), Here is an example of something i did as test a few weeks ago, it took about 15-20 minutes to make. Image 1: A quick thing I made for fun when I drew a picture for a post on engineering.SE Here us the process I ...


4

You probably mean an animated GIF, is that correct? Because you can simply open a single layer GIF file just like any other. For that matter, you can simply drop an animated GIF file on Photoshop and it will open all the layers. You can do the edits you like and then export it as a new animated GIF file. I hope this answers your question.


3

I think it conveys an active brain but could be a little better I think. Things I would try out to see how it looks: Making the white dots move quicker and having more of them Add some scaling of the whole brain in a pulsing action Different patterns of animating Edit after second demo posted: Much better! It looks a little jumpy though, you might ...


3

An animated gif is a sequence of images (in your example, 100 images), and is technically possible - but obviously not suggested - open the file with the GIMP and edit each layer. As you said, there are a lot of simple solutions for images with an alpha background (perhaps the simpler way is described here), but replacing a color is a bit difficult. There ...


3

I hope I'm understanding your question correctly. Here's a video of what I would do. https://www.dropbox.com/sc/quc1bgda0x8mh72/AABuk811PlV7OX3DItcXwFuxa Create a shape that simulates material drooping over the ball using the pen tool: Click on the top edge of the blanket shape and pull a handle out horizontally to the right click on a point halfway up ...


3

GIMP is free and has a lot of features like photoshop: http://www.gimp.org/ I own photoshop and corel draw, and I still use GIMP for some features. I also keep GIMP on a thumb drive as a portable install, and I can use it wherever I plug in. Here's the portable install of GIMP that you can put on a thumb drive: ...


3

If you want a simple way to get you started with such animations look at Scratch. From the Scratch 2 beginners' guide "By the time we make our cat dance for the first time, we'll forget all about the academic research and theories behind Scratch. Instead, we'll focus on having fun and creating the next project."


2

Yes, GIF files can be optimized in that way. This reduces the size of the individual frames, and thus the overall file size. Your image manipulation application might offer this; for example the Animation Optimize filters for GIMP do that: http://docs.gimp.org/2.8/en/plug-in-optimize.html


2

The whole idea behind Cumulative (Combine) is to cut down the size of the file by eliminating the parts that don't change and keeping the bits that do. If you want to go the Replace route (and I can't imagine why, but okay), make a copy of the first layer and merge the copy with the next layer up. Then make a copy of the new layer and merge that with the ...


2

I would not consider that motion graphics, but 2D character animation. Where to begin is not a clear question because we don't know where you currently are. Drawing Do you know how to draw at all? (Pencil and paper) Do you know how to draw on a computer? (Paint, yes... paint or something similar) Do you know how to make a character in vectors? (Corel, ...


2

Essentially what you do is grab a screen video of the work, then convert those video frames to a gif image. As far as I'm aware, there's no "automatic" gif creation software for recording screen movies. Everything generates a video file. There are several apps which can use that video file to generate a gif though. This meta question may be relevant: How ...


2

Here are a few simple things you can do while in Illustrator to keep file size low: Merging as many shapes together as possible. Expanding paths if you must use a path instead of a shape. Reducing decimals places to 1. This is found in the advanced options in Illustrator when saving the image as an SVG. Don't preserve AI editing capabilities either. Avoid ...


2

I think the only way to get the spinner (Image A) to spin at the center is make the spinner a square. You have the artboard a square but when you move the PNG, it does not move based on the artboard but on the center of the spinner. You will have to move one of the points to fit the edge of the artboard. For this, I made the right part fit to the bottom ...


2

To find the right tool panel in Photoshop: For Photoshop CS5 and lower, access the animation window by opening “Window” + “Animation.” Likewise, click “Window” + “Timeline” in Photoshop CS6 and Photoshop CC to access the Timeline window. For Photoshop CC, click the drop-down menu in the middle of the Timeline window and select “Create Frame Animation.” ...


2

My opinion is the second image works best. Definitely conveys an active brain. In terms of "brain", I kind of feel the overall image is too tall. I'd probably still get "brain" from it if you never posted that's what it was. But it is closer to a pecan or walnut shape. The brain is more of round shape, as opposed to oblong. Shorten it so it's square, or ...


2

With illustrator you can draw the lines and then export the svg code to your website To make an effect like this: http://codepen.io/chriscoyier/pen/bGyoz You can learn more about svg animation here https://css-tricks.com/svg-line-animation-works/


2

One idea is to start fading the next layer in immediately, then it would not jerk. Im not sure this is better though. Or you can fade them in at any later point. Experiment. Another idea, sprinkle the next layer, so the triangles keep popping up at random times. This saves you from the (possibly) extra shades that are needed. It may also look better. ...


2

I second everything in HandsomePhil's answer and would add: Ungroup items if you won't need to reference the groups when working with your SVG. This will eliminate extra <g> tags. Limit the number of colors. Fit the artboard to artwork bounds (Object > Artboards > Fit to Artwork Bounds in CS5).


2

You can use PNGs or SVGs (which both support alpha transparency) and animate it as a CSS sprite animation. Here's one example.


2

Have you tried the Bodymovin plugin? It's a hacky little extension of After Effects that allows you to export any composition you want to SVG. Works for us!


2

This answer from the ImageMagick forum solved the problem of combining files into an animation convert 'image-%d.png[0-20]' output.gif


2

You should probably do your Compositing in a Compositing application. If you have a CC Subscription then I'd suggest using Premiere Pro for this step. If you're working in either an older version of Photoshop or just bought a PS only license then there are alternatives including the now free DaVinci Fusion which is actually more powerful than Premiere. ...


2

This is real easy in gimp. You unoptimize the gif to reveal all pixel data in layers (filters/animation/unoptimize). Delete the layers, 2 first in your case, then optimize it again (filters/animation/optimize for gif) Export as gif, tick the animation box.


2

You can create a shape tween to transform the frames by adding interpolated results in between. Read this help page on shape tweening. However, this only really works out in cases where you planned  to do the tween beforehand*. You can try a blind shape tween but the results are going to be hit or miss. There is no guarantee that it will work out ...



Only top voted, non community-wiki answers of a minimum length are eligible