Development and Realisation Task – Research

To prepare for designing my poster for this assignment, I carried out some research into the subject I’m interested in. The subject I have chosen to visually represent is “Who Lives the Longest?”. For this subject, I think it’s appropriate to use a somewhat simplistic style with not too many clashing colours and shapes.

While doing secondary research into what makes a visually memorable poster, I went to http://www.informationisbeautiful.net in order to see and analyse the layout of information and the visual style of the available posters. Naturally, each poster has a different style depending on the subject it’s represents; for example there are posters based on complex topics like human consciousness and simple subjects like most preferred breeds of dog (pictured below)

One of the most common elements I noted while looking at these posters was the use of blocks of colour and shapes in order to create a visual connection to the subject. Different colours are used to identify different themes (e.g. green = nature, purple = science, etc.).

Visiting this website was very helpful for my research due to its huge range of different posters for many different subjects. It also gave me a lot of inpiration on how to design and present the content on my poster.

Workshops – Adobe Illustrator and Inkscape

During our recent workshops, we have been introduced to image manipulation software that allowed us to create vector graphic images. In particular, we have been using Adobe Illustrator and Inkscape (pictured respectively below) in order to create bitmap and PNG images that keep their image quality after being re-sized.

So far, I’ve found these programs very useful and I think they could easily help me out when I’ll be designing my poster for the Development and Realisation assignment.

Screen Shot 2014-11-24 at 19.36.00Screen Shot 2014-11-24 at 19.16.54

One of the first tasks we were set with this software was to use everything we learnt from the software and create a vector graphic image of a Kokeshi doll. A kokeshi is a (typically wooden) Japanese doll that is made with a simple style and enlarged head.

Since I had previous experience with other image manipulation software such as Photoshop and Fireworks, I found it quite easy and quick to produce a vector graphic image with the features that were available in Inkscape. Pictured below is my finished image and some screenshots showing part of the process of making it.

kokeshi

Click to see full-size

Screen Shot 2014-11-23 at 16.50.05Screen Shot 2014-11-23 at 19.47.02

Coding workshop – CSS and HTML

This week, we had a workshop that put all of our coding skills we learnt up till this point to the test. We were shown a webpage on the big screen in our computer lab and we were then tasked to re-create it with the use of HTML and CSS.

We used the coding software Brackets to create the code and make the final webpage. I found this session particularly useful, because it helped me revise and improve my skills. It also reminded me on how to use and implement certain features like the “margin” and “float” functions. The following pictures show the finished lookalike webpage and the HTML and CSS code (respectively) used to produce it.

HTML

HTML

Screen Shot 2014-11-17 at 16.49.55

CSS

In order to help me revise how some of the above functions worked, I needed to access websites that offered tutorials on coding. I found the following websites most useful:

http://www.w3schools.com/

http://www.codecademy.com/

For a first attempt at re-creating a webpage, I felt that it went surprisingly well, and the result is almost identical to the page we saw on the board. After doing this exercise, I certainly felt more confident about coding and the results I can produce with it.

Development and Realisation unit – Design Analysis & Communication Design A2 Poster

I have just finished my kinetic typography, which was the last task in the Concept and Ideation unit, using After Effects.

In today’s lecture, we have been introduced to the new Development and Realisation unit, and we have been given our first assignment for it. The final result of this unit will include a poster that presents visually communicated text and data. We have been given various subjects in the form of questions to base our posters on, the most interesting examples for me being the ones about social media, music and Star Wars. Our posters are meant to be the visual representation of the results we have obtained for one of the questions.

In this new assignment, we must also put our blogs to good use and put together a collection of supporting work and research for different visual design techniques in posters. I plan to use my time efficiently throughout this unit to explore different simple art styles that are easy to look at and are informative at the same time.

We can choose one question to present on our posters from the following list:

  • Where have you been and when?
  • What is your social network?
  • How many documented meteor impacts have there been?
  • Who lives the longest?
  • What is the fattest country?
  • Where do different genders shop online?
  • Who knows each other and how in Star Wars?
  • What type of music is the most popular?
  • Who has the largest carbon footprint?
  • How does the hydrologic cycle (also called the water cycle) work?

Workshops – Adobe After Effects 2

In today’s workshop session, we looked at and discussed the features of Adobe After Effects. More specifically, we worked on creating particle effects and animations with imported graphics from Photoshop. This would be the last workshop we’re having on After Effects, as we’re moving on to other types of software and coding. Overall I’ve found After Effects very useful and fun to create animations with, especially during the kinetic typography task.

In the first part of the workshop, we all produced short animations that made use of a winter background and particle animations, similar to falling snowflakes. As we were creating these animations, we learned how to change different elements like camera angles and particle effects.

In the second part of the workshop, we produced simple drawings on Photoshop, created patterns out of them and then imported them into After Effects as image files. I wanted to use the effects available in After Effects to make a short and bizarre animation that looked similar to an optical illusion.

Concept and Ideation Task 4 – Reflection on Work

While it took me a few hours to animate my kinetic typography, it would have taken longer if I hadn’t had previous experience with After Effects. I had used After Effects before in a workshop at University, and on a college course last year, and the experience proved to be very useful for this assignment. Overall, I would say I’m very proud of the final result that I produced and I learnt new features from this software (e.g. how to move many items in unison).

One of the things I would improve about my kinetic typography would be the timing of some of the animations. Next time I create an animation like this, I would like to get the audio and video synced up as well as possible. I could also use a bigger variety of fonts to make the animation more interesting.

The only major problem I had throughout this assignment was the fact that Adobe After Effects doesn’t work on any of my computers at home. This is why I used the University Library to get all my editing and animating done. While this gave me a limited time to work on my project, it helped me improve my speed and efficiency with using After Effects.

Of all the projects we’ve done so far, I would say that this has been the most fun to do, as we were allowed to choose any audio from any exiting media and animate words to it the way we wanted. This task was creative and it also gave me a chance to improve my software skills.

Concept and Ideation Task 4 – My Kinetic Typography

I finally completed my kinetic typography animation with Adobe After Effects. The full process of animating it, rendering and exporting it took a total of 4 hours. Since we could choose any audio to go with our animations, I decided to use a clip from one of the Joker’s scenes in the game Batman: Arkham Origins (2013).

The original audio can be found from the following link:

http://www.youtube.com/watch?v=pjQ6EzFfc0w

Concept and Ideation Task 3 – My Animation

After looking at and researching different types of stop-motion animation (e.g. clay-based, paper-based), I decided to use paper in my animation for this assignment. Pictured below is my first solo attempt at a stop-motion animation. It follows the theme of “water cycle“.

Click to see full-size

Click to see full-size

The animation is made up of 25 frames, all of which I took with a digital camera. I wanted everything in the picture to move, so that all the emphasis isn’t one the water. This is why most of the shots are at a slightly different angle. I could have improved the steadiness of the shots and put them together in a less shaky way; this is one of the only major issues that I would improve about my first animation.

In order to animate the water drop in my animation, I looked at short videos online that showed how they are formed. In my animation, each stage of the drop falling into the bowl is made up of individual drawings that I produced.

Concept and Colour drawings:

photo image

Concept and Ideation Task 3 – Animation Research

In order to get a better understanding of how to carry out this task and create a stop-motion animation of my own, I decided to look at other sources, such as online videos and webpages that focused on this type of animation. Although I’m more used to digital animation, I’ve wanted to try animating like this since I saw stop-motion films (e.g. Wallace & Gromit, Chicken Run, etc.) as a child.

The picture below shows an example of a set used by a professional studio to create stop-motion animations.

I found researching this subject particularly useful, as I haven’t done a lot of stop-motion animation up till this point. The final result that I will be animating will follow my chosen theme of the “water cycle”.

The following links were some of the examples I found most useful for my research:

http://www.aardman.com/ – The official website of the famous Aardman Animations LTD. This page gives details on the company and its previous projects.

http://www.awn.com/ – Short for, Animation World Network, AWN reports on animated movies as well as other types of animation. This expansive website also provides other interesting material such as interviews with famous people in the industry, as well as trailers, previews and articles associated with animation.

traceloops.tumblr.com/ – A useful and cleverly presented collection of animations, made from different techniques (e.g. hand-drawing, rotoscoping, etc.)

Temporal Expressions – Slit-scan

During the same week we were given the temporal expressions task, we were also introduced to slit-scan photography.

Slit-scan photography is a photographic technique that creates pictures that are made up of several different slits. This can help change or distort the appearance of the image you want to capture. The pictures below, following the water cycle theme, were taken using the free slit-scan app on my phone.

image image_2 image_3 photo image_1

I found the following link useful in my research into slit-scan photography and its history:

http://filmmakeriq.com/lessons/slit-scan-recreating-the-stargate-sequence-from-stanley-kubricks-2001-using-legos/