Author: Oona Pecson

http://imanas.shanghai.nyu.edu/~op531/week03/emptyExample-intro-to-js/index.html

This exercise was a little bit challenging for me, but in the end I was able to finally accomplish it! Using an exceptionally strong sense of will and determination….and a little help from friends;; Also, instead of using the images of the cat, I decided to use some online images of characters from a show called “Avatar the Last Airbender”.

HTML:

CSS:

JS:

Result:

For my photoshop project, I knew exactly what I wanted my end result to be.  In childhood, one of my all time favorite movies was “Spirited Away” by Hayao Miyazaki, and it’s still arguably my favorite movie to this day. As a result of this, I knew that I wanted my photo to utilize the scene when Chihiro and No Face are on the train going to see Zeniba. Instead, I wanted to put Chihiro and No Face in the NYC subway, and have a beautiful nighttime sky show through the windows. This is how I did it.

First, I gathered the three images I wanted to combine.

 

Then, I opened PhotoShop and made the nighttime sky the background. The subway became the second layer, in which I used the quick select tool to remove the windows on the train, allowing for the starry sky to peek through. The last thing I did in this step was play around with the look of the subway layer, and crop the image to be a uniform size.

 

After this, I added the layer with Chihiro and No Face. I cropped the picture so it would be easier to remove the background using both the quick select tool and carefully going over the edges with the eraser tool. In the end, I was able to place them on the chairs, but I still wanted to fix No Face.

To fix No Face, I simply colored in his body black using the brush tool, to make it look more uniform. I also used the brush tool to shadow and give some depth to the image. When I was happy, I saved my work and exported it as an image (.jpg file and not just .psd file).

 

In the end, I was so happy to see my vision come to life!

Inspiration

While discussing about comic idea, we came up with the issue of “budgeting”. We thought saving money is something that we always try to do, but definitely not easy to keep up. Thus, we decided to make a story of a NYUSH student choosing what he/she wants to spend money (from food, to necessities, and other items, etc), and remind ourselves to spend wisely.

Storyline

Within one day, with a particular amount of budget, we will provide daily circumstances that we would encounter in school and daily life(off to AB, taking lecture, having meals). Based on those, we are going to add some options that varies in cost: drinking coffee after lunch, going out for dinner, various options for waimai, and etc. In the end, the reader will either be successful in “helping” the character spend their money wisely, or they will have gone over budget.

Interactivity

For our comic idea, we wanted the reader to be able to interact with the story by clicking and making choices out of a set of options. In this case, the choices that “pop up” will be able to be clicked on and selected, thus introducing a change in the storyline (which differs based on what is chosen!). This is the interactivity we are aiming for.

Illustration

We got some ideas from Instagram illustrations, and also are thinking of making drawings of ourselves to introduce this idea to our readers (EX: “Welcome to our comic” “This is your task…” “Congrats/Sorry…” etc.)

방구석 (@gooooseok) • Instagram photos and videos

http://imanas.shanghai.nyu.edu/~op531/week03/oona/index.html

This assignment was challenging, hard, and took an extremely long time. But in the end the result (at least to me) is very rewarding. I was too focused on working out the kinks of my website, so I couldn’t take screenshots of my progress throughout the development of the page, but I will attempt to explain the reason why I designed the page like this and what steps I had used.

First: I used the answer page given to us and used the CSS from that page as guidelines for when I made my own, so that I would be able to look and see what I did wrong when trying to make something happen (EX: the flex, margins, links, images, etc). this helped me A LOT!

Second: I played around with basically everything! In regards to layout, colors, fonts, images, and other components of this page, I simply inserted things and deleted/tweaked other things when necessary. This was probably what took the longest time.

Third: I applied some final colors and fonts using outside sources such as Google Fonts and Adobe Color. There were some elements I used that we did not go over in class (EX: the text shadow) that I wanted to use, so I went to W3Schools to find the element (which is also a very helpful site!)

That’s basically it! In the end, I just wanted my website to be simple by showing images of me, friends, and the things I like to do in life. I also included social media links as a test with using images, etc. I think the color scheme ties it all off, and overall I’m really satisfied with how this turned out!! 😀