Tips & Tricks in Adobe Illustrator: Tricks in Illustrator. Creation features in the illustrator (in comparison with Adobe Flash). Creating Animations in Illustrator How to make GIF Animation in Illustrator

Adobe Illustrator and After Effects
Import and Simple Animation

Hello. Today, there is a simple animation in After Effects.

Resources: Adobe Illustrator CC
Adobe After Effects CC

Let's start learning from drawing in Illustrator.

Draw
1) Draw as a background with a yellow rectangle

Figure 1 - Rectangle

2) Draw a circle and a gradient hill
We will work a little over the circle:
- We remove the lower point on the contour, we get an arc;
- Let's spend a straight line by closing the bottom of the arc, we get a semicircle

Figure 2 - 1) Draw Circle; 2) gradient; 3) Delete Point

3) Draw a rectangle and make it a copy
- one gray rectangle;
- Another rectangle Dark gray
4) Draw a triangle from an asterisk by setting the number of rays - 3

Figure 3 - 1) RECT LIGHT; 2) RECT DARK; 3) Triangle

5) Draw a cat with PEN and simple figures

Figure 4 - 1) Head; 2) Neck; 3) BODY; 4) Leg; 5) Tail

And now very MAIN moment
I distribute the pictures on the layers (the fact that it will be animated - on a separate layer) like this:

Figure 5 - All Pics (Red Mark Important Layers)

Everything, now we save.
Let's see the preservation settings

Figure 6 - Save

And now the next stage. CloseAdobe Illustrator and open After Effects.

Import in After Effects
File - Import - File - Select our saved file Illustrator.
Select to import layers from Illustrator if you deliver Footage, we will get a picture with the combined layers, and we do not need it.

Figure 7 - Import AS COMPOSITION

All imported.
And now let's see what we have. Double-click According to the composition What would have been opened and we saw layers (if everyone did everything, there will be several layers). We get this, see drawing

Figure 8 - Open Composition

And now, for what we are here today - animation.

Animation B. After Effects.
Install the point of rotation from the arrows at the top of it using Pan Behind Tool ( fast key - y). Just take the point and move where it is required. As a result, it will look like this ..

Figure 9 - Pan Tool and Layers

Well, everything, now go to the layers for animation.
We will need a layer arrow and Head_cat.
Let's start with arrow.
We will open the list, find and click on the clock. So we set the first point on the zero second. Total animation will last 2 seconds.
So, these settings need to be done (we will put 3 points in total)

SECOND.	0	1	2
	+66	- 70	+66

That's how it will look like:

Figure 10 - Rotation Arrow

And now animated the head of the cat.
Open head_cat and find Position.
There will be 4 points.
There will be only the last coordinate not touching the rest.

SECOND.	0.1	0.17	1.12	2.0
Position	689.3	729.3	729.3	689.3

We look at the picture.

Figure 11 - Position Head

So, the principle of animation was such. The arrow swinging from side aside as soon as approaching the kitten, he pulls his head into himself, lingering in this position a bit, and then returns it to the place.

The final stage

PRODUCTION
It is necessary to create a finished product from your work.
Go to the menu - Add to Render Queue
The Render panel will open and select the output format to OUTPUT MODULE. I took * .mov

Figure 12 - Render

Click the Render button and get the result (just do not forget to specify the path).
That's all.

You have one or two icons that you would like to revive with the help of animation. What would you start? Suppose you have sVG files, Illustrator CC and After Effects CC programs, but the solution eludes you.

In this article, I am going to demonstrate how you can easily animate the SVG file, including the preparation of the SVG file in Illustrator and import in After Effects CC. I will also explain how to convert it to Shape Layers and add movements. And finally, let's talk about exporting and rendering.

The end result of the work.

Now let's go to the most interesting part - learn to revive images.

Preparing the SVG file in Illustrator

Let's start with the opening of your SVG file in Adobe Illustrator CC. I will animate a small car icon that is available for free on Week of Icons.

After opening the file, we need to unjust and divide all objects on the layers. You can do it manually or use Release to Layers (Sequence) To speed up the process. Before importing a file in After Effects, we need to save it in the format of the Illustrator file.

Unprove objects We can use Release to Layers (Sequence) so as not to spend precious time.

Import and file organization in After Effects CC

Now everything is ready for importing in After Effects CC. Let's use the key combination Ctrl + I (Windows)or Command + I. (Mac)to upload dialog box Import file.or go to File\u003e Import\u003e File ... There, select the Illustrator CC prepared file and press Import.A small dialog box should appear with the name of the selected file. Choose Composition from the drop-down list called Import Kind..

More fast way Importing a file - double click on the place of the column on the project panel.

In the Timeline Panel panel, we will see a new composition. Twice click on her. Now we have to see the Illustrator CC layers with orange icons to the left of the names.

Before proceeding with the case, we must transform all these layers in Shape Layers.. We need to highlight them all with Ctrl + A / COMMAND + Aor manually using SHIFT + LEFT MOUSE. After that, click right-click mouse on the layer and select Create\u003e Create Shapes From Vector Layer.

Now that new layers are highlighted, drag them to top Panels over layers of Illustrator CC, and then remove the layers of Illustrator CC so that they do not interfere.

Conversion of layers of Illustrator CC in Shape Layers in After Effects CC

Although this is not necessary, it is important that we give each layer the appropriate name and / or designated it with color. This will allow us to work more efficiently, as we will focus on keyframes. In the example below, the color of the inscriptions more or less correspond to the fill of the corresponding layers.

To label Shape Layers with the corresponding names, flowers, inscriptions and location is very practical.

Use the key combination to configure the settings Ctrl + K / Command + K or Composition\u003e Composition Settings ... From Composition Settings We need to choose width, height, frame rate and duration (Width, Height, Frame Rate, and Duration). For this project, I chose 60 frames per second so that the animation was smooth.

On the this moment It seems that everything is ready to work, but there is another thing to do. We need to group certain layers together so that their movements are synchronized with the main layer, which we can control. This method is called Parenting..

Use Pick Whip to assign a parent layer to several layers.

In our example, I prescribed less significant layers (subsidiaries), such as windshield, body parts, wood and ropes of the primary body layer (parent layer). This allowed me to control the position and rotation of the entire car (with the exception of the wheels) with the help of the parent layer.

Creating an animation

I wanted the car to hit the stone and hung a little in the air. I also wanted the tree to move up and down, and the trunk opened. I started with creating stone, machine and wheels. Then it's time to overcome the biggest obstacle - impose an action on the Christmas tree. Having finished it, I took up small details, such as the trunk and ropes.

Sketch with animation description

First of all, it was necessary to make an element or layer in the form of a stone, but instead of returning to Illustrator CC to add another layer, I simply used the Pen Tool tool in After Effects CC. This allowed me to quickly design a small stone.

Oh, powerful Pen Tool!

The trunk was a relatively simple task. I installed it from behind the car and made a reference point in the lower left top. Using Pick Whip, I appointed it to the parent body layer. The penultimate step was to give the effect of rotation, which in turn made the moment of bouncing the machine more realistic .Bodymovin in combination with the Lottie mobile library.

P.S. You can find my Illustrator CC and After Effects CC files.

Set of icons available for download for free on.

Today we do not quite ordinary lesson Adobe. Illustrator. Because this time we will not do a static picture, but the most real animation. Imagine, turns out to be with using Adobe. Illustrator You can also draw cartoons :)

And we will need nothing for this. The competent organization of the layers and the export of final work in the SWF format, where each layer is converted into the frame of the animation. In today's lesson, we draw an animation of the countdown in retro style. At the output, a flash movie with this is the very countdown.

The first thing to be done is to draw all the necessary items for future animation. To do this, in a separate document made two positions of the film film, the circle for reference, which is cut into separate sectors, texture and vertical scratch to add the effect of antiquity, as well as all the numbers and inscriptions.

When all parts of our cartoon are ready, you can start creating the animation itself. For convenience, it is better to do in a new document. At the same time, the layers will play the role of the animation frames. And in the very first layer just need to copy the frame of the film. Place it in the middle of the workspace.

Now create a second layer and copy a frame of film pictures into it, in which the holes around the edges are made with a shift. It also needs to be located in the center.

Of these two layers, you can already get the animation of the moving film. But later we will need a lot more layers. Therefore, highlight the first two layers, go to the panel options and make a copy of the layer.

Similarly, we need to accumulate 12 layers with frames of the film, asking her movement.

Now we have a whole bunch of layers and all of them are visible. In the sense that the upper layers are blocked by the lower, which is not entirely convenient for work. Therefore, you can turn off some layers by clicking on the icon with the eye to the left of the layer name. To turn off or turn on all the layers at once, keep it squeezed the alt keyWhen you click on the glazing icon. Including and turning off the layers, you can see exactly what is located in a certain frame of our future animation. And now, to add light jitter to the film moving, you need to put the received frames a little bit in different directions. To do this, turn on only the layer with which you are going to work at the moment, and then shift the frame on a pair of pixels to any side.

When you went over all the layers and added a small shift, you can start creating the animation of a moving circle. To do this, copy the circle consisting of sectors, from a document with a cartoon spare parts and put it on the first layer over the frame of the film.

If you remove the selection from the circle, it will look like a single integer. That is what we need.

But since it consists of separate sectors, you can, changing their color, very quickly and easily create animation. To do this, copy this circle in the second layer and make the first sector lighter. You remember that the film is trembling while driving, so it is not necessary to put the circle exactly in the center of the frame. Place it on the eye.

Similarly, you need to copy the circle to each next layer, while paint the brushing line to one sector more than the previous time. All together, these 12 layers form an animation of the movement of the film with a filling circle.

Next, you need to add texture into our layers. Turn on the first layer and copy the texture there from the source file with spare parts.

Then, in turn, turn on the following layers and copy the same texture there. So that she looked different on every frame, simply turn it on an angle of 90 degrees. As you already guessed, we need to add texture to all 12 frames.

If you already tired of coping, then I can deliver you - it remains very little. The most difficult already behind. It remains to add vertical scratches, and almost everything. To do this, again copy the original scratch and put it in an arbitrary place in several layers. In my case, scratches appear only in two layers.

Now that is ready the main cycle with the animation of the film, it remains to add numbers. Since it comes from 3 to 1 plus another word Go !!!, then we need even more layers. Not 12, but as much as 48. For this you need to make three more copies of ready-made layers with the animation of the film.

And then everything is simple. We turn on the very first layer and put three numbers there.

Then you need to copy this figure in the following layers until the animation of the circle is completed. When you reach the next copy of the layer, where the circle will be filled completely completely, you need to put two numbers two. Similarly, copy the number one to the desired layers. And when you get to the final layers, designed to inscribe Go !!!, just remove the circle before copying the inscription in the desired layer.

On this with the animation everything. The main thing here is not to get confused. You can give layers some convenient names, but I was somehow lazy :) And even when you finish work, be sure to turn back all the layers by clicking on the glazing icon.

In the window with export settings, be sure to install Export AS: AI Layers to SWF Frames. It is this option that turns the illustrator layers into the animation frames. Next, click the Advanced button.

Open additional settings. Here you need to set the frame rate of Frame Rate. I have 12 frames per second. A check mark Looping is responsible for cyclical animation. Thanks to her, the video will be played in a circle. And the Layer Order option: Bottom Up plays the illustrator layers from the bottom up in the panel. Just that we built our animation.

At the output we get a flash movie with our animation.

Now you see that the simple animation to do in Adobe Illustrator is not so difficult as it seems at first glance.

But to create long rollers or interactive applications, it is still better to use Adobe Flash. either other flash editors. For example, I did this cat in an old Macromedia Flash.who dug off at work.

Also lately Increasingly, HTML5 and CSS3 applies to create animation. This code is supported by modern browsers and does not require the use of a flash player.

Roman Aka Dacascas. Especially for blog

Subscribe to our newsletter so as not to miss anything new:

Flash file format (SWF) is based on vector graphics and is designed for scalable, compact graphics for the Internet. Since this file format is based on vector graphics, the object saves the image quality at any resolution and is ideal for creating animation frames. In Illustrator, you can create separate animation frames on the layers and then export the image layers into individual frames for use on the website. You can also determine symbols In the Illustrator file to reduce the size of the animation. When exporting, each character is defined in the SWF file only once.

Export Team (SWF)

Provides the greatest control over the animation and bit compression.

Provides more control over the mixture of SWF formats and bit in a fragmented layout. This command offers less image parameters than to "Export" (SWF), but uses the last used command parameters to "Export" (see).

When preparing an object to save in SWF format, remember the following recommendations.

Using the Device Central application, you can see how the Illustrator graphics object will look like in the application. Flash Player. On various pocket devices.

Insert graphic object Illustrator

Created by appendix Illustrator The graphics object can be quickly, simply and without difficulty copy and paste into the Flash application.

When inserting the Illustrator graphics object, the following attributes are saved to the Flash application.

Contours and figures

• Throtch thickness

  Definition of gradients

  Text (including OpenType fonts)

  Related Images

• Overlay modes

In addition, Illustrator and Flash support the following possibilities when inserting a graphical object.

When highlighting the Illustrator layers in the graphical object top level The entire insertion of them into the Flash application layers and their properties (visibility and blocking) are saved.

Illustrator color formats other than RGB (CMYK, grades and user formats) are converted by the Flash application to the RGB format. RGB colors are inserted in the usual way.

When importing or inserting a graphical object, the Illustrator can be saved using different parameters to save certain effects (for example, a shadow dropped by text) as Flash filters.

Flash keeps the Illustrator masks.

Exports of SWF files from the illustrator application

SWF files exported from the Illustrator application correspond to the quality and degree of compression of SWF files exported from the Flash application.

When exporting, you can select one of the numerous predetermined styles that provide optimal output, and specify the method of using multiple mounting areas, a method for converting characters, layers, text and masks. For example, you can specify the export of Illustrator characters in the form of rollers or graphic images, as well as the creation of SWF characters from the layers of Illustrator.

Import Illustrator files in the Flash application

To create a full layout in the illustrator application, and then import it into the Flash application in one step, you can save the graphical object in your own format Illustrator (AI) and import it with high accuracy in the Flash application using the file command\u003e "Import to Work Area "or" File "\u003e Import to Library.

If the Illustrator file contains several mounting areas, select the installation area for importing in the Import dialog box of the Flash program and specify the settings for each layer in this mounting area. All objects in the selected mounting area are imported into flash program as a single layer. When importing another mounting area from the same AI file, objects from this mounting area are imported into the Flash program as a new layer.

When importing an Illustrator graphics object in the form of AI files, EPS or PDF app Flash retains the same attributes as inserting graphic objects Illustrator. In addition, if the illustrator imported file contains layers, they can be imported in one of the following methods.

Convert Illustrator layers in Flash layers.

Convert Illustrator layers to Flash Frames.

Convert all layers of Illustrator to one Flash layer.

Recently, the SVG animation (Scalable Vector Graphics) graphics on sites and applications has become very popular. This is due to the fact that all new browsers Already support this format. Here is info for supporting SVG browsers.

This article discusses the simplest example Vector SVG Animations with Light JQuery Lazy Line Painter plugin.

Source code

To fulfill and complete understanding of this task, the basic knowledge of HTML, CSS, jQuery, but not necessarily if you just want to animate SVG) Let's go up!

And so the steps that we need to perform:

1. Create the right file structure
2. Download and connect plugin
3. Draw a cool contour picture in Adobe Illustrator
4. Convert our picture in Lazy Line Converter
5. Insert the resulting code in main.js
6. Add some CSS to taste

1. Create the correct file structure
With this, this will help the Initializr service where you need to select the parameters as in the picture below.

• Classic H5BP (HTML5 BOILER PLATE)
• No Template.
• Just Html5 Shiv.
• Minified
• Ie Casses.
• Chrome Frame.
• Then click Download IT!

2. Download and connect plugin

Since Initializr comes with the latest Jquery library, from the archive that we need to download from the Lazy Line Painter project repository, you need to transfer only 2 files to our project. The first is 'jQuery.LazylinePainter-1.1.min.js' (the plug-in version may differ) it is in the root of the resulting folder. The second is example / js / vendor / raphael-min.js.

These 2 files are placed in the JS folder. And connect them to our index.html in front of main.js as follows:

3. Draw a steep contour picture in Adobe Illustrator

1. We draw our contour picture in Illustrator (the easiest way to do with Pen Tool)
2. It is necessary that the contours of our drawing do not close TC for our effect. Beginning and end
3. There should be no fill
4. Maximum file size - 1000 × 1000 px, 40kb
5. Crop to Object Object\u003e Artboards\u003e Fit to Artboards Bounds
6. Save in SVG format (standard save settings are suitable)

For example, you can use the icons in the attachment.

4. Convert our picture in Lazy Line Converter
Just drag your icon in the window that in the figure below.
Thick, the color of the circuit and the animation speed can be changed in the code itself that will appear after conversion!

5. Insert the resulting code in Main.js
Now simply insert the received code in empty file main.js.
Parameters:
STROKEWIDTH - contour thickness
Strokecolor - contour color
You can also change the drawing speed of each vector by changing the values \u200b\u200bof the Duration parameter (default 600)

6. Add some CSS to taste
Remove from index.html paragraph

Hello WORLD! This is html5 boilerplate.

And instead of it insert the block in which our animation will occur

then add some CSS to the Main.css file for more enjoyable design:

Body (Background: # F3B71C;) #icons (Position: Fixed; Top: 50%; left: 50%; margin: -300px 0 0 -400px;)

save all files.
Now simply open index.html in a modern browser and enjoy the effect.

P.S. When starting on the local machine, the start of the animation starts for a few seconds is possible.