These links are good places to find more information on creating animated gifs and using Photoshop Elements.
Working knowledge of the following skills will make giffing easier. If you know them you are ready to go, if not take some time to familarize yourself with them before you start.
Opening, resizing and cropping images
Selecting and using the appropriate cutting tool (marquee, lasso, wand, quick selection)
Filling in background areas (clone and pattern stamp tools)
Using the eyedropper tool and color filling
Transforming cut areas (move tool, Image rotate, transform)
Placing movement layers in the layer palette
Merging visible layers in the layer palette
Creating animated gifs from illustrations and images from your collections is a great way to add interest to your Tumblr blog. Gifs are popular on Tumblr at the moment and taking advantage of this trend will help you promote collections and bring a wider audience to your blog.
The steps below will help you to create some of the most popular styles of animated gif being used by libraries on Tumblr right now. All of the tutorials use Photoshop Elements. The instructions are easy to follow with any version of Elements and with the full version of Photoshop as well. Once you understand the basics of giffing you will be on your way to creating fun and interesting gifs to share with your patrons.
Gifs are a great way to promote your collections and add a touch of whimsy to your Tumblr blog. You can see more of the gifs we have made on Othmeralia.
Creating an animated gif from a book image (moving images in a static image) tutorial
This tutorial will show you how to take a static image from the book collection and move one or more parts of the image to create an animated gif. This tutorial will show you how to create a basic three frame animated gif. Once you understand the process you can create more complex gifs with multiple moving parts or more frames.
1. Open Photoshop Elements.
2. Open the image you want to use.
3. Resize it so it is a smaller file or a jpg high res images are too large to gif.
4. Duplicate the background layer and rename it background 1.
5. Use the selection tool of your choice (lasso, magic wand, marquee) to select what you want to cut out to animate.
6. Right mouse click and select layer via cut to create the movement layer.
7. Rename this layer movement 1.
8. Hide the background and view only the cut layer and background 1.
9. Hide the cut layer and only view background 1.
10. Fill in the in the cut area of background 1 to match rest of the image using the stamp, paintbrush, or eyedropper so you don’t have a transparent gap in the gif background.
Now you have both your static background (background 1) and your moving part (movement 1) ready for animation.
11. Make both background the cut layer visible and copy both of them, rename them number background 2 and movement 2.
12. Move background 2 and movement 2 to the top of the layer stack make them visible, hiding the background, background 1 and movement 1 invisible.
13. Select movement 2, from the file bar select Image – Transform – Free Transform. Use this tool to move your cut part for the first frame. When you are done the first incremental movement click on the green check mark.
14. Copy background 2 and movement 2 and rename them background 3 and movement 3, hide them for now and go back to background 2 and movement 2.
15. Make background 2 and movement 2 are visible and next to each other you will now merge them into a frame. Right mouse click on movement 2 and select merge visible.
16. Rename this to frame 2.
17. Move frame to bottom after background and keep making layers, changes, and merges until you are finished.
18. Merge and rename background 1 and movement 1 as frame 1 when you are completely finished your animation frames.
19. Arrange the frames in number order you would like the animation to go with the first layer being the beginning of the animation. The layers run from the bottom up so put your first frame on the bottom and work your way upwards.
20. From the file bar select File - save for web.
21. Make sure animate is checked (use the other settings at your discretion).
22. Preview to see what it looks like, use the loop options to repeat or slow the animation.
23. Save as gif.
24. Post on Tumlr and let the notes roll in!
Creating an animated gif from a book image (merging images and backgrounds in a static image)
This gif is a variation of the movement layer git. You take two images and cut out one part of an image, add it a new image and animate the new composite image.
1. Open Photoshop Elements.
2. Open the images you want to use for the movement layer and the background.
3. Make your movement layer image the active layer and remove the background (quick select works good for this one, then select inverse to highlight the cut area, also the eraser is good for small spots).
4. Layer via cut, delete background you don’t need it anymore.
5. Move the background layer next to the cut layer so that both are showing (Window – Image – tile).
6. Using the move tool put it on the background.
7. Close the movement layer file you are done with it, you will now work with your background file and the movement layer only.
8. Animate following the same directions as the static image gif given above.
Creating an animated gif from a book image (making a slide show of static images)
This tutorial will show you how to take mulitple images and combine them into one file that cycles through all the images repeatedly. This is the most basic form of the animated gif and the easiest to make.
1. Open Photoshop Elements.
2. Open the images you want to use for the slide show.
3. Resize all the images to the same dimensions (turn off constrain proportions).
4. Use Window – Image – Tile to arrange all the images for moving into one file.
5. Using the move tool select the images then drag and drop them onto one image to create layers of the other images. The first image becomes the background the rest layers.
6. Use the move tool to arrange the layers to line up with the background.
7. File save for web.
8. Make sure animate is checked.
9. Preview to see what it looks like, use the loop options to repeat or slow the animation.
Creating a Gif using a video
Creating an animated gif from a video is easy. After you acquire your video frames it is the same process as creating a slideshow.
1. Make sure your video is saved on your computer and is in a format that Photoshop Elements can read such as .avi, .wmv, .asf, .mpg, .mpeg or .m1v. (if not use an online convertor to change the format)
2. Open Photoshop Elements.
3. File – Import – Frame from video, browse find your video.
4. Use the play buttons to watch your video and then then grab button to select the screen shots you want for your gif.
5. Resize all the images to the same dimensions (turn off constrain proportions).
6. Use Window – Image – Tile to arrange all the images for moving into one file.
7. Using the move tool select the images then drag and drop them onto one image to create layers of the other images. The first image becomes the background the rest layers.
8. Use the move tool to arrange the layers to line up with the background.
9. File save for web.
10. Make sure animate is checked.
11. Preview to see what it looks like, use the loop options to repeat or slow the animation.
Send us an email and we will try our best to help! Email us at othmeralia@sciencehistory.org