How to create motion animation in Photoshop?

In this lesson we will learn create simple motion animation object in Photoshop.

Let's create a new 200 x 200 px document with a transparent background. In order to create a new document, select the menu items "File" - "New", set its width and height, and a transparent background. On the toolbar, select the “Brush” tool, set its main diameter to 15 pixels and any color. Now, using this tool, let's draw a trajectory along which our object will move.

Then let's create a new layer.

Using the Brush tool, draw an insect in the same way, reducing the brush size a bit and changing its color.

Now you should change the position of the insect so that it matches the direction of its movement. To do this, select the menu items "Edit" - "Transform" - "Rotate".

Create a duplicate of the insect layer. To do this, right-click on the layer and select "Duplicate Layer". Give the resulting layer an arbitrary name. Next, we will slightly change the position of the insect by again applying “Transform” - “Rotate” to the resulting layer.

Now we will repeat the following steps: creating a duplicate of the previous layer and changing the position of our insect so that it "moves" forward along its path. We will repeat these actions so many times until the entire trajectory of movement is filled.

When the entire trajectory is "filled", let's move on to creating the animation. To do this, select "Window" - "Animation".

The Animation window that appears currently contains one frame.

Let's make all layers, except for the layer with the trajectory and the layer with the insect, which is in the initial position, invisible. In order to make a layer visible or invisible, you need to click on the "eye" in front of the layer in the layers palette. By default, all layers are visible.

Next, when creating each new animation frame, you need to make a new layer visible, after turning off the visibility of the previous one. These actions should be performed until the entire path has been completed.

Now select all available frames by holding down the "Ctrl" key first. Set the delay time for each frame to 0.2 seconds and make the path layer invisible.

The animation is ready. Now let's save the resulting animated image. To do this, select the menu items "File" - "Save for web" and give the file any name.

Informatics lesson

The date: 03/02/2017

Subject: " Motion animation »

Class: 9 "A"

Lesson type: study and primary consolidation of new knowledge

Lesson Objectives:

Educational:

formation of skills to create animation of movement along the trajectory;

Educational:

to cultivate attentiveness, interest in independent work, creativity, responsibility for the safety of school property, in particular, a computer class, responsibility and exactingness to oneself, diligence, discipline.

Developing:

development of cognitive interest, logical and algorithmic thinking.

Software and methodological support of the lesson: editor Flash, educational allowance “Informatics. Grade 9, § 16

Lesson structure:

Organizational moment (2 min)

Checking homework (5 min).

Assimilation of new knowledge and methods of action (up to 15 minutes)

Physical education break (2 min)

(up to 16 min)

Homework (1 min)

Summing up the lesson (3 min)

Reflection stage (1 min)

During the classes .

Organizing time:

Hello! Sit down. Who is absent today?

Today in the lesson we will continue studying the graphics editor Macromedia Flash. Let's learn motion animation.

Checking homework

And first of all, we will remember and refresh our memory of past lessons.

What is frame-by-frame animation?

(A frame-by-frame animation is an animation composed entirely of keyframes.)

What are the advantages and disadvantages of frame-by-frame animation?

(Disadvantages: Frame-by-frame animation is difficult to modify. You have to modify all the frames.

Frame-by-frame animation takes up quite a lot of space, since you have to store information about each frame.Advantages: smooth transitions from frame to frame)

How to create a key frame? (F6)

How to add an object to the library? (F8)

Explanation of new material.

Motion animation is produced by automatic generation (autocompletion) of intermediate frames. In this case, only the first and last frames are key, which contain the initial and final phases of the animation. Intermediate frames are created by repositioning and transforming symbol instances. Genethe radio of intermediate phases is provided by the toolMotionTween(movement due to changing intermediate frames).

To insert an intermediate frame, pressF5

To delete the intermediate frame, pressShift+ F5

N= f* t

N- required number of frames

Demonstration of the implementation of examples 1-4.

Example 1 . Create an animation of the movement of the ball against the background of trees (Fig. 3.39).

On frame 1 of this layer, draw a ball with a radial gradient fill. Let's convert it to a symbol of the graph type (Graphic), giving the name "ball"

The created symbol will go to the library (called by the Ctrl + L keys), and on the “ball” layer, now there is an instance of it.

Let's place an instance of the balloon symbol on the left in front of the trees.

Select the 12th frame in both layers on the timeline and convert it to a key one by pressing the F6 key. All frames will be filled with content that duplicates the keyframes of their layer (as indicated by the gray coloring of these frames on the timeline).

In fact, the images are only in keyframes 1 and 12, and intermediate frames 2-11 contain references to frame 1. Therefore, the Flash movie (.swf file) is very small.

We leave the frames of the "forest" layer unchanged, since the background is still.

In the 12th frame of the “ball” layer, move the ball to its final position, reducing its size using the transform tool.

Let's autocomplete intermediate frames. To do this, select the first or any intermediate frame of this layer (for example, frame 7). Using the menu Insert -› Create animation of the movement of the right mouse button or the Properties panel, we will generate intermediate frames. Lilac coloring and an arrow from the 1st frame to the 12th indicate that intermediate frames have been generated (Fig. 3.41). (In case of an error, the arrow is drawn with a dotted line.)

Let's view the sequence of motion phases by moving the frame pointer along the time scale.

It is convenient to observe several phases of animation at the same time in the Onion Skin mode, which is activated by the buttons on the bottom frame of the timeline. In this mode, the contours of objects in neighboring frames or the trail of a moving image are displayed (Fig. 3.42).

Let's test the animation.

Motion tweening is only applicable to library instances (symbols) or grouped objects.

Example 2 Increase the duration of the animation created in example 1 to 3 s. Explore the impact of frame count and frame rate on animation duration and fluidity.

Let's increase the number of frames to N = 12 - 3 = 36 by inserting intermediate frames with the F5 key or by dragging the selected end keyframes with the left mouse button pressed. Let's test the animation. Its duration is 3 s.

In the Properties panel, increase the frame rate to 30 frames per second. Let's test the animation. Its duration became 36: 30: 1.2 s.

Let's restore the frequency of 12 frames per second.

Motion animation consisting of several stages is implemented by setting key frames at the beginning and end of these stages and by correcting the properties of objects (their position, size, color, transparency) in these frames. The change in movement speed is set in the Properties panel with the Ease parameter. By default, the movement is uniform (parameter=0), when setpositive movement

slow, negative - accelerated.

Example 3 Edit the created animation so that for 1.5 seconds the ball moves with deceleration to the right and decreases, stops, and then

1.5 s moved with acceleration to the left and increased.

Select the 18th frame of the "ball" layer and convert it into a key frame.

Set the ball to the far right position and scale it down with the Transform tool.

Select the last 36th frame and set the ball to the leftmost position. Let's resize it.

Let's set the Ease parameter to 80 at the first stage, and -80 at the second.

Let's test the animation.

Example 4 Create Animation: The fan propeller makes 1 revolution in 1 second.

(Fig. 3.43, a).

Using the selection tools, transform it into a propeller (Fig. 3.43, 6) and turn it into a symbol of the Graph type.

The center of rotation of the resulting object must match the center of the propeller. Correct the position if necessary.

center with the Transformation tool (Fig. 3.43, c).

Let's turn the 12th frame into a key one.

Let's auto-complete intermediate frames by executing the command Insert -› Create motion tween.

Select any intermediate frame and on the Properties panel set: (CW rotation), 1 rotation (Fig. 3.44).

View the sequence of phases in the onion skinning mode

(Fig. 3.45).

Let's test the animation.

4. Physical education

Eyeball movements: right-up; left-up, right-down, left-down. Repeat 3.4 times.
-Close your eyes, rest 10-15 seconds.

5. Consolidation of the studied material in practice

Doing examples 1-4 on your own

6. Homework:

Study the material § 16

7. Summing up:

Answers to students' questions (if any).

The bell rings. The lesson is over. Thanks to all. You can be free.

Reflection.

Today I learned something new by _______________ %

Understood this topic by ____________%

Student abstract

Motion animation 02.03.2017

Motion animation is a type of automatic animation performed by autofilling intermediate frames.

F5- inserting an intermediate frame

Shift+ F5- remove intermediate frame

N= f* t

N- required number of frames

f-frame rate (12 by default);

t - animation duration (in seconds);

Chalkboard decoration

N= f* t

F5-

Shift+ F5 -

Hello dear readers. In his article I talked about the use of speed lines, with which you can create the illusion of an object moving with acceleration. Also in the article a technique was shown using standard animation and gradient fill during the appearance of the object. If you don't remember or haven't read these articles, I advise you to read them. Today I want to continue the theme of motion animation in Adobe Flash and show not the linear movement of objects, as it was before, but the movement along a trajectory.

First, I will demonstrate how this technique works with a simple example.

Create a new document of size 600 by 200 pixels. name it First_animate. The background color is blue or whatever. For those who don't remember, you first need to create a new Action Script 3.0 document. (File - New Ctrl + N). And then in the properties panel (Ctrl+F3) set the working window size and background color.

Rename the first layer to " An object". Create an oval on it ( O). Without deselecting the object. press the key F8 and assign it a symbol. name object1.

Create a second layer above the " An object", name it " Trajectory". On this layer, draw the trajectory of the ball with a pencil.

Right click on the layer " Trajectory” and select “ guide". A hammer icon will appear on the left. Now pull the layer "An object" under the layer Trajectory“so you link them to each other.

Now back to the workspace. Place our object at the beginning of the path. Create keyframes for the layer "An object" and layer "Trajectory" at frame 30. Place the ball at the end of the path. (Demo includes wireframe layer view "An object").

Now right click on the first frame of the layer " An object” and select “ Create a classic tween". After that, we can test our animation ( ctrl+enter).

Now, let's see what can be done with this knowledge. Let me give you another simple example. Suppose. that we need to draw a kite. that flies across the sky.

Let's create a new document 600 by 200 px. Fill it with a gradient from blue to yellow. To do this, we will create a layer at the very beginning, which we will call " Background“, draw a rectangle in the entire size of the stage (that is, 600 by 200 pixels) and fill it with a gradient. How to work with a gradient, I already wrote in an article.

Click "Insert - Create Symbol (ctrl + F8)". Set a name kite. Draw a kite. This is not difficult to do, it looks like a rhombus.

To make our kite look realistic. Let's define its movement in the symbol itself kite. This will be a swaying up and down snake and developing ribbons. Wiggle will do at the expense, developing ribbons at the expense. Let's tackle the ribbons first. Their animation will be similar to the contour animation of the shape (by the way, the ribbons are drawn with the tool Brush and are suitable for this manipulation), which I wrote about in the article

We will take such a cat as a character. He will follow the appearance of the mouse in the frame, and wag his tail.

The character consists of the following objects located on different layers:

The animation of the eyes for him is already ready in a separate symbol. Now we are interested in tail animation. So we can safely extend the animation on them to the required number of frames, for example, 20 ( use f5) and block the layers we don't need so they don't get in the way.

Now the tail. On the first frame we have the first position of the tail, at 10 we will make the second position. I just flipped the tail from left to right - Modify - Transform - Flip Left to Right.

On the "Tail" layer at frame 5, create an empty keyframe. To do this, click on it with the left mouse button and press F6. Then click Delete to delete all content. Here we will have speed lines. For convenience, enable the " Multilayer structure” or as it is called “onion peel” in another way, adjust its range between the two states of our tail.

On the fifth frame with a brush, draw lines of speed, while keeping in mind that they will be more realistic in the color of the object itself, well, we have it black, you can add a little gray for a change. Make the lines so that they do not go beyond the boundaries of the object.

Now we need to make it more realistic. To do this, we will first set a small shape animation for the tail. Make frame 3 key, change the shape of the cat's tail and tilt it slightly to the right. Then right click on the first frame and add form animation.

Now we will do the same for the second tail state. On frame 13 create a keyframe (F6). Go to frame 10, change the tail a bit, and tilt it to the left. Then for frame 10 create form animation.

Now let's edit the frames a bit. Let's remove the extra ones. To make movement more natural. And repeat the frames in reverse order.

This is the most comprehensive overview of all aspects of the concept Animation with the best examples according to the editors.

Invest 15 minutes of your time into new knowledge inspired by industry trends.

More examples of modern animation are waiting for you below...

Types of animation

Since the advent of simple animation, a wide variety of looks and styles have been invented. Consider 5 main types :

• Traditional animation;
• 2D vector animation;
• 3D computer animation;
• Motion graphics;
• Puppet animation;

Traditional Animation (2D, Cel, Hand Drawn)

Traditional animation, sometimes called cel animation, is one of the older forms of animation. In it:

• the animator draws each frame to create a motion sequence;
• successive drawings, rapidly exposed one after the other, create the illusion of movement.

The simplest example of such an animation is old Disney cartoons.

Cartoon Mowgli

How is traditional animation created?

• the animator prepares the working field: he fixes a transparent sheet of paper on a special illuminated screen;
• a drawing is applied to a sheet of paper with a colored pencil;
• The drawing should be rough and approximate. It is done this way to see how many frames need to be created for the ideal movement of the character;
• once the cleaning and intermediate drawings are complete, production moves on to filming each individual frame.

Modern animators may refuse to draw characters and frames by hand. Instead, they use computers, tablets, special pens.

Examples of modern traditional animation

Where to begin?

You can start in the profession by studying the basic

The advantage of the lessons is a consistent study of the process of creating animation according to the principle - "from simple to complex".

Also, to complete the first steps of creating animation, you need to master such basic programs as:

Photoshop is often overlooked when considering animation software, and its capabilities are perfectly adapted to frame-by-frame drawing in any style. Photoshop's timeline functionality allows you to animate by drawing frame by frame using bow skinning.

• The average salary of an animator in the West is $4250/month;
• In our area - very differently (in the studio, freelance, remote - from $400 to $3500 per month).

2D vector animation

2D animation is a term used when referring to traditional hand-drawn animation. It can also refer to computer vector animations using traditional .

Principle 2D animation

To create vector animations, the same methods are used as for traditional ones.

This flexibility allows even a novice to create their first passable video.

How to learn?

While traditional animation requires you to be a good artist, computer animation is not. 3D animation is more like a constructor than a drawing.

3D animation technologies have a lot in common with stop motion, as they correspond to the frame approach. But, in 3D, the implementation of tasks is more manageable, since it is in the digital field.

3D model

Instead of drawing a character or building one out of clay in 3D animation, the object is created digitally. Later they are supplied with a "skeleton", which allows you to move the models.

Animation is created by building models on certain key frames, and then the computer calculates and interpolates between these frames to create movement.

See below a visual example of the process of creating a 3D model in Blender.

Examples of modern 3D animation

Nike Air Max

Wonder Woman - Prologue | Making of

3D animator profession: where to start

The profession is highly competitive as this animation is mostly for commercial purposes.

Where can you work as a motion designer:

• In the studios
• Freelancing
• Sell ​​Templates
• Create learning products

The average salary of a motion designer in the West reaches $5000/month, in our case the salary of a specialist starts from $700/month.

Stop motion (Puppet animation)

stop motion- this is the object stopping after the captured frame and its sequential movement to capture a new photo and a new movement. When you play back the photos taken one by one, an illusion of movement is created. So it turns out stop motion.

This technique is similar to traditional animation, but instead of drawings, the animator uses real materials.

I love all forms of animation, but there's something unique and special about stop motion: it's more real. But I think it's kind of a lonely and dark thing too.

Tim Burton

Stop-Motion animation uses objects photographed in sequence to create the illusion of motion.

Stop Motion Animation Example

The process of creating a stop motion animation is lengthy, because each object must be carefully moved millimeter by millimeter. Each captured frame is simply obliged to create a smooth sequence of movements of the object.

Examples of modern puppet animation

The profession of a puppet animator: where to start, how much he earns

It is necessary to start moving into the depths of the profession of a stop-motion designer by mastering Dragonframe and iStopMotion

The profession of a stop-motion designer in the labor market has gradually come to life. Stop motion today is an inexpensive method in which it is easy to show good artistic taste and patience skills. Therefore, designers earn good money:

• average earnings in the West - $ 3864 / month;
• with us - from $ 1000 / month.

Animation types

Consider what types of animation exist.

GIF animation

GIF (with file extension, .gif) is an image file format that is animated by combining several other images or frames into one.

GIF example. (converted to mp4 for smaller size)

Unlike the JPEG (.jpg) format, GIFs generally use a compression algorithm called LZW encoding that does not degrade the image quality and makes it easy to store the file in bytes.

You can read more about what a GIF is on Wikipedia.

GIF animation examples

Examples for every taste are on the portal gifphy.com

How to make a GIF yourself?

• Earlier we already wrote about the fastest.
• Here is another useful one tutorial on creating GIFs in Adobe After Effects.

cinematography

Also check out the opinion Can anime go mainstream?(in English).

Examples of Japanese animation

How is anime created?

The process of creating an anime consists of several stages:

• search for animation and character ideas;
• inventing a concept (characters, the main storyline are being thought out, some first sketches are being made);
• writing a detailed script;
• drawing characters and backgrounds;
• sample storyboard;
• sketches or sketches are digitized.

12 Animation Principles

1. Compression and decompression

According to this principle, animation objects can be compressed or stretched to convey the speed, momentum, weight, and mass of the object.

This technique can be used to indicate the bouncing or hardness of an object (for example, to show which ball in an animated video is filled with water, and which is just a bowling ball). Also, artists using this principle convey the facial expressions and emotions of the character.

Important: The size of the object should not change depending on whether it is flattened or stretched.

2. Prepare for action

It consists in preparing the viewer for any action of the animation character.

For example, this technique is used to show that the character is preparing to jump. In this case, the preparation will consist in the fact that the character will sit down, gather his strength and begin to straighten up until he is in the air, which will be a jump.

Important: without preparation for any action, all subsequent steps of the character will look unrealistic and implausible. The artist cannot miss this moment, because the viewer simply will not understand what the character wants to do in the next seconds, and watching such a video will simply be uninteresting.

Preparing for action It's a must for keeping your attention.

3. Staged

Target This principle is to reveal the creative intent of the author as accurately as possible.

In any animation, it is important to direct the viewer's eye to some moment or important nuance, character movement or event. Dramatization, as it were, draws attention to the most important thing.

Note that in this principle it is necessary to alternate close-ups with a distant background. A close-up usually shows the facial expressions of a character, and dynamic or static events of a multimedia clip take place in the background.

Important: in each scene and video as a whole, the action should be as clear as possible and be in focus. Otherwise, the viewer simply will not catch the essence of the author's idea.

4. Spontaneous action and from posture to posture

Principle spontaneous action consists in the fact that several drawings are created in turn without a specific plan of action and final.

Principle from pose to pose consists in the fact that the artist draws each final point of movement and only after that draws intermediate poses and movements.

Important: the principle from pose to pose saves the artist's time and effort, because, using it, he knows exactly what will happen on the screen and how it will end. There is no such bonus in spontaneous action - if the artist drew something incorrectly, he will have to redraw everything.

Spontaneous action is good at displaying fire, drops, clouds, smoke and dust, and it also perfectly conveys the aesthetics and unpredictability of natural phenomena.

5. Inertia and overlap

This principle is applied so that after the character stops, parts of his clothes, hair, arms or even legs continue to move by inertia. So the stop seems more natural and does not cause the viewer to cavil at the unnaturalness of the picture.

Inertia and overlap make movement, body and character animation more alive.

This group also includes such a principle as guy. Due to the pull, when the character's head is turned, his hair or cheeks (like a bulldog's) will slowly and springily move behind it.

6. Slow motion at the beginning and end

The principle is that all movements are performed slowly at the beginning, then they speed up and at the end, the actions slow down again. This is done in order to maximize the naturalness of the video and bring the drawn character closer to the real one.

Only robots move at the same speed, so the artist tries to draw all the movements of his characters in different amplitudes and at different speeds.

Important: deceleration is not used in all cases. For example, in order to show the movement of a bullet, slowing down is not necessary, but for the movement of a pistol during a shot, yes.

7. Arcs

Without taking into account the movement of the character along the arc, obvious errors appear and they become too mechanical.

Absolutely all character movements are performed on the principle of an arc, and not because they all have to be smooth, but because the arc can outline a much larger trajectory and give the character the opportunity to move as naturally as possible.

8. Expressive strokes

This principle is often confused with overlap, but this is wrong. Expressive touches are the features of the character's movements that give it color.

Expressive touches endow the character's movements with the character of the moment and mood. If the character is evil, then when he knocks on the door, his second hand will be clenched into a fist. Maybe this stroke is not so striking, but it perfectly conveys the real, real emotions of a person.

An artist who gives importance to such small details brings animation to life.

9. Frame rate

The overall nature of the animation depends on how many frames the artist has drawn between the main actions.

By changing the frame rate, the animator can tell as many as 10 stories. If there are many poses between the main frames and they are located close to each other, then the movements will be very slow, and if there are few frames and they are located at a great distance from each other, the movements will be very fast.

The standard frame rate for cinema is 24. Animation is also drawn in one, two or three frames.

Important: the more often frames change, there they will need more careful drawing.

10. Hyperbole

The principle is that almost every facial expression, facial expression and emotion must be made unique.

With the help of this principle, a sad emotion can be made even more sad, and a cheerful one can be made even more cheerful. Hyperbolization is based not on the distortion of emotions and facial expressions, but on giving even more persuasiveness in movements and facial expressions.

The principle of hyperbolization is always appropriate, because it makes each video more interesting, rich and complete.

It is difficult to determine the optimal degree of hyperbolization. Therefore, first you need to exaggerate the idea to the maximum, and then adapt it to the video.

11. Drawing

You need to draw according to this principle in such a way as to submit the drawing within the framework of three-dimensional space. By conveying the mass, volume and balance of the character.

If you draw a figure from all sides, then the animation process will be greatly simplified.

Important: When you're sketching a character, it's best to use standard geometric shapes like spheres, cubes, and cylinders, rather than squares and rectangles. And yet, carefully ensure that the drawn character does not turn out flat.

12. Charisma

The principle is that the drawn hero must be interesting and unusual, which means - to evoke emotions in the viewer, to catch and have a twist.

The beauty of a character is not necessarily charisma. This feature can be expressed in any detail, be enclosed in one character or in all the heroes of the video.

Important: you can achieve charisma of a character by diversifying the shape of the object, proportions, and also by emphasizing a characteristic detail. It must be unusual and stand out from the general picture of the character's character.

Trends (trends) in animation

Today, animation is reincarnated into the most diverse and exciting ways of telling a story and an idea. Due to the emergence of new advances in engineering and telecommunication technologies, there are regular new trends in animation.

• See.

Here are the most popular ones:

3D retro and vintage style

A style of 3D animation that is becoming popular again is retrofuturism. This allows for the fantasy aesthetic that people in the late 70s and early 80s thought the future might look like.

Technics: the use of lush lighting effects and pixelated digital elements serves to create the terrain and characters in a retro world.

High Contrast Cel Animation

It's an animation trend that's been on the rise for a few years now and is used by some of the top companies in the world including Nike, Nickelodeon, Disney, Cartoon Network and even for Winter X games.

Bright contrasting colors combined with an angular design are used to give the animation a simplistic, almost cel-like style.

Result- a funny sequence from which it is difficult to look away.

Some of the best examples come from Golden Wolf, an animation production company based in London.

Mix of 2D and 3D

A trend that started in recent years and continues to grow is creating animations that look like a combination of 2D and 3D.

You don't have to look far to find a tutorial that shows you how to end up with a flat 2D look using cel shader for 3D rendering.

By giving 3D objects a 2D look, animators can create expressive, illustrative elements that immediately grab the viewer's attention while providing clear and colorful information.

Supersurrealism

If there's one great animation trend that fully exploits the power of CGI images, it's the surrealist style.

The hyper-surreal animation effect is based on the combination of photorealistic elements with fantasy images to create dreamlike worlds and actions.

There's an example of animation such as "The Dreamer" by Roof Studio for Honda, which takes viewers on a whimsical journey as the realistic vehicle moves through the wilderness.

Dynamic Animation of Functions in Applications

Instead of using static images or all text, many apps in 2018 are using functional animations that hold the user's attention with a bright, interesting user interface.

This includes using animation to enhance navigation elements, validate user input, zoom in and out of content, and so on.

The resurgence of 2D animation in marketing

In the entertainment industry such as movies and video games, 2D animation almost disappeared when 3D came along. Since then, companies have felt that there is no better way to captivate audiences, players, and potential customers than through 3D animation, even if it takes more time and effort.