In 2016, I began writing an epic-length Sci-fi light novel series titled Cryogenic. This endeavor was never completed. I chose to write a light novel over other literature formats to justify the presence of large quantities of illustrations. In my enthusiasm, I joined various writing groups, and progressively over a year, my ideas and perceptions of novel formats were shot down. Thus, my spirit vanished, and Cryogenic was shelved. When the assignment for a webcomic came up, I immediately knew it would be a perfect format for my dusty old unfinished light novel, and for the first time in 5 years, I felt as if I could remove Cryogenic from its shelf.
However, since I had spent a year's worth of story development on what was essentially to be an entire series of light novels, the plans for Cryogenic were extensive. For my webcomics class assignment, I chose to produce the first half of chapter 1 of Cryogenic. This is why you will find that in it's current state it does not have an extremely conclusive ending.
I chose the title Cryogenic for two reasons. Firstly, within my story, cryogenic sleep is an integral part of the main character's environment, the space colony. Secondly, I felt it was a poetic metaphor for the physiological state in which all the characters are in; on the space colony, people have forgotten how to express emotions. On earth, they've forgotten their historical past and lost all knowledge.
Because my webcomic's story was initially written out in prose, my first step in the scriptwriting process was to convert the prose I had already written into a comic script. For the webcomic assignment, I chose the first segment of my novel, the protagonist's dream sequence leading to his startling awakening. However, for the context of the chapter, below is the overarching story Logline.
Assuming the earth is no longer inhabitable, space colonists who split their time on their colony via cryogenic sleep clash with oppressed non "space dwellers" from the earth. Some humans struggle to come to peace with their fates. Which reality will prevail?
I envision cryogenic as a juxtaposition of Hal's space colony (which represents pro-technology) and those on earth (representing the rejection of technology). Fig 1 is the mind map where you can find the entire epic saga story outline along with my initial design research for the space colony.
With my script created, the next step in my process was to determine the right platform for Cryogenic with particular emphasis on having it be both easily manageable and accessible. As the written story follows multiple characters and perspectives, my original vision for this webcomic was to create a non-linear storyline, allowing for the free exploration of the various narratives. I prototyped a few website designs on Adobe XD to allow for that format. Please note that the designs in the prototypes are minimal and were purely to establish how the mechanisms would work quickly.
Fig 2. Test version with click mechanism (If you wish to view this test, you can visit: Here)
The first, which you can see in Fig.2, is a simple solution: to branch out and have the reader click on arrows to choose directions. I felt this was an effective navigation system, and the menu button would allow the reader to return to start at any point in the reading. However, it was pretty tedious for its simple final result to ensure that every forward and backlink was correctly directing the user.
Fig 3. Test version with click and drag mechanism (If you wish to view this test, you can visit: Here)
The second, which you can see in Fig.3, is even simpler, allowing for a large format png of the chapter to be uploaded and for the user to move the "map" of the chapter along. However, I felt this made the direction of the narrative unclear, which could be used intentionally, but I didn't feel it fit the already complex narrative of Cryogenic. It also is not the most convenient for non-touchscreen viewing devices, and as I intend to continue this webcomic in the future, I needed a platform that many could access.
Fig 4/5. A snapshot of a compiled webflow test
The third test, and the platform I chose to go with, was on a free hosting site called webflow. I chose this hosting platform because it allows for simple coded constructions of parallax and basic animated HTML features. Thus, I decided to reject my initial idea for a non-linear storyline in favor of the easily manageable infinite scroll and extra features of webflow.
In Fig.4/5, you can see the elements I used to construct the webflow test. I only spent an hour incorporating three of the features and immediately found it was intuitive software. The free version of the platform only allows for two projects with two pages in each, but for this assignment, it was enough. Here is a link: (https://webflow.com/interactions-animations) of the platform's capabilities; I have yet to test them all out, but they are all features that I have always felt could be incorporated into the mechanics of a sequential story. I did experience incredible enjoyment building the third test, and despite it not being anything like my original idea, It was clear that I had an urge to explore this platform.
Fig. 6 Quick sketches to determine basic features of each character
The next stage for me was to pinpoint how the main characters would look like. Though chapter one only has Hal and Boon present, I still felt I needed to explore how they would look in relation to the other main characters. Fig. 6 shows some of those initial explorations.
Fig. 7 Character Sheet for Hal
In Fig. 7, you can see my final draw-up for Hal. Although he is meant to be quite an apathetic and shy character, he is the main protagonist for the space colony arcs, and so I felt the skin fade hair cut would allow him to stand out from the others. I am mainly considering that nearly all characters will be in uniform.
Fig. 8 Character Sheet for Boon
Boon, in Fig. 8, has quite the opposite personality to Hal's. He is confident, enthusiastic, and energetic. I envisioned him to have the physical characteristics of a Latino, as I relate a lot of those characteristics to my own culture.
The final design feature to establish was the logo. I chose the title to be a form of melting ice. This was to reference the "cryogenic" state in the title and instill eeriness through the melting of ice by foreshadowing that the cryogenic state is not meant to remain or is flawed somehow.
In Figs. 9-11, I have broken down the creation process for the logo design. I traced over two layers of chosen font that I skewed and overlapped to allow me to visualize the three-dimensionality of the melting ice title.
Fig. 9 Font of choice, skewed and duplicated
Fig. 10 Pencils of Logo over the font of choice
Fig. 11 Final Pencil of Logo
Fig. 13 Final Logo
I then inked the final pencils and colored the logo, as seen in Fig. 12 & Fig. 13. I made sure to include halftone in the logo colors, as halftone will be a large part of my coloring process later on. Fig. 14 is the chapter heading for my webcomics. I intend to continue to include my brand logo and expect to change the color schemes of the title logo to suit each chapter.
With my characters and logos now established, I felt ready to thumbnail my chapter. Fig. 15 is single clip canvas housing all my page thumbs. Each page is formatted at 800px by 4000px ratio in order to correspond with the max canvas size I will then blow them up for my final webcomic canvas, which are set to 4000px by 20,000px (at 1200dpi) in a clip studio .cmc folder.
Fig. 16 Color scheme for the first part of chapter and logo
Fig. 17 Pencils, Inks and Full colored static version of Cryogenic ch. 1 pg. 2
Fig. 17 is a step-by-step process from pencils to the final colors of page one in my .cmc file. I chose to color the first segment of my chapter, a dream sequence, with the color scheme seen in Fig. 16. I wanted complementary colors that would pop amongst the backdrop of space. An interview with Tillie Walden inspired me, where she pointed out that most sci-fi's are grey and monochrome, and I felt I could somehow also contribute to a change in that perception of sci-fi stories.
Fig. 18 Color scheme for the second part of chapter 1
Fig. 19 Ink to complete color stages of the second part of chapter 1
Sticking to my concept of popping colors, Fig. 18 is my chosen color scheme for the second segment of chapter one. The blues are colors relating to Hal's perspective, and the reds relate to Boon's perspective. Going forward, I plan to have a separate color scheme for each character and one primary color scheme for when multiple character stories merge. Fig. 19 show's how I have used the colors from Fig. 18 on page 5 of my webcomic .cmc file.
Fig. 20 Landing page for Cryogenic webcomic
With my comic drawn up, I was ready to start uploading. The first task was to create a landing page for my webcomic with chapter selection. This would be the page the drop-down within each chapter would take you to. Fig. 20 is a screenshot of the final landing page.
The next step in the uploading process was to export all my webcomic pages into separate .png layer files. Then I imported the files into photoshop, each page image as a separate layer within the .psd file. I then sliced each page to create specifically identified elements. Fig. 21 is an example of one of these pages. This process was the most crucial aspect as it was what enabled me to attach parallax animations to particular items in the webcomic. For example, Slice #1 and #8 in the middle layer were enlarged during scroll, and nearly all the text elements were faded in while scrolling.
A significant aspect of making this entire process feasible was organization. Before slicing and before uploading onto webflow, I made sure to understand how each layer would behave, and then each file was labeled with an appropriate file name that would ensure my workflow was as smooth as possible. Fig. 22 is a snapshot of only a few files and my naming system. In total, I had 136 image files.
Fig. 23 shows the webcomic structure. There was probably a more efficient method to go about structuring this chapter. But to meet deadlines, I chose to go with a simple approach that I already understood. Each individual slice of a webcomic page is housed within a Div Block that contains the various layers for that slice, allowing me to attach animations to a particular item without affecting any of the other div blocks on the page.
The resulting webcomic was far more successful than I had imagined. I have managed to make the webcomic accessible on a variety of devices. For the smallest screens, I had to remove the shatter effect over the illustration of Hal, which is in the middle of the storyline. I did not mind this compromise, as the plus side meant that small mobile devices could view the rest of my webcomic without issue.
However, I have encountered bugs specifically on android mobile devices. My research on the issue confirms that this is unique to androids only, as they use a different flexbox plugin than all other devices. Flexbox is the element in browsers that can translate the HTML coding for parallax effects. The bug can be mended. Though, I have yet to discover which particular piece is the cause.
All in all, the uploading process was far smoother than I expected. I feel that the additional animations are effective in amplifying the narrative. I did go a bit crazy with all the added elements, mainly for experimentation. Thinking on the long term and for the future of my webcomic, I would most likely limit the animations to a couple per chapter and in areas where I felt this would add enhancements to the narrative. Examples of the elements in my webcomic, which I felt were particularly enhancing, were the growing earth, Hal shattering, Hal falling to earth, and the final element where the Clank sound from the door appears multiple times.
To read the chapter click here.