Welcome to
Steve Wallet, Architect, Blogger Tips and Tricks first guest blogger with his post on working with animated gif images, Blogger and Photoshop. As for me, I only use free software, namely
Irfanview and PC Paint, so I hope Steve's post will provide useful information which I am not able to provided for those who like graphic heavy posts or blogs:
I saw Peter's article about adding .gif's to blogger (
Uploading animated .gif images to Blogger post), and thought I'd give it a try. I wanted to make .gif's and post them directly to my blog, without all the complicated html and uploading from other websites. After much trial-and-error, I have
created simple .gif's for my blog.
I use Adobe Photoshop and ImageReady, version 7. This article will make much more sense if you are familiar with Photoshop.
What I've learned so far.
1. To work on blogger, .gif's need to be very small: a small number of pixels and a small number of frames. ..I start with a new Photoshop image that is 200x200 pixels, with a transparent background.
.To keep the size small and the lines crisp, I draw my images within Photoshop using my computer mouse. Lines are typically 1 or 2 pixels thick.
.I use bucket painting sparingly, because it seems to reduce the number of frames.
.The larger the image size, the fewer frames you can have and still have your .gif run on blogger. With my small and simple images, I get about 10 frames maximum.
2. It is very helpful to make sketches of each of the animation frames before you start. Its faster to sketch on paper. Work out the number of frames, the images, what parts will move, ...
3. Drawing Hints.At this small size, lines blur when they are rotated. You can see this, for example, on the catnip leaves in the Cat .gif (April 24,2010 posting) in my blog. I now redraw objects in the new position instead of rotating them. The rotating arm in my Design Process .gif, (April 24, 2010 posting) was redrawn for every frame.
.When you copy and paste a part of an image with a transparent background, Photoshop moves the copy. When I want to copy a piece and keep it in the same place in the next frame, I use this process:
.Bucket paint the background of both layers (layer copying from and layer pasting to).
.Copy and paste onto new layer.
.Using the Magic Wand, select and then delete the bucket painting in the old and new frames.
4. Create all your animation frames in Photoshop, then move to ImageReady just to create the .gif.
.It is MUCH easier to manipulate your images in Photoshop than in ImageReady.
.You need to create a separate layer in Photoshop for each frame of the animation.
.Use a simple layer naming system to keep track of the animation layers, such as "Frame 1, Frame 2,...."
5. Rename and resave your .gif file every time you change it.
.Somewhere between ImageReady and the post editor, your .gif file updates get lost. Any change in the file name is enough to solve this problem. I give the file a name, and then just sequentially number each version. For example: "Design Process 8" might be the eighth version.
6. A successful .gif will animate as soon as you import it to the updated post editor.Unfortunately, I haven't come up with an exact formula for determining how many frames I can have in a .gif, I just guess. I insert the .gif in the post editor and see if it runs. If not, I go back to ImageReady and start removing frames (remembering to rename the .gif file after every change) until the .gif runs. This can make it hard to plan an animation. I often have to revise my design for fewer frames than I had wanted.
Example: My first .gif
This .gif shows a square that jumps between two positions every second.
1. Open a new image in Photoshop: 200x200 pixels, transparent background, 300 pixels/inch resolution. (File>New)
2. Draw a medium size black rectangle. (Toolbox>Foreground/Background Tool>set Foreground as black,Toolbox>Rectangle Tool)
3. Create a duplicate layer, name it "Frame 2". (Layer>Duplicate Layer)
4. Move the rectangle in layer 2 to a new position.(Toolbox>Move Tool)
5. Rename the first layer as "Frame 1". (Layer>Layer Properties)
6. Save as "Squares 1.psd" (File>Save as)
7. Jump to ImageReady (button at bottom of Toolbox)
8. Click on the arrow in the upper right hand corner of the Animation palette.
9. Select "Make Frames from Layers"
10. There should be two frames in the animation box now, each showing the square in a different position.
11. Click on the right-hand arrow again, and click on "Select all Frames".
12. Click on the "0 sec" below one of the frames, and select 1.0.
13. Select File>Save Optimized As, and save in your selected folder as "Squares-1.gif".
14. Go to your blog, create a new post using the new post editor.
15. Select "Insert Image" and insert your Squares-1.gif.
16. The square should jump between 2 positions every second.
That's the basics. Everything else is just more and more complicated images, sequences and timing. You can look at the .gif's on my blog for some ideas.
Good luck! Please share your .gif's with us.
