3

Hey we're getting an animation made for a startup loading for a new device and the company need it as a PNG sequence... is it possible to save this out in Photoshop as a PNG sequence?

Thanks!

1

Yes and no.

Of course!

If you have a file that can be opened in Photoshop can be saved as PNG.

But Nope

An animated GIF is interpreted in Photoshop as a stack of layers all in the same position and then saved as frame by frame in the GIF.

A PNG for a sequence is a grid of this images in one simple PNG, and the "sequence part" is given in a CSS code.

So...

So you need to rearrange this gif layers into a grid, and someone else needs to code the CSS.

In my opinion, it has no sense to do that. Try to use the GIF.

An additional problem

Is that you will be stuck with the aliased borders of the GIF, and you will have no smooth borders, which is the main point of haveing a PNG instead of a GIF, so probably you need to prepare it again anyway.

1

Yes it absolutely is possible.

An image sequence is dependent only on sequentially ordered file names, so there are only a few steps:

  1. Open the animated GIF in Photoshop: File > Open and choose your GIF.

    If necessary take note of the frame delay rate (found under Window > Timeline at the bottom-right of each frame) to keep playback speed the same in your new project (for use in APNGs, etc).

  2. In my experience it's best to rename all layers the same (the layers export will then add a numbered prefix). A quick way to do this is double-click on the name of the topmost layer in the Layers Panel, rename it as desired, then press Ctrl+A to select the new name, and Ctrl+C to copy it.

    Now press the Tab key (found above Caps Lock)... This automatically selects the name of the next layer down. Now just press Ctrl+V to paste. Keep Tabbing and Pasting until all layers are renamed.

    If you name all of your layers (for example) 'TEST' and clear the File Name Prefix field in the Export Layers to Files Dialog Box as shown in the image below), your sequence will be named as follows: _000_TEST, _001_TEST, etc.

  3. Highlight all layers in the Layers Panel (Ctrl+Alt+A), then go to Layer > Arrange > Reverse. This step is needed with animated GIFs to keep the frames in their proper order.

  4. Go to File > Export > Layers to Files, here choosing your desired image format (in your case likely PNG-24) and save location:

Export Layers to Files

Done.

There are other ways to do this as well but unless you have a ridiculous number of layers this method should suffice for what you're doing.

0

Yes.

  1. Go to File>Export>Render Video

  2. On the dropdown menu change from Adobe Media Encoder to Photoshop Image Sequence. enter image description here

  3. Click on the dropdown list for 'Format' and change it to PNG enter image description here

  4. Add a name for your file and a location for it to be saved. enter image description here

  5. Check all the other info is correct and hit 'Render'. enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.