Photoshop for Animation Workshop

Frame by frame animation

The workshop began with us opening up a Photoshop document with all of the artwork needed to develop an animation of how an app interface works. 

- window
- timeline
- create frame animation
- duplicate frame

- change the view on each of the frames gradually so that the simple animation can start 

- tween the frames (the smoothness between each frame)

- only have the opacity ticked

- it has been used to fade the opacity gradually between the last two frames

- it has now added 12 new frames to help with the animation of the decreasing of opacity

- the 1st frame is kept the same and duplicated

- the 2nd frame is then manipulated, the menu has been pushed to the left, the finger print is mimicking this movement and then the opacity is decreased so that the content can show through

- to render video as an mp4, export, render

- to render video into a gif format 

- export, save for web

- height 324

Video animation 

- set the timeline frame rate to 24 by 24

- convert the layer with the moving element into a smart object so that when it is edited on an external software, it will change automatically in Photoshop

- moved the fingerprint to the arrow

- made a frame by clicking the timer

- I then drag along to a later time and made the button smaller, once again pressing the stopwatch button

- I then copied the first key frame of this process and made a new one that I could copy and paste it onto

- the video animation will then automatically tween this to make a smooth animation of it moving

I found this workshop really useful and it will help me to produce animations to show how my app will work when interacted with by the user.