html & css basics

In Web Design Technology class, we have been given the utmost privilege and front row seats to the wonders of html and css. Unfortunately for us, we really only touch on the basics and nothing else. timerestraintmuch?

These are a few of the basics html and css that we did in class, with a confusing guidance from our lecturer who tried their very best to teach us.

First css

full page image

header and paragraph

layout

positioning

Book Jacket Design

We were required to design a book jacket of our own, and I've chosen a simple Japanese novel as my base.

This is how the book jacket looks like:

Front Cover. The art is drawn using Photoshop. The title of the book "kono ai wa tsubasa ga nai" translates to "This Love has No Wings". The author of the book "suzukaze ai" is my Japanese pen name.

Back cover. Kadokawa is an actual publishing company in Japan that publishes all kinds of books from novels, to magazines and to comics. The summary is actually just dummy text.

The about author page that is printed in the inside flap. Author's profile image is drawn by me, Lapis Lazuli from the cartoon series Steven Universe.
T
This is the spine of the book.
How the final book jacket looks like:

width: 50.1 cm
height: 20.4 cm

Educational Poster. Sort of?

Our first time creating a poster, for kids!...of sorts. The whole process thought us how to better manage our time between the designing process and the final product illustrated in AI.

My theme was spy gadgets for girls. I'm very sorry but I forgot to screenshot my progress, thus only the final illustration.

Pencil sketch:


AI Vector:












I rearranged them so they look align and in order.

I later added a shadow so that they will stand out once I put the background.

I made the background using dark purple, with flowers as motif.


Finally, I put in the title "theUndercoverS" and labeled each gadget with their own specific name.

Illustration AI Practice

We each chose one image/photo of our liking, and practice our tracing skills by using the AI software.

This is the image I've chosen.

Progress:

First stage of tracing. I used red because it has the best contrast to my image, as suggested by the lecturer. I try to vary the thickness of my lines.

Close up of my tracing so far.

I added the shadows after that.

My colour in for the shadow parts.

Colour in for the highlight parts.

I added the fireworks last, along with the highlight made by the fireworks. I also changed my outline to blue. This is the final outcome.

Close up for the final outcome.

Original image & AI trace image