Thursday, 23 April 2015

Photoshop tutorial: Animated GIF (PHOTOSHOP TIMELINE)


Firstly, we set up our document. We created a custom document because of the unique height and width of the pixels, we used a 300 pixels width by a 100 pixel height. this gave us lots of room to be able to play with and left plenty of room for our animation to animate in. The resolution didn't matter as we were only creating a quick and simple gif. 


This is where we learn a bit more about the timeline option in photoshop. To start to create the animation we created 10 different video layers and create a different object on every layer, I chose to create circles because i felt that this was a quick and simple gif using geometric shapes and i was focused on learning how to create the gif rather than the final outcome. Once we had our layers we selected the create frame animation button; this sent all of our layers onto one single layer on the timeline. we then selected the drop down menu on the right hand side of the timeline and selected the make all layers button. This made the 10 separate layer we once had in the order we made them in. We could then go onto creating the actual animation. 


These are some stages of development of my animated GIF, first we had to set up the photoshop document. we created a work space of 300 pixels by 100 pixels this is the normal size of most animated gifs. Once we had it set up it was time to start.

Step 1: We went to Window and selected Timeline.
Step 2: We created ten different layers and I used a geometric shape on each layer.
Step 3: Select Create key frame animation button
Step 4: A single layer appears, go to the drop down menu on the right hand side and select the button which creates the layers separately so there are more than 1.
Step 5: Mess around with the timing by selecting all of the layers and clicking on the time at the bottom of one of the layers in this case we changed it to 0.1 frames per second.

I was very happy with this tutorial, I learned a new skill that I never new was possible on photoshop (Animation) I found that the process of creating an animated gif was quite simple and useful for future if I were to create website designs with gifs which feature on the design. This is definitely one to remember for the future and I enjoyed the tutorial in general, I felt that I learned a lot from
this tutorial.

No comments:

Post a Comment