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?
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.Sign up to join this community
Yes and no.
If you have a file that can be opened in Photoshop can be saved as PNG.
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 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.
Yes it absolutely is possible.
An image sequence is dependent only on sequentially ordered file names, so there are only a few steps:
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).
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.
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.
Go to File > Export > Layers to Files, here choosing your desired image format (in your case likely PNG-24) and save location:
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.