Cannot create Frame Animation in Photoshop

[qtluong]

I am trying to make an animated GIF in Photoshop following the instructions in https://www.adobe.com/creativecloud/photography/discover/make-a-gif.html. However, after opening the Timeline window, I cannot click on the "Create frame animation": when I hover my mouse over the three squares at the bottom left corner, the cursor turns into a crossed circle. Both 2024 and 2023 versions of Photoshop on Mac OS 12.4 exbibit the same issue. How can I fix this issue? Thanks. 

[kevin stohlmeyer]

@qtluong your file size is huge. Frame animation has a max size of 5000 px.

Reduce the image size first then try again.

[qtluong]

Thanks, this made sense, however after I reduced the file size to 4000px and then 2000px, the issue persisted. 

[Conrad C]

What is the intended final delivery for this animation? At such large frame sizes, even 2000px, the animated GIF format is extremely inefficient and may result in very large file sizes and very slow playback.

[qtluong]

Thanks, good point! I planned to use it for a presentation and on a web page.  Is there a better format that PS can generate? 

[Conrad C]

It depends on what is being used to display the presentation and web page. If the presentation is being done in Microsoft PowerPoint, Apple Keynote, or Google Slides, those applications have powerful animation tools built in, so I would look at creating the animation there. Also because their graphics tools are vector-based, so unlike a GIF they will scale smoothly to any screen or projector resolution.

If the presentation is a video, you can export from Photoshop as a video and add that to the video presentation. This also creates the option of animating using keyframes in the video timeline in Photoshop, instead of a frame animation.

For the web page, whenever possible embed a video in a standard format such as H.264. This should be relatively easy in modern web browsers. And it would take advantage of the video decoding hardware included in recent computers and mobile devices, so that playing it back might require much less CPU and battery power than a GIF animation, making it much easier to play a large frame size (2000+ pixels) easily.

Maybe the most efficient way to show a simple graphics animation in a modern web browser would be using SVG graphics animated using CSS code. This allows the web browser to play the animation efficiently itself, with no need for video embedding or plug-ins, and it will scale smoothly to any display size. Photoshop is not the tool for this method. You can draw the graphics in Adobe Illustrator and export them as SVG graphics, but the CSS animation code would have to be done in a different tool.

[qtluong]

Thank you for the informative and useful reply. I will try to experiment with exporting videos from Photoshop - never thought of it before! 

[Trevor.Dennis]

There are some amazing tools for making impressive content super easy to do, and output to video you can put on YouTube at no charge, and share on sites like this.  Adobe Express is my current favourite which also uses Character Animater to make characters lip sync to your recorded speech.

[Trevor.Dennis]

First off, what is your workflow here?

We can't see the entire timeline in your screen shot, and what we can see is Create Video Timeline.

Under that we can see Convert to Frame Animation

How exactly did you arrive at this state?  Are you starting with a video file? I am pretty sure that your timeline must be empty at this point, so I am not sure how the Convert to Frame Animation pop up was prompted.

In my experience, using the convert to frame animation feature only creates a single frame from a video, and I have never needed to work out how to do it properly.  You can convert frames to layers, (by using Convert to clips) but it will create maybe 330 layers for every second of video, and is a VERY impracticle workflow.

I've got to go so explane how you got to where you and between us we'll get you sorted.

[qtluong]

I followed the steps described in the link, which means that I opened an image file with layers (not a video file). The "Convert to Frame Animation" popped when I hovered the cursor over the three squares. However, at that point the cursor turned to a crossed circle (which was not recorded by the screen capture), so I could not click and activate frame animation. 

[Trevor.Dennis · Accepted solution]

OK, we can work with that. 

In the time line use the drop down and change it to Frame Animation.

Click on Create Frame Animation  which will create your first frame.

In the pop out menu in the top right corner of the timeline, click on Make Frames From Layers.

You are nine tenths there then, but you might have errant frames like the background layer that you'll need to create.   You might have no background, in which case, if it is white, don't worry about it.  If it is an image, you'll need to select all of the frames (Click on the first frame and Shift click on the last frame) then turn the image from on.  Don't forget that it need to be at the bottom of the layer stack.

As already alluded to back this thread, frame animations need to have small file sizes so the most I would normall work with is 1000 pixels square, but a bit more if you have just a few frames (say ten).  You can make them work with hardly any frames.  This one from the current Something For The Weekend thread has just two frames for instance, because each frame only has to rotate half way to the next spanner and the movement is concentric.

Have a play with Tweening. In its simplest form, you start with one frame

copy the frame and move the object

Select both frames and use Tweening to create the steps in between.  These can look very jerky so we might blur each frame to minise that. 

Show us what you create, but it needs to be no bigger than 4Mb.  To add an animation click on the add image icon, and then Find file. 

[Arelys5CF1]

Hello! The first step is not showing up. I do not get that drop down menu to change it to Frame Animation. See photo. I used to but not anymore. Once I go to Window>Timeline, this is the window that pops up. Please help! 

[Conrad C]

The reason you are seeing what is shown in your picture is that the Timeline is already in Frame Animation mode. The only change you can make from there is to switch it to a Video Timeline.