Create gif animation in Photoshop cs6. How to make gif animation in Photoshop. Animation from video

Create a new file with dimensions 700 x 300 px.

Open the window Timeline((Window - Timeline)).

Click on the button " Create Frame Animation»(Create frame animation).

Using tool () create 3 layer with text ("Animation", "this", "simple").

Use the Tool (Move Tool / V Key) to place the text as in the image below.

In the window Timeline(Timeline) select the first frame and press the button " Duplicates selected frames»(Create a copy of the selected frames).

We create 4 copies of the selected frames.

Selecting in the window Timeline(Timeline) second frame and leave visible only the layers " Animation" and " Background».

We choose fourth frame and leave visible in it all layers.

Let's set the repeat parameter for our animation. In the window menu Timeline(Timeline), change the repeat parameter from " Once" on the " Constantly"(Image below).

We can now use the trigger to play the animation.

Animation settings in "File - Save for Web" in Photoshop CC. Final result

Important note. If you need to quickly create simplest Animation of several frames in Photoshop, go to the lesson -.

I've been interested in time-lapse animation for quite some time, although I haven't learned much about it. All the books I started reading are quite long, difficult and dry.

Therefore, after I began to understand a little the technology of creating animations, I began to look for ways to bring them to life using Photoshop.

Many people advised me to switch to other programs (for example, TVP Animation Pro), but I, not wanting to adapt to the new interfaces of other programs, decided to do everything in Photoshop.

And I wrote this lesson specifically for those who did not understand the technology for creating frame-by-frame animations specifically in Photoshop. Who didn't want to dig a little and understand what's what.

I will cover two topics: short animations and long ones. Don't scroll through the type of animation you are not interested in: there may be information that will be useful to you for the type of animation you want.

Short animations- these are animated avatars, emoticons, etc.

Long animations- these are cartoons, videos, etc.

I will explain the theory first, and then we will create the animation in practice.

Important addition

Many people ask: "Why is my animation so jerky, is my character / object moving fast / slow?"
My answer is: your character / object is moving quickly because you drew few frames.

Your character / object is moving slowly because you drew many frames.

Your character / object is twitching because you did not follow the previous movement and draw the next one, which is not consistent with the previous one.

Remember: in one second 24 frame!

Therefore, when you are going to create your animation, remember: 24 frame = 1 second, 24 frame = 1 second. Never forget this very important detail.

Short animations

I think you often come across animations on avatars, with animated emoticons.
Some emoticons are made in Flash'e, but I draw mine in Photoshop. You shouldn't think that making such short animations is easy. On the one hand - yes, they are small in size, but on the other - while you draw these 15 -30 frames, you will get lost (and imagine, if you want to create a three-minute clip, then you have to do 4320 frames!).

What should you remember and know?

Let's say you wanted to draw a girl with hair fluttering from the wind on your profile picture. Means:

Firstly, hair is not cardboard for you - under the influence of medium-strength wind, it will be shear waves.

Something like this is shown in the diagram:

Under the influence of a strong wind, the hair will be almost straight, but your character will have to close his eyes tightly and grab onto something so that he is not blown away, since in reality few people are able to endure such a wind. although this type of animation can be used when your character is riding a bike, for example.

Finally, a gentle breeze gently lifts and lowers the hair.

Light wind:

Average wind:

Strong wind:

All the same applies to fabric and clothing - they will behave in much the same way as hair.

Now, for example, you wanted to draw an animation with the movement of your character object. means:

Secondly, any action starts somewhere. Have you ever noticed that, for example, to get up from a chair, you first move it a little, and lean forward a little, and only then get up? or, that when you want to hit with the racket, you first retract it and turn your body with it, and only then do you hit?

A huge bunch of such examples can be cited, but it's better to look at:

In order not to get screwed up with these movements before actions(DPD), analyze and observe the movements of people or animals more often.

Small addition

In general, never forget physics. The weight of objects, the materials from which they are made (elasticity, softness, rigidity, etc.), all this is needed.

Understand that without this, your animation will be dead, terrible and ugly!

Better work on it and never rush.

Long animations

Oooh, this is where the fun begins!

How often have you, while watching cartoons or anime, admired animation and envied those who know how to make them? All these beautiful scenes, plastic movements, and more. others? I honestly admit - yes. Every time I watch something, I try to figure out how the animators worked with it? How did they create all this?

But, due to the fact that I do not know in which programs they work, I am trying to understand the whole process using the mechanisms of Photoshop.

And you know, I find the answers to all my questions!

But let's take everything in order.

The process of creating a long animation

1. Initially, we need an IDEA

For example, let's say you decided to make a small video in which several girls will dance.

If you are a seasoned animator, you can "make it dance" in your video from 3 and more girls.

But at the beginning of your journey as an animator, it is better to limit yourself to one or two.

2. Now you need to create a scene-by-scene storyboard (STB)

What is it, and what is it eaten with?

Imagine a movie. Now imagine the number of different views from different cameras. Close-up, landscape, camera following the character ...

Okay, when there aren't many of them. But when we make a whole clip there may be more of them 30 things!
Therefore, clever uncles and aunties animators use such a wonderful thing, similar to a lined book.

In it, they depict scenes.

Only some people draw one scene in each section of the table, then another, a third, etc., while others draw images in each section of the table after a few seconds (I apologize if I did not understand it clearly).

It is also very convenient what you can do on the side of the description, otherwise, it happens, you draw, then after a while you look, and you don’t understand - what did I depict here?

So we take a note of this storyboard by scenes and use these little books.
You don't even have to make a book, but just create large file in Photoshop and draw all the scenes there.

3. Now you need to come up with the background, the concept of the characters and the movement.

Draw the movements in the RPS booklet.

If you have more than one scene in a clip, then you will have to draw several different backgrounds. Draw them in separate files.
And remember one thing - the background doesn't come out of nothing. So if you want the camera to slide sideways, then the background should be there too. those. you will have to draw the background in length (or in width, and maybe in both) more.

Then you think through appearance your character and start creating animation.

From theory to practice

Let’s think from now on a little about the IDEA and, in general, over the item "The process of creating animation". What am I doing? To the fact that now you will need a guinea pig, which you will force to move. We will not make a clip in which 4320 frames. The best and easiest way to figure out how to create a frame-by-frame animation from 24 -72 -frame animation.

Well, let's get started!

1. Create a new document. For my animation, I took a small size - 400 x 500 px.

2. Now, if you do not have a window at the bottom left of the " Animation", Look up, open the tab" Window» - « Animation».*

* - The examples use the Russian version Photoshop CS2.

In the screenshot above, we see the animation window in which there is the first frame, below it is a small panel on which the buttons are located:

Always / Once- by choosing "Always" you will loop the animation. If you select Once, the animation will only play once. (Both animation options in my lesson are: looped - where the principle of DPD is shown, reproduced once - where the scene change is shown).

Select the first frame- returns us to the very beginning.

Selects the previous frame- we will not call Cap. (=

Plays animation / Stops animation- Play / Stop.

Selects the next frames- next frame. Your Cap!

Tweens animation frames- with this button we can add smooth transitions between two frames by adding new ones.

Duplicates selected frames- not quite the correct name ... It would be better "Adding a new frame".

Deletes selected frames- basket.

3. Now we can start drawing. for this, put the background you created earlier on Background(Background / Background).

4. Then create a new layer (Ctrl + Shift + Alt + N) and draw your character on it.

4. Now the hardest part begins: we need to draw the same character many times in a row in different poses.

Create a new frame, and ... There are two options:

A) Either you start re-drawing your character every time, or ..

B) Copy the previous layer and change it (finish painting, erase, and do not use transformation! You will rarely need such a tool, then I will write when).

Having trained in animation, you can painlessly use both options. (You can try each of them in a separate document).

Option A:

1. We have drawn our first frame.

2. To see how to change the next one, we reduce the opacity of the layer to about 30% and create a new layer on which we already draw a rabbit for the second frame.

3. Finish the second frame and turn off the visibility of the previous, first layer.

Option B:

1. Create a frame with the character and make this layer invisible.

2. Then duplicate it (Ctrl + J) by dragging the layer onto the Create New Layer button to the left of the basket.

3. Now we make the second layer visible and start modifying it.

Thus, by duplicating the previous layer, you create new frames and change them, and not the same one.

5. We sit, draw frames 10 -15 ...

6. And let's see what happened.

The result is a running rabbit.

And not a single part of it is copied: each frame is drawn anew.

See for yourself:

When creating an animation, keep in mind that it is quite difficult to switch between hundreds of layers, and therefore you should not postpone painting or changing something until later. Do it right away.

Almost the end

Above, I made a reservation about the tool ().
It should be used when, for example, you want to zoom out the camera, zoom in, rotate it, etc. (If you only need to move the background, use video editors, it will be easier for you). Do not use distortion, tilt, and other transformation tools unnecessarily.

And, after we saved our gif-animation as video file format .avi, for example, you can safely go to Windows Live Movie Studio.
There, do whatever your heart desires with your video.

And then you can upload your clip to youtube.com and enjoy the work done.

THANK YOU VERY MUCH for your attention, Lero-art was with you. Excuse me for the tongue-tied, strangeness of presentation and other flaws in the lesson, if any. All of them are due to the fact that thoughts are confused, and words do not add up to sentences ...

But I hope you learned something new and interesting for yourself!

Greetings friends! Sometimes I come across a question, is it possible to make animation in Photoshop? So, in this lesson I will show that it is possible, and that it is not at all difficult. After that, you will understand that it is not at all necessary to download and install programs for yourself if you suddenly need to make an animated banner or some other animation. And believe me, it's quite simple. As an example, let's make our own simple preloader or, as you indicate in the comments, a throbber. And so, get down to business!

Open Photoshop and create a 9x9 px file.

Zoom in on our small square to the maximum (key Z). There are several ways to enlarge. First, by right-clicking on the picture from the drop-down menu, select Fit on screen. Second, we just click several times until the image is enlarged to the maximum value, and the third, the simplest in my opinion, by clicking in the left upper corner canvas and holding left button mouse, drag it down and to the right until we cross our square.

Now the most important thing we need to create GIF animation is a workspace with the necessary tools. Go to the Window -> Workspace -> Video menu. It should look something like the screenshot, but there may be differences. We will be interested in the animation panel at the bottom.

Below, we can see our first selected animation frame.

Now draw with a pencil (B) in the lower left corner, let's say a 3x3 pixel square in orange.

Duplicate our layer (grab and drag our layer onto the new layer icon.

Turn off the backgrand layer (the eye icon), and on a new layer, move our square to the lower right corner. Fill the opened transparent canvas with white (G).

Duplicate the top layer again and move the square up to the right. Then another take with the square to the left upwards. It should look like this:

Next, let's move on to working with our animation panel. Click on the Duplicates selected frames icon (the icon looks like a new layer icon) 3 times to make a total of 4 frames. Click on the first frame to select it and leave only the bottom layer visible in the list of our layers. After that click on the second frame and leave the second layer from the bottom visible. Etc. The result is the following:

In principle, our animation is almost complete. By clicking on the Plays animation icon, you can see what we get. Now let's add a bit of smoothness through intermediate frames. To do this, select the first and second frames (holding down the Ctrl key) and click on the icon on which the balls -Tweens are drawn. Click OK.

Let's do the same with frames 2-3, 3-4, 4-1.

Now we select all our frames and on any frame choose the transition time between frames you like. Let's say 0.1 sec.

Check that your animation is looped:

That's all. It remains to save our banner in gif format, for this in Photoshop you need to go to the file menu and select the "Save for Web & Devices" menu item or, more conveniently, press the Ctrl + Shift + Alt + S key combination ... In the dialog box, select the Gif format. Here you can play with the settings that affect the quality and size of the received GIF file... After saving our Gif animation as a Gif file, enjoy our very own preloader! For example, you can end up with such beautiful Loading Preloaders:

You can view the Gif banner that we made in Photoshop nowadays with any program for viewing graphics, the most common of which are IrfanView, XNView, FastStone Image Viewer and many others.

I think now you understand that there is nothing difficult in creating Gif-animation in Photoshop, and you will start creating your own banners and other creative things, especially since animation frames can be with any effects thanks to Photoshop itself.

If you just need trobbers / snippers, then there are special java script libraries for generating them. A selection for creating a loading animation can be found in my article

Have you ever wondered how animated GIFs are created? The author of the tutorial invites you to master some of the secrets of animation in one night using this tutorial. You will also learn how to use the Timeline, which is available in Photoshop versions CS6. Now let's get started!

Lesson result.

Step 1

Create a new document ( Ctrl + N) with a file size of 800 x 500 pixels. Fill the background with any color you want. Now go to the menu Layers- Stylelayer- Overlaygradient(Layer> Layer Styles> Gradient Overlay). Apply the following settings: Style Radial(Radial), colors from black (# 000000) to blue (# 54799b), which will be used in the center.

Step 2

Create a new layer and name it Noise Layer... Select a tool Fill(Paint Bucket Tool) and fill the created layer with a dark color (# 231f20). Leave the layer active Noise Layer and go to the menu Filter - Noise - Add Noise(Filter> Noise> Add Noise). In the filter settings dialog, set the following values: the effect(Amount) 3%, distribution Uniform(Uniform) and click OK.

Step 3

Press the key combination (Ctrl +U) and in the correction settings dialog box that appears, enter the values Saturation(Saturation) 100%: Change this layer's blend mode to Soft light(Soft Light).

Translator's note: In order to achieve the same color as the author's in the screenshot, you can set the Hue value to - 140 when correcting the Hue / Saturation.

Step 4

Add any text you want. Here we will use the text of the 123RF website logo. In layer styles use Outline(Stroke). Select the stroke size values according to your preference.

Translator's note: On the author's screen, there is already rasterized text along with the Stroke style. To achieve the same result, after applying the stroke, remove the Fill (Fill) of the text layer to 0%, convert this layer to a Smart Object, and then rasterize it.

Step 5

In this step we are going to create a glowing effect for the text using layer styles. Double click on the layer to bring up the style settings window. Use the screenshots below to customize the layer styles.

Embossing(Bevel & Emboss)

Inner shadow(Inner Shadow)

Inner glow(Inner Glow)

Color overlay(Color Overlay)

External glow(Outer Glow)

Shadow(Drop Shadow)

Step 6

Once you are done creating lighting effects using layer styles, go to the layers palette and reduce the value of this layer. Fillings(Fill) by 0%.

Step 7

Duplicate the layer that you created in step 5 and turn off all layer styles on this copy. Now set up the styles like this:

Inner shadow(Inner Shadow)

Inner glow(Inner Glow)

Step 8

Below is the result after you applied the layer styles.

Step 9

Now we will create moving light spots. Create 5 layers on top of the existing ones, and rename them as 1,2,3, R and F. If you have your own text create layers according to your letters. Group these layers into a folder and give it a name. Light spots and change the blending mode to Lightening the base(Color Dodge).

Activate the tool Brush(Brush Tool), select a soft brush, set Opacity(Opacity) at 95% and with white paint some specks over the text. For each letter a separate light spot on its own layer. Below in the screenshot you can see how the layers look at the author in the layers palette.

Step 10

Now go to the menu Window - Timeline(Window> Timeline). You will notice that your layers are already built in this palette on the left side of it. Select each of the five spotlight layers in the group. Light spots and make sure that the current time indicator (blue slider) is at frame zero. Now on each layer in the group, when it is active, click on the option Position(Position) to create a keyframe.

Translator's note: To activate the timeline, press the button Create timeline for video(Create Video Timeline) and all your layers will load into the timeline. The selected layer will be the same layer or group as in the layers palette.

Step 11

Set the current-time indicator (blue slider) to 01:00 F and move the layers with light spots along the path of their movement relative to the outline of the letter.

Step 12

It will look like this starting position light spot on letters. Move the current-time indicator along the timeline and move the layers with light spots, creating keyframes. Continue moving them until you have finished moving the speck across the entire letter of each text layer. For instructions, see a few screenshots below.

In this article, I will talk about what animation is in Photoshop. We'll see how animation works in Photoshop using the example of creating a New Year's banner.

I will work in Adobe photoshop CS6. My interface is Russian, since I write from work.

I have an English version at home, and I advise you to study in an English version, here's why:

You can easily navigate the program in any language (after English in Russian, you can easily find tools, because this is your native language, and after Russian, there may be problems with adaptation).
Most of the good lessons are written in English.
Localizations of the program often differ from each other, the quality of the translation of the interface sometimes leaves much to be desired. Incorrect translation of the tools can confuse a beginner to learn a program.

Getting Started with Animation in Photoshop CS6

Launch Photoshop.

Create a new document File -New (Ctrl + N).

In the window that opens, set the banner size: 600 x 120, name it "New Year's banner" -> "Ok".

How to create the background

I select in advance the materials that I will use in my work (backgrounds, fonts, etc.).

Open the prepared texture: Ctrl + O. You can download the texture I am using.

Open the "Layers" palette - F7.

Select the texture window, drag the layer from the layers palette onto the banner layer.

If the texture is too small or too large compared to the banner, adjust its size using the transformation "Ctrl + T".

Small square markers will appear in the corners of the image. Hold Shift to maintain the aspect ratio as you resize, drag the corner handle diagonally, decreasing or increasing the size of the image until the background fills the entire surface of the banner.

After we have adjusted the texture to the size of the banner, proceed to its color correction.

Go to the menu "Image" - "Adjustsments" - "Hue / Saturation" (Image - Correction - Hue / Saturation).

I used these settings to achieve a bright, saturated color:

Writing the text

Create a new layer (Ctrl + Shift + N) or click on the new layer icon in the layers palette.

Select the Horizontal Type Tool (T).

Choose a brush with any star, paint will be white #ffffff. To select a color, click on the small square at the bottom of the left panel.

On a new layer, draw stars in arbitrary places. To make the stars brighter, click several times in one place. Here's what I got:

Duplicate the layer (Ctrl + J). Click on the eye icon in the layers palette to hide the visibility of the previous layer.

Select the top layer with the copy of the stars. In the left panel, select the Lasso Tool (L).

Select each star in turn, press "V" (the Move Tool) and drag it to any other place, so that in different frames the stars will be in different places, which will create a flickering effect.

After moving all the stars to another place, create a duplicate of the layer on which you worked (Ctrl + J), hide the previous layer in the layers palette by clicking on the eye, and again repeat the operation to move the stars to new places, you can also finish painting several new stars.

Thus, we will have 3 layers with stars, in each of which the stars will be in different positions.

Everything is ready.

Moving on to creating animation in Photoshop

We open the timeline. Go to the menu "Window" - "Timeline" (Window - Timeline).

In the appeared timeline panel, we find the button in the middle "Create Video Timeline" (Create a timeline for video).

After that, the scale will change its appearance. Now poke the icon with three squares in the lower left corner of the window to create a frame-by-frame animation.

We have opened the frame animation panel. Now there is only one frame in it, in which all visible layers are shown (the contents of the selected frame are shown in the main window on the monitor).

Go to the layers palette - F7. We need to turn off the top two stars now (click on the eye), leaving only one visible. This will be the first shot.

Go to the layers palette. Turn off the first layer with stars, turn on the second. Thus, in the second frame, we will show the stars in other places.

Click on the new frame icon again. Turn off the second layer with stars, turn on the third.

Pay attention to the time under each frame, this is the duration of the frame. The default 5 seconds is a lot for us - the animation will slow down, click on the arrow and set the duration of each frame to 0.1 seconds.

In order for the frames to change smoothly, we need to create intermediate frames between the key frames. To do this, being on the first frame, click on the icon with several circles at the bottom of the temporary panel.

In the window that appears, indicate how many intermediate frames we want to create. I will put 2. For all frames, except for the last one, set the "Next Frame".

Between the first and second keyframes, you have 2 intermediate ones.

Now we stand on the 2nd keyframe (now it is the 4th in a row), again click on the icon with circles and create 2 more intermediate frames. Now we just need to close the last and first frames for smooth animation.

Select the last frame in the timeline. Click on the circles. In the window that appears, in the "Intermediate frames" line, select "First frame", add frames all the same 2.