We created animated GIFs using the photoshop timeline. Firstly we created a new file sizing it at 300 by 100 pixels, and opening the timeline by selecting it from the window menu at the top of Photoshop.
We then created the artwork, adding each element in a different layer until we had at least 5. I created multiple coloured hexagons of varying size and position within the frame, with the aim to create a chain of different colours as the shape moves bilaterally across the frame.
Once the artwork was created we had to delete the empty/irrelevant background layer, before we selected all the layers and clicked create frame animation in the timeline box at the bottom of the Photoshop window, choosing the make frames from layers option from the timeline menu. After this we changed the frame rate of all of the frames to 0.1 seconds - meaning the duration of each frame was 0.1 second long before moving onto the next.
Once this was done and we were happy with the animation, we saved it, ready for the web. This was done by clicking 'save for web' rather than save, this opens a new window where you can change the file type, colours, the quality of the image, and in GIF animations case how often it loops before it stops. In this case we maintained the colour and quality, changed it GIF and looped forever.
We then also rendered and exported the GIF, going to file - export - render video opens a new window. In this window select Adobe Media Encoder, selecting Quicktime as the format, using a JPEG 2000 medium quality preset with a frame rate of 25FPS.
And this is what I created.
The second part of the class focused on a method called onion skins and is used mainly for digitizing hand drawn animations which have been drawn and scanned in frame by frame.
We set it up with a different document set up, using a 960 by 540 pixel canvas and a square pixel aspect ratio, and with the timeline open we added a new blank video layer from the layer menu at the top of the Photoshop window. With this new video layer in place, we opened the timeline window menu and changed the frame rate to 12 frames per second. We then opening the timeline menu again and turned on onion skins.
With onion skins on we added the artwork frame by frame, with onion skins on it reduces the opacity of the previous frame so that you can get the position of each of the elements right from one frame to the next, allowing for a smoother animation of any moving objects.
Once happy with the content of the animation we tested it out before exporting it to quicktime, using a medium jpeg qulity and a 24fps frame rate.
I think this particular gif animation could be a lot smoother with the motion of the circles.
The final part of the session focused on a method called Rotoscoping. We started by opening another new file, with 1280 by 720 as the resolution. Ensuring the timeline is open again, we added video from file, by going to the wideo layers menu in the layers menu and selecting 'new video layer form file' and finding the right file. In this case we were supplied with a few clips of breakdancers.
Again we changed the frame rate in Photoshop to 12fps, but this time we turned onion skins off, whilst turning the loop playback option on. We then had to draw over the video frame by frame, mine was a bit rushed so I just quickly drew a stick man over the break dancer's skeleton following the movement frame by frame. Once ready the video was exported and rendered using a JPEG medium quality setting with a 24fps frame rate ready for Quicktime.
As I mentioned before, my attempt is a bit rushed and therefore incomplete and untidy, given more time I would have liked to be more precise with my stickman, remove the background and obviously finish drawing over all of the video.