Menu & Search

Bring still images to life

April 23, 2015

Making animated GIFs is probably the easiest way to bring still images, such as paintings or photographs, to life. It is also a lot of fun, as animated GIFs can be extremely simple, or they can combine several images and tell little stories. See great examples in the animated GIF collection in The Public Domain Review. 

To make an animated GIF you’ll need still images to start with. Have a look at Europeana portal or use Culture Cam to search for inspiring material to animate. Also image editing software, such as GIMP or Photoshop is needed.

Instructions for making an animated GIF in Photoshop

Adobe Photoshop is a proprietary graphic editing software by Adobe Systems. You can make animated GIFs in Photoshop by using the timeline (Window > Timeline). Note that the Timeline has two optional views: “Frame animation” and “Video timeline”. You can use either one of these when animating, but it is better not to change the view once you have started to animate, as the animation might not work correctly in the other view.

Making GIF with Moveable Part – Step by Step

STEP 1: SELECT MOVEABLE PART

  • Open image in Photoshop
  • Press W to get quick selection tool
  • Click and move pointer to select the area you want to use
  • Once you have selected the whole area, hide everything else with a layer mask and save image as a psd file
STEP 1: SELECT MOVEABLE PART Open image in Photoshop Press W to get quick selection tool Click and move pointer to select the area you want to use Once you have selected the whole area, hide everything else with a layer mask and save image as a psd file

STEP 1: SELECT MOVEABLE PART Open image in Photoshop Press W to get quick selection tool Click and move pointer to select the area you want to use Once you have selected the whole area, hide everything else with a layer mask and save image as a psd file

STEP 1: SELECT MOVEABLE PART Open image in Photoshop Press W to get quick selection tool Click and move pointer to select the area you want to use Once you have selected the whole area, hide everything else with a layer mask and save image as a psd file

STEP 1: SELECT MOVEABLE PART Open image in Photoshop Press W to get quick selection tool Click and move pointer to select the area you want to use Once you have selected the whole area, hide everything else with a layer mask and save image as a psd file

STEP 2: IMPORT PART ONTO BACKGROUND IMAGE

  • Open background image in Photoshop
  • Select File → Place embedded and choose the previously saved image. (TIP: you can also just drag the masked image into the background image, and it will appear as a new layer)
STEP 2: IMPORT PART ONTO BACKGROUND IMAGE  Open background image in Photoshop Select File → Place embedded and choose the previously saved image. (TIP: you can also just drag the masked image into the background image, and it will appear as a new layer)

STEP 2: IMPORT PART ONTO BACKGROUND IMAGE Open background image in Photoshop Select File → Place embedded and choose the previously saved image. (TIP: you can also just drag the masked image into the background image, and it will appear as a new layer)

STEP 2: IMPORT PART ONTO BACKGROUND IMAGE  Open background image in Photoshop Select File → Place embedded and choose the previously saved image. (TIP: you can also just drag the masked image into the background image, and it will appear as a new layer)

STEP 2: IMPORT PART ONTO BACKGROUND IMAGE Open background image in Photoshop Select File → Place embedded and choose the previously saved image. (TIP: you can also just drag the masked image into the background image, and it will appear as a new layer)

STEP 3: CREATE YOUR FRAMES

  • Drag the cut out section into desired position
  • Open Timeline (Window → Timeline), choose animation type (here frame animation)
STEP 3: CREATE YOUR FRAMES Drag the cut out section into desired position Open Timeline (Window → Timeline), choose animation type (here frame animation)

STEP 3: CREATE YOUR FRAMES Drag the cut out section into desired position Open Timeline (Window → Timeline), choose animation type (here frame animation)

STEP 3: CREATE YOUR FRAMES Drag the cut out section into desired position Open Timeline (Window → Timeline), choose animation type (here frame animation)

STEP 3: CREATE YOUR FRAMES Drag the cut out section into desired position Open Timeline (Window → Timeline), choose animation type (here frame animation)

 

  • Adjust the delay for the first frame
STEP 3: Adjust the delay for the first frame

STEP 3: Adjust the delay for the first frame

  • Duplicate the first frame, and drag the moving part where you want it to appear

STEP 3: Duplicate the first frame, and drag the moving part where you want it to appear

  • Select both frames and click Tween to create animation
STEP 3: Select both frames and click Tween to create animation

STEP 3: Select both frames and click Tween to create animation

  • Add more frames and elements, if you like. Use layer visibility to show/hide elements
STEP 3: Add more frames and elements, if you like. Use layer visibility to show/hide elements

STEP 3: Add more frames and elements, if you like. Use layer visibility to show/hide elements

Of course, Step 3 allows the opportunity to change the frames in more radical ways than simply moving the position of the cut out section – you can do two at once, add colour, rotate it, etc.

STEP 4: PREVIEW ANIMATION

  • Press Play button under the timeline
STEP 4: PREVIEW ANIMATION Press Play button under the timeline

STEP 4: PREVIEW ANIMATION Press Play button under the timeline

  • If necessary, adjust frame delay
STEP 4: If necessary, adjust frame delay

STEP 4: If necessary, adjust frame delay

STEP 5: SAVING AS AN ANIMATED GIF!!!

  • In top menu go to File → Save for web
STEP 5: SAVING AS AN ANIMATED GIF!!! In top menu go to File → Save for web

STEP 5: SAVING AS AN ANIMATED GIF!!! In top menu go to File → Save for web

  • In the pop-up window make sure the Looping Options is set to Forever
STEP 5: In the pop-up window make sure the Looping Options is set to Forever. When you are ready, click Save… DONE!

STEP 5: In the pop-up window make sure the Looping Options is set to Forever. When you are ready, click Save… DONE!

  • When you are ready, click Save…
  • DONE!

rousseau-fish

Original images: National Library of FranceRybinsk State Architectural, Historical and Art Museum Preserve

More tips and instructions here.

Article Tags
Neea Laakso
Related article
As Light Goes By – Installation for the Mix it up! exhibition

As Light Goes By – Installation for the Mix it up! exhibition

As Light Goes By is an installation made for the Mix it…

Free? – Installation for the Mix it up! exhibition

Free? – Installation for the Mix it up! exhibition

Free? is a laser cut light-and-shadow installation made for the…

CultJam Helsinki at Aalto Fablab

CultJam Helsinki at Aalto Fablab

We challenged a group of creative designers and artists to…

Type your search keyword, and press enter to search