Webcomic Final Project

Link to website

Link to code

Title: Sea Star Comic

Semester/Year: Fall 2023

Software, coding/programming languages: After Effects, Photoshop, HTML

For my final project I decided that I would try to make a webcomic hosting site. I looked at some people’s websites for their comics for ideas for the website layout, which is how I decided where to put the navigation bar, which I made more intuitive by making the clickable elements (the arrows) get bigger when you hover your mouse on them. The story itself is not complete and the artwork isn’t polished or colored but I hope that a story is still told. The cover page is animated in After Effects, and the drawings were made by me in Photoshop. To make the animation I drew all the elements (the background, the star, and the bubbles) separately and then imported them into AE. Then I moved the star and bubbles around a bit and then exported the video as a GIF. I had to downsize the GIF by a lot since the real thing ended up being an entire gigabyte. Overall it was pretty neat to see what a hypothetical webcomic website would look like if I ever decided to make one. If I had more time I would have added a home page or something similar which could be accessed by clicking the star in between the arrows.

Mad Libs

Title: Mad Libs

Semester/Year: Fall 2023

Software: HTML, CSS, JavaScript and Replit.com

Link to the website.

Link to project files.

This is a Mad Libs story about a place, object, and person. The story varies depending on what the user inputs. I tried to use the same inputs multiple times in the story. I struggled with finding typos and whatnot since I had to write more lines of code than I am used to. I added a survey/dropdown thing at the end but I wish I could have figured out how to ask the question after the viewer already read the story they made. It could have also been cool to figure out a way to get the program to detect if the word inputted started with a vowel sound, but this would be too difficult (words like unicorn and honest would be especially annoying since you’d have to say “a unicorn” and “an honest”) plus replit was telling me I was already running out of RAM which was surprising.

Published
Categorized as Programming

Haunted House Choose Your Own Adventure

Link to the website: https://choose-your-own-adventure.chloemkleid.repl.co/

Link to the code: https://replit.com/@chloemkleid/Choose-Your-Own-Adventure#index.html

Title: Choose your own adventure haunted house

Semester/Year: fall 2023

Coding language/software: html and css

I had actually written most of this choose your own adventure story in the summer when I was inspired by other choose your own adventure stories on tiktok. I wanted to include characters who would be fun to draw while still (hopefully) being a little creepy. The pictures are all drawn by me. I drew the pictures and animations/gifs with Procreate since I already had specific ideas as to what I wanted everything to look like, and it was fun to draw everything, even though unfortunately I didn’t get to make enough drawings for each page. At first it was challenging to center the images and text and change the hyperlinks to look sort of like buttons. After Googling around, and asking my dad for help, I was able to center everything (even on mobile devices) and change the links to look like how I wanted them to.

Published
Categorized as Website

Confusion Animation

Title: Confusion

Semester/Year: Fall 2023

Software: Adobe After Effects

For this project I decided to make a mini animation about the emotion of confusion using After Effects. We had to include text of the word itself and I thought that it might be interesting if I made each letter move on its own to communicate confusion and chaos. I chose grays and black and white because I liked the simplicity of it and it reminds me of older animations and videos, like the ones we saw in class. Timing and pacing wasn’t too difficult because this project is only ten seconds.

Published
Categorized as Animation

Portrait of Columbus Circle

Title: Portrait of Columbus Circle

Semester/Year: Fall 2023

Software: Audacity

Description: 

I decided to do an audio portrait on Columbus Circle because I’m there so often. Before class on Tuesday, I recorded some sounds at Columbus Circle, such as people talking, cars honking, and the trains. In order to improve the ambiance more I found royalty free footstep sounds and bird sounds (both pigeon and robin). I adjusted the volume of a few of my audio files and I used fade in and fade out frequently. Audacity is a challenging program even though it’s simple, but I was able to edit my audio thanks to the recorded lectures on YouTube.

CREDITS

“Pigeons taking off” by Glaneur de sons. Attribution 3.0 license. Freesound.org. September 20, 2010. https://freesound.org/people/Glaneur%20de%20sons/sounds/104954/ 

“Footsteps on concrete” by florianreichelt. Creative Commons 0 license. Freesound.org. February 18, 2019. https://freesound.org/people/florianreichelt/sounds/459964/

“Bird Whistling, Single, Robin A” by InspectorJ. Attribution 4.0 license. Freesound.org. January 27, 2018. https://freesound.org/people/InspectorJ/sounds/416529/

“Footsteps, Dry Leaves (Sony)” by InspectorJ. Attribution 4.0 license. Freesound.org. November 26th, 2015. https://freesound.org/people/InspectorJ/sounds/329600/

Published
Categorized as Audio

Self Portraits

Title: Self Portrait Raster

Semester/Year: Fall 2023

Software: Adobe Photoshop

The images I chose are images of where I’m from and have lived (Brisbane, Australia and Manhattan), with  some animals which are also from there. The background is meant to look like a comic because they’re a big part of my life. In the foreground is an easel with a “painting” of myself on it, representing how I like art. In total I used seven images. I was inspired by the demo, which was a New York pigeon sitting on a building. This led me to want to make an image mainly based on where I’ve lived and to include animals that live there. The most challenging part about this project was thinking of new ways to add images, or how to use new effects. I ended up giving the rat laser eyes to try and use more effects.

Image Credits

“Australian Magpie” by Dupont, Bernard. Attribution-ShareAlike 2.0 Generic. WikiMedia Commons. November 1, 2000. https://commons.wikimedia.org/wiki/File:Australian_Magpie_%28Gymnorhina_tibicen%29_%2810087114694%29.jpg

“Christmas beetle” by Chuq. Attribution-ShareAlike 4.0 International. WikiMedia Commons. December 5, 2020. https://commons.wikimedia.org/wiki/File:Christmas_beetle.jpg

I used this image by removing the background and rotating it.

“New York City skyline” by Nagel, Norbert. Attribution-ShareAlike Unported. WikiMedia Commons. May 7, 2006. https://commons.wikimedia.org/wiki/File:New_York_City_skyline_07.jpg

I edited this image by removing the background and adding a filter.

“Paper texture background, old yellow design.” CC0 1.0 Universal. Rawpixel. https://images.rawpixel.com/image_1300/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3B4MTA1NzQwNC1pbWFnZS1qb2I2MzAtYV8xLmpwZw.jpg

“Rodent Mammals Rat Mouse” by 7768740. Content License. Pixabay. January 22, 2018. https://pixabay.com/photos/rodent-mammals-rat-mouse-animals-3095272/

“Skylines of Brisbane in winter misty morning seen from Kangaroo Point, Queensland” by Kgbo. Attribution-ShareAlike 4.0 International. WikiMedia Commons. July 27, 2019. https://commons.wikimedia.org/wiki/File:Skylines_of_Brisbane_in_winter_misty_morning_seen_from_Kangaroo_Point,_Queensland_04.jpg

I edited this image by removing the background and adding a filter.

“Spotted lanternflies in BBG” by Rhododendrites. Attribution-ShareAlike 4.0 International. WikiMedia Commons. September 9, 2021. https://commons.wikimedia.org/wiki/File:Spotted_lanternflies_in_BBG_%2842943%29.jpg

I changed this image by removing the background.

Title: Cat Portrait Vector

Semester/Year: Fall 2023

Software: Adobe Illustrator

For this project I mainly used the polygon tool to make shapes and combine them to make a face. I thought it’d be easier and more fun to try and create a cat face rather than my own face. The colors are mostly beige and blue, which I think go well together. A lot of the clothing I own is either navy blue or beige. I was mainly inspired by the example of the vector self portrait shown and I wanted to depict a face. The collar has the letter C on it for my name. A challenge I went through was not knowing how to center the C properly. It kept snapping to places that weren’t the center. I think maybe if I changed the text into a shape it would have let me move it to where I wanted it to go. One of the most challenging things that I did solve was how sometimes I would seemingly randomly be on the wrong layer. After a while I realized that when I hit undo I’d sometimes be transported back to a previous layer. This also caused me to edit shapes and paths that I was done editing instead of a new shape that I wanted to create. Once I figured out what was happening I was able to solve my issue.