ADOBE GIFS MOVIE
ADOBE GIFS DOWNLOAD

animation1.png, animation2.png and so on, Photoshop is clever enough to see there is a rolling sequence of numbered files and then reassembles the animation based on the exported 150 files. Unfortunately After Effects doesn’t export directly to GIF so the work around is to create sequenced png files for importing in to Adobe Photoshop e.g.

Now that your animation is complete, its 10 seconds long 15fps we need to export all the frames to create our animated gif, (thats 150 separate files). There is no hard rule here as all animations are different but we tend to keep below 10 seconds.

ADOBE GIFS DOWNLOAD

Length of animation is a big factor as if it too short the animation will look very repetitive, too long and the file size will be huge and email download times will increase. Some technical considerations whilst creating animation is the FPS (Frames Per Second), smoother animation can run 24fps but will create larger files but 15fps will keep the file size down while retaining a level of smooth movement. The properties are then told to rotate the map around the sphere from 0 through to 359 degrees this is important as setting it to 360 will create a double frame and would look like the world paused for a frame. If the animation is to loop we need to consider how the end frame can tie in with the start frame as the objects will have a nasty position jump if not executed correctly, an example is the effect we have used in our header animations which is a rotating world, this is basically a flat map wrapped around a sphere. We can also smooth out the start and end movement of any object on the stage, this is called ease and can be used effectively if the object needs to have a latency feel like a ball bouncing.

ADOBE GIFS MOVIE

One way to explain After Effects is that you are the director and you have a cast which are the illustrator objects, you then want to create a movie by telling your cast where to be and where to go during the movie timeline, the start and end points are called keyframes and the journey between the keyframes are called tweens. Some of the basic options that we can change on our objects are the opacity, size, rotation and position.

Once the header graphic is designed all objects that need to be animated should be placed on separate layers for importing in to Adobe After Effects.Īfter Effects is a timeline based animation tool that allows us to manipulate the objects that we have created in our Illustrator file. GIF optimisation can create some real nasty colour decisions if not considered upfront. Some considerations whilst designing is to be clear on the colours we use as an animated gif will only hold 256 colours, this isn’t a lot and will only really work well with flat colour and not photos which could contain over 300,000. The benefits of Illustrator is that we can resize, colour, manipulate and retain the objects clarity throughout the design journey. The start of ‘our’ process for creating complex animations is to use Adobe Illustrator, this allows us to create any object at any size which is NOT pixel based. So the process is first ensuring that your design idea (header graphic) can work as an animated loop and be also rendered as a flat graphic, the issue is that not all email clients render animated gifs and can be flattened through the email collection process by servers.

Adobe gifs