Being fairly new to infographics and their design, i decided the best way to start research was to look at existing pieces to get a better understanding of what is required from an infographic and what may work for my own Star Wars poster. I came across a website full of award winning infographics, http://www.informationisbeautifulawards.com/showcase, here i came across some of my favourites which helped me get a better understanding of how to start this assignment.
I love the simplicity of both of these infographics, even though there is quite a bit of text (something i aim to stay away from), the different ways in which the data is presented is so easy to grasp and appealing to the eye. Ranging from pie and bar chars to maps and timelines. I especially like the Meet the Gallaghers infographic below. The dark background compared to the bright graphics help emphasise the data, its easy on the eye and i will consider this when designing my own. Furthermore, the use of the simplistic representations not only effectively conveys the characters as they are easily established but fit well in portraying the story and appealing to the audience. Similarly to this example, most flat designs are created as vectors on software such as Adobe Illustrator. As we are required to create an A2 poster with the use of vectors i feel further research into flat designs will be hugely beneficial for when i come to create my poster.
In our recent workshop we were encouraged to look at both Adobe Illustrator and Inkscape and the different methods of tracing /creating images, in preparation for our current poster task. We previously discussed using the shape tool and merging them to create the image intended, however i found that didn’t always create a smooth and professional form. We were first introduced to creating layers on Illustrator, this would therefore help us draw on top of our desired image with the pen tool to create the basic outline to which we could then fill, removing the layer underneath. This then leaving us with our uniquely drawn vector. The pictures underneath show our first task of creating the Starbucks logo into a vector image.
As Inkscape is a free software alternative to Adobe Illustrator i thought it would be good to practice on and get to grips with it’s user interface and shortcuts. We were told to practice by tracing on top of a tiger drawing. The process was very similar to Illustrator. In order to get the varied effects we explored with the gradient and pen tools.
Even though Inkscape is a fairly good free alternative, i will be using Adobe Illustrator for my poster as there are a lot of helpful tutorials and lessons online on website such as lynda.com. I will be researching further into this software and its features to help me create a professional and effective infographic poster.
We have recently started our next topic of ‘Development and Realisation’. It involves choosing one of the given briefs and producing an infographic A2 poster.
Here is the to do list for this assignment;
- In preparation for your first tutorial seminar this week please complete the following:
– Start a weblog (if you do not already have one).
– Post an article to the weblog:
- Explaining your understanding of your production work assignment, the Communication Design A2 Poster;
- Your initial thoughts on what theme you may tackle;
- Some images of communication design / information graphics that tackle your chosen theme or similar.
As a fan of the epic science fiction franchise Star Wars i decided to choose the the seventh brief this being to consider who knows each other and how in Star Wars? Visualising the relationship between the major characters in the Star Wars series of films, animations, comics etc.
The software I will be using to complete this task will be both Adobe Illustrator and InkScape.
After experimenting in After Effects for a while, I chose my audio clip and started to work on my kinetic typography. I decided to use the beginning clip of Bop to the Top from the Disney Channel Original movie High School Musical (2006) as this song is fun and energetic. I decided on a red background with yellow text to resemble the ‘Wildcats’ and their basketball uniform. I wanted the typography to be coherent with the audio and context and therefore chose to use fairly ‘cool’, informal san serif fonts, animating them suitably for it to all fit and flow well. I chose this specific song from HSM as the lyrics provoke a lot of imagery such as “anything it takes to climb the ladder of success.” I thought this will be ideal when coming back to further improve this piece through the addition of graphic images. I could also advance my work by masking the background and placing shadows; creating a stage like scene, thus relating back to the context. I hope to carry on experimenting with After Effects, practicing importing imagery and the different animation techniques. To conduct this I will carry on researching into the software and watching online tutorials on websites such as Lynda.com.
As this is my first time using AfterEffects, as well as practising under supervision in workshops, I have watched online tutorials on how to create kinetic typography in this Adobe software. The tutorial I found to be most helpful was After Effects Tutorial – Basic Typography & Motion Graphics by the YouTube user, thevfxbro (2013). He went through the process of animating the text to fit with the audio, to then making the clip look professional through the addition of masks and shadows. In addition, he talked through AfterEffects shortcuts to help make the process quicker and easier. I hope to use these skills when creating my own motion graphics piece.
Furthermore, for inspiration I’ve looked through the Kinetic Typography vimeo channel, considering the different ways people have animated their typography and the various audio used. I found Robin Celebi’s Cave Johnson Lemon Rant, Kinetic Typography (2012) to be my favourite. His emphasise of certain words through animation helped to convey the emotion from the audio, this being something I hope to achieve in my work.
thevfxbro. (2013). After Effects Tutorial – Basic Typography & Motion Graphics. Youtube. https://www.youtube.com/watch?v=F3h2pbZkMT4
Celebi, R. (2012). Cave Johnson Lemon Rant. Kinetic Typography Vimeo. http://vimeo.com/31960204
Screenshot of what we went through in our workshop
In our first HTMl/ CSS workshop we went through some of the basics. Here is a list of things we learnt which will be beneficial when arriving to the second workshop.
<html></html> States that it’s a HTML document
<head></head> Keeps the information that isn’t displayed on the webpage itself
<body></body> Visible portion of the document
<title></title> Found in the head tags. What the document is called
<img src=”name”/> Adds an image. Self closing
<img class=”img-responsive/> Makes the image and document ‘responsive’ (Adjusts to screen size)
<div></div> Defines a section in a HTML document