Do you want to create an animated picture, postcard, avatar, photograph, or banner for a website? To do this, you don’t have to be a specialist in flash technologies. Any computer user with Photoshop can make a GIF animation.
Early versions of Photoshop did not have tools for creating GIF files, and you had to additionally install Adobe Image Ready. IN latest versions PS make a GIF easier and faster.
Let's look at working with animation using Photoshop CS5 as an example.
1.Create new file, in which the first layer will be the background, and copy the necessary pictures and inscriptions here (accordingly, each will be on a separate layer).
2. Go to the Window – Animation menu.
3. A window for working with animation appears at the bottom of the page. So far there is only one frame on which all visible layers are displayed.
4. Using the “Create a copy of selected frames” button, duplicate this frame as many times as necessary.
5. Our animation will consist of 3 frames.
6. On the first frame, leave the background and picture, remove the inscription. To do this, stand on the first frame and make the layer with the inscription invisible.
7. On the last frame, you need to turn off the picture in the same way.
8. Set the display duration for each frame (usually it is the same for all).
9. To ensure that the animation never stops, set “continuously” in the drop-down menu, which indicates how many times the loop will be scrolled.
10. To view the result, click the “Start animation playback” button.
11. Save the resulting animation in gif format: in the File menu - Save for Web and devices...
12. Set the gif format.
13. Save our file, standard settings however, you can leave it unchanged.
14. Enjoy the result.
Others can be used special programs and online services for creating a GIF file, for example, GIF Animator, UnFREEz, etc. Knowing how to make a GIF file, you can easily decorate your social network account or website with any animated pictures, photographs or banners
Have you ever wondered how animated GIFs are created? The author of the lesson invites you to master some animation secrets in one night with the help of this lesson. You will also learn how to use the Timeline, which is available in Photoshop versions CS6. Now let's begin!
Lesson result.
Step 1
Create new document (Ctrl + N) with file dimensions of 800 x 500 pixels. Fill the background with any color you want. Now let's 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 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 box, set the following values: 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 the blending mode of this layer to Soft light(Soft Light).
Translator's note: In order to achieve the same color as the author in the screenshot, when adjusting Hue/Saturation, you can set the Hue value to - 140.
Step 4
Add any text you want. Here we will use the text of the 123RF website logo. In layer styles use Stroke(Stroke). Select stroke size values according to your preferences.
Translator's note: On the author's screenshot there is already rasterized text along with the Stroke style. To get the same result, after applying the stroke, remove the Fill (Fill) of the 0% text layer, convert this layer to a smart object, and then rasterize it.
Step 5
In this step we will create a glowing effect for the text using layer styles. Double-click on the layer to bring up the Style Options window. To customize layer styles, use the screenshots below.
Embossing(Bevel & Emboss)
Inner shadow(Inner Shadow)
Inner glow(Inner Glow)
Color overlay(Color Overlay)
Outer glow(Outer Glow)
Shadow(Drop Shadow)
Step 6
Once you're done creating lighting effects using layer styles, go to the Layers palette and reduce the value of this layer Fills(Fill) to 0%.
Step 7
Duplicate the layer you created in step 5 and turn off all layer styles on this copy. Now set 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 spots of light. 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) to 95% and draw spots on top of the text with white color. For each letter there is a separate light spot on its own layer. Below in the screenshot you can see how the author’s layers look in the layers palette.
Step 10
Now let's 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 highlight layers that are 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 time scale, click the button Create a timeline for a video(Create Video Timeline) and all your layers will load into the timeline. The same layer or group will be selected 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 trajectory of their movement relative to the outline of the letter.
Step 12
This is what the initial position of the light spot on the letters will look like. Move the current time indicator along the scale and move layers with light spots, creating key frames. Continue moving them until you've finished moving the speck across the entire letter of each text layer. For instructions, see a few screenshots below.
Very often there are funny or sad clippings from videos on the Internet. They circulate from comment to comment, complementing an interesting post or briefly characterizing the situation. Any moment that interests you in a film, TV series or YouTube video can be converted into a GIF animation. To do this, you just need to have Photoshop version CS3 or later. Older versions do not support animation. For the most comfortable work, it is recommended to use Photoshop CS5, CS6, CC 2014 or later.
First of all, you need to download the video, a fragment from which you want to make an animation. It will be better if you first cut out the required few seconds from the entire recording. However, this can also be done using Photoshop itself. It is important to remember that the program only supports certain video formats: *.mov, *.mpeg, *.mpg, *.avi and *.mp4.
So, in order to make an animation from the desired segment of a video, you will need to upload it to Photoshop. How to do it:
- In the top menu, find the “File” section.
- Click on it and in the drop-down menu hover over the “Import” line.
- In the menu section that appears on the right, click on “Video frames to layers...”.
- Perhaps the program will freeze a little. There's no need to rush her. A new window should open in which you need to find the file with the video fragment and select it.
After this, the video will load and a new window will appear in which you will need to select which part of the recording you will process. If the fragment has already been pre-cut, you can select the “From beginning to end” option, and if the full video has been loaded, you will have to select the desired range yourself. To do this, use the sliders immediately below the loaded entry. After completing the selection, click “OK” and wait a little - the program processes the fragment and puts each frame in a separate layer.
The program can only import 500 frames at a time. If your fragment is longer than this amount, you will have to split it into several files and upload them one by one.
The checkbox in the “keep every * frames” window will remove each frame from the recording, the serial number of which will be indicated. This will make the animation more “light”, but at the expense of intermittency. 
When Photoshop processes the video, frames from it will appear in the Layers panel. By default, only one will be shown, the very first one. He will be the lowest of all.
Now each layer can be processed separately - add text, some kind of addition or effect. If you apply any effect to the topmost layer, it will be displayed throughout the entire video. All layers that do not belong to frames will be displayed in the same way. If you need an object to disappear at the right moment, place a layer with it above the frame, after which it should disappear. And if you need it to appear only on some individual frames, simply duplicate this object several times and combine the layer with it and each necessary video layer separately (one copy - one layer). 
To duplicate any layers, you need to click on them right click mouse and find the line “Create a duplicate layer”. 
And now a little about editing animation. On the timeline, which appears at the bottom of the working field, there is a drop-down menu in the upper right corner. It is advisable to look there and check some settings. In particular, we may be particularly interested in:
After editing the loaded frames and adding something of your own, if desired, you can set the number of repetitions. If you want the fragment to be completely looped, then under the time scale find the drop-down menu with the number of repetitions and select “Constantly”.
The next four buttons after the drop-down menu allow you to view the animation with all the changes made. Then there is the “Add intermediate layers” button (the same function as the similar section in the menu), and the “Create a copy of selected layers” button. This can make it much easier to create any repetitive actions. It is enough to select several frames on the timeline (press and hold Ctrl key and click on each frame with the mouse), and then click on this button.
Separately under each frame there are numbers and an arrow. If you click on the arrow, a drop-down menu will appear in which you can set the delay for a specific frame. This way you can slow down or slightly speed up individual fragments of the resulting Gif. And to select the entire animation at once, select its very first frame, move to the last one and, while holding down the Shift key, click on it. Without releasing Shift, change the speed of the last frame. Following this, this parameter will change for all previous ones. 
After final setting of all animation parameters, it must be saved. Select the “File” menu section, and in it find “Save for Web...”. 
A new window will open in which you need to configure the settings for saving the Gif you created. You definitely need to set the saving format to “Gif”, otherwise it will no longer be an animation. 
Here you can also configure the final dimensions of the animation (width and height), the number of colors used in it, and view the final result. If everything suits you, you need to click on the “Save...” button. After this, all that remains is to choose where and under what name to save the finished file.
Do animated gif It is quite possible even for a beginner to create a picture in Photoshop. Photoshop allows you to create frame-by-frame animation by changing frames, and then save the work as a gif image.
This means that Photoshop does not create the animation itself, but only organizes a frame-by-frame presentation of pre-prepared images and outputs them to the final format. The number of frames in the finished gif animation can be any, but the larger the number, the larger the file size will be. Therefore, you should always strive to reduce the number of frames to a minimum. However, the more frames reflected in a second of animation, the smoother it will be. It is generally not a good idea to increase the number of frames per second beyond 30, because the human eye cannot distinguish more frames per second. Even in films and videos they use 24 frames per second.
Also, when creating animation in Photoshop, you should take into account that various devices and browsers can at different speeds play animation with a large number frames per second, depending on your technical capabilities. So, cell phone, for example, can only play back 10 frames per second. This means that a second of animation with 30 frames on it will take 3 seconds, therefore the animation will slow down.
When choosing the number of frames per second of an animation, it all depends on what will be depicted in the animation and its purpose.
It should be noted that the number of frames per second of gif animation is not constant, and easily changes when creating animation. Simply put, it is possible to specify the display time of each individual frame. For example, you can set the first frame of an animation to last one second, and the second frame to last five seconds.
This is very useful when you need to delay a certain frame longer, for example, with text, without increasing the weight of the gif file. Typically, a simple animated picture can have up to 10 frames in total, usually about 4-6.
By setting the timing of different frames, a 4-frame animation can last anywhere from a fraction of a second to a minute or longer. But it should be borne in mind that too long animations should also be avoided - animation is not a video clip, some browsers do not wait for the end of the animation, and start playing it from the beginning, if it is instantly lost gif images from the screen.
You also need to pay attention to the fact that the quality and color rendition of a drawing in the gif animation format is usually noticeably lower than in jpg format or similar, this
peculiarity.
Animation also should not be done in high resolution, this will cause additional load on browsers or phones, and, most likely, will simply slow down the speed of its playback. Depending on the purpose of the animation, the recommended resolution can be up to 100 - 150 pixels in width or height. Moreover, the smaller the height of the animation, the larger its width can be, and vice versa. For example, a frame resolution of 400X50 pixels is an acceptable resolution, but 400X150 is already too much and is only suitable for special purposes.
But, still, the most important thing you need to pay attention to when creating gif animation is its weight. For general use on Internet pages or on devices, the size of the animation should not exceed 400KB. This is the maximum.
General recommendations in the parameters of gif animation for general purposes (avatars, userbars, signatures, etc.)
Weight- no more than 400KB, better than 150KB - 200KB.
Permission— in total no more than 30,000 pixels (the amount is the height times the width, for example, 400X50 = 20,000).
Full playback time- no more than 15 seconds.
Number of frames can be anything, if at the same time weight gif file or animation time will not exceed the above recommendations, usually the smaller the better.
Number of frames per second- no more than 30, depending on need.
Create Photoshop Animation.
Photoshop can only create animations starting with version CS3. To create an animated file, you need to either prepare the necessary pictures in advance, or create pictures directly using Photoshop.
In our example, we use all options at once. We will make an animation for the “Avatar” signature.
Ready option:
Creation:
First, let's find the source images for creating the animation:
Now let's create a new file in Photoshop. Specify width 400, height 50. Color mode – 8 bits.
Now let’s activate the “Animation” window. Window > Animation. A special area for working with animation will appear at the bottom. 
It shows all the frames that are in the animation in sequence. So far there is only one frame, duration 0 seconds, but we can always add new ones. Frames can always be rearranged until the picture is saved in gif format.
Each frame displays the layers visible to it. In animation mode, for each frame, separate conditions for the visibility of the layer or its other characteristics, transparency, outline, color, etc. are set.
Please note that the layer characteristics for the first frame apply to all animation frames. This means that, for example, if you change the text color for the tenth frame of the animation, it will change only on the tenth frame, and if on the first, then on all frames of the animation at once.
Fill the canvas with color. Select the Fill Tool (default, letter G), and the color #3a55a4, and fill the canvas.
Let's add the original pictures to the canvas (File > Place, or you can simply drag them from the folder), and change their size.
When you add new pictures to the canvas, they form a new layer. It is these layers that we will work in the process of creating animation.
Do not forget to periodically save your work so as not to lose the changes you have made. You can save your Photoshop work file in PSD format. (default).
First you need to create the layout of the picture and the first frame. It is important to note that browsers or devices that will not be able to play the animation will
show only its first frame. Therefore, the first frame of the animation should reflect its entire essence.
Display and move the animatsiya1 layer to the left edge of the canvas. To do this, select the desired layer (animatsiya1), then: Edit > transform > flip horizontally. Then we'll just move the layer.
On the first frame, we don't need the animatsiya2 layer, so we need to hide it. If you hide a layer, it will not appear in the selected frame. Let's add some text (letter T). You also need to change the color of the text, for example, to white, otherwise it will completely merge with the background.
The text is also a separate layer. The first frame of the animation is ready. Let's create a second frame. More precisely, let's create a copy of the first frame. To do this, click on the leaf sign in the animation area.
The second frame is selected automatically, but we can select any frame we want to work with.
For the second frame, we will hide the first layer animatsiya1, and make the animatsiya2 layer visible. Also, apply an effect to the text layer and repaint it a different color. Double-click on the “AVATAR” layer, Styles > Color Overlay, and click on the small box with the color. Let's set the color #8fbeff.
As a result, this is what the second frame looks like now.
Although Photoshop doesn't create animation itself, it can create in-between frames. Let's add 5 intermediate frames between our two. To do this, you need to select “Create intermediate frames”, to the left of the “Duplicate frame” button in the animation area. But first you need to select two frames, between which intermediate frames will be created. You can select several frames at once by holding down the Shift key.
Let's add 5 frames.
Now, the animation frames ribbon consists of 7 frames. Intermediate frames provide a smooth transition from one frame to another.
You need to set the frame display time. Now all frames have no display time - 0 seconds.
The time for displaying frames can be set in bulk - when selecting several frames, or separately for each. Let's set the display time from frames 1 to 6 to 0.1 seconds, and frame 7 to 1 second. To do this, click on the arrow next to the frame display time.
Ready! The animation frames ribbon is ready. It can be viewed directly in Photoshop by clicking on the Play arrow in the animation area.
The format needs to be set to Gif. All other settings affect the quality of the gif animation and its initial weight. If the animation turns out to be too heavy, you can reduce the number of colors to 128, for example, or immediately optimize the animation for the desired file size. To do this, click on the icon with three bars at the top right, select “optimize by file size,” and enter the initial weight. The animation itself optimizes for the required weight with minimal possible losses quality.
Of course, this is a very basic example of creating a gif animation in Photoshop, but it shows the basics of how animation is created. With experimentation, you can make better, more detailed and beautiful animations, but the principle of creating them is the same.
Good evening, dear subscribers and just readers of my blog! Are you ready to learn how to bring your picture to life? And not with the help of magic, but with the help of everything from our beloved Photoshop! How long have I been putting off this lesson, without understanding why. After all, these are the basics of Photoshop! But now I have decided to improve.
And improve so much that at the end of the video, yours will also receive a video lesson on how to make animation in photoshop.
I haven't written Photoshop tutorials for a long time, and I had reasons for that. After all, I was finishing my story “.” You are welcome to read it and express your opinion directly in the comments!
Now let's move on to the lesson. In the video below, I will tell you how to make gradually added text, but in text lesson the task will be a little more difficult.
We have Cipollino, and we need to make him wave his hand to us.
Step 1. First you need to “enable” animation in Photoshop. For this we go “Window”->”Animation”. It may still be written “Timeline”.
Step 2. In order for the hand to move, we need to cut it out and place it in different positions. To cut out a hand, I personally use “Magnetic lasso”. Make a copy of the main one ( Ctrl+J) and work with a copy. We don't touch the original.
Carefully select the hand and cut it out!
Step 3. Now we insert our hand, no matter how terrible it may sound, and put it in different positions. The hand will be inserted into new layers, this is even to our advantage.
Step 4. This step is optional, but it is better to use the Eraser tool to slightly correct the hand, making it more natural. It's hard to explain this, of course, in words. If you understand why we use the eraser, then follow this step; if you still don’t understand, you can skip it. This is not important, since the most important thing for us is to learn how to create simple animation!
Step 5. Now we are working with personnel. In each frame we turn on only those layers that we need. For example, in frame 1 we need our original, and in our case “Layer 0”.
Now let's create a new frame:
And in the new frame we turn on other layers. That is, our “Layer 0 copy” And “Layer 1”, that is, a different hand position. I hope the algorithm is clear to you, dear readers.
Step 6. Set the frame delay. That is, after what period of time the next frame will be shown.
Step 7 Let's save ours. There's a reason I included this step in my tutorial, since saving a GIF animation works a little differently than just an image.
Select the format (the default is GIF) and save.
