After Effects Workshops

Today we started to use Adobe After Effects. I have never used this programme before so was very excited to learn how to create animation using the computer as that it what I tend to enjoy using to create things. We started off with simple movements as there were others like me who were unfamiliar with the program and its tools. We first learnt that each separate screen shown is a different composition and this allows you to keep organised when making an entire animation. To begin we did just one composition but were shown how to transition into other compositions as this was required of us for our next task (Kinetic Typography).

Screen Shot 2014-10-27 at 15.12.05 Screen Shot 2014-10-27 at 16.12.18

We learnt that you have to arrange what you want your final image to look like and then you work backwards through the animation and decide what you want to appear first and how you want it to appear. This is all achieved by the use of key frames and the transformation settings.

Screen Shot 2014-10-27 at 15.36.25

You can change the opacity, scale, rotation, position and finally 3D position (you can make text appear like it’s swinging). Another thing we learnt is inserting a ‘Null Object‘ this allows you to parent all the layers of text to this null object and increase the size and position of them together – saving time and effort! Below is the final image, displaying the layout of the key frames.

Screen Shot 2014-10-27 at 15.27.47 Screen Shot 2014-10-27 at 16.12.09

The next workshop, we used green screen and keying on After Effects to insert ourselves into an object and then have text appearing next to us. I decided to put myself into an iPad and then have the text appearing on the right hand side of the screen. I inserted an gradient background behind my head after I had keyed out the green screen. I then used the skills I learnt in the previous workshop to add in some text which appeared on the screen in various ways. I found this workshop really helpful as it gave me another chance to practice using After Effects before going away for reading week and having to create the Kinetic Typography task. Below is the outcome of the second workshop.


Task 3 – Animation Final

So for this task we were required to generate a 12 frame hand-drawn sequence in the style of the Praxinoscope which was provided for us to use. I wanted to draw a sequence which built as the animation progressed so I went for the “Bubbles” idea. This conforms to the CYCLE theme as the animation builds and gets filled with coloured bubbles before returning to nothing again. Below is the finished animated GIF and also an image of the entire hand-drawn strip which fits inside the Praxinoscope.

output_tl5KCI IMG_0155

The second part of the animation task was to create a stop motion animation. This style of animation can be created using anything from 4 images up to thousands of images. My image sequence contains 40 images and shows a knitted chicken trying to find a place to nest which is the right size. This narrative was adapted from the Goldilocks children’s story and demonstrates an example of stop motion animation. I used my DSLR Canon 600D camera to take these image, hence the shallow focus – drawing attention the the main object being the chicken.


HTML Workshop

In todays workshop we moved away from Programming and Processing and moved onto HTML & CSS. In order to create this HTML webpage we used the program ‘Brackets‘. First of all we went to which allows you to download a basic template for your webpage. This saves time and means that you can be as productive as possible – streamlining your workflow. Once everyone had downloaded this, we began to insert various lines of code.

Screen Shot 2014-11-09 at 18.39.20

Brackets is a great program to use as when you begin to type in the code you want, it comes up with a drop down list for you to choose from – this ensure that you are typing everything quickly and, again, saves time. The download folder from Bootstrap is saved in your documents and you can insert images/processing files into this folder and then onto your website. I inserted a previous processing file that was on my computer already. The code looks very complicated but I am starting to understand (as with Processing) what each line of code means. This is the outcome of just the Processing file inserted.

Screen Shot 2014-10-22 at 12.13.00

We then wanted to add in some text, columns and an image. The good thing about this was that as we make the window smaller, the columns transform into rows so that it all fits on the page. Below is the code used and my final outcome. As this was our first workshop, there are obviously things I still need to master but I am looking forward to creating more HTML documents like this and extending my knowledge and skills further.

Screen Shot 2014-10-22 at 12.13.20  Screen Shot 2014-10-22 at 12.44.56

Animation Research

In our seminar this week we learnt about animation and were introduced to the history of animation and how it came about all those years ago. We were shown the many ways that animation was achieved before the 20th century and before there was such technology like there is today. We looked at the Praxinoscope, and even had a chance to test how it worked as the uni have one that we are able to use to check our animations work.

picsThe Praxinoscope works by inserting a long strip of paper with different images drawn on each ‘frame’ you then spin the Praxinoscope and the animation is reflected in the mirror opposite the strip of paper. For our animation task we are required to create a 12 frame animation, and I am going to use this method and then transfer it to an animated GIF online using a GIF creator.


Other methods of animation is drawing-on-paper and flip-books which were the very beginning of animation. The first animation which features both synchronised music and sound effects was Walt Disneys ‘Steamboat Willie‘ which a short GIF is shown below. This animation was aired in 1928 and since then the animation world has evolved enormously, now with films such as Gravity and Avatar – both showing modern day animation.


Task 2 – Temporal Expressions Final

Following my research into this task, I began to create a joiner image in the style of David Hockney. I used the object of a Ben and Jerry’s tub. The main thing I found challenging for this particular element of the task was how time consuming it was. I found that putting all the images together was a lengthy process. Below is my final outcome.

joiner image

For my short exposure images I decided to use paint and water together to make the image more aesthetically pleasing. I first experimented with splattering paint onto a canvas but due to having no one helping me, it was extremely difficult to capture the paint at the exact right moment. Below is my failed attempt.

IMG_0001 IMG_0009

I tried to think of how I could capture something with me taking the photo and creating the movement and realised that me dropping water/paint into water would be easier for me to do both the tasks. I found a pot of pink paint in the garage and began to drip it from a height into a bowl of water. I had the camera shutter speed set to 1/4000 so that it was extra fast. It took many, many attempts to capture the perfect droplet but I managed to get three really good outcomes. These are seen below.

short exp1 short exp4 short exp3

When taking my long exposure images, I luckily enough had someone to help me so this process was much quicker and I was able to get some great images. I bought some sparklers and set my shutter speed to 3 so that it opened to lens up for three seconds and it captured many shapes that we drew. Below are my favourite photos from the selection I took.

moon long exp 5 amy fireworks bow long exp 3

I also managed to take this light streak photo, using the exact same technique as above. For the image below I had the shutter speed set to 15 so that lots of movement would be captured to give the illusion that the lights are being dragged along the road. I took this photo at around 6pm so that there were lots of cars on both side of the road and the colours came out extra defined.

Screen Shot 2014-10-22 at 09.39.57

Animated GIF

In todays workshop, we were taught how to create an animated GIF in Adobe Photoshop. We were provided with ‘Sprite Sheet‘ to use. A sprite sheet is a series of images – usually of an animation all put into a larger image. You then insert each separate image into photoshop, making sure they are all on their own layer. Next, you have to make sure the timeline is visible and make each layer a different frame and you can alter the speed of the animation by selecting all the frames and clicking on the seconds drop down button. Next, you have to reposition all the images so that the animation makes sense. To do this, you have to make sure you move the right image on the right layer so that it flows.


Screen Shot 2014-10-13 at 15.30.06

We were given a man walking as our animation, however, when you played it, it went backwards. To fix this problem you have to select all the frames, right click and select ‘reverse frames‘. Finally you can set how many times the animation plays, in our case we did an infinite loop so it kept playing until you close the GIF.

Screen Shot 2014-10-13 at 15.30.14

Screen Shot 2014-10-13 at 15.29.54

This workshop was really helpful when uploading our own animations and turning them into GIFs. The process was fairly easy to get the hang of and by taking screenshots allowed me to look back on the workshop and check that I was doing each stage correctly – saving time.


Temporal Expressions Research

This task is photography based and we are required to take various images using different styles. We need to replicate the style of David Hockney in his joiner images and take photos exploiting both long and short exposure.

In order to master the technique of David Hockney, it was necessary for me to research and discover what his work consisted of. First, I found out some basic facts about the artist such as how he was born on the 9th July 1937 in Yorkshire and is still alive today aged 77. The idea of a joiner image is placing lots of smaller images together to make a larger composition. He stumbled upon this technique accidentally and noticed that by creating these joiner images, it gives he viewer a narrative around the central object. Both of the photos below are examples of David Hockneys work. The left image was created in October 1982 and the right image in April 1982.

04 CP-035

This research was beneficial as it gave me a clear idea of how to create my own joiner image as I now have something to refer to and base it on.

When researching into the short/long exposure image styles, there was much more variety and different routes to go down. In order to comply with the ‘CYCLE‘ theme, I decided to do water and fire. I felt that water would look effective for the short exposure images as I would be able to capture it dripping or falling. And with fire I thought I could use sparklers or fireworks to exploit the long exposure.

Short exposure images mean that there is a fast shutter speed and less movement is allowed into the lens. When looking online, it was clear that good lighting was key to create a good quality short exposure image so I am definitely going to keep that in mind when producing my own. Below are some examples of short exposure images revolving around water/liquid.

shutter-speed-short-exposure bucket-water

Long exposure images require a slow shutter speed so that the lens allows more movement to be captured in the shot. In order to get the best possible image, the use of a tripod makes sure that the rest of the image stays still and the main focus is on the movement of the object. When looking into examples to adapt, it appeared the most popular was to use either fireworks or sparklers to draw shapes. I also noticed a lot of light streak images which I look forward to trying. Below are some of my favourite examples I found.

5165816c51a26f95930c8449058a54d5 trick-photography-long-exposure-ebook

Task 1 – Alphabet Task Final

This is the final Amy Alphabet task FINALcreation of the naturally occurring letters – forming the alphabet. I decided to use the theme of metal and block letters. Also, I wanted to keep the letters consistent and have all capital letters.

To make it easier to see the letters, I chose to use adjustment layers on Adobe Photoshop to contrast between colour and black and white.

This task was helpful as it allowed me to explore my creativity when looking and searching for the letters and it meant that I had to try and figure out where I could find particular letters such as the ‘Y‘ and ‘R‘.

The problems I faced during this task was definitely trying to be as imaginative as possible and finding the last few letters was extremely tedious. After I had taken all the images, using the adjustment layers I had to try and decide which colours and effects highlighted the letters the most effectively.

Processing Workshops

Processing is what we use for Programming. This is known as a “Set of Instructions” and various languages are used which are then interpreted to machine code. In these workshops, we were using Java.

The first workshop required us to simply make a circle and then make it disappear when the user clicks on the right-hand side of the stage. This was achieved by firstly, setting up the stage. Then drawing the object (circle) and then inputting the instructions the clear the stage. The screenshot below shows a commented version of what we created. I enjoyed this introduction to programming however as I am unfamiliar with the technique, it came across very overwhelming due to the various code shortcuts that are used. Despite this, it made me eager to learn more and progress further in the next workshop.

Screen Shot 2014-11-07 at 01.21.39

The second Processing workshop required us to create a sketch which draws 10 random circles on the stage without going off the stage. The circles had to be different diameters and colours. Also, when the mouse was clicked – the stage had to clear and the process would restart. At first, this task seemed impossible. However, we worked in pairs and together managed to start off the sketch using knowledge and screenshots from the previous workshop. Before we were given this task we were shown how to create random functions and loops. Within the random function, there are different variables which given information/values a name. With the loop function, there are two types; for and while loops and each individual cycle is known as an iteration. When trying to complete this task with no help, my partner and I managed to create what was expected of us but in a very long-winded way. We added each circle in separately but then were told there was a specific line of code which meant the computer would generate it all for us. Below is the difference between the code before and after it was shortened. The third screenshot shows the same task but for 500 circles.

Screen Shot 2014-10-09 at 11.20.19 Screen Shot 2014-10-09 at 11.41.59 Screen Shot 2014-10-09 at 11.44.14

In our final Processing workshop we were set the task to create an array of colours and randomly fill a square with one of the colours from the array when the mouse is clicked. Before this was set, we were shown how to create ‘do while‘ loops and how to alter the style, join and thickness of the outline of the object. There are also various ways to insert colours (RGB/HTML). This was the final outcome after I had figured and been helped to arrange the coding in the correct way. The main thing I am still struggling is knowing what piece of code goes where. I feel comfortable with what the majority of the codes we’ve learnt do but formatting and knowing where to place them is the part I’m finding most challenging. Hopefully this will become more naturally to me in the future when I am more confident with the concept.

Screen Shot 2014-10-16 at 11.16.48

Taking the Photos

Day 1: After we had finished researching exactly how we would continue with this task we decided that it would be best to just go outside and try and find some naturally occurring letters to spark up our imagination. We began with the simple letters such as L and T which we found quite easily when looking at scaffolding.

We had a workshop for Photoshop on Monday where we used layer masks in order to make sure that we presented this task professionally and neatly. I created 26 boxes, all the same distance apart and all align with each other. This ensured continuity in my design work. We recapped how to do the layer masking and managed to insert the four images of letters we took into the Photoshop document today. This showed that we remembered how to do the layer masking and gave us a start with the task.

Day 2: Following yesterdays success with the naturally occurring letters. Tessa and I spent around 3 hours searching for the remaining letters around the University – both inside and outside. We managed to find all of them apart from Z, R and G – which we were stuck on for ages and eventually managed to use our imagination and came up with creative ways of finding the letters.

We took all the photos on a Canon 600D camera which allowed us to access the best quality image as we set the ISO high and kept the shutter speed fast so that the images were crisp and defined. Using the manual settings of the camera is vital when hoping to produce the best possible quality of photo. It allows you to differentiate between a professional designer and a standard digital camera phone quality.