Creating animated gif's in Photoshop CS5

I have created identical images in both Photoshop & .gif versions and can't get any of them to work
The images are saved in an 8 bit format. There are 8 layers. the largest version is 761px 760px.
When I get the dialog box for "save for web," no matter which version of the images I try, the animation choices are greyed out. I do not see a check box for "animate" like there is in my Elements 10 dialog box on another system. What do need to do to be able to save as an animation?

You need to ensure it's an animation in Photoshop's eyes.
An animated document is generally maintained with the frames in separate layers. For example, if you open an animated GIF, it may open each frame into a layer.
Make the Timeline panel visible (Window - Timeline).
If the animation doesn't show there, you may need to click the fly-out menu icon at the upper-right corner of the Timeline panel and choose Make Frames from Layers.
-Noel
Edit: Sorry, you said Photoshop CS5. In that version it's the Animation panel. Same panel, but renamed in Photoshop CS6 to Timeline.

Similar Messages

Animated GIF in a Photoshop layout?

I'm pretty new to website building stuff.
I want to make an entire webpage layout in Photoshop CS4 and put it into Dreamweaver and turn it into a template for a website. I understand all of the slicing and importing stuff, but I want the image in the upper left corner to be an animated GIF. The image in the upper left corner would be the only animated part.
How can I put the animated GIF into the layout? Can I put it directly in using Photoshop and have it work properly after slicing? Do I have to put it over top of the layout some how?
Ideally, I would be able to create the layout as one thing including the Gif and slice it up from there.
I'd like to know how this can work beforehand because I'd rather not invest a lot of time into it, just to have it fail.
I'm sure some people would suggest Flash, but I have no idea how to use Flash, and I would prefer to use an animated GIF made in Photoshop.
I would really, really appreciate some advice on this. Thanks in advance.
P.S. What I'm trying to do will look a bit like this... http://www.russabbott.com/ I'm aware that this is Flash, but I'm hoping for a GIF.

You put an animated gif into the layout the same way you put a static gif into the layout.
As I never let Photoshop create my layouts/pages for me, I can't really advise on that, but if you send your layout to Dreamweaver with the part you want as an animated gif carefully sliced into an entity of its own with a static gif in that position, you can go back in and substitute your animated gif for it afterwards.
And for heaven's sake, don't be afraid of "failure"...you're just testing your skills and if it doesn't work exactly as you think it will, you will have learned something.
Beth

Can i open and edit animated GIF in Adobe Photoshop Touch?

Can i open and edit animated GIF in Adobe Photoshop Touch?

No, only regular static GIF images are supported. The desktop version of Photoshop does support this however.

Create animated gif s?

Is there any such thing to create an animated gif? Something like a javax.imageio.ImageWriter implementation?
It should be a simple routine for putting some 3 to 5 Images together and publish them...
Thanks in advance,
Sebastian

Gif4J Library (http://www.gif4j.com) is the best solution to create animated gifs. Supports ImageIO and much more.

How to open animated .GIF files in Photoshop CS3 and newer

Q: Since ImageReady is long gone from Photoshop, how can I open animated GIF files in Photoshop CS3 and newer?
A: File -> import-> video to layers.
In the dialogue box type "*.*" to show all file types.
Select your GIF file and which frames to import.
They will now be available in your animation palette.

Zeno
curt y, sorry for the late reply, I tried that but I doesn't work. I have to choose at least two files in the Load Layers window in order for the OK button to be available and then some action script uses the different files to make layers and merges them but not from the frames of the gif file. I can undo through the script to see what it did but it never accessed the frames of the gif file, just the first frame. Choosing "make frames from layers" in the animation palette only puts the original files into layers - that is only the first frame of the gif file.
I guess I'm out of luck with the 64 bit version of Photoshop as Zeno suggested :-(
What program would you people suggest for opening each frame from gif files?

Creating animated GIF using Photoshop Scripting

Hi,
I am trying to mimic the action "Save for Web & Devices" of a PSD file, having 4 frames in an animation, into an animated GIF file.
I was suggested to use "ScriptingListener", but I did the copy/paste of the code, it did not work.
Is there a way to code a script, by using classes/functions to achieve this result ?
Thank you in advance.
Jean-Louis

Yes that's my understanding for Javascript, with clarification that with "compile them all into animated GIF through script" using some external program (e.g. check out ImageMagick). Whether that is an OK solution depends on what you are trying to do (just for own internal use or distribution).
For the Javascript docs see http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/photoshop/pdfs/photoshop-cc-javascr ipt-ref.pdf

Load/import images into layers to create animated gif in PE4

I'm trying to make an animated gif using Photoshop Elements 4.0.
I have numerous images (photos) that I need to insert into separate frames of one image.
(photo1, photo2 ..... photo10 - all combined in layers to create the frames of the animated gif)
I can open each photo separately, copy it, go the the animated gif image, create a new layer, and paste the image into the layer to create a frame in the animated gif. This is very time consuming.
Does Elements 4.0 allow for just opening/importing the separate images (photos) into the layers (frames) of the gif direclty? I remember having software that came with Macromedia Dreamweaver 4.0 in 2000 that made this simple and straight forward.

We are not the right people to ask. The Touch forum (for tablet) is at
Adobe Photoshop Touch for tablet
There's a long list f video tutorials here, but I can't see anything about animation
Learn Photoshop Touch | Adobe TV

What best adobe programs to (design) and (create) animated gif or image ?

Hello,
first thank you very much for helping me,
i am about creating an animated gif like the background you can see in war craft 3 frozen throne for a game,
i have to design it first with high quality so i need to know best adobe programs can do that, although i need to know the easiest, so i need to know both of them the best and the easiest so if didn't made it with the best i can made it with the easiest pro, and please put in mind that i need a program to design the image from nothing so i will draw it or design it i don't know depending on the program it self but i will not use it for editing or use an image already there, i need an elite pro that allow to create the image from nothing.
after that i need to create an animated gif for the image (gif not good for high quality images so if you know better please tell),
for example "Her hair moves with the moving wind" so i need to move it, i don't know how so i need a program to make it move too.
last thing at the end i need the file type be accepted in html(5) adobe games programs like flash builder or flash pro for example, i know flash pro can animate it but will not design it, thank you again.

It may require a few different apps. Clearly the number one app is you and your ability to conceptualize. And, it depends on what type of animation you ultimately want produced. Game graphics is a lot different than a web banner animated .gif. I'm thinking Illustrator, Photoshop, Edge Animate, and After Effects.

How to create animated GIF pictures?

I want to create rotating pictures for my site. I have Photoshop and ImageReady on my computer but don't know how to start. I want recommendation for a good site or link that has tutorials on this subject. Thanks
Anicha

A good program for making animated gif files is iDraw.
It's free, easy to use and you get it here:
http://www.macupdate.com/info.php/id/7325/idraw
Regards,
Cédric

Creating Animated GIF using Frames

I would like to create an animated gif without using the 'tween' tool. Basically, I'd like to have an object move across the screen, stop at one point, perform a task (i.e., move arms/legs up and down in a 'jumping jack' style) and then continue on across the screen. I create the first frame then click on the 'duplicate frame' icon. In this frame I use the puppet warp feature to change the position of my object's arms/legs. Next, I duplicate the frame again and repeat the puppet warp process. Finally, I continue to duplicate the frames, moving the object 'x' spaces each frame until it finishes its journey across the screen.
Unfortunately, when I change the position of my object's legs/arms, it changes all of them across all frames. However, the program still allows the object to continue its journey across the screen.
Because of this, I have had to create separate jpg files for each and every one of the object position changes, then import each one with the 'place' tool into the layers and finally create frames from layers and save the gif that way.
Is there a way to do the above without having to create a separate jpg for each one?

Hi SweetFang,
If you're using the Puppet Warp tool, I may suggest you change your workflow. When you duplicate a frame, it doesn't necessarily duplicate the object that is being animated so each change you make will show up in every frame. Instead of duplicating frames to make your changes, try duplicating layers. It will be a good deal easier than saving out a .jpg for each image and then placing them in.
1. Create your background.
2. Create a new layer for the object you will animate. Position it how you want it to look in the first frame of your animation.
3. Now, duplicate the layer and use the puppet transform tool to make your first change.
4. Repeat this process: duplicate your most recent layer, make your change, duplicate your most recent layer, make your change, etc. (To keep your workspace clear you may want to make each previous layer invisible when you add a new one)
5. When you're completely finished, open your Animation panel (CS5) or Timeline panel (CS6) and in the flyout menu, choose Make Frames From Layers
This workflow is essentially what you're doing already, but you're duplicating layers instead of frames and then making the frames automatically.
Please let me know if this makes your project a little bit smoother.
Cheers,
Michael

Animated GIFs in Flash Catalyst CS5

Hello - I'm hoping to get some advice on how to make the animated GIF I created in PhotoShop work when I import it into Catalyst. I have no problem adding the file to one of my states but unfortunately when I run the file it seems stuck on just the first layer of the GIF. Many thanks in advance for your help.

your animation must be on the main timeline. there should be no animated movieclip placed on the main timeline.

I am using Timeline to create animated GIFs, but it is going REALLY slow.

I am trying to create a simple animated GIF using Timeline. My plan is to have it last 20 seconds. But with just a couple of layers with straight-forward movements it moves incredibly slow. What is set to take 0.1 seconds takes 5-10 seconds… Am I setting my time too long? Doing the same thing for 5 seconds worked just fine -- but it was too short a time frame to get done what I wanted.

Sounds like you are using frame animation instead of timeline animation. for frames you take the total number of frames and divide it by total number of seconds, that should provide the # of seconds per frame.
Now if you would have gone the timeline route (CS3 and newer) You could have set a key frame for the beginning time of the animation and an ending time of the animation and be done with it, no need to figure out the speed. What it does is the opposite, you set the time and the fps(frames per second) and photoshop creates each frame for you.

Create animated GIF using imageio

How do you create an animated GIF using the J2SE's javax.imageio classes?
I have been browsing these 3 threads (one of which I participated in) to try and develop an SSCCE of creating an animated GIF.
[Writing out animated gifs with ImageIO?|http://forums.sun.com/thread.jspa?threadID=5204877]
[Wirting image metadata to control animated gif delays |http://forums.java.net/jive/thread.jspa?messageID=214284&]
[Help with GIF writer in imageio|http://www.javakb.com/Uwe/Forum.aspx/java-programmer/32892/Help-with-GIF-writer-in-imageio]
(pity I did not prompt the OP on that last one, to supply an SSCCE.)
Unfortunately, my efforts so far have been dismal. Either, without the IIOMetadata object, the GIF has frames with no delay, and it cycles just once, or with the IIOMetadata object I get an error.
IIOInvalidTreeException: Unknown child of root node!Can anyone point me in the right direction?
import java.awt.*;
import java.awt.image.*;
import javax.swing.*;
import java.io.*;
import java.net.URL;
import java.util.Iterator;
import javax.imageio.*;
import javax.imageio.metadata.*;
import javax.imageio.stream.*;
import org.w3c.dom.Node;
class WriteAnimatedGif {
/** Adapted from code via Brian Burkhalter on
http://forums.java.net/jive/thread.jspa?messageID=214284& */
public static Node getRootNode(String delayTime) {
    IIOMetadataNode root =
      new IIOMetadataNode("javax_imageio_gif_stream_1.0");
    IIOMetadataNode gce =
      new IIOMetadataNode("GraphicControlExtension");
    gce.setAttribute("disposalMethod", "none");
    gce.setAttribute("userInputFlag", "FALSE");
    gce.setAttribute("transparentColorFlag", "FALSE");
    gce.setAttribute("delayTime", delayTime);
    gce.setAttribute("transparentColorIndex", "255");
    root.appendChild(gce);
    IIOMetadataNode aes =
      new IIOMetadataNode("ApplicationExtensions");
    IIOMetadataNode ae =
      new IIOMetadataNode("ApplicationExtension");
    ae.setAttribute("applicationID", "NETSCAPE");
    ae.setAttribute("authenticationCode", "2.0");
    byte[] uo = new byte[] {
      (byte)0x21, (byte)0xff, (byte)0x0b,
      (byte)'N', (byte)'E', (byte)'T', (byte)'S',
      (byte)'C', (byte)'A', (byte)'P', (byte)'E',
      (byte)'2', (byte)'.', (byte)'0',
      (byte)0x03, (byte)0x01, (byte)0x00, (byte)0x00,
      (byte)0x00
    ae.setUserObject(uo);
    aes.appendChild(ae);
    root.appendChild(aes);
    return root;
/** Adapted from code via GeogffTitmus on
http://forums.sun.com/thread.jspa?messageID=9988198 */
public static File saveAnimate(
    BufferedImage[] frames,
    String name,
    String delayTime) throws Exception {
    File file = null;
    file = new File(name+".gif");
    Node root = getRootNode(delayTime);
    ImageWriter iw = ImageIO.getImageWritersByFormatName("gif").next();
    ImageOutputStream ios = ImageIO.createImageOutputStream(file);
    iw.setOutput(ios);
    //IIOImage ii = new IIOImage(frames[0], null, null);
    //IIOMetadata im = iw.getDefaultStreamMetadata(null);
    //IIOMetadata im = new AnimatedIIOMetadata();
    //im.setFromTree("gif", root);
    iw.prepareWriteSequence(null);
    for (int i = 0; i < frames.length; i++) {
      BufferedImage src = frames;
ImageWriteParam iwp = iw.getDefaultWriteParam();
IIOMetadata metadata = iw.getDefaultStreamMetadata(iwp);
System.out.println( "IIOMetadata: " + metadata );
//metadata.mergeTree(metadata.getNativeMetadataFormatName(), root);
metadata.setFromTree(metadata.getNativeMetadataFormatName(), root);
//Node root = metadata.getAsTree("javax_imageio_gif_image_1.0");
IIOImage ii = new IIOImage(src, null, metadata);
iw.writeToSequence( ii, (ImageWriteParam)null);
iw.endWriteSequence();
ios.close();
return file;
public static void main(String[] args) throws Exception {
// uncomment the other two if you like, but we can
// see it work or fail with just the first and last.
String[] names = {
"bronze",
//"silver",
//"gold",
"platinum"
String pre = "http://forums.sun.com/im/";
String suff = "-star.gif";
BufferedImage[] frames = new BufferedImage[names.length];
for (int ii=0; ii<names.length; ii++) {
URL url = new URL(pre + names[ii] + suff);
System.out.println(url);
frames[ii] = ImageIO.read(url);
File f = saveAnimate(frames, "animatedstars", "500");
JOptionPane.showMessageDialog( null, new ImageIcon(f.toURI().toURL()) );
Desktop.getDesktop().open(f);
ImageInputStream iis = ImageIO.createImageInputStream(f);
//System.out.println("ImageReader: " + ir1);
//System.out.println("IIOMetadata: " + ir1.getStreamMetadata());
Iterator itReaders = ImageIO.getImageReaders(iis);
while (itReaders.hasNext() ) {
ImageReader ir = (ImageReader)itReaders.next();
System.out.println("ImageReader: " + ir);
System.out.println("IIOMetadata: " + ir.getStreamMetadata());

According to imagio's [gif metadata specification|http://java.sun.com/javase/6/docs/api/javax/imageio/metadata/doc-files/gif_metadata.html], the metadata you are specifying is image-specific metadata. The stream metadata is global metadata applicable to all the images.
So change this,
IIOMetadataNode root =
    new IIOMetadataNode("javax_imageio_gif_stream_1.0");to this,
IIOMetadataNode root =
    new IIOMetadataNode("javax_imageio_gif_image_1.0");and this,
IIOMetadata metadata = iw.getDefaultStreamMetadata(iwp);
System.out.println( "IIOMetadata: " + metadata );
//metadata.mergeTree(metadata.getNativeMetadataFormatName(), root);
metadata.setFromTree(metadata.getNativeMetadataFormatName(), root);
//Node root = metadata.getAsTree("javax_imageio_gif_image_1.0");to this,
IIOMetadata metadata = iw.getDefaultImageMetadata(
        new ImageTypeSpecifier(src),null);
System.out.println("IIOMetadata: " + metadata);
metadata.mergeTree(metadata.getNativeMetadataFormatName(), root);Here is your program again, but with the above changes.
import java.awt.*;
import java.awt.image.*;
import javax.swing.*;
import java.io.*;
import java.net.URL;
import java.util.Iterator;
import javax.imageio.*;
import javax.imageio.metadata.*;
import javax.imageio.stream.*;
import org.w3c.dom.Node;
class WriteAnimatedGif {
    /** Adapted from code via Brian Burkhalter on
    http://forums.java.net/jive/thread.jspa?messageID=214284& */
    public static Node getRootNode(String delayTime) {
        IIOMetadataNode root =
                new IIOMetadataNode("javax_imageio_gif_image_1.0");
        IIOMetadataNode gce =
                new IIOMetadataNode("GraphicControlExtension");
        gce.setAttribute("disposalMethod", "none");
        gce.setAttribute("userInputFlag", "FALSE");
        gce.setAttribute("transparentColorFlag", "FALSE");
        gce.setAttribute("delayTime", delayTime);
        gce.setAttribute("transparentColorIndex", "255");
        root.appendChild(gce);
        IIOMetadataNode aes =
                new IIOMetadataNode("ApplicationExtensions");
        IIOMetadataNode ae =
                new IIOMetadataNode("ApplicationExtension");
        ae.setAttribute("applicationID", "NETSCAPE");
        ae.setAttribute("authenticationCode", "2.0");
        byte[] uo = new byte[]{
            (byte) 0x21, (byte) 0xff, (byte) 0x0b,
            (byte) 'N', (byte) 'E', (byte) 'T', (byte) 'S',
            (byte) 'C', (byte) 'A', (byte) 'P', (byte) 'E',
            (byte) '2', (byte) '.', (byte) '0',
            (byte) 0x03, (byte) 0x01, (byte) 0x00, (byte) 0x00,
            (byte) 0x00
        ae.setUserObject(uo);
        aes.appendChild(ae);
        root.appendChild(aes);
        return root;
    /** Adapted from code via GeogffTitmus on
    http://forums.sun.com/thread.jspa?messageID=9988198 */
    public static File saveAnimate(
            BufferedImage[] frames,
            String name,
            String delayTime) throws Exception {
        File file = null;
        file = new File(name + ".gif");
        Node root = getRootNode(delayTime);
        ImageWriter iw = ImageIO.getImageWritersByFormatName("gif").next();
        ImageOutputStream ios = ImageIO.createImageOutputStream(file);
        iw.setOutput(ios);
        //IIOImage ii = new IIOImage(frames[0], null, null);
        //IIOMetadata im = iw.getDefaultStreamMetadata(null);
        //IIOMetadata im = new AnimatedIIOMetadata();
        //im.setFromTree("gif", root);
        iw.prepareWriteSequence(null);
        for (int i = 0; i < frames.length; i++) {
            BufferedImage src = frames;
ImageWriteParam iwp = iw.getDefaultWriteParam();
IIOMetadata metadata = iw.getDefaultImageMetadata(
new ImageTypeSpecifier(src), null);
System.out.println("IIOMetadata: " + metadata);
metadata.mergeTree(metadata.getNativeMetadataFormatName(), root);
IIOImage ii = new IIOImage(src, null, metadata);
iw.writeToSequence(ii, (ImageWriteParam) null);
iw.endWriteSequence();
ios.close();
return file;
public static void main(String[] args) throws Exception {
// uncomment the other two if you like, but we can
// see it work or fail with just the first and last.
String[] names = {
"bronze",
//"silver",
//"gold",
"platinum"
String pre = "http://forums.sun.com/im/";
String suff = "-star.gif";
BufferedImage[] frames = new BufferedImage[names.length];
for (int ii = 0; ii < names.length; ii++) {
URL url = new URL(pre + names[ii] + suff);
System.out.println(url);
frames[ii] = ImageIO.read(url);
File f = saveAnimate(frames, "animatedstars", "500");
JOptionPane.showMessageDialog(null, new ImageIcon(f.toURI().toURL()));
Desktop.getDesktop().open(f);
ImageInputStream iis = ImageIO.createImageInputStream(f);
//System.out.println("ImageReader: " + ir1);
//System.out.println("IIOMetadata: " + ir1.getStreamMetadata());
Iterator itReaders = ImageIO.getImageReaders(iis);
while (itReaders.hasNext()) {
ImageReader ir = (ImageReader) itReaders.next();
System.out.println("ImageReader: " + ir);
System.out.println("IIOMetadata: " + ir.getStreamMetadata());

Animated GIF exported from Photoshop is blurry

I have an animated GIF, 400px x 400px, 150dpi. It looks fine in Photoshop, but when I Save for Web and export it, the GIF appears in the browser double the size and blurry. Even if I choose the export settings to be half the size at 200px x 200px, the GIF is still blurry. I thought a retina display might have something to do with it, but when testing on a PC, the GIF is still too large, even though it appears more clear.
What am I doing wrong here? I just want what appears in Photoshop to appear in the browser.

What aspect ratio are the photos in the slideshow? Have you tried cropping them to 3:2?
Happy New Year

Creating animated gif with transparency

I have created an animated gif that fades in from nothing (transparent) using the opacity tool.
when i save as optimised in Imageready the image fades in in a kind of grainy unatractive way.
is there any way i can adjust the optimisation settings so it doesn't do this? or any way of using tween to overcome it?
when veiwed in 'original' view it fades in beautifully with no grainyness
i have attached the image here as a demo (you might need to refresh the page to see it reload)
any help greatly appreciated!

The GIF format only offers 1-bit transparency so you either have pixels there at 100% or at 0%. A pattern or diffusion dither is used to fake partial transparency. This is where you see the grain.
You're trying to do something that the GIF format does not support. You need to approach this differently. Web page elements that fade in are done with javascript or Flash/SWF.

Creating animated gif's in Photoshop CS5

Similar Messages

Maybe you are looking for