ANIMATION TECHNIQUES / Infographic Progress / Week 9 – 13

Week 9

To start this infographic, we have to sketch out a storyboard first so that we may have a clear idea on how the video progresses. My infographic is about how does abuser work, and my approach on this using 2D vector, but the theme & visuals are pretty dark.  I considered using 3D human figure in it (sketched out the storyboard for it as well) but then I scrapped the idea in favor of convenience.

 

 

 

 

 

 

 

Week 10

This week we were left to our own devices while we worked on making the vectors (and other materials) to our motion graphic.

 

Screen Shot 2016-09-27 at 1.59.22 PM.png

Because I decided on not using voice over for this motion graphics, I’ve been watching a lot of kinetic typography videos for inspirations on how to make the text explanation roll out interestingly.

(Kinetic Typography) Maroon 5- Maps

Kinetic Type AE

I Will Not Let an Exam Result ….

“To This Day”

What Teacher Makes

The Social Network

https://www.youtube.com/watch?v=C9thrGPyN-k

https://www.youtube.com/watch?v=nQjihkpmjwY

https://www.youtube.com/watch?v=jW4Fdm5nMro

https://www.youtube.com/watch?v=tCSmIYmPOi4

https://www.youtube.com/watch?v=Fzf19XRhGX4

Poverty

Build a City motion graphic

Week 11-12

We drafted our motion graphics and have it reviewed on the timing, composition, sequence.

My comments overall was to make the sequences look less like it is waiting for each other, but instead to welcome the different scenes by overlapping some of the animations. Make sure not to let one scene freeze up totally, always keep in mind to have any kind of movement going on, whether it is the subtle panning of the camera or slight zoom in / out. Some vectors look less detailed than it should’ve been and could use more work. Keep objects within the safe area of screen.

 

image
Enter a caption

 

Title sequence

DRAFT MOTION GRAPHICS

Week 13 (QC Followup)

I fixed some of the vectors, added more motion to the sequences and played with lighting effects (lighting also contributes to the movements).

The background music was tough to mix because I didn’t start animating with a clear idea of how the soundtrack would be like. I did manage to mix 3 tracks together to create one whole background music for this 2 and a half minutes motion graphic.

Soundtrack_firsthalf

Soundtrack_secondhalf

Soundtrack_ending

(Sounds are from the  original soundtrack of Hakkenden -Touhou Hakken Ibun- composed by Hitomi Kuroishi)

28/09/2016

Today we presented our motion graphics. We were given feedbacks by our peers and had to revise the motion graphics accordingly. My feedbacks were on the transition and how some objects are out of the safe area. The feel & atmosphere was already correct, but I had to revise the sizes, some transitions and the text animation choice (the text scramble effect used “WHY ARE PEOPLE SO SUSCEPTIBLE TO ABUSE” wasn’t appropriate on a long sentence and disrupted the timing for the audiences to read it).

 

VISCOM IN GD / Assignment Progress / Term 3, Week 12

Following up the comments and critiques from different lecturers (which were about how there are 2 separate sections on the infographic and distracting/obstructing yellow lines), I made some changes to my infographic – mostly on the styling.

screen-shot-2016-09-22-at-7-44-29-pm
I tried exploring different layout but it doesn’t work as well.
screen-shot-2016-09-22-at-7-44-27-pm
Made the box for facts/statistic section and reduced the yellow lines. I also stylised the “identify” to having dashed strokes to match the pointer lines on the infographic. Dashed line also seem appropriate because when you’re identifying something you have to draw the lines through the missing ones.
screen-shot-2016-09-22-at-7-44-20-pm
Moved the human figure a bit to the right to accommodate the “can be any gender” info. (It was too close to the edge)

Made the sub-headline(?) more funny and less self-serious so that it is more attractive and memorable.

23/09/2016

Today we had our final critique session at class and several comments bringing back the yellow line with black streak were made, as well as some other comments such as the vectors & pointer lines.

screen-shot-2016-09-23-at-10-30-30-pm
Brought back the lines but with grey streaks & lowered opacity.

Made a hand vector for the human figure so that the left side isn’t so empty. Tidied up the vectors.

Fixed river. (left: fixed, right: before)

screen-shot-2016-09-23-at-10-30-26-pm
Decided to remove the line at the back.

 

DIGITAL IMAGE MANIPULATION / Assignment Progress / Term 3, Week 12

(Test print image will be posted)

I did some more adjustments to the poster to make some elements look more believable – especially that panther on the tree trunk.

screen-shot-2016-09-22-at-6-57-53-am
Before adjustment – the sides of the panther are too light / soft
screen-shot-2016-09-21-at-3-11-18-pm
After adjustment: Added black mask underneath the image of the panther, and masked the panther on appropriate areas so some parts look darker.

Also added a tree trunk so it doesn’t look like it’s hanging off the tree.

screen-shot-2016-09-21-at-3-11-17-pm
Before color adjustment
screen-shot-2016-09-21-at-3-09-30-pm
After some color adjustment

I also added 3d treatment to the text by enabling the drop shadow function on layer effects, so that it is more legible.

 

VISCOM IN GD / Assignment Progress / Term 3, Week 10-11

 

Week 10:

This week we laid out all the progress that we had so far on the infographic.

20160909_152804.jpg
Research, mindmap, brainstorm
20160909_152826.jpg
Collage and early moodboards
20160909_152842.jpg
Early sketches
20160909_152908.jpg
Custom type trial
20160909_152946.jpg
Color analysis & typeface choice
20160909_152953.jpg
Moodboards (on 3 different concepts) & Sketches

I played around with the layout of infographic and how the title is being laid out on the poster. I also switched from portrait to landscape orientation – the space & laying out looks a lot better and more info can be included in the poster.

 

 

Week 11:

20160916_143615.jpg
Progress & Tiled A2 poster

I was suggested to change the color of the title to grey-red instead of black-red, because it grabs too much attention & competes with the black streaks on the yellow lines. I think I’d also change the yellow line to the ones with “CAUTION / DO NOT CROSS” written on it because some do not get the meaning / purpose of it being there.

Screen Shot 2016-09-17 at 7.52.09 PM.png

I changed the title of the infographic to better match the content of it, because the previous title felt too general and doesn’t really reflect anything on the content of the infographic & how it is being presented. I also stylised some of the lines so it looks more interesting. After tiling it on A2, I could see some text sizes are too small. I ended up evening out the sizes of all texts (despite the scale of the vector icons beside them).

Screen Shot 2016-09-17 at 7.56.08 PM.png
Still working on this one.

19/09/2016

image

image

Tile-printed them in color. The yellow lines without black streak looks a lot cleaner & neater.

TYPOGRAPHY SKILLS / Assignment Progress / Term 3, Week 11

The rambunctious layout was better received, so I decided to go back to it and do something about the “happiness is to be” part of the phrase so that it doesn’t look so detached from the rest of the elements.

screen-shot-2016-09-16-at-7-19-14-am

These are the three most possible background color for the poster. I personally like the straight-forwardness of the magenta backdrop the most, but dark grey background provides more contrast and adds nuance to the composition better.

screen-shot-2016-09-16-at-7-30-39-am
Interface design mockup

INFINITE is a social media app where users can interact with each other, share their thoughts and ideas on different topics and subjects. There are forums as well, other than private chat platform & home feed update. Forums cover various topics of conversation, divided but not limited by MBTI personality types. The app also includes a customisable profile page with custom name display – users can choose from the gallery of typeface provided by the app or write their display name in their own handwriting (stylus phones are very much supported!).

Graphic elements on this app are entirely made out of typefaces.

screen-shot-2016-09-11-at-7-47-37-pm
Tshirt & sticker design development
screen-shot-2016-09-17-at-7-14-30-pm
iPhone app interface presentation

 

IDEAS GENERATION / Prepping Presentation / Term 3, Week 11

-Notebook DIY

image

-Calendar DIY

I decided to make the calendar myself because of the hilariously overpriced calendar-making-service in the printshop.
Materials that I will be using are duplex, cotton fabric (navy blue perhaps) to over the duplex cardboard and metal card rings to bind them.

20160915_061653.jpg
Sketched out the sizes and dimensions.
20160915_062118.jpg
Sketched out the sizes and dimensions.

20160915_064122.jpg

-Making the board

20160917_125612.jpg
Hid the folded seam line using black sketch paper

Materials & tools used for making the calendar:

-Duplex cardboard

-Hole puncher

-Cutter & Ruler

-Spray mount

-Metal card rings

-Dark navy blue cotton (half wool) fabric

-Tape

20160917_134443.jpg

20160917_134346.jpg
Balikpapan starter pack \(:D)/

DIGITAL IMAGE MANIPULATION / Assignment Progress / Term 3, Week 10-11

(The class learned intricate selection on week 10 and I missed out on it because of horrible indigestion??????? :’) shyet)

 

Update on poster parody:

screen-shot-2016-09-11-at-2-05-16-pm

Changed the face of the boy and added a facepalm. (Painted a part of the elbow as well, haven’t perfected it yet)

Screen Shot 2016-09-12 at 3.02.54 PM.png
Adjustment layers for the face (on right side). Filled one layer with darker brown and set it to overlay to match my skintone with the boy’s body. One layer for shadowing, and another for adding dirty stains on the face.
screen-shot-2016-09-12-at-3-01-00-pm
How it currently looks like
Screen Shot 2016-09-12 at 2.41.16 PM.png
Still working on the text.

 

14/9/2016

QC

As a follow-up to QC, I fixed the lighting and saturation on the tiger and the boy’s body so that it matches the environment’s hue better.

 

(Before-After)

Also added little effects such as this sun ray hitting the panther -because it is sitting up high on the tree I guess it would be one of the first object to be hit by the sunlight?

Little changes that made all the difference.

Will definitely be fixing the color tones before test printing it (hopefully by this weekend!)

18/09/2016

So it’s Sunday, 10:29 PM and I’m on the verge of driving myself to craziness from standing on the edge of having too much to do and not knowing what to do this is not the martian vlog

Made some subtle touch ups to the poster, major changes being on the saturation of boy’s body and the panther.

Before – after saturation adjustment

I think the arm still looks quite off so I’ll have to work on it again.

screen-shot-2016-09-18-at-10-22-29-pm

screen-shot-2016-09-18-at-10-23-19-pm
Just editing the tiger’s fur……. using eraser size 1pt… k
screen-shot-2016-09-18-at-10-24-36-pm
Added shadow on the grass where the tiger steps on (sorry about the chat notif D:)
screen-shot-2016-09-18-at-10-26-43-pm
*cough attempted to cough* Masked a part of the tiger so the appearance of the bear’s fur look natural
screen-shot-2016-09-18-at-10-36-42-pm
Made the body yellow-er to match the hand & environment’s hue better. Decreased saturation on my face.
Screen Shot 2016-09-18 at 10.41.30 PM.png
Adds noise on my face because the image is quite low-res while the picture face was more HQ and smooth than the rest.

 

(Speaking of which, these are the two pictures I used for the poster)

Screen Shot 2016-09-18 at 10.44.01 PM.png
It’s looking a lot better now!!!! Going to work on the texts.

 

Still fixing the tiger’s furs though. :’)

screen-shot-2016-09-18-at-11-12-54-pmscreen-shot-2016-09-18-at-11-13-02-pm

Screen Shot 2016-09-18 at 11.16.32 PM.png
This doesn’t look too bad! Forgot the actor’s names though.

Will testprint on A3 tomorrow to see how the colors will turn out, and how salvage-able the resolution will be.

Screen Shot 2016-09-18 at 11.26.24 PM.png
Yus!

TYPOGRAPHY SKILLS / Assignment Progress / Term 3, Week 10

This week is the poster submission week, although we are given the chance (and time!! Although not much of it.) to fix our posters before we move on to working on the sticker, tshirt and App interface design.

I went back to sketching on paper to get more ideas on how I want the poster to look like and I decided on looking bold, weird and “making a statement” sort of feel. I have to change my poster because the last one was straying away from the brief & was way too gimmicky (have to agree with this. What was I thinkiiinggggg).

image

image

image

image

image

image

image

image

image

image

 

I decided to focus on the words “Happiness” and “Yourself” at first, but experimented with making the word “Yourself” more experimental. Shortened the line to “Happiness is to be yourself” – although this could be interpreted like “happiness is to be by yourself” instead of “Happiness is being yourself (Your true self, your weird self, channeling it from the inside out)”??  Hopefully the cheerful tone of the poster would deter that perception. This one is inspired by the feedback to make the poster look unique, authentic since it is about being and showing yourself. I use a bold sans serif so it looks friendly but strong, and quirky at some parts.

Screen Shot 2016-09-09 at 7.40.04 AM.png

Not sure how to typeset the “happiness is to be” yet. It looks really off.

I want to try on making the “yourself” look really deformed but I don’t want to sacrifice the legibility of it. *more experimentation going on*

Other considerations (and approach) for the poster:

screen-shot-2016-09-09-at-7-26-56-am

Handlettering – the shape is wavy & going out in a motion that looks like it’s emerging, speaking out. This approach is more on the “inside out” part, showing yourself to the world and be pretty about it. Decided to scrap this because I feel the handlettering isn’t strong enough and it looks too made up/embellished to be genuine.

 

Tearing off the word facade- too dark and the word “facade” too strong and sets the attention away from the handwritten sentence which is the main point for the poster. Vibe got too dark. Deconstructing the word “facade” here & playing around with pathfinder inspired experimentation for the word “Yourself” as shown above.


 

Various experimentation

screen-shot-2016-09-09-at-3-45-04-pm
2 compositions which I think look the strongest
screen-shot-2016-09-09-at-8-48-14-pm
Combination of the above two (color scheme & type composition)

I like this color scheme a lot more because it looks more vibrant, youthful and feels a lot happier. It does look a bit like the “yourself” part is screaming at your face, but I was hoping for it to be the main focal point & look like it is speaking out to the world.

screen-shot-2016-09-09-at-9-51-33-pm

Experimented some more on the look of each letter, giving each of them differences although they mostly have the same colours.

now THIS one highlights more on the diversity of each letter… and then you have the “E” which is plain ordinary and nothing has been done to it. But because it is ordinary among some weirdos it becomes something different as well…

9/9/2016

screen-shot-2016-09-10-at-11-46-39-am

After asking for feedbacks and filtering them out, I decided to keep the diverse-looking typefaces and tone down the layout so that it looks more like a statement rather than too overwhelmingly shouting on the audiences’ face. This poster is about boldness, making a statement about your difference and be happy about it. The focus is on the diversity of each letters. Will be tidying the alignment before printing it out.

screen-shot-2016-09-11-at-7-47-37-pmscreen-shot-2016-09-11-at-7-47-31-pmscreen-shot-2016-09-11-at-7-47-23-pmscreen-shot-2016-09-11-at-7-47-18-pm

I’ve been developing the sticker, tshirt and iPhone App UI. For the tshirt and sticker I mostly use the existing graphic elements that I have developed while working with the poster.

My iPhone app is a social media platform called Infinite, where people can interact with each other in forums, private chat as well as home feed (like Twitter). Because my whole concept is about being happy with yourself, self-discovery and acceptance, so I apply it into the application by having a forum where people of same / different personality types can discuss different ideas with each other. There’ll be also optional choice of taking a personality test upon registering with the application (which the user may skip & take at anytime they wish.)

The application also includes customisable profile page, with customisable typeface for their name display. They can choose the typefaces, or even write it on their own (if they have a stylus-equipped phone) so that they can represent their personality and style. Users can also upload photo albums and arrange music playlist within the app and it’s accessible to other users.

 

 

VISCOM IN GD / Assignment Progress / Term 3, Week 9

I was told to branch out more ideas and sketches from the 3 different concepts that I have in creating this infographic. Exploration of typefaces and color, as well as different techniques that can be applied to the infographic is also necessary.

3/9/2016

My first concept is the security / caution / yellow lines themed infographic. The idea is that for people to be aware of certain subtle traits that ordinary people have which may suggest that they’re an abuser; so before you let someone into your life, better set up those security lines. The look for this poster will be more like the standard infographics with vectors and 3 color palette. Since the theme is alert and security lines, there will be lots of yellow and black.

image

image

image

image

Screen Shot 2016-09-03 at 3.45.22 PM.png

Second approach is to represent the built up of abusive behavior and/or impact of abuse (the damage and harm) through color. This concept evolved to the application of the built up onto the form of typeface – the type disintegrates as it gets closer to the figure of the abuser.

image

image

image

This idea also arise because of how different the words “abuse” and “abuser” are, with a mere addition of a “R”. Abuse is hurtful, harmful, damaging and destructive to the person being subjected of it, while an abuser is confident, looks like any other normal people, unemotional, rigid, stiff. I’ll experiment with customising the type by using either markers, watercolor (so it looks more expressive) as well as digital painting on Photoshop.

Screen Shot 2016-09-03 at 3.44.09 PM

For this poster I’ll try to use both photograph (realistic) and vector together.

Infographics-In-Real-Life-9
Usage of realistic photograph inspired by this infographic

 

Third idea is to present the “How Abuser Work” infographic in a blueprint looking poster, to portray the tactical mind of the abusers who plan each and every of their moves towards their victims so that they can gain full and total control of them. The look for this poster will be more futuristic and less expressive than the second concept.

image

image

image

Screen Shot 2016-09-03 at 3.38.46 PM.png

Typeface that I chose for this are futuristic looking, and some of them (like Andromeda, Garden Regular & revolution) have uneven strokes that sort of jut out / leaves empty space on the letter. I will make use of these typefaces to draw lines (from the strokes that jut out / the blank space) to the points that will be discussed on the infographic.

As for the title typeface choice, I choose them with the thought in mind that it should be applicable to the 3 concepts that I have. Most of the typefaces look stiff and rigid, other than the futuristic ones, to portray the unemotional nature and organised mindset of abusers (when they get emotional its mostly fabricated to evoke sympathy or fear).

Screen Shot 2016-09-03 at 3.47.50 PMScreen Shot 2016-09-03 at 3.47.54 PM

I like the typeface Beach Savage a lot because at a glance it looks normal and pleasant (quite rounded corners although it is a condensed sans serif), but at a closer inspection there are some sharp lines that go out of the stroke which hints danger and malice – much like the an abuser.

Screen Shot 2016-09-03 at 3.50.35 PM.png

Screen Shot 2016-09-03 at 3.19.38 PM.png
Typeface / Some of the title x body text combination

Inspirations for custom typeface:

image

image

image