Wednesday, 11 December 2013


Well another project has come to an end and I am really happy with how this one turned out. After Effects is one of my favourite tools and through this course I keep having to use it with scenarios I haven't experienced before. I feel as though the promo and visualisations are some of the strongest video work I have produced for this course and I am proud of the outcome.

I think that everything fits the brief well swell. The visualisations clearly show how to use the app and demonstrate the various features and options it possesses. This is achieved through a number of inclusions. First is the simple setting and showcase of the app. Having an iPad/iPhone fill the screen on a black background focusses the eye onto the app itself and also highlights the text which appears along the right hand side of the devices. The text also helps to solidify the actions taking place and explain key features that may have otherwise been unclear or missed. Lastly the hand instead of red dots make for a very personal, human, professional touch that I think really makes the whole thing more easily understandable, relatable and clear.

The promo fits the brief because, although it is only 15 seconds, it tells a story, shows that it is advertising an app and shows of the premise for the app. It is leaves enough up to the imagination to warrant exploration and curiosity whilst still showing enough to make it not confusing to the viewer as to what was just advertised. I also think that it is engaging, humourous and quick which will grab the viewers attention and make them want to go to the app store to see what this app is all about. And at the end of the day that is exactly what the promo is supposed to do. Not promote and advertise the brand as much as it is supposed to advertise the app and attract an audience to check it out.

The app as a whole works as well within the Jack Daniel's brand. The inclusion of colour is justified by it being a tint of colour over a black and white image as a posed to being a colour photograph or colour video. The vintage instruction manual theme gives it grounding, ties it into the era of Jack Daniel's and looks appealing. The app is made to look aged and rustic and that ties into Jack Daniel's history and heritage that it is so proud of whilst also looking worn in and inviting to users. It makes the app a little quirky and interesting and also makes the menus clear and easy to navigate. It is very simple and easy to use and as a whole just works and really lends itself to the iPhone/iPad platform with multi-touch gestures and theme.

All in all this project was a success I think and I am very happy and proud of the work that I have produced. I think that it all fits the brief fully and that each product does the job it is supposed to do very well. I am a music lover myself and if this app came out I would definitely buy it.


I recently showed the two visualisations to the class and had them crit the pieces and tell me what they thought. It all went smoothly and all the feedback was positive. Everybody liked what I showed and had nothing but nice things to say about it. This is good and bad I think. It's good because it means that my products are successful, professional and engaging however, it's bad because I don't have anything to work off and improve or focus on. There were a few points raised in the crit that people took issue with or thought could be improved but they were aspects I had already considered and once I justified my reasoning behind the choice they agreed with me. I will however, mention the points raised and how I justified the choice.

Jack Daniel's Branding:

Probably the most key point raised was that the Jack Daniel's branding on my app was't sufficient. My classmates thought that it needed tone more prominent and present in more aspects and screens of the app. I however, don't see it that way. The app I created is made to carry out something very specific and it's its own self contained thing. It is a historical music time machine and being constantly reminded of Jack Daniel's through their logo being placed like some kind of watermark would be frustrating and give the impression that whoever made the app regards the users intelligence along side that of a spoon. 

I think that it is considered somewhat of an insult when (especially if you payed for it) a product feels the need to constantly promote a sponsor or advertiser. I have included a pretty substantial section for Jack Daniel's on the home screen and I think that that does enough to serve the need to include the name. I don't really want to show them else where in the app as it will cheapen their input and after all the app just has to have connotations and links to the brand that you choose it doesn't have to whole heartedly promote the user to go out and buy shares in the company.

Punchline Scene in Promo:

This is something I too wanted to include however, time constraints and budget issues made it somewhat of a possibility. The class mentioned that having the promo cut to me in a 1930's bar looking bewildered would be the icing on the cake and I agree. However, it isn't really feasible. I would need costumes, actors, a set and a few seconds more time allowed in the promo as to keep the comic timing and pacing of the promo I can't cut enough out to include another shot. If the promo were longer I feel as though it is something I would definitely improve so it could be included in a longer version of the same advert if it were commissioned for real. This one is purely down to physical constraints and hold ups and something that I would otherwise have included, it was just simply not possible.

Text Illegibility:

This one was simply down to technical failings on the day. The point was that the text on the menu screen was difficult to read. This was drown to the projector. The colours on there are quite limited, it is over exposed and there is a lack of contrast due to the way it is set up. On the computer screen there is a subtle drop shadow that is visible and does just enough to separate the text detailing the time era's from the image behind it however, on the projector that didn't show up. I don't want to overdo the drop shadow though. It being subtle is sleek and aesthetically pleasing making it darker or with a larger spread I think will cheapen it. It is very clear on the computer screen and will be far clearer on the intended device of the iPad and iPhone.


So overall there were some good points raised however, they were mainly things that I had already considered and justified and I don't want to come across arrogant or egotistical it is just that I think that the design works the best as it is and none of these suggestions were really adding to it. I had already tried the first two in the early design process and decided against them and once I said these points in class the people who raised the points agreed with me so I feel as though there are just a few minor subtleties but nothing major to change.


This is the promo I created for the Vibrolux 3000 app. I am very happy with how it turned out. It is humourous, unexpected, eye-catching and engaging. I think it is also clear what it is advertising without showing it to a cliché amount and loosing interest. After seeing this advert I thick viewers would venture onto the app store just to see more and that is entirely the point of the promo as stated in the brief. The promo is a short video to attract attention towards the app and I think that is exactly what the promo I have created does. It has all you need to know without going overboard.

This is the teleportation effect that I alluded to earlier with a previous blog post. It is merely my rotoscoped out and shrunk with my iPhone being rotoscoped out swell and placed in front of the layer of me. I think it is a very successful illusion. It all happens so quick you can't see the little discrepancies and errors as they are only a frame or two long. And I think that the sound effects do a huge amount to add to the success of the effect. They elongate it and give it a sense of physicality and depth. They almost fool the eye into thinking more is going on than there actually is because the teleportation effect itself is only about 6 frames long but the sound effect tricks the eye into thinking that more is happening. I also think that the phone being dropped really makes the shot work. I was going to leave that out as I thought it would prove too difficult to pull of convincingly however, I am so glad I included it. It really helps to bring the whole effect together and give it a solid ending and humourous conclusion. 

The promo also promotes the company upon which the app was inspired and points the viewer towards the market place through which the app can be purchased or viewed. I think with the time constraints in place simplicity was the only way to go with this promo and I think that that's why mine is successful it tells a full story within the 15 seconds and promotes an app. All in all I am very pleased with how it came out and think that it works a million times better than the previous idea I had sketched out in my sketchbook.


For my visualisations I wanted to inject a little flair and personality. I wasted to film myself from above with a green piece of card over my phone then pretend to use the app. I would then use keying and tracking to place the app on my phones screen. I thought however, that this would be difficult, time consuming and probably not come out as well as I hope. It would be difficult to place my hand in the exact right spot when I couldn't actually see the app on the screen. The fact that my finger would be slightly off the mark could prove distracting and problematic for the viewer. I thought of separating the two and filming just my hands over a green screen and then compositing them over the phone in After Effects. As I had that thought I thought that somebody must have already done this and done it better than I could as I don't have a green screen so I would have to fashion one and I don't have lighting so it would be difficult to get a clean key without spill.

Sure enough there was a few videos online. This one by 'Agustin Fioriti' looked perfect:

It is very professionally lit and the green screen is one constant colour, perfect for keying. There is a modicum of motion blur however, on the swipes and quicker hand movements but it looks manageable. The hand is lit nicely and the hand looks like the hand of a typical Apple product user or at least the image of an Apple user that Apple promotes. This video was perfect for my visualisations as it meant that I could scrub through the clip to the correct gesture and then find the frame where the hand is furthest down and place it with pixel perfect accuracy in the correct place. This look of hyper-perfection is really reminiscent of Apple commercials and I think it works really well to add that hint of professionalism and flair to my visualisations. It's that little extra effort that goes further than little red circles to illustrate a button press.

These are my final visualisations:

I think that the hand being used to illustrate clicks and swiped not only looks better and more professional but it also makes it far clearer as to what gestures do what and where on the screen you have to press/swipe. I also think that the text along the right hand side of the devices really add to the visualisations as they help to clarify what is happening and illustrate all of the features. Overall I am very happy with how these turned out.

Tuesday, 10 December 2013

Mastering the Art of Teleportation

I decided to change my idea for the promo. Well that is somewhat misleading. I always had the idea of doing a promo based around the idea of teleportation and had the idea that I ended up creating in my head from a very early stage. I thought with the time constraint present I wouldn't have the time to create a successful teleportation effect. 

I had just finished the iPad visualisation in After Effects and was rendering it out when I glanced at the time. It was a lot earlier than I had anticipated. The sun was still out and it was near golden hour. (Golden hour is film lingo for the period of time before the sun sets. A golden hue is thrown over everything with elongated shadows. Everything looks cinematic and beautiful). I decided to bite the bullet and at least try to film it and see if I can quickly do something with it. It turned out very well as I figured out a method for a convincing teleportation effect. 

I basically just placed the camera on a tripod to eliminate movement entirely. I then sat in the scene and acted out the movements I wished to illustrate of me picking up the phone and opening the app:

I then acted as if I was being pulled inwards/backwards to give the teleportation itself some movement and life:

I then left the scene to have a blank slate to place behind myself when I masked myself out of the original shot:

I then thought that to add a bit more life and possibly humour to the shot I could have my earphones and iPhone drop down onto the sofa as if they were left behind. To do this I held them above where I was sitting and then dropped them to the sofa retracting my arms quickly so that I could mask myself out of the shot:

I could then use the shot of the iPhone falling from when the earphones settled as a blank slate behind and leave them on the sofa:

I achieve the teleportation effect by placing the shot of the empty sofa underneath the shot of me using the app and moving sitting on the sofa. I then rotoscoped myself out of the shot by using the pen tool to draw points around me to create a layer that was just me and not the sofa around me. I could also use the shot of the sofa and not have me in it and fade it out to 0% transparency over a period of time to make it look as though the sofa rises again naturally as my weight leaves it. I could then shrink the layer I rotoscoped of me moving and shrink it quickly with motion blur as if I disappeared into nothing. I then place the layer of me dropping the iPhone over the top and mask me out of it completely so that the iPhone falls in the foreground. It is really surprisingly effective and has quite a comic look to it. You can see the effect in the finished promo when I upload it to YouTube and evaluate it in a later post.

Player Design

I wanted the players to be contextual to the era selected. I wanted it to be like a mini time machine. You will be transported back to the era you have selected and the app will place you in a typical scene from the time period. I wanted to keep it similar to the iPod app on iPhones (or just original iPods for that matter). I did this because I think that players in apps have a tendency to, when given the chance, overdo it somewhat. They create a very elaborate player that is so drastically different to anything seen before and unique. This can make it difficult and confusing to navigate and use. I wanted to create something familiar and user friendly. However, I did want to create a unique space that would evoke nostalgia and look fitting to the music playing. This posed an issue.

How was I going to create something historically accurate to the 30's and 40's yet still retain a modern method for controlling the music playing that is intuitive and not distracting/glaring. What I came up with is separating the two. The controls would be a self contained overlay. This gives them there own space and rationale. This makes them separate to the player and gives them the free reign to be completely different to their surroundings and not be glaring and distracting. They are merely functional and the fact that they are separate to the player itself and the fact that you can toggle them makes them able to be modern and not break the atmosphere. This is the player for the 1940's:

I wanted to include things that fit in to the time era. The cigarette, plectrum and newspaper place you in the time along with the table beneath them all. The coffee and money place the user in America adding some geographical relevance. I think this works well as it is simple and I don't think that I overdid the contextual objects around the record. It's enough to create an atmosphere and setting but not so much that it becomes overpowering and a gimmick. Now here are the controls I created:

(Ignore the fact that it looks strange. It is semi-transparent and that for some reason made it look weird in the preview when I screen shotted it). However, this is the controls system I created. It is simple, clean, familiar and easy to use. When overlaid onto the player it fits nicely and works effortlessly. I think that this is one of the best methods for combining ease of use with detail and atmosphere. And what's more because the controls are contained within themselves I didn't need to worry about changing them from player to player as they would just work over any player created. This creates unity over the app and makes it so that the user will never be lost will know how to control the app at any point without having to think about it.

Visual Progression

I had a direction, rationale and theme sorted out, I just needed to produce the assets. I took to Photoshop with the ideas sketched out in my sketchbook and then wanted to try to create what I saw in my head. There was an issue however,. In my sketchbook I had a low down, front on view of each player that was popular in the era everything from the gramophone to an iPod. Being a student trying to get assets and imagery for free and not having the resources or means to access an early 1870's gramophone I came across problems trying to acquire images that met up to the expectations I had from my sketches. After trying to make them work I was forced to abandon the idea. I managed to friend images I thought were well composed and appealing and tried to do what I could with them. This is the original menu system that I thought I would go with:

I did like this idea and felt as though it worked as a design. However I felt as though it didn't really adhere to the overall theme I felt was important. I really liked the instruction manual feel and I felt it justified adding colour as I mentioned in the previous post. It was a printing technique rather than just a photograph. Also this style doesn't really evoke the same time properties and chronological themes I felt were important. IT does show musical evolution and the colouring/picture quality does loosely allude to the time periods mentioned however, I felt as though I could do better.

With that in mind I went back to Photoshop with the goal of creating a menu system that linked a lot closer to the home screen. I thought that this would help to tie the app together as a whole and add an overall theme and tone. I also much preferred how the home screen looked to a more photographic and modern style I feel exudes from the above image. This is what I ended up creating:

I think that this works far better than the image above. It links to the home screen much more clearly and effectively, It looks nicer I think and it has a more defined difference between the era's selectable by having such vastly different colours. From this I then quickly came up with a loading screen idea:

I will add an ellipses in After Effects that will animate. This again ties into the menu screen and the home screen and allows the app as a whole to have a consistent solid theme and tone. The colour is contextual with the era selected as is the image at the bottom.

So that is the reasoning between the apps look and feel and why I strayed from the original idea. I will go over the decisions behind the player in the next post.

Blog Archive