How to make a live GIF in Photoshop cs6. Create Photoshop Animation. Possible defects when creating complex animations

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 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 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, you can adjust the Hue/Saturation value Color tone(Hue) put on - 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 glowing effect for 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)

External 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 it will look like starting position light spot on letters. Move the current time indicator along the scale and move layers with light spots, creating keyframes. 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.

If you wanted to make a GIF animation of text in Photoshop, for example, for a postcard, or create any other interesting animation, in this article I will try to tell you step by step how to make an animation in Photoshop and save it on your computer.

At first create animation from pictures, and then we’ll look at how to make gif animation for text.

Create in Photoshop new file: “File” – “New”. Draw two shapes on it: on the “Shape 2” layer – a target, on the “Shape 3” layer – an arrow.

Now go to the “Windows” tab and select “Animation” from the drop-down menu.

The following window will open, in which we will create the animation.

If your window looks like the picture below, click on the button in the lower right corner "Convert to frame animation".

The principle of creating animation is as follows. There is a main image, we duplicate it. Then on the duplicate we place the objects in the positions in which they should be at the end. Select the duplicated frame and click on the “Tweens animation frames” button, this way we will make additional frames between the first and the duplicated one - this will create the animation effect.

Now let's talk about everything in order. Select the first frame and click "Duplicates selected frames".

The main layer will be duplicated and frame 2 will be created. Select it and place the objects in the final positions in the image. In the layers palette, select the layer on which the arrow is drawn, and using the “Move Tool” (the top one on the toolbar) we move it to the center of the target.

In the next dialog box you need to select the number of intermediate frames “Frames to Add”. It all depends on your image, but the more there are, the smoother the transition.

In the animation creation window between frame 1 and frame 2, 5 additional frames were added. Their numbers are from 2 to 6. As a result, our last layer, on which the objects are located in their final positions, became 7.

By clicking on the “Play” button, see the result. I have selected long delay time for each frame: 1.4 seconds, so the arrow in the animation moves very slowly. Let's reduce the time to 0.1 sec - the value can be selected from the drop-down list under each frame.

In the lower left corner of the window you can select how many times the animation will repeat. Let’s select “Forever” from the list so that each time after finishing it starts anew.

To do this, you need to duplicate the layer with the target. Then in the animation window we will create a new group of frames, they will start from number 8. For these frames, turn off the layer with the first target in the layers palette, and we will work with the duplicated target and arrow.

Create a duplicate of the “Shape 2” layer in the layers palette. Right-click on it and select “Duplicate Layer” from the menu.

Now, in the animation window, let's duplicate the last seventh frame. Click on the button "Duplicates selected frames".

In the same way we duplicate the new eighth frame.

The first frame for the second part of the animation will be frame 8, and the last will be frame 9, its number will change after we insert intermediate frames. Select frame 8 and in the layers palette turn off the visibility of the layer on which the first target was drawn - remove the eye in front of the layer.

Select frame 9, it will be the last in the group, and place objects in the image in their final positions. To do this, use the “Move Tool”. To move the arrow, you need to select the layer on which it is drawn - “Shape 3”, to move the target, select the layer “Shape 2 copy”.

Let's create intermediate frames between 8 and 9. Select frame 9 and click the "Tweens animation frames" button.

Select the number of frames. In the example there are 5 of them.

Let's move on to the first frame and look through our animation.

In order to save gif animation in Photoshop, click on the “File” tab – “Save for Web & Devices”. In the next window, select the options as shown in the image below. Your animation size may be different “Image Size”. Click "Save".

The animation made in the example looks like this.

Now let's move on to creating GIF animation for text in Photoshop.

In the example we will create animation for next text, step by step creation I described this text in a previous article. If you are interested in how to make a beautiful inscription in Photoshop, follow the link and read the article on this topic.

So, open the image with the text, and then the animation window, as described above.

If you have an image with text written on it for which you will create animation, in the layers palette, select the layer that corresponds to this text.

Let's create intermediate frames. Select the second frame and press the button “Tweens animation frames”.

Select the number of these frames.

Let's make sure that the text moves along more than one trajectory. To do this, duplicate the last one created on previous step, frame 10, and then frame 11. A new group frames will start from 11, and 12 (at this moment) frame will be the last. Select it and move the inscription to the final position.

Let's create intermediate frames between 11 and 12. Select frame 12 and click on the “Tweens animation frames” button. I added 8 additional frames.

And the Internet is full of gifs, these living pictures somehow magically attract people. Such animations take up more and more space on virtual walls, forums, in the memory of computers, gadgets and in hearts. The fashion for creating GIF animation will never go away.

Want to create a GIF animation yourself? It's not that hard if you have graphics editor and at least a basic understanding of the principles of its operation. Right now you will learn how to make a GIF from a video in Photoshop CS5.

Step 1: selecting and preparing a video

If you want to get a decent result, video is better to choose good quality. To begin with, it is advisable to take a short-term video, it will be easier to work. Although this is not a necessary condition. To make a GIF animation, for example, from a frame of a film or cartoon, it is advisable to first cut out the desired fragment using special programs. For example, Windows Move Maker. But this is not necessary, you can only use Photoshop.

Step 2: Upload the Video and Select Frames

1. Open Photoshop.

2. In the menu " File" select "Import" And .

3. Upload the video.

4. A window will open where you need to configure the parameters for import. If you previously cut out a fragment for the GIF, then check the box next to "From the beginning to the end", and if you are going to select frames in Photoshop, then the opposite. To select it, first mark the starting point on the scale under the video preview, then, while holding SHIFT, mark the end of the fragment.

Once a highlighted dark gray area appears on the scale, you can click Play and check which frames will be included in the animation. Do not select too large a range, otherwise you will end up with a lot of layers and the GIF will be "heavy". It is best to make a set of 5-20 layers.

Next important setting— the number of frames to be left. The figure depends on the speed of movement of objects in the video: the smaller it is, the large quantity frames can be skipped. We will use a video of a lemur, it moves slowly so we will put “Leave every 3rd frame”, otherwise there may be many identical frames.

Make sure it's the opposite "Create frame-by-frame animation" there is a tick. Now you can press "OK".

5. Looking out the window

6. If, after all, there are a lot of frames, then some of them can be deleted. To destroy several layers at once, press SHIFT and click on the unnecessary layers with the mouse, then move them to the trash in the lower right corner of the window. If there are several dozen layers, then it’s easier to close the file and start all over again, selecting a smaller section of the video. It will be faster this way.

Step 3: make animation

1. Make sure that all layers except the first (bottom) are invisible - the eye next to the layer preview is inactive.

2. Open the menu "Window" and select

3. After which work area A scale with frames will appear.

4. Click on Play and look what happened. You can delete frames in the finished animation (select them with the mouse and move them to the trash can icon) or swap them in places with the mouse.

5. If you need to change the playback time of a frame, click on the arrow next to the number under the preview and specify the desired time interval in seconds. To set the same interval for all frames, click the settings icon on the right top corner animation window and select "Select all frames", then change the time on one of them - this setting will be applied to all frames.

6. If you are not satisfied with the result, go to settings and click "Delete animation". To create a new one, you need to click there "Create frames from layers". Now you know how to make GIFs from videos, but that's not all. It is important to save it correctly so that it opens in browsers.

Step 4: Save the GIF Animation

This should not be done through the tab "Save as", and by selecting from the menu "File"— a window with settings will open. It's better to leave standard settings, changing only the size of the image, making it smaller, as is customary for GIFs. We set the width to 350, the height is calculated automatically.

The animation was saved in gif format. To open it and see how it will look in the browser, right-click "To open with" and select your browser.

3. We look for our folder with prepared photos and left-click on the first photo, hold down the Shift key, and click on the last one, then they will all be selected. Click OPEN.

4. All photos open in your Photoshop. Let's start creating the layers that we will need for animation or creation gif pictures . I opened a specially wide photo. And it will be the 1st layer.

To convert a photo into a layer, double-click on it with the left mouse button.

5. To create a second layer, we need to click on the icon that the arrow points to. On the second layer we will place another photo.

6. We stomp into our photographs, which are open next to the first one, and select a narrow photograph. I remind you that this is not necessary... C identical photographs easier to work with. So, we find the desired photo, go to the menu - selection - select ALL.

7. After this, small dashes will start running around the picture, this is the selection. Now go to the menu - editing - copy.

8. We return to our first photo, which already has layers, go to the menu - editing - paste. And our narrow photo is inserted onto a new layer. But it cannot remain so narrow. We need to add a background underneath it. To do this, click on the icon (1), drag the layer under the narrow photo, then use the eyedropper (2) to select any color you like by clicking on the photo. I chose light green. And fill a new layer, for which we activate the fill tool (3) and then left-click on the working field of the photo. Please note that at this moment the new one must be active transparent background. Active layers are highlighted in blue. After your actions transparent layer will be colored.

9. Now we need to merge two layers (narrow photo and background). We step with the left mouse button on the first layer. Hold down the Shift key and click on the second layer. They are highlighted in blue. Go to the menu - layers - merge layers.

10. We get this picture.

11. Repeat steps 6 - 10 of my tutorial to create a layer with another narrow photo. I have it on layer 2. And create another new transparent layer to place the last wide photo there (layer 3).

12. To do this, follow lesson points 6, 7, 8. That’s it. Ready. Layers for our gif pictures we created.

13. You can start animating with your layers, but I decided to create a background for our picture. To do this, go to the menu - image - canvas size. We increase our canvas by 50 pcs in width and height. Click OK.

14. We got it like this.

15. Create a new layer (I have layer 4), drag it to the very bottom under all the photos, you can make a background of the same color as the background in your narrow photos. I chose a slightly darker base color.

You can decorate your substrate in any way. I hope you know how to set layer parameters, but if not, it's simple. Step on the desired layer and double-click on it with the left mouse button and a window with the parameters of your layer will open, and then open each one separately separate parameter and you apply or change its settings. I applied the effect in the layer parameters Inner Shadow and Inner Glow with the layer parameter Multiply... The color of the shadow is slightly darker than the tone of the background. But here I do not undertake to impose my opinion on you. You have your own vision. Try it, change the settings. It's not scary. You can always return to the original result, for which you go to the menu - editing - go back.

By the way, in my last photo there is a wisteria bush, there is a lot of it in France and its flowering time is late April - early May. I photographed this bush in the garden of my friend's parents. There are also wisteria bushes in my Bulgarian yard and I think that soon it will delight us with its flowers that look like lilac clouds.

16. Now is the time to put your logo, this is especially important if your picture will be located on your website. For ordinary users this may not apply. Let me remind you that I did a photoshop lesson about. I’ll go over it briefly: go to the menu - file - place. We are looking for our PSD file with a logo prepared in advance, step on it and click on the Place button.

17. Drag the layer with the logo to the very top, like mine. If necessary, enlarge the logo to the right size, for which we go to the menu - editing - scaling. With a clamped Shift key stretch or shrink the logo. Activate the “move” tool (the topmost tool with the arrow and + in the toolbar) and move the logo to the desired location.

Everything is prepared with the creation of animation.

17. In the very first frame of the animation, you should have the background layer visible, the first layer with your photo (in my case layer 0) and the logo (position 1). For have a nice watching set the delay time for your photo 5 sec(position 2). After determining the delay time and setting it in the first frame, all subsequent frames will be with given time 1 frame, i.e. 5 seconds in my case. To create a second frame, click on the icon shown at position 3.

18. In the second frame, change the visibility of the layer from the first picture to the second, just as shown in my screenshot.

How to make GIF animation in Photoshop?

Using the editor " Adobe Photoshop"you can easily do GIF animation using standard tools. In this tutorial we will tell you how to do this.

First, let's create a document measuring ten by ten pixels. To do this, go to the "File" tab and select the "New" command.

In the New dialog box that appears, set the dimensions for the new document by entering ten pixel values ​​in the Width and Height fields.

After entering the image dimensions, click OK.

Zoom the image to the size necessary for convenient work.

Then you need to create three more copies of this layer. To create duplicates, press and hold left button mouse on the layer icon and drag it to the “Create New Layer” icon located at the bottom of the Layers palette.

These four layers will be the four frames of our future animation. Now the most important thing we need to create "GIF animations"- This working space with the right tools. Go to the Window tab and select Motion from the Workspace list.

This working environment is a set of universal tools for creating animation. Keep only the bottom layer visible and active by clicking on the eye icons next to the layers.

Select the Pencil tool and in the Attributes panel, set its size to three pixels.

Now, using a pencil, draw a square in the lower left corner of the image.

Then make only the layer next above visible and active and draw a square in the upper left corner of the image.

Similarly, draw squares on each of the layers, going clockwise around their corners.

This way we will get four frames for our future animation. Now let's move on to creating animation. To do this, on the panel "Animation" click on the button "Convert to Frame Animation".

One frame will appear in the Animation panel, now right-click on the frame and in the appeared context menu select an interval of one second.

Now click three times on the “Create a copy of selected frames” button located at the bottom of the same panel to add three more frames to the animation.

Select the first frame in the Animation panel and make only the first image layer visible and active in the Layers palette. As you can see, the first frame has been assigned the attributes of the first layer.

Likewise, select frames one at a time and assign them one image layer at a time, making only the required layer active and visible.

Now we have an animation consisting of four different frames. To view the result, click on the button "Start animation playback" located at the bottom of the Animation panel.

Thus, using the tools of the Photoshop editor you can easily make a GIF animation.