Tuesday, 3 July 2012

Animated Gifs

An animated gif is a type of GIF image that can be made to show movement by combining several images into a single GIF. There are two types of animated gifs, one being a combination of several photos and the other being a combination of a video and a still image. 

Jamie Beck is a New York City based fashion photographer. He collaborated with Kevin Burg, a web designer with a background in video and motion graphics, to develop the art of animated GIFs. They began creating them during fashion week a year ago. Their first animated images were a series of still shots in a continuous loop. Then on they began to find new ways of creating a more fluid motion and isolating certain parts of an image to capture the moment. The process involves still and video photography. Taking a photograph captures the moment in a still time frame but with an addition of video it allows that magical moment to come to life. Cinemagraphs are a way of adding motion to a still image. For them a intricate ones would take about a day whereas a simpler one would take 3-4hours. 
This was my first attempt at creating an animated gif.
1. I set up what I wanted to capture and set my camera up on a tripod.
2. I put my camera on continuous shutter
3. Filled the glass up slowly whilst taking continuous photographs.
4. Open photoshop and load all the images in separate layers. The easy way to do this is  go to file - scripts - load files into stack.
4. Select windows - animation. This will have the first image selected in the box that pops up.
5. Click on the small tab at the bottom of the animation box that says 'duplicate this layer'. To add the second photo click on the eye next to the first image/layer in the layer box.
6. Continue to duplicate the layer and hide the previous layer until you have reached the last photo. Keep the last layer visible.
7. Shift - click all of the boxes so that they are all selected in the animation box.
8. Click on the time selector at the bottom left hand corner of the animation box. Here you can change how much time you want between each photograph.
9. Click on the repetition selector, choose 'forever'. Click the play button to preview the animation. After viewing it you can change the timings between each frame and whether to delete or keep each frame.
10. To save click save for web and devices. Adjust the side, make sure the dither is up to 100% and that the colours are up to the highest. Save as gif. 
This was my second attempt at an animated gif following the same theme as the one before. I think these worked quite well as my first animated gifs I've made as they were simple but captures what I wanted to without it going wrong. I coloured the water red so that it would be easy to see the water being poured into the glass.  

This was slightly different to an animated gif, I wanted to develop my skills further so I tried to make a cinemagraph. I did this in Photoshop by following a tutorial.

1.. capture a video of the set up where something is moving.
2. Open Photoshop. Press ctrl O to open a file, open the video file that you are using for your cinemagraph.
3.  If the animation box does not pop up straight away then go to windows - animation.
4. Click on the fly out menu ( arrow with 3 lines next to it) and click document settings. Change the Frame rate to 15fps.
5. move the first time line indicator to where you want your video to start from. move your mouse to over the Work area start point, click and hold and hold down shift and drag it to the time line indicator that you just moved. The Work area start point should snap to the line.
6. Capture about 12 frames of the video for the animation. move to the bottom of the animation box and select next frame, click this 12 times.
7. Click and hold the work area end point, hold down shift and drag it to where the time line indicator is now at. Press play to view the frames inside of the selected region.
8. Go to the fly out menu, click trim document duration to work area.
9. Use the time line indicator to find a frame that you want to capturre as the still photograph.
10. Go to select - All. Go to Edit - Copy Merged. Go to Edit - Paste.
11. Press the Q key, or go to the icon with the white circle in the square underneath the colour box. Select the paintbrush tool and select the colour black. Choose the size of the brush depending on your image and with a hardness of 68%.
12. On your image, paint over the areas of the image that you do not want to move.
13. Select the Q key or to icon underneath the colour box. This makes a quick selection.
14. In the layers panel, hide the video layer by clicking they eye next to layer 1. Have the frozen layer selected (layer 2.)
15. Hold the Alt key and click the layer mask button at the bottom of they layer panel.
16. Turn on the visibility of the video layer by clicking the eye next to layer 1.
17. In the animation box, click play to view the animation.
18. Go to the fly out menu once again, click flatten frames into layers. Each frame is now in a layer. throw away the original layers, select the layer with the mask (layer 2, and layer 1), drag them to the trash can icon.
19. Select the lowest frame (frame 0). Right at the base of the right hand side of the animation box is an icon with 3 squares in it, click on this.
20. Go to the fly out menu, click make frames from layers. Click the play button to view the series of frames.
21.  On the first frame Click on the time selector at the bottom left hand corner of the animation box and select no delay.
22.  Click on the repetition selector, choose 'forever'. Press play to view the animation.
23. To export it as an animated gif, go to file - save for web and devices.
24. adjust the file size down for example 600w. in the presets select GIF, selective, dither the image with pattern, select the highest colours, click on covert to sRGB. Save.

I found this slightly harder than the animated gif as it had more steps involved but once I had worked out where all the icons were it was quite easy to follow. I think its a easy way to create a cinemagraph with simple steps. I was pleased with my own one as I like how the water level of the liquid does not increase as the water is being poured in. 

No comments:

Post a Comment