Unit 45 – Graphic Image Making

Visual Fonts

This was where we had to recap what we have done before. We represent the word in a way that reflects its’ meaning/definition. Doing this in the first year was more challenging with Adobe Illustrator since I was only a beginner and never had experience at that time before this course. I’m happy that this unit focuses more on designing and thinking of visual concepts.

 

Screen Shot 2015-12-11 at 11.44.31
eight fonts attempted

Our task was to create eight fonts and draw/sketch one that we prefer the most. I did struggle with finding words that were easy to visually convey what the word means. In the end, I chose to use the word ‘stretch’ to use for my flash animation. I thought this word would be the simplest one to animate and present rather than leaving it a still image.

FullSizeRender
Trying different sizes

I tried designing my chosen font using pencil, markers and A4 sheets of paper. It was nice to be able to do something more traditional after doing digital assignments. I started off with writing the word in different shapes and sizes.

FullSizeRender (1)
Different colours

I eventually moved on to using colour and carried on experimenting with the format and sizing the font. This was pretty easy for me to do. I think after writing for some time, I’d much rather go for a black font. It’s much more simplistic for me to do and I like the colour black anyway.

FullSizeRender (2)
Short Storyboard

The traditional story board is there to show a rough plan of how I’m planning on animating on flash. It’s short, but straight to the point.

Screen Shot 2015-12-18 at 09.32.32
Making the font

After hearing from my Tutor and classmates about the better use of creating font or images in Illustrator to import in Flash, I tried to follow that technique by typing the font in there, but there was always an error each time I attempted to import it.

Screen Shot 2015-12-18 at 10.11.24
Recreating the font and animating

After some trouble with formatting and pasting the font, I just thought that it would be a whole lot easier.

Screen Shot 2015-12-18 at 10.30.39
editing the tween

This was one of the rare times that I had used motion tweening for this animation.

Infographics

The Tutor wanted to give us some more tasks to do in the workshop, but apparently the rest of the class wanted to get on with the brief assignment. We need to design our own infographic poster. To make one we would need to design the layout, how the data will be presented visually and what the poster will be about as well, but that’s up to each individual who’s making their own poster. It’s quite difficult for me to find a topic that’s simple for presenting as a infographic poster, so my Tutor advised me to find a subject that I would be able to do.

What is graphic image making?

From what I’ve seen, visuals and diagrams are used in order to present data. I have often seen most of the presenting facts and data through visuals. To me that seems like a much more effective way of displaying out new information for others to see.

Examples of Graphic Image Posters

web-infographic
Visual representation

This poster has presented the data through the use of images and colours to represent genders rather than leaving paragraphs of writing to read. The layout shown is quite simplistic and will make it easier for the reader to take in the info on the poster. They managed to pack in some useful information into one page too.

infographic-of-hannibal-lecter-640x839
Choice cuts  *retches*

This was a good example of a parody what I immediately found on Google images. It managed to make a friend of mine cringe, but I personally liked that this poster was a spoof of all of those animal choice cuts posters I’ve seen in the past, but realistically speaking I could understand why this may unsettle some people. I personally want to avoid typing in a lot of text for my design.

wchokwdy
Society and industry

This poster is more colourful than the previous posters I have found. They all contrast nicely. They still use a small amount of text, but the font is formatted so that it stands out. It’s nice that they selected a different colour for each fact displayed in the poster and that they had the common sense to write them out in a lighter shade to make it noticeable. I think it would be nice to take the simplicity and adapt that into my graphic poster.

258476563
amount of berries in some countries

This stuck out to me with complimentary shades of pink and purple and the layout of the poster as well. The image shows that it’s data about grapes.

something-borrowed_51b07f445d994
wedding dress and accessories

This is just a simple list showing you what the bride-to-be would to wear for her wedding. It’s short, but sweet when explaining what’s needed. It manages to contrast and stand with a few colours on there as well.

Infographic animations

This animation contains info on a more serious topic, but I just wanted a video that is able to present data well enough and this video. It’s short and sweet. It managed to pack in data to do with internet and browsing without needing paragraphs. It had animation was pretty smooth and fluid. The animation was colourful and stood out well.

This video focuses on the success of Britain. It shows the pros and cons of the funding that we’ve had throughout the years. It’s quite colourful and attention-grabbing with displaying its’ data. You get a good look at the development of technology and designing and how it has brought in cash. It’s helpful that it’s only used visuals and numbers as it was easy for me to grasp.

This isn’t very informative in terms of data, but it does offer some words of advice or courage on traveling. It doesn’t drag on for too long. This seems to be more persuasive, judging from the animation as there isn’t any data present.

This next animation focuses on the facts to do with obesity in the USA. It has some soothing music to go along with it. What’s different about this animation and the previous others that I’ve looked at is that it has a main colour scheme which mainly consists of red. This is to probably to show that this is obviously a problem that affects peoples’ health.

This is just to give you some quick facts about animals and their bodily functions. It’s still short, but sweet like the others. I honestly found it to be quick and fluent for the animation. It uses that to show what the animal does and presents the data.

Theme poster research

I needed to pick an interest or theme if I’m going to design a poster and animation sometime soon. I was having some difficulty with picking what theme I wanted to do. I did have a talk with my support worker in class and helped me decide on the theme of music, at least listening to music is one of my hobbies that I do daily. So I decided to look up some posters based around the topic/theme of music, looking at the phycological effect.

628d9b2d70b16129f208650454a4a581
Power of music

This poster clearly focuses on how our mood and emotions are affected by listening music, depending on the genre of music too. I like the idea at looking at the effects that it has on your mood. It doesn’t too much colour either to stand out. I have actually been thinking making a poster similar to this.

playing-music-is-a-real-job
The Business side of Music

This is here to represent how you can make a career of music as well as something that you can enjoy. These are three examples of popular music genres. This uses a lot more text than the other posters, which is what I want to avoid in my posters. It’s good to encourage other people interested to get into music.

hertz-elvis
His music visually being presented

This poster is different from the fact that the artist managed to visually display some of Elvis’s songs. This is a good form of symbolism, with only a few colours being used. The background seems quite dull (since there’s no colour at all).

238c57954b2600c5c70c10be41dd2a96
Business side of music again

This is another poster focusing on the phycological effects of it on the human brain and how it can benefit students. It was a lot of useful information and is quite specific with which they’ll perform well in.

music-learning-800
Another example

This is a poster with the same theme as the last poster, but with a lot more detail. The presentation of it is nice, but it’s taken up a lot of space. I think that using some images instead of paragraphs of text would have been better.

Theme Animations

I understand that this animation is there to spread the facts of how greedy record labels. The person mostly spoke and would use images and some text from time to time to point key facts that come up. I personally wouldn’t want to talk for my infographic and just place some soundtrack in there for the lack of speech.

This has no audio this time, but uses well-known artists and also shows how often their music is illegally downloaded. Music piracy is quite common with artists like Rizzlekicks and Rihanna.

What I liked about this one is that they used a lot less text and more imagery to display the data of online music industry. They use images that link with music e.g. speakers, headphones etc. The colours contrasted nicely together.

This was under a minute long which makes me feel a lot better, knowing that I may be able to create my infographic to be roughly around that length. It’s strange, but different to see the comparison between EDM music and non-EDM music fans. It was clear, understandable and had some nice layouts.

Moodboard

moodboard
Music and Psychology

I would like to create this poster in a minimalistic style with a blue colour scheme. Some of these images are useful as references for images I’d like to use in my poster. I wouldn’t want to waste my time on creating detailed designs in a limited amount of time.

Proposal

Project Introduction

Brief outline the proposed project including the design problem to be

solved

  • I would like to make a graphic image poster and a 30 second animation on my chosen topic. They need to be based on the same theme (of my choice) and personal interest.

Brief summary of your plan for the project

  • I would want to complete my research before I begin picking a theme to design and research in depth. I would focus on the graphic poster before finishing the 30 second animation. I would have to do a lot sketching to design visuals for the poster and animation.

Constraints of the project

Identify the constraints of the project. It may help to think what you are

not allowed to do to complete this project. Then you can list the constraints

i.e. This project must not be designed for print and be optimised for the web.

The constraint in this case could be that the project must be “designed for

screen using a resolution of 72 dpi and be optimised for viewing in a web

browser”.

  • Since, this a task where I would need to illustrate and animate, I would need to use programs such as Adobe Flash, Photoshop, Illustrator. I would need to upload it online so that the Tutor can see the finished projects.

Context of the project

518638c172f3b88261e6a1209fe2590c
A poster focusing on the psychological effects
  • I want my poster to be based around the theme of Music and I know that I would need to research to understand how I can create my Music Infographic Poster and animation. I want to be more specific with how music can have some impact on our behaviour and mood in general.

Who has already created a solution to this design problem?

What professional outcomes are there to inspire your project

What other projects or contextual references are out there in

the world

  • This has to link with psychology and music together as themes for my project. To understand and develop my idea for how it will work.

Initial Ideas for the project

What ideas do you have at the beginning of the project to address the

design problem?

  • I originally had problems with picking a theme when I had been researching to find some inspiration for what I want to do for my poster and animation. I did want to do it based around my hobbies, but my Tutor did question how I could create some data and facts to represent my poster and animation.

Deliverables

Specify a list of objects or tasks you will do to complete the

project

i.e. what typography, colour scheme, process, materials,

techniques, provide paper/wireframe working prototype etc.

  • Since both (poster and animation) will be digital, I will design some images using a mix of traditional and digital media.

Targets and Milestones

List the targets and major milestones towards completion of

the project i.e. (the example below is not limited to 3 targets. Don’t

forget to list these targets in Pro Portal also!)

Investigate brief

  • Find 5 posters and animations.
  • Start sketching and develop them as time goes by.
  • Colour them in on Illustrator.

Generate ideas

  • Design symbols.
  • Check that they represent the facts.
  • Look for references.

Develop ideas

  • Look at how I can illustrate the symbols so that the message is clear.
  • Experiment with colours.
  • Look at the layout design.

Produce outcome

  • Sketch ideas.
  • Colour and edit in photoshop.
  • Import and animate in Flash.

Evaluate Outcome/ Prototype or Solution to problem

  • Edit and save some symbols as .psd files.
  • Experiment around with animating.
  • Sort out timing.

Evaluation Methods

How are you going to evaluate the success of the project. Are you

going to conduct a usability or playtest with your target group, use Google

analytics, use YouTube, use questionnaires upload to forums, showcase on

art or design websites etc.

How are you going to collect the data? Use graphs, infographics,

written evaluations, video evaluations or a mixture of all of these.

  • My Final animation will be on Youtube and WordPress and my poster will be on wordpress.

 

 

 

Sketches for the poster

I wanted to create some designs for my poster. For the majority of this, I wanted to focus on making designs and be sure that I have created what I needed in order to complete the infographic poster.

FullSizeRender
mind map

For me to understand what I would want to do, I went on ahead and made a mind map. By doing so, I managed to jot down phrases and ideas based on my own beliefs and interests.

FullSizeRender (3)
hand-drawn fonts

Before creating other visual designs, I didn’t care that much about getting the font to look a specific way, but it was important for me to try different sizes and styles.

FullSizeRender (1)
Alternatives

With these designs, I had to think about how the symbols could relate to the facts and figures I need to represent in the poster and animation. The main theme I picked was music and psychology.

FullSizeRender
symbol designs

These were some designs I made (that I was pleased with). It was great to mess around and doodle based on my theme of my poster.

FullSizeRender (1)
a few more

For some of these images, I looked up some images relating the facts and figures on Google images (for references). At times, it was hard to visually interpret a theme for each fact that I had to represent.

Screen Shot 2016-03-04 at 14.12.35
making vector images…

I used Illustrator to digitally colour in the images.

Screen Shot 2016-03-04 at 14.12.41
…for my poster

I used the pen tool to carve and colour all of my sketches. I kept this process going until I managed to make the rest of the vector images I wanted.

Screen Shot 2016-03-11 at 09.23.24
background colour check

 

Screen Shot 2016-03-11 at 09.50.11
font colour

 

Animation

For my animation, I didn’t really have much time to complete this. I ended up rushing it to make sure I had all the scenes from my storyboard done before the deadline. I had some struggle on how I could present this when I animate it in Flash. It needs to be at least thirty seconds long.

FullSizeRender (2)
Storyboard

It was done to show and remind me how I would animate each scene for my animation. From time to time, I did take a look at my other designs of the vector images to roughly sketch and see how I can present the information.

Screen Shot 2016-03-18 at 14.01.02
the process

With Photoshop, I would create psd files to import into the Library in Flash. I used  motion tweening for this so that I wouldn’t have the trouble of animating frame by frame. I wouldn’t have my work finished in time that way.

Screen Shot 2016-03-18 at 14.19.57
putting the clips together

 

My Final Animation

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s