I&VN Project 3: Parallax
10/6/17 - Week 10
GCD60204, Hafiz Zamri
Illustration and Visual Narrative
Project 3: Parallax
Outcome
Based on the given narrative you are to create a series of illustration to demonstrate the passage of time that leads to the one piece or concludes it.
All outcomes must utilize at least 3 layers and identify 3 transitional types (Scott McCloud). The outcome may include more than one perspective point, meaning it can be viewed from back to front, right to left vice versa.
Weightage
LO5 Display evidence of creative thinking through the exploration and communication of design concepts.
20 Marks for show of progress on week 12 - 14 Creative Direction and Technical Direction. Suitability of finishing
LO2 Illustrate proficiency in the appropriate use of drawing, or other visual communication techniques in physical and/or digital environments.
LO3 Effectively use tacit making skills and/or traditional media techniques in an appropriate manner.
Note:
Though assignments may differ in category, ultimately marking criteria is based on the learning outcomes of the module. To cross reference the relationship refer to the following:
Research and Development
LO1 Identify and undertake research into specific design problems or issues, and demonstrate an awareness of historical, cultural and contemporary issues.
Creative Direction
LO5 Display evidence of creative thinking through the exploration and communication of design concepts.
Technical Direction
LO2 Illustrate proficiency in the appropriate use of drawing, or other visual communication techniques in physical and/or digital environments.
LO3 Effectively use tacit making skills and/or traditional media techniques in an appropriate manner.
GCD60204, Hafiz Zamri
Illustration and Visual Narrative
Project 3: Parallax
Instructions
Project 3: Parallax
Description
An undertaking of a series of Illustrations to illuminate narrative spaces and transitions that allow to demonstrate technical and conceptual abilities.
Narratives can be conveyed in many ways. Some narratives follow a traditional linear arc. Other narratives loop in time, flash forward and back, restructure sequence or employ aspect-to-aspect transitions. Some view the same incident from different perspectives. Multiple narratives can be spliced together. Events can be placed in random order. Panels can be subverted. And several narrative threads can be simultaneously told. Narratives can be poetic. They can explore internal emotions instead of external action. They can investigate a central theme. Narratives can be shaped around predetermined rules. They can be reversed, labyrinthine in nature, and involve multiple readings with ambiguous beginnings and endings.
Description
An undertaking of a series of Illustrations to illuminate narrative spaces and transitions that allow to demonstrate technical and conceptual abilities.
Narratives can be conveyed in many ways. Some narratives follow a traditional linear arc. Other narratives loop in time, flash forward and back, restructure sequence or employ aspect-to-aspect transitions. Some view the same incident from different perspectives. Multiple narratives can be spliced together. Events can be placed in random order. Panels can be subverted. And several narrative threads can be simultaneously told. Narratives can be poetic. They can explore internal emotions instead of external action. They can investigate a central theme. Narratives can be shaped around predetermined rules. They can be reversed, labyrinthine in nature, and involve multiple readings with ambiguous beginnings and endings.
Outcome
Based on the given narrative you are to create a series of illustration to demonstrate the passage of time that leads to the one piece or concludes it.
All outcomes must utilize at least 3 layers and identify 3 transitional types (Scott McCloud). The outcome may include more than one perspective point, meaning it can be viewed from back to front, right to left vice versa.
Weightage
Portfolio totals 40% of the final grades. There will be checkpoints and marks shall be awarded at the checkpoint. The total weight of this assignment is 40% of the final marks.
10 Marks for show of progress on week 10 - 11 Storytelling and storyboarding. Composition and Layers
LO1 Identify and undertake research into specific design problems or issues, and demonstrate an awareness of historical, cultural and contemporary issues.
10 Marks for show of progress on week 11 - 12 Transitions
10 Marks for show of progress on week 10 - 11 Storytelling and storyboarding. Composition and Layers
LO1 Identify and undertake research into specific design problems or issues, and demonstrate an awareness of historical, cultural and contemporary issues.
10 Marks for show of progress on week 11 - 12 Transitions
LO5 Display evidence of creative thinking through the exploration and communication of design concepts.
20 Marks for show of progress on week 12 - 14 Creative Direction and Technical Direction. Suitability of finishing
LO2 Illustrate proficiency in the appropriate use of drawing, or other visual communication techniques in physical and/or digital environments.
LO3 Effectively use tacit making skills and/or traditional media techniques in an appropriate manner.
Note:
Though assignments may differ in category, ultimately marking criteria is based on the learning outcomes of the module. To cross reference the relationship refer to the following:
Research and Development
LO1 Identify and undertake research into specific design problems or issues, and demonstrate an awareness of historical, cultural and contemporary issues.
Creative Direction
LO5 Display evidence of creative thinking through the exploration and communication of design concepts.
Technical Direction
LO2 Illustrate proficiency in the appropriate use of drawing, or other visual communication techniques in physical and/or digital environments.
LO3 Effectively use tacit making skills and/or traditional media techniques in an appropriate manner.
Work Processes
Project 3: Parallax
My first task was to come up with a story which the entire project would revolve around. After some consideration, I came to the conclusion that I would propose a story that would be both action and landscape-heavy. One of the reasons I decided to do this was because I quite enjoyed creating and drawing landscapes in my own free-time. I wanted to create a story that would take the viewer to variety of different places, much like a sightseeing-journey. As such the story I decided to come up with is as follows:
My next task was to start researching the environments, character designs and start fleshing out the story even more. Because of the very nature of the project, Parallax and thus the aspect of depth and perspective is an integral part of the story. I've chosen a visual-heavy story so as to illustrate just how massive in scale not only the First World War was, but how diverse the battlefields in which it took place were.
A majority of the research I had undertaken was visual, all of which can be found in my pinterest board.
Because the story that I have created spans multiple places, locations and events, it means that the project has to be quite large and expansive in scale. Because of this, I felt that a digital, interactive parallax story would be the best way to go abouts this task.
For the art style, I decided to go for a simple, minimalistic art style that makes heavy use of silhouettes and outlines. I felt that this was the best way to save time and be able to produce as much content as I'm going to have to make. The story is going to feature a wide variety of landscapes and action set-pieces so that I could better show off the parallax effect in my project.
As such the first step is to come up with a proper plot for the story to follow. I'll start off by drawing storyboards, which I'll then use to flesh out the story.
After doing the necessary research I had done, I began delving into what kind of art style I would use for the artwork. I experimented using silhouettes in Illustrator, paintings in Photoshop and then finally I settled upon using Corel Painter. After some experimentation using the various brushes available in the program, I settled upon the Liquid Ink selection of brushes, which mimics real ink. I then chose to use ink illustrations as the art style for my parallax project.
Above is an example of a scene I had drawn out. Excluding the background, there are 5 layers in this scene. This scene will serve as a proof of concept for the art direction of my project.
The above video is a test animation I carried out in Adobe After Effects. I used simple timeline animation to move the different layers at different speeds, to simulate parallax.
After having digitized all the scenes in Corel Painter, I exported all of the artwork to .PSD. I then exported the .PSD files into Adobe Illustrator, which I then used to separate everything into 6 layers and to compose the various scenes. I used separate documents for each scene, so that it would be less confusing then putting everything into one long artboard. This is also because of the limit of Illustrator's maximum artboard sizes.
Having composited everything, I then began to move the work into Adobe Animate to begin the final process of animating everything and making the final result interactive. I used a 1920 x 1080 HTML5 Canvas as my document. Because of a problem with retaining layers, I had to convert my Illustrator files back into .PSDs before I could import them into Animate. I then proceeded to import all different layers and converted them to Motion Clip Symbols, which I code named to help keep me track of all the different layers in the various scenes of the story.
In the story, there are 12 scenes in total. Each scene has 6 layers. Initially I thought that I'd just put all the different layers of all the scenes into 6 layers on the main document, but I realized this would complicate things as various objects in the different scenes move at varying speeds. Thus instead of having everything pre-composed into 6 very long layers, I decided to make the individual scenes fly in as a single unit. One scene was composed of 6 layers, which was kept under one folder.
I created various transitions between all the scenes to make it seem like everything was happening in one large, cohesive story. I animated the transitional elements using Classic Tweens, which I adjusted to make sure the seams were hidden completely.
I added interactivity to the story by adding pre-made Code Snippets to an Actions layer and to Buttons I made for each scene. When the viewer clicks on a button, they are transported to that specific scene in the story. I also added a moving shape behind the buttons, that moves to the specific page number when the scenes change, so that the viewer knows what scene they're on. That alongside some text I added to the first and last scenes concluded the development of my parallax project.
I published the entire document as a HTML document, which can be opened by a web browser. I found that the best browser to use when viewing the document was Microsoft Edge, as the high-res graphics were too much of a strain on other browsers.
"The Great War rages and the allies are losing the war in the air. A young but cocky recruit joins the fight seeking a chance at glory, but instead of finding adventure, he is thrust into a bleak and bloody struggle that will reveal the kind of man he truly is. This is a journey that will take him through the highest mountain peaks, the lowliest trenches and through the very heart of hell itself."
My next task was to start researching the environments, character designs and start fleshing out the story even more. Because of the very nature of the project, Parallax and thus the aspect of depth and perspective is an integral part of the story. I've chosen a visual-heavy story so as to illustrate just how massive in scale not only the First World War was, but how diverse the battlefields in which it took place were.
A majority of the research I had undertaken was visual, all of which can be found in my pinterest board.
 |
| Rough concepts. Different colors show different parallax layers. |
For the art style, I decided to go for a simple, minimalistic art style that makes heavy use of silhouettes and outlines. I felt that this was the best way to save time and be able to produce as much content as I'm going to have to make. The story is going to feature a wide variety of landscapes and action set-pieces so that I could better show off the parallax effect in my project.
 |
| Firewatch has an amazing parallax effect going on in its website. This is the kind of style I was initially thinking of. |
 |
| Storyboard sketches for the story |
 |
| Scene 3 of the parallax story. The closer an object is to the camera, the darker it is, and vice versa. Furthermore, the farther an object is, the rougher its appearance is. |
The above video is a test animation I carried out in Adobe After Effects. I used simple timeline animation to move the different layers at different speeds, to simulate parallax.
 |
| All the artwork composited on Illustrator, seperated into different layers. |
 |
| All the completed scenes, composed in Illustrator. |
Having composited everything, I then began to move the work into Adobe Animate to begin the final process of animating everything and making the final result interactive. I used a 1920 x 1080 HTML5 Canvas as my document. Because of a problem with retaining layers, I had to convert my Illustrator files back into .PSDs before I could import them into Animate. I then proceeded to import all different layers and converted them to Motion Clip Symbols, which I code named to help keep me track of all the different layers in the various scenes of the story.
 |
| The various layers of all the scenes converted into Motion Clip Symbols. |
In the story, there are 12 scenes in total. Each scene has 6 layers. Initially I thought that I'd just put all the different layers of all the scenes into 6 layers on the main document, but I realized this would complicate things as various objects in the different scenes move at varying speeds. Thus instead of having everything pre-composed into 6 very long layers, I decided to make the individual scenes fly in as a single unit. One scene was composed of 6 layers, which was kept under one folder.
 |
| The way the scenes are separated. Each scene has a folder, split into 6 layers. |
I then began the long-winded process of animating all 72 layers to create the actual parallax effect of the story. The topmost and front most layers moved the fastest while the bottom and rear layers moved the slowest. I used a simple key frame animation with classic tweens to create the movement, and used various types of eases including Sine EaseInOut the make the movement of the layers as smooth as possible.
Each scene flies into the document together. All the layers that make up the scene are on standby to the right of the page. When the previous scene finishes, it moves off and in place the next scene's layers start to move in. The faster layers are positioned farther away from their final destination, so that they fly in faster. Meanwhile the next scene awaits their turn before they move into view.
 |
| The left scene is moving off outside of view. The middle scene's layers are moving into place. The next scenes on the right are waiting their turn to move. |
After I had finished animating the movement of the story, I began working on the transitions. Nearly every scene takes place in a completely different kind of setting and perspective. One scene may be a long shot of a mountain range, while the next is a closeup of a plane, and the next is of a crash on the ground. I had to work out what kind of transitional elements I had to create so that each scene flowed into each other relatively seamlessly. I decided to use a variety of things ranging from buildings and clouds to smoke and trees to mask the transitions between each of the scenes. These transitional elements were also animated and placed within their own independent layers. In the screenshot below is an example of a transition I created.
 |
The mountain in the middle acts as a transitional element and hides the seam between the scene to the left and the right. It was created using the Pen tool in Animate. |
I added interactivity to the story by adding pre-made Code Snippets to an Actions layer and to Buttons I made for each scene. When the viewer clicks on a button, they are transported to that specific scene in the story. I also added a moving shape behind the buttons, that moves to the specific page number when the scenes change, so that the viewer knows what scene they're on. That alongside some text I added to the first and last scenes concluded the development of my parallax project.
 |
| The coding used for the buttons. |
 |
| Navigation buttons. The grey square behind the numbers changes position depending on the scene, so that the viewer knows what page they're on. It is independently animated. |
I published the entire document as a HTML document, which can be opened by a web browser. I found that the best browser to use when viewing the document was Microsoft Edge, as the high-res graphics were too much of a strain on other browsers.
Final Submissions
Google Drive Link. The final document is a 15fps html file. The most reliable browser to open the document is Microsoft Edge. https://drive.google.com/open?id=0B6aqU66vURR8RERpWlRpNDZtamsFeedback
For my first bit of feedback, Mr. Hafiz said that I should orient the direction of movement of the objects in one singular direction, so that the movement and story is easier to follow from the viewer's point of view. To remedy this, I just flipped around the storyboards I had already drawn out.
Mr. Hafiz initially said that I should try to compose all the different scenes into 6 layers on the main stage. After I tried to do this, I realized that it would complicate things as the various layers of each scene moved at different speeds from each other. Coupled with the fact that each scene is sized 1920 x 1080, I decided to just have all the scenes slide into the document as grouped layers.
After I had officially presented the project to Mr. Hafiz, he said that I had good composition, technical knowledge and problem-solving however there could be further improvements to the project, such as drawing quality and perhaps even colour.
Mr. Hafiz initially said that I should try to compose all the different scenes into 6 layers on the main stage. After I tried to do this, I realized that it would complicate things as the various layers of each scene moved at different speeds from each other. Coupled with the fact that each scene is sized 1920 x 1080, I decided to just have all the scenes slide into the document as grouped layers.
After I had officially presented the project to Mr. Hafiz, he said that I had good composition, technical knowledge and problem-solving however there could be further improvements to the project, such as drawing quality and perhaps even colour.
Research
Because my story is grounded in history, I had to do a significant amount of visual research to make sure I got historical details like uniforms, vehicles and locations correct. As such a majority of my pinterest board has visual images I can refer to.
Comments
Post a Comment