Kristin Becker's DTC Classes at WSU

Creating this comic for the web presented some new challenges that were quite challenging. The top challenge was dealing with the limitations the web possesses. This becomes very apparent when realizing that I had to change from attempting to learn and create a website through HTML and CSS to utilizing Wix as a platform for the comic. In the attempt to make an HTML website, I ambitiously strived to implement elements such as GIF’s and even have it be interactive in the way that McCloud’s comics were. I thought that that would be one of the best ways to fully use the capabilities, within reason, of HTML, but unfortunately, my actions could not keep up with aspiring ideas. Moving on to Wix, base elements of design are much easier to get a grasp on, but possibilities are also taken away. Making most of what I could, I arranged my comic in such a way where it is read top to bottom, having the reader go from right to left to view panel after panel. Although it has a linear design, I intended it to have it read downwards rather than simply keeping it in a tight area where every panel can be seen or having the panels be viewed by horizontally scrolling. This is because, for most platforms, using a finger to scroll down a screen or a mouse wheel seems much more convenient and intuitive than pushing the screen right or left. With this type of layout, I would expect McCloud to have a relatively positive reaction or at least I would hope so. This comic is slightly similar to that of some of his other comics such as the ones where he details the use of new technology in creating comics. Each has a fairly linear flow that has some sort of guidance, his arrows, and my texts, to guide the audience down the screen.  

The one panel created in Photoshop illustrating the journey from Maui to Pullman

As far as actually constructing this webcomic, I mostly utilized Illustrator for the majority of the panels with one panel being made in photoshop. I had originally planned to work the opposite with photoshop being the priority and illustrator being the secondary source of artwork. However, actually getting into the thick of the project made me realize that I lack a lot of the resources I needed to make the comic fully in photoshop, so I turned to Illustrator where I could create objects, figures, and other elements from scratch. Going through the comic, there is a prominent difference from one slide to the rest and that would be because that one panel was created in photoshop. It was the only panel that I had enough pictures to create while also fitting into the type of story line I had in mind. In making both this and the other panels, I really had to think creatively to put all the elements together, especially when considering its implementation into a website format where these files become JPGs rather than the easily alterable files in their respective platforms. As I previously mentioned, I originally intended to use the HTML route, but it proved a bit complicated for my current skill set. With Wix, it just involved literally dropping them into the website creator and orienting them in the way that I preferred, although with some restrictions. The whole transferring into web format was made a lot simpler, taking away some of the stress of figuring out the intricacies of placement with HTML.

Link to my web comic: https://thewebcomicadventure.weebly.com/

For my comic once I decided that I was going to do the choose your own adventure idea as my comic style, being on the web made it a lot easier to enact. Being able to use the buttons and different web pages was really nice and exactly how I imagined the story to be told. The viewer is meant to follow the path of my comic and use the buttons at the end of the necessary panels to be taken to a new web page to continue the comic. As for being viewed on different medias I have checked both laptop and on my phone and both ways the comic looks and works just how I want, almost better on mobile as it is more condensed and the extra web page space is eliminated. I think Scott McCloud would like my comic as it does follow his definition of juxtaposed pictures and words as well as being a different sort of style then you see in everyday print comics and digital comics.

I used Illustrator for the sole reason that it felt a lot easier for someone not as digital design skilled as myself. Also, Illustrator I feel allowed me more creative liberty in being able to draw exactly what I want to draw using lines, changing in my own image, rather than just pictures used together. For getting my comic on a web page I used weebly because its the only website building software I have a decent amount of knowledge in, having to have used it for high school. Another reason I choose weebly is because I knew they had the button tool and that was a big part of my comic that needed to be available, and it ended up working out just like I wanted. To get the files onto the website I simply just created the pages with the side drawings, converted them to jpg, and then the inserted the images onto the site. As for what I learned that was new, I finally figured out how to use the gradient tool, which I utilized a lot for the cave and darkness effect. Also, I was just able to get better at using the software and making what my mind imagined after never using illustrator before.

The ability of not doing a traditional left to right reading style inspired me for this project because I wanted to try something different. Also having it be on web also allowed me to work with things like a scrolling feature which also inspired me because it led me to doing something a vertical comic that is continuously going down. I expect the reader to just scroll down because that’s really all they can do on my website, and with the whole concept of my comic being each frame is a zoom in from the last it makes a lot of sense and having to see one panel at a time in the specific order I designed it in helps the reader understand what I’m going for. No matter what device you read my comic it still reads the same way because each panel is put on top of each other and there is no side to side scrolling on vertical. I think Scott McCloud would see my web comic as a comic because it does contain juxtaposed images that are meant to be appealing to the eye, and they are placed in a deliberate order to have a deliberate effect on the reader. It also contains things like repetition and color, to give the reader a sense of time and space throughout my comic.

I used a mixture of both Photoshop and Illustrator, but I mainly used Illustrator. I used Illustrator to create most of the images in my web comic, and I did this because I was able to create a certain style that just looked better if I used a vector-based software over a pixel-based software. I used Photoshop for two of my images because for one of them I

Image I created using Illustrator

wanted the Photoshop brush tool because I think it created a better star effect for the stars, I had in space for my first panel. I also used Photoshop in one of my later panels because it I wanted to create a glitch effect for one of my images, and I had already known how to do that from before on Photoshop so instead of learning how to do it on illustrator I just took my image I did on Illustrator and added a glitch effect to that. I put my comic on Wix and it was very easy I used a blank website template and from there all I had to do was put in a Title text box at the top of the page, and then I just kept added my images one at a time in the correct order on top of each other without any space in between them, to create a better zoom effect. My experience with Wix was a very positive one because I didn’t have single issue with it and was able to do that portion of my project very fast and exactly like I wanted to. I just transferred all my illustrator and Photoshop files in jpeg files and then I was able to add them onto my website. I don’t know if I learned anything new while working on this project but I did feel like my skills in illustrator did improve a lot while working on this project, and I also learned a new style of creating a comic which was on a website.

Panel 3 and 4 on my “Knolly the Armchair” comic. Fall 2019

In class, when we began to look at and read web comics, I was really inspired by Scott McCloud’s “the right number part one and two.” The way this comic zoomed in on each panel to pull the viewer into the story really stood out. My original plan was to recreate a webcomic like this, but when I started looking into it, the only way I could do it with my skill set was through Prezi, which is a website for presentations. Since my comic would not have been created on its own website, because of the nature of our project, i decided to take another route. Using my same story line, I ended up using wix.com to create my own website, and made my webcomic a story that is viewed vertically. The format this is in required the reader to scroll down repeatedly in able to read my comic. This brings in viewer participation, because if they wish to read more than only a couple panels, they have to interact with the website by scrolling. When I bring up my comic website on my phone, the site adjusts to a mobile phone, so the comic looks and acts just the same as it does on a computer. If Scott McCloud were to read my comic, I think he would definitely define my story as a comic because I have a story told in a sequence of juxtaposed images. In my comic, we can also look at the passage of time and how in my three panels of people walking past the storefront, you could say that was an action to action panel transition, as explained my Scott McCloud’s understanding comics. 

I decided to use both Photoshop and illustrator in my creation of my comic, because I wanted to create my images using the pen and shape builder tool In illustrator, then transfer over to Photoshop where I could make selections to fill in color. I have found this is the best and most efficient way to create a comic for myself. I also learned to manipulate the art boards on illustrator so I could create one long page to place all my panels on, to emulate what it would look like on the website. I then saved this long page as a jpeg. and placed it Into the Wix website. Using Wix was very simple, as I just placed the one jpeg onto the page and enlarged it to fit the page. This made it easier and quicker for me, as I had many other large projects due around the same time as this one. 

https://cierrahaken.wixsite.com/hakendtc

What inspired me is one of the comic I saw on the internet with gif having 2 frames keep switching to each other. The only thing that are different between those 2 is the pattern of the fire camp, this create the effect of fire animation while everything else in the frame is still. After seeing this, I thought that the idea was really cool so I did it with electric. In addition, the other idea of mine is to paint each frame with only one color, but the colors I chose were based on the atmosphere in that frame. For instance, when the main character lost his temper, the whole frame turns red in order to shows his anger.

My comic has a vertical layout. With one single big frame only show up one at a time, the reader can scroll down slowly with the mouse wheel, this kind of layout makes a lot of sense for me so that is why I chose it. Furthermore, I also make sure it will have an interactive element, a thing that can only be done in web comic. For that reason, I added hover boxes in some frame, which means readers can point their mouse to the frame to see a different image. To inform the audience with this feature, I put a note in the beginning of the comic about the icon which I added to show which frame can be interacted later on.

I tried my best to organize the layout in touchscreen device, but it still looks a little bit off. The hover box lost its feature in these kind of device. Instead it only shows the images when the mouse is hover on it. For this reason, my comic will not make a lot of sense on a smartphone so I guess my project is only optimized for computer. I believe my comic fits McCloud definition of comic well since it contains multiple frames and together, they tell a complete story.

For this final project, I used my Wacom tablet to draw in Photoshop. I have a feeling like I did not really utilize the potential feature of Photoshop since most of them are just organic drawing, so that is one flaw that I wish I know how to fix. But there are something that I could not complete without Photoshop. To make the gif, I drew the guy in the electric chair, used the lighting picture put on top of it and then set that layer as overlay. The result came out great as the lightning pattern was drew in that picture. After that, I spun the lightning pattern so that I have the second frame. Finally make a gif out of those 2 then I have my favorite frame of the comic. In addition, I added the bubble text and words to show the character’s speech.

Wix was what I used for this project since I used it before and realized of how easy it is. I only need to export the frames to JPEG and then add it to the website. Since Wix gives you the feature of drag-and drop ability, it was very convenient for me to organize the layout. Wix also let me add hover boxes so I was able to make those interactive frames.

On the whole, I am very proud of the project and happy of how it turns out. One thing I learned is how to make gif so as to getting more experience building website on Wix. The project just helped me more comfortable with building website which is a big help as I believe I need to make a website portfolio on my senior year in order to graduate.

https://ttbaophuc.wixsite.com/dtc201comic

The main inspiration for my web comic was the gif on Eroyn Franklin’s website. I was intrigued by the use of GIFs as a way to portray a comic. During the brainstorming process, I was mainly determined to create a GIF. I also wanted to incorporate illustrator into my comic and also have more user interaction with my comic. For those reasons, I made my web comic two GIFs that I felt incorporated both what I learned from Project 1 and what I learned from Project 2. The first GIF is kind of like a stop motion of items that I scanned in, and the second GIF I just drew in illustrator. I tried connecting the two GIFs to make it seem as though the pencil from the pencil case in the first GIF was being used to draw in the second GIF. To add more user interaction, I made it so that when the user clicks the first GIF, it changes to the second GIF. Unfortunately, even though I wrote code in JavaScript so that the GIFs should change when the user clicks, it only works the first time. After looking up the issue, I found that it doesn’t work because my files are not online. I really like the idea of an interactive web comic and I think I should have added more clarification on how to interact with the comic so that the user knows that clicking on the GIF causes it to change.

Frame from my web comic GIF

My web comic doesn’t work on anything other than device/laptops that have the HTML and GIF files so it isn’t very user-friendly. I think in the future I will post it online because I want to create portfolio soon and I will make sure to make it a little more clear about how to interact with the comic. I think Scott McCloud would say that my web comic is a comic in the sense that film can be considered comics because they are a lot of individual frames. Also, McCloud would likely mention the way I used time in my web comic because there is a sense of time between each frame in the GIFs but there is also the user-controllable aspect of time with the “click to change GIF” part of the comic.

I made my web comic in Photoshop and Illustrator. I scanned the pictures of my pencil case, pencil, and an eraser at Avery after class and then drew the hand and pencil movement in Illustrator using the pen tool. For the GIFs to show up on the localhost website, I had to make sure that the GIF files were in the same folder as the HTML file. Overall, I learned the strengths of each software. I think I still need to familiarize myself with Illustrator a little better but I’ve become very comfortable working with Photoshop and I plan on continuing to use this software in the future for more projects I do in my free time!

For my final web comic, I decided to use the website Wix to display my comic online. Initially, I thought about using some HTML to make my own website but I figured that using Wix would give me more time to work on the actual web comic. I wanted to display my comic on a basic website without any distracting features or backgrounds to them. I chose to have the panels being in a scrolling vertical order so that anyone could view it either on a phone or a desktop. The basic ability of just scrolling makes it accessible to most people that have used a basic website in recent times. In order to ensure that my comic would be able to be viewed correctly on a phone or desktop, I used the build in tool on Wix to ensure that my content could be viewed correctly. I believe that Scott McCloud would say that my comic has a simple story arch and gets a point across.

Image from my web comic

The software that I used for this project was Illustrator. I only used illustrator and not Photoshop because I had no need to use any external images that needed editing in Photoshop, everything that I wanted was accessible in Illustrator. In order to keep a good resolution for my website, I kept each art board at the resolution of 1920 x 1080 and inserted each image below one another on my website. This would make loading the images much easier and more fluid due to everything not just being one large image. Something that I learned from this project is that displaying your content online can be a tricky thing to try and do for the first time. The first two projects were straightforwards when presenting them. All I had to do was print them out. This project helped me learn how to present my work online in a professional way. I hope to used this skill in my future work when I need to use an online outlet to display something to people.