I&VN - Final Project
9/11/17 - 7/12/17 (Week 10 - Week 14)
Seoh Yi Zhen (0328497)
Illustration and Visual Narrative
Final Project - Parallax Site/Tunnel Book
FINAL PROJECT
Week 10
This week, Mr Hafiz briefed us on our final project- either a parallax site or a tunnel book. The final outcome has to have at least three layers, and a minimum of three different transitions. As for stories, he encouraged us to choose something that hasn't been illustrated before, and he suggested some short stories by Rudyard Kipling.
Week 11
The story that I chose is another one by Edgar Allan Poe called The Island of the Fay. I chose this one because it involved a lot of landscapes that I could break up into layers. I was also really inspired by the idea of bringing readers along on a journey to experience what the author felt when he wrote this piece of writing.
 |
| Fig. 1.1: Mind map. |
I researched a lot on landscapes and composition because I felt that I wasn't very good at creating interesting compositions. I also looked at various art styles to see which one would fit my story best. All of my research can be found in my Pinterest board here.
 |
| Fig. 1.2: Firewatch. |
When Mr Hafiz showed us this website, I immediately knew I wanted to create a parallax webcomic. I loved how the parallax effect gave it more depth and I wanted to replicate that in my work. Because of that, I decided to do a vertical scrolling site instead of the usual side scrollers that our seniors did in the past. In my sketches, I also tried to connect each scene so that the transitions would be as smooth as possible.
 |
| Fig. 1.3: Sketches. |
Week 12
By this week, I had already finished illustrating each panel in Adobe Illustrator, which I then exported to Photoshop in order to paint in more details. I saved each layer (of each panel) as separate vector files so that I could re-assemble them in Animate and create that parallax effect.
Note: Not every painted panel is shown because there are missing layers that I painted separately.
 |
| Fig. 2.1: Completed panels. |
 |
| Fig. 2.2: Mock-up in Illustrator. |
 |
| Fig. 2.3: Panel 1 (added details). |
 |
| Fig. 2.4: Panel 3. |
 |
| Fig. 2.5: Panel 12. |
 |
| Fig. 2.6: Panel 13. |
After completing all the panels, I imported the individual PNG files into Adobe Animate where I began working on the animations. I had to make sure that all my files and movie clip symbols were named properly otherwise I would lose track of everything. Each panel had its own folder, and I also made sure that each layer was labelled and sorted in its correct folder.
 |
| Fig. 3.1: PNG files converted into movie clip symbols. |
 |
| Fig. 3.2: Each panel sorted out by folders. |
I animated each layer according to different speeds- layers that were closer moved faster, while layers further back moved slower. Each panel moves into place together. All layers that make up the panel wait on standby at the bottom. When the previous scene finishes, it moves off to the top while the next panel moves in. The faster layers are positioned further away so that they fly in faster. I also used Ease In and Ease out to make the movement of the layers as smooth as possible.
 |
| Fig. 3.3: Top panel moving out, middle panel in frame, bottom panel waiting to move in. |
As per Mr Hafiz's suggestion, I also added movie clip symbols within each panel that animated independently of the transitions. These were all secondary actions like water ripples just to make my web comic more interesting.
Week 14
Link to my Google drive files:
The most suitable browser to view the HTML file would be Microsoft Edge.
Comments
Post a Comment