Developing Stop-Motion- Using Reverse Effects

As illustrated in the previous post, the footage was running into other and making it look disjointed and unprofessional. To overcome this, I started experimenting with a different effect; reversing. This allowed me to manipulate the footage into moving in two separate directions. The first footage runs normally and then I used Final Cut Pro to reverse the second before importing into Adobe After Effects. From my feedback I was told that this looked much better and allowed the images to be seen clearly whilst providing room for text at the end of the animation. Here are some screen shots of my final idea.

Screen shot 2012-12-05 at 13.56.02


Developing Stop-Motion Idea

From previous attempts of ideas that didn’t work i had now decided that the stop-motion technique is something that best suited my web banner vision. I took a 3rd batch of photographs in the sequence that I wanted and then followed this process to prepare the images.

1. Firstly, I resized my images in photoshop to reflect the size of my composition window by using the website This meant that i did not have to individually alter each photograph, and that it would resize all of them.

2. Secondly, I renamed all the images into a number sequence so they would be read easily from start to end.

3. Thirdly, I then created a new composition in Adobe After Effects and imported my stop-motion and dragged it into the window. This produced one layer, where each image lasted for one frame, so the whole animation was very fast.

4. I then had to make it slower by using time remapping and adding keyframes to each individual frame.

5. Then, because my footage wasn’t long enough to fit the size guidelines of a web banner, I duplicated the footage and placed them next to each other to allow the banner to be extended.

Screen Shot 2012-11-23 at 13.34.36

This was an effect that I thought would work really well at the top of a website as it would run across the screen, grabbing the users attention, however I faced a problem at this stage. Because I was using multiple footage the shoes were running into eachother, and therefore the first shoe was entering the second screen and conflicting with the next shoe on the first. Here is a screen shot of what I am describing. You can see the brown shoe and the orange shoe are clashing into each other and this clashing continues throughout the animation.

Screen Shot 2012-11-23 at 13.42.41

Start of Web Banner – Stop-motion Idea.

Screen shot 2012-12-05 at 14.08.24

I created my final stop-motion where I used 15-20 shoes, and individually moved each one along to give the illusion of a long line/catwalk of shoes, presenting each ones different shape, colour and design. Here is the process I used to prepare these images.

  • I used a white sheet and white wallpaper for a clear background and placed the camera at floor level (the tripod was too high) and secured the camera to the floor to avoid movement and jumps in the images.
  • After multiple sequences, I picked the best images and began editing the lighting and tones etc to make them clearer and bright enough for a web banner.
  • I then learnt how to resize the image from I then opened the images in Photoshop, clicked on Actions and created/recorded a new set of actions. This allowed me to apply all the changes I had made to each photo all at once instead of individually and placed the image into a JPEG folder.

Screen shot 2012-12-05 at 14.28.29

I then imported my final images as a JPEG sequence into Adobe After Effects and began editing and moving the images for my web banner.

Screen Shot 2012-11-23 at 12.03.32

Screen Shot 2012-11-23 at 11.49.25

I then started experimenting with fonts and presets for my banner. I had already chosen my text from my proposal and from my previous logo project, I knew which fonts would best represent my target audience. To keep the fluidity and continue the same ideas through each project I used the same script font and used my logo brand as the website address. All these may be altered and edited after my feedback presentations.

Screen Shot 2012-11-23 at 13.32.29

Second Idea- Stop Motion

As my first idea of the walking figure was proving difficult to produce successfully, I began experimenting with how I can incorporate my shoes into a web banner using stop-motion. These are screen shots of some of my stop-motion drafts that I created.

This mini stop-motion was making the shoes move as if someone was wearing them and walking in a line. This looked much better then the footage of the figure walking, however I wasn’t sure whether this would represent my brand ethos as it looks quite funny with the absence of the person and not classic high-fashion.

This was my second attempt, moving the shoes in a rotation, showing each angle of the shoes as if they were spinning on a stand in a display cabinet. This effect worked well, and throughout the stop-motion I kept adding a shoe after one full rotation so it kept the viewer interested and varied the animation.

Screen shot 2012-12-05 at 13.47.27


This was my third experiment, creating a mini narrative where two shoes crawl their way out of the shoe box and run along the screen. I also converted it the black and white so it gave the classic edge i wanted to portray. Although this was fun and quirky, it was more of a mini animation rather then a web banner.

All three of these ideas worked well and provided me with a foundation of ideas to develop, however none of them would be long (in length) enough to look like a web banner, as they were photograph size. So this was something I had to continue to work with.