Adobe After Effects (Pie Chart)

http://www.youtube.com/watch?v=q68ILlY-SGw

Website layout

Today, we are learning how to create a website layout with guide.

Rename the layers nicely.

Insert new guide.

Almost done.

Movie Teaser Poster - Design proposal

Movie Genre
Drama, Romance

Plot
One day, Elsa went out to get some inspiration for her photograph and she got hit by a car. This accident caused her coma. Five years later, she regain consciousness, she lost her memory which caused her amnesia from childhood.

Design Hook
Girl, loves latte, drinks latte, starts get back her memory little by little.

Visual Concept
I used the cartoon style couple for the foam art latte design is because I do not want audience know who is my main character while still in movie teaser poster. Movie teaser poster do not use too many props, it will show as little as possible to give audience suspense about it. At first, I was think of a few simple concepts, one of it was the smoke of latte went to a love shape. This is what I think of.

After few sketches, I get another idea which is the one I am using. The latte is the main things that help Elsa get back her memory and happy ending with John. Latte art is also very famous nowadays. So I decide to create a latte art of this couple, to make people curious about what Elsa’s best friend do to her.

It is too simple if there is only a cup of latte art. Therefore, my lecture gave me suggestion that add the coffee shop in. It is works but it was quite difficult to find a suitable coffee shop to place it in this movie teaser poster.

Design Technique & Method
After selected the sketch, I start doing it in Adobe Photoshop. I love latte art, but I do not have the skill to make it, so I started with finding images through Internet. It was so hard to find an image that my mind was thinking. I want to search for a white cup taken from top. I did found it but the foam inside is not the foam I want so I looking for another cup of coffee and one more cup of foam to combine it.

Next, I placed a couple’s picture that I want to become my latte art in Photoshop. I used pen tool to crop it and changed it to blank and white. Then, I tried to make it softer and make the edges rounder. So that it will not look like very fake.

Done the latte art, I continued to placing the coffee shop that I searched online in different angle, different way and different lighting. It look weird, it does not match to my latte art. But I did not give up I keep trying, and finally I had applied the brush that it almost looks like coffee stains. But, the color still cannot match. My friends suggest me to use real coffee to paint it, so I can adjust the color I want. But I felt like not enough time to do that, then I continue try the different Hue and Saturation. I did it finally!

For the background, I cropped it few times, but it still does not look like blend with the coffee shop. Although I used feather, but the path I crop is not accurate, so have to crop it very detail.

The last part is about the typography, I wanted to use a chalkboards typefaces but I cannot download it, have to buy it. So I keep searching on the similar typefaces that is free download, I almost want to create it myself. I know it is quite wasting time, but at the same time, I saw a typeface called dearJoe 5 CASUAL, it looks like the typefaces that I want without the chalk but handwriting in Dafont.

When I finished my movie teaser poster, I was so happy. I learnt a lot with the tools of Adobe Photoshop.

Week 4 - After Effects Exercise

Movie Teaser Poster - Photoshop (Done)

Still in progress...

original coffee shop

Adjust the Hue and saturation (Ctrl+U) with tick the colorize

try different filter

trying the filter

adjusting the color

Use the Brush in Filter Gallery

---------------------------------------------------------------------------

Final Outcome.

Movie Teaser Poster - Photoshop (Pending)

The images below are the images i selected to used as my movie teaser poster.

Couple

Coffee Shop

background

The cup

The latte

---------------------------------------------------------------------------

The images after i crop

crop it

change it to black and white and then delete the black part

put the edited couple into the latte

crop half page and turn it 180 degree to delete the clock
use crone stamp tool to edit a little bit

--------------------------------------------------------------------------------------

The progress ...

latte art - couple

placing the coffee shop

i feel like this is better place to put the coffee shop

added the caption

These are the progress that i have done until now. :)

Sources:
http://favim.com/image/525731/

http://homesteaderkitchen.com/ninja-blender/hot-lattes-ninja-kitchen-system-blenders/

http://www.mrwallpaper.com/view/coffee-xmas-foam-1600x1200/

http://www.marcussamuelsson.com/news/america-home-of-the-world%E2%80%99s-best-barista-drink-day-with-elizabetta-tekeste

http://www.flickr.com/photos/planetperki/4368496479/sizes/o/in/photostream/

http://www.flickr.com/photos/einafets/2568871022/sizes/o/in/photostream/

Week 3 - Adobe After Effects Exercise (Day to Night)

Today, we have learnt something new.

See the bottom bar, "Toggle Switches/Modes"
Click on it, it will show a bar called "Mode"

Click the "Noormal", then you can select what mode you want.
For example, you select "Lighten"

It changed to "Lighten".

Exercise of today :)

Week 2 - Adobe After Effect Exercise

I chose Puzzle for my AE's exercise.
Take a look :)

Movie Teaser Poster - Moodboard (Pinterest)

For the moodboard research, we are required to use Pinterest to pin it.
So, here's some moodboard that i had search about for my movie teaser poster.

Font type research

poster example

About coffee

Moodboard - the coffee shop, the background

some art design

Click here My Pinterest

Infographic Organization

Group Member: Chee Mei Yun, Jacqueline Tee Pui Yee, Shai Kae Shan 

Good Example:

Before committing resources to building and designing infographics for your audience, consider these concepts (your efforts could be wasted if you do not incorporate these concepts during development.)

The Audience
Look to your community to see what content and topics it shares and discusses. Are people sharing statistics? Is the conversation formal or relaxed? A frequent mistake is trying to please everyone on the web.

The Message
Focus on your story. Infographics can be used to share more than data. They are also used to explain a process, a timeline of events or the identity of a business. Your infographics may not require any numbers. Does your community truly know what you do or understand the value of your business?

The Tone and Personality
Sometimes it makes sense for an organization to utilize a more traditional and formal info graphic. The audience in industries like finance or government contracting may prefer a "straight to the facts" approach. Those in the lifestyle market or sophisticated marketing professionals might be the right communities for bold, fun or even silly designs.

The Theme
Your infographics must have a theme! This does not mean simply utilizing the same colors throughout. A theme requires a core topic or subject represented by the visual components. For example, if your business is in the aviation industry, you may choose to have the story incorporate aircraft, pilots and other visuals that relate to your message and audience.

The Hook
Beyond your community viewing this infographic, learning from it and understanding the message, you want them to take action. Your goals will include brand awareness through views,thought leadership and social sharing, but ultimately your audience's attention should lead to some measurable key performance indicator. What do you want them to do? What are you promoting? For example, if your organization invested resources in an industry research study, you may use this infographic as the content that leads your community to download the full study.

 Bad Example:

This is one of the bad example of infographic that we found. As we can see the visual is filled with so many texts and it is not well organized. The message of this infographic is also not clear enough to reach the audience due to the size of the texts are too small. We think that this infographic may need to change in some part to perform better. For example, the main topics should be in different color and in bigger size. They should reduce using too many text to avoid audience from getting confuse.

Movie Teaser Poster (Synopsis)

Love Latte

This is the story synopsis i have created for my Assignment 1 - Movie Teaser Poster.
It is dramatic and some romantic.

Love Latte is a story depicts Elsa and her family.  Elsa is a freelance photographer, she has a big dream. She loves latte so much, she wishes to open a coffee shop and travel around the world. This is a must in her to do list. Elsa and her parents are the greatest, sweetness, enviable family. Elsa's dad - James spend the dinner time with her wife - Agnes and daughter every night. They also spent most of their times together to travel every Sunday to a small town to taste the different varieties of coffee in the coffee shops.

Until one day, Elsa went out to get some inspiration for her photograph and she got hit by a car when she crossed the road. This accident caused her coma. Her parents feel sorrow because Elsa is their wonderful daughter who gave them lot of joys and fun. However, her parents still try hard to earn money for Elsa's medical fees. They look tired and restless.

Five years later, she regain consciousness, she lost her memory which caused her amnesia from childhood. She can't even remember her parents, friends or people she used to know. She is so scared to face every single thing in her life. She does not want to eat anything and cry every day. She had lost weight and always threw tantrum to her parents. She had totally changed to a difficult person. Her parents almost want to give up, but Elsa's childhood best friend, John gave a lot of support for them.

John knows that Elsa loves latte. So that he brings her to his coffee shop and make a latte for her. And she starts get back her memory little by little.

John gave her some advises and keeps gave encourage to her. He tried very hard to tell Elsa about everything that had happen in these five years. He showed all the photos that Elsa has taken before and proved that the parents who stayed with her currently were her biological parents. She eventually accepted the fact as who she is as well as her biological parents.

John teaches Elsa how to make coffee in his owned coffee shop. Elsa is very interested on it. They both getting chummy and become couple at last. Elsa knows that John is not so successful in this business. Unfortunately, there is a coffee art competition.  Elsa try to learn the coffee art herself and helps John to won the first prize.


Elsa decides that, she wants to record everything in her life by taking photos and notes down in every precious moment. She also helps John to decorate the coffee shop with the photos she took. The coffee shop is now becoming famous. Not only their coffee, but their story...

Class Exercise - Photoshop

We're required to create a Photoshop poster.

Requirement:
A4, 300dpi, Character by mjranum (devianart), Background photo from flickr, Full color, Caption, Prop

The original pictures:

Picture from
http://www.flickr.com/photos/ingerush/8943398978/sizes/l/

Picture from
http://www.ntp-digital-wall-clock.com/digital-wall-clock-ref/digital-time-clock.jpg

Picture from
http://mjranum.deviantart.com/art/Hell-on-Wheels-99815242 

The final outcome:

Adobe After Effects - Exercise 1 (Lego)

First time using After Effects, so i decided to use print screen to memorize it.

First, just go to Composition > Composition Settings (as photo below)

After that, choose "PAL D1/DV", and the width and height choose 720px and 576px.

Import Photos/Photoshop File: File > Import > File..

 Choose the file you want..

After you selected the file, it will pop out this, Select "Editable Layer Styles".

As you can see, the layers are all here.
Press down the down-arrow, you will see the "Transform", press again you will see "Position".
Shortcut key for "Position" is "P".
So, you can move your object with using the button "Position" now. :)

After done the transform, go to

Composition > Add to Render Queue

The bar at the bottom, click on "Lossless"

Choose "Quick Time Movie", press on "Format Options",

it will show the type that you can save as. Just choose "MPEG-4 Video"

So, here's the lego video i have made.

Information Type

Spatial
Information that describes relative positions and the spatial relationships in a physical or conceptual location.

Example:

How much is 1 Gb?

Chronological

Information that describes sequential positions and the causal relationships in a physical or conceptual timeline.

Example:

The price of being Batman then & now

Martin Williams is born.

Quantitative

Information that describes scale, proportion, change and organization of quantities in space, time or both.

Example:

Agricultural

Enrollment by full-time and part-time students

Visualizing Gender Stereotypes

Sources:
http://www.behance.net/gallery/MTS-How-much-is-1-Gb/10567269

http://www.behance.net/gallery/The-Price-of-Being-Superheroes-Infographics/10006839

http://blog.lib.umn.edu/design/studentblogs/MartinWilliamsInfographic.png

http://www.behance.net/gallery/Agricultural-infographics-Tutorial/6659287

Books:

Designing Diagrams
Creative Editing