How to learn animation in Photoshop ss. Creating animation in Adobe Photoshop. What is animation
Create a new file with dimensions 700 x 300 px.
Opening the window Timeline((Window - Timeline)).
Click on the button " Create Frame Animation» (Create frame animation).
Using the tool () we 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(Time scale) select the first frame and click on the “ Duplicates selected frames» (Creating a copy of the selected frames).
We create 4 copies of selected frames.
Select in the window Timeline(Timeline) second frame and leave only the layers visible " Animation" And " Background».
Choose fourth frame and leave it visible All layers.
Let's set the repeat parameter for our animation. In the window menu Timeline(Time scale), change the repeat parameter from " One time" to " Constantly"(image below).
Now we can use the animation playback start.
Animation settings in “File - Save for Web” (File - Save for Web) Photoshop CC. Final result
Earlier on the site we looked at third-party ones, but most of them can easily replace regular Photoshop. Animated GIF files can be created quite easily and quickly with its help. They usually consist of several images (frames), which, when changed step by step, form the final result. Today we will try to consider this issue from A to Z in as much detail as possible:
The screenshots below are from Photoshop CC, but working with GIF animation in CS6 and other versions of the program is similar, plus or minus. Perhaps the visual tools will be slightly different, but in general, the principle and algorithm of actions are similar. As an example, consider the trivial task of how to create GIF animation in Photoshop from photographs replacing each other. Recently, using this guide, I made a gif about my adventures for the final post for 2016 on my personal blog.
The process took literally 5-10 minutes. The important thing here is to just follow all the steps carefully. At the end of the post you will find an English video tutorial on this topic.
Adding GIF Animation Images in Photoshop
First of all, you need to download graphic editor all pictures/photos that will participate in the animation. Add them to one project in different layers - this will be the frames for the resulting GIF file. Check the size of the pictures and their display so that everything is as you need. Layers can be hidden (using the eye icon to the left of the layer) in order to view all objects.
In the center of this panel there is a drop-down list where you need to select the “Create Frame Animation” option and click on the button. As a result of this action, the Timeline will change a little, and you should see the image from the topmost layer as the first frame.
In the next step, select all layers in the project (click on them while holding the Ctrl key). After that you open context menu in the upper right corner of the Timeline window and select “Make Frames From Layers”.
From all visible and selected layers, Adobe Photoshop will create animated GIF frames. As a result, you will see them in the Timeline panel.
GIF animation settings in Photoshop
Here you will need to specify 2 things: the duration of display of different frames + the number of repetitions of the gif. Let's start with the first one. Under each picture object in the Timeline you will find the display time and a down arrow. Click on them and select the card duration in the pop-up menu.
You can specify different times for elements or set the parameter for several of them simultaneously (joint selection as in layers - using Ctrl).
To “loop” a GIF in Photoshop when creating an animation, select the Forever value in the appropriate setting as shown in the screenshot below.
There you can also specify any number of repetitions you need. Nearby is the Play button, which allows you to play an animated GIF and see what the final result will look like.
Saving GIF animation in Photoshop
In the final part of our guide, we’ll look at how to properly save GIF animation in Photoshop. For this purpose, the familiar Save for Web tool is used, but in latest versions Adobe Photoshop CC it is located in a new menu location (File - Export). Luckily Alt + Shift + Ctrl + S still works.
In the settings window that opens, you need to select the GIF format, and also make sure that the Looping Options setting is set to Forever. In the lower right corner of the window, there is an option to run the animated GIF you created in Photoshop for a preview.
If everything works as expected, click Save and save the file to local computer. To check the functionality of a GIF, you need to open it in a browser, because... The built-in Windows viewer does not play animation.
By the way, you can also easily export your project to video format. The procedure is the same as when saving GIF animation, but in the Photoshop menu, select File - Export - Render Video.
In the window that opens there will be different video settings, but you don’t need to change anything additional, just click on the Render button. As a result, you will receive an mp4 file with a slideshow of photos/images.
Finally, we suggest watching an English-language video tutorial about creating animated GIFs in Photoshop. The algorithm for working there is the same as in the article, but perhaps it will be easier for you to perceive the information from the video.
If you still have any questions about how to make GIF animation in Photoshop or have any additions, write in the comments.
You will learn:
- How to open and close and customize the animation panel.
- How to add, remove and edit keyframes and animation frames.
- What is the Tween button used for?
- How to make a simple star drawing animation.
- How to set time intervals for each animation frame.
- How to optimize animation to reduce Gif file size.
- How to import Gif files into the program.
- How to switch from frame-by-frame animation to timeline.
The lesson consists of the following sections:
1. Training video.
2. What is animation.
3. Part 1. Frame animation.
4. Setting intervals.
5. Setting the repetition frequency.7. Optimization of animation.
8. Saving animation.10. Opening GIF files.
11. Buttons for unifying animation layers.
12. Closing the animation panel.
13. Questions.
14. Homework.
What is animation
Animation is a sequential change of images, as a result of which it seems to us that an object moves, changes shape, appears and disappears, and other dynamic actions can also occur with it.
Using animation in Photoshop program you can create slideshows from photographs or pictures, make avatars, banners, screensavers for web pages, dynamic cards and various presentations. It should be kept in mind that Photoshop is still a graphic editor and is not designed for complex animation processes. There are two ways to create animation in the program - frame-by-frame animation and timeline animation. We will look at both types of animation one by one. We will devote the entire 36th lesson to the study of frame-by-frame animation. And in lesson 37 we will deal with the timeline. Some simple tasks It’s more convenient to do it in frame-by-frame animation mode. Even if you know how to work with a timeline from other programs, I still advise you to try the tasks from this lesson. Based on the knowledge gained, you will be able to decide which method you will use in each specific case.
Part 1. Stop-motion animation
Panel Frames appeared a long time ago. Let's look at its settings using the example of the animation of drawing a star.
Create a new document with a size of 800 by 800 pixels, resolution 72, color mode RGB. Create new layer by clicking on the icon at the bottom of the Layers palette. Or press Shift +Ctrl +N.
From the Tools panel, select the Brush tool black, 35 pixels in diameter with blurred edges. Draw the first inclined line (place a point, press Shift and place the next point - the line will turn out straight).
Create a second layer. Draw the next line. Then the third layer
and another line, etc. You should have six layers, including the background layer.
To open the Animation panel, click Animation on the Window menu. Or, from the Window menu, set Workspace to Video and Film/Video. Make sure that the panel is in frame-by-frame animation mode.
Otherwise, click the icon
at the bottom right of the animation panel.
Turn off the visibility of all layers except the background layer in the Layers palette by clicking on the icon to the left of the layer thumbnail. This will be the first frame of our animation.
Click the icon at the bottom of the Animation panel. The second frame (a copy of the first frame) appears. To change it, turn on the visibility of the first layer in the Layers palette. Click on the icon again and turn on the visibility of the second layer.
Continue creating new frames and turning on the visibility of subsequent layers until the entire star appears in the last frame.
At the bottom of the Animation panel are tools for adding, removing, and viewing animations.
- Convert to timeline animation.
- Tween(Creation of intermediate frames).
- Duplicate current frame (Creating a copy of the selected frames).
- Play buttons (Like any tape recorder).
Selects First Frame (Choosefirstframe); Selects Previews Frame (Choosepreviousframe);
Play(Start animation);
SelectsNextFrame(Select next frame).
- Deleting selected frames. Please note that the keyDelon the keyboard does not delete the selected frame, but deletes the selected layer from the Layers palette.
Setting intervals.
Now let's set up the time intervals during which the animation frames will be visible.
Under each frame, 0 s is written below. and there is an arrow. Click the arrow and select the frame rate. Set the value to 0.5 for all frames (this means that the frame will change after half a second).
Setting the repetition frequency.
The next step is to set the animation repetition frequency. Click the arrow at the bottom of the animation panel. The frequency selection menu will appear.
If you select Forever, the animation will repeat over and over again. This process is called looping.
If you select Once, the animation will play once and stop at the last frame.
When you select Other, you can set a different number of repetitions within the range (from 1 to 999).
Now let's play the created animation. To do this, click the Play button. If you like everything, move on to the next stage, if not, then adjust the animation as you wish.
Go to the animation panel. Click on the Duplicate current frame icon. Select all layers except the background layer.
Turn off the visibility of the background layer. Press Ctrl + Shift + Alt + E. A new layer will appear, which will print all the selected layers.
The layer thumbnail will show a star on transparent background. Name this layer Star.
Double click on the layer to go to the style settings. Set the shadow and color overlay. Choose the color as you wish.
Go back to the first frame of the animation
and remove the visibility of the star layer
in the Layers palette.
Select the last frame. In the Layers palette, leave only the Star layer and the background layer visible.
Copy this layer and change the style settings: Change the color, emboss or stroke. Go to the animation panel. Click the Duplicate current frame icon. Go back to the first frame in the Animation panel and turn off the visibility of this layer in the palette.
Duplicate the layer again and change the style. Select the Move tool or press Ctrl + T to switch to the Free Transform tool. Change the scale. Go to the animation panel. Click the icon. Go back to the first frame and deselect this layer.
Duplicate the layer again and zoom in a little more and change the style. And add an animation frame. You should end up with a storyboard that looks something like this:
Click the Play button and look at the result of the work done.
Animation optimization.
Click the icon at the top right of the animation panel. An additional menu will appear.
After finishing the work, you should optimize the animation to reduce the size of the Gif file and better load it in the web browser. Reduction occurs by eliminating areas that do not change from frame to frame.
Select Optimize Animation…(Optimize animation). Check both boxes.
BoundingBox(Bounding box)- crops frames according to the changed area compared to the previous frame.
Redundant Pixel Removal. If a pixel has not changed from the previous frame, it becomes transparent.
To have PhotoShop save frames that include transparency, select the "Automatically". To do this, select one or more frames. Click right click mouse over the frame thumbnail. Choose from three options:
Automatic(Automatically)— the current frame is discarded if the next frame contains layer transparency.,
Donotdispose(Do not place)-The current frame is visible through the transparent areas of the next frame.,
Dispose(Position)— the current frame is not visible through the transparent areas of the next frame.
Saving animation.
Now it's time to save the animation. Of course, during the work it was necessary to save the file in PSD format to avoid getting into a situation with a sudden power outage or unexpected computer reboot. But now I have a different save in mind. The animation can be saved as an animated GIF file using the Save for Web command.
Select Save for Web from the File menu. Set the Gif format in the settings. Pay attention to the size of the future file. Reduce its size if possible. We discussed in detail how to do this in the Image Size lesson. When optimizing, use an Adaptive, Perceptual, or Selective color reduction model to ensure consistent colors across all frames. Click Save, enter a name, path, and click Save again.
Previously, to record animation, we went to the ImageReady application.
Photoshop CS2 introduced the Animations panel. But in order to save the animated file, I still had to go to ImageReady. To switch, use the button at the bottom of the toolbar or the File menu - Edit in ImageReady.
From Photoshop CS3 onwards, animations are not required to record additional programs. The Animation panel is now used for editing, and the File menu item has been adapted for recording. SaveforWeb(Save forWeb) .
Let's look at another small example of creating frame-by-frame animation, in which we'll look at what the button is for Tween(Creating tween frames).
Create a new document measuring 500 by 250 pixels. Select the Type tool, Impact font, size 150 pt. and write any word. Set the opacity to 100%. Add layer styles: shadow, gradient and emboss. You can choose a different style, you don’t have to do it like mine. Text deformation can also be animated. In the animation panel, set the interval to 0.2 seconds. Click the button to copy the first frame. Go to the Layers palette and reduce the opacity to 0. Change the layer style (for example, instead of a gradient overlay, add a color overlay). By switching between frames, you can watch how the image changes.
Let's add movement. Select the Move tool and move the text down, off the sheet. Go to the Animation panel and click the button
In the window that appears, you can configure the number of frames to be added. The more there are, the more uniform the transition will be. In the column TweenWith(Inbetween shots) you can select from the list where the frames will be inserted:
Last (Last frame); Selection; Previous Frame; First Frame; Next Frame. The list changes depending on the selected frame.
Leave all settings as default. Click OK.
Click on Play. If everything suits you, then proceed to saving the animation.
Opening GIF files.
In Photoshop CS3 and CS44, animation videos and GIFs do not open through the File - Open menu. When I try to open it, a window appears:
Be sure to install QuickTime Pro 7.1 or higher.
Photoshop CS5 does not have this problem. Files can be easily opened in the usual way.
Select from the File menu – Import – Video Frames to Layers
into layers...). You will not be able to select GIF files in the file type field. However, this shortcoming can be easily circumvented if you first copy the name of the .gif file and paste it into the file name field or manually type the name in this field. Or enter * in the File Name field and click Load, then
the name of the gif file will become visible and can be opened (other files will also become visible, even those that cannot be opened in the program).
Leave the settings in the window that appears as default. From Beginning To End and Make Frame Animation should be checked. Unfortunately, files opened this way will not contain a transparent background - instead there will be white. When opening such a file in CS5, the transparent background will be preserved.
Buttons for unifying animation layers.
Look closely at how the palette has changed Layers(Layers) when working with frame-by-frame animation. There are buttons that allow you to apply changes in the current frame to all other frames. Check the Propagate Frame 1 checkbox.
Let's see how they work... Open the file with the animation of drawing a star. Select any frame and turn off the visibility of the background layer. Click Play. Only the selected frame became transparent. Click the Unify layer visibility button. A window will appear: .
Click Match(Synchronize) and run the animation again. The star will be drawn on a transparent background throughout the animation. The transparency of the first frame is now assigned to all animation frames. Likewise, you can control the layer's position and style.
In the Layers palette, select Animation Options. By default, the layer unification buttons appear Automatic when you turn on the frame-by-frame animation panel. You can change this rule by selecting Always Show or Always Hide.
Closing the animation panel.
There are different ways to close the animation panel:
You can minimize or close the animation panel and go to Preferences by clicking User Interface Preferences.
Questions:
- What happens if you select a frame in a frame-by-frame animation and press Del on your keyboard?
The selected frame will be deleted.
The layer selected in the Layers palette will be removed from all animation frames.
The layer selected in the Layers palette will be deleted only for the selected animation frame.
The layer selected in the Layers palette will be removed from all animation frames except the background layer.
- You have three frames. The animation will be continuous. What to do to add
5 intermediate frames between the last and first frames?
Select the first frame. Press the button
In the settings, in the Tween With column, select Next Frame.
Select last frame. Press the button
In the settings, in the Tween With column, select Previous Frame.
Select last frame. Click the Tween button.
In the settings, in the Tween With column, select First Frame.
- Why do you need animation optimization?
To convert to timeline animation.
To reduce the size of a Gif file by excluding areas that do not change from frame to frame.
To set the animation repetition frequency.
Homework:
1) Perform frame-by-frame animation of drawing a star (according to the lesson).
2) Perform frame-by-frame animation of the text.
To make animation, you don’t have to have any phenomenal knowledge, you just need to get the right tool and use it correctly. There are quite a few such solutions, but the most famous of them is Adobe Photoshop. This article will show you how you can quickly create animation in it.
If Photoshop is not on your PC, download it from the link above, then install it following the instructions from this article and launch it.
Stage 1: Preparing the canvas and layers
Now you can draw on them what will be shown in the animation. In our simple example, this will be a moving square. On each layer it moves a few pixels to the right.
Step 2: Working with the Timeline
All! The animation is ready. You can view the result by clicking the button "Start animation playback". And after that you can save it in the format GIF.
In this simple but proven way, we were able to make a GIF animation in Photoshop. Of course, it can be significantly improved by reducing the frame time, adding more frames and, of course, instead of creating a black square, creating something more original and qualitatively better. But it depends on your preferences, desires and skills.
Create a new file with dimensions 700 x 300 px.
Opening the window Timeline((Window - Timeline)).
Click on the button " Create Frame Animation» (Create frame animation).
Using the tool () we 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(Time scale) select the first frame and click on the “ Duplicates selected frames» (Creating a copy of the selected frames).
We create 4 copies of selected frames.
Select in the window Timeline(Timeline) second frame and leave only the layers visible " Animation" And " Background».
Choose fourth frame and leave it visible All layers.
Let's set the repeat parameter for our animation. In the window menu Timeline(Time scale), change the repeat parameter from " One time" to " Constantly"(image below).
Now we can use the animation playback start.
Animation settings in “File - Save for Web” (File - Save for Web) Photoshop CC. Final result