WEB AUTHORING / Assignment Progress / Term 4, Week 9



Progress so far with website prototype:


Making the header (using code guideline from codecademy)


Text currently still come from the image itself. Will change this up soon.
Smaller view poses a problem.
Nav bar / header not properly coded yet


Found this nice color “rosybrown” that suits the feel.


Stylising the font


Caption still a bit too small
Nested a button onto the carousel


Making the tour page with jumbotron
Ditched the jumbotron idea.


Justified buttons


(So happy I came up with this by accident ahahahhaha)


Gif quality not the best though. Not too sure on how to compensate with this 😦


Fixed the navbar – it’s now fixed onto the top


Decided to place the album caption below the image for better readability. Might change the entire layout & image for this section though.
added animate css

This slideshow requires JavaScript.



EDITORIAL / Poster Exercise / Term 4, Week 5

As an exercise to our layouting skill, we had to made at least 10 different poster layout / composition in A5 size, with grids. The content of the poster is an event called ‘Design Culture Now’, with all other informations (venue, date, speaker) about the event.



Magazine Project 

Screen Shot 2016-11-17 at 8.19.00 AM.png
Moodboard / Collage

I was told to come up with 3 different concepts / “brainstory” for the magazine before I start the layout process – what do I want people to feel when they read the magazine? Is the magazine a presence of steady support, an escapade or a friend?

I’ll be developing 3 concepts for the magazine from the collage above.

DIGITAL IMAGE MANIPULATION / Coloring Day! / Term 3, Week 1

Today, we learned how to color. It had been a great coloring day!

But no, seriously, we learned how to color black and white images using Photoshop today. Before that, however, we got to do some color corrections to make an image look more appealing, or to change the overall mood & feel of it.


The color of this image looks slightly off due to excess green hue, which made the image look quite sickly and wrong. To fix this, we can change the hue using color balance function which is available on the layer adjustment tab.

color correction

Now that the hues are tweaked by a bit, the picture looks so much warmer and inviting. The green hue has been reduced (now it is leaning more towards magenta hue). I also shifted the hue towards red slightly, as well as the blue to balance the color so that it doesn’t look too reddish/pinkish either.

But let’s not stop there, and revisit a skill previously acquired at the 1st term – re-coloring a part of the image and making it look believable.

eye selection and color

To do this, we will have to select the eye using the selection tool suitable for this. I used quick selection because it is the fastest way. Lasso tool is also possible if you have a wacom tablet to enhance your precision in selecting. After selecting the iris, go to layer adjustment tab and select solid color. From there, you can choose the color you want.


eye color changed

A new layer with the name “color fill 1” will appear after you finished choosing the color. To make the color look less opaque and still show the details of the original image, adjust the blending option. I used soft light for her irises, but overlay would work as well. Different blending options will give different effects and results.



Before (left) and after (right) editing

Moving on to the coloring part- here comes the serious business of coloring a black and white image. With this technique, we can alter the color of an image to anything that we desire, part by part. This is very interesting because the usage of colors can influence the style, look and feel of the composition, especially when dramatic colors are used on dominant parts of the image (e.g hair, background, lip color, clothes). We had to color a classic, black and white image of Marilyn Monroe in class today, and I chose to give her popping colors instead of the normal blond, bright red lipstick that she would’ve probably looked like.

coloring monroe masiking

Before starting, make sure the image is duplicated; the duplicate is the one that you will be working on (layer named “coloring”). First of all, click the quick mask mode function (shortcut Q), set your tool to brush, and start masking the part that you’d like to color- in the example above, it is the skin.

coloring monroe unmasking

Still using the brush tool, switch between foreground-background color to ‘erase’ masking on areas which are not the skin with the keyboard shortcut X.

coloring monroe mask finished

 Once you finish coloring the whole part of the skin, deselect the mask function.

coloring monroe select inverse

A selection would appear instead of the red brush color. Use your selection tools, click right and select “Select Inverse”. Now, the selection should be on the skin only, background not included.

coloring monroe solid color

Go to the layer adjustment tab and select solid color; from there you can pick the skin tone for her (the process is much like coloring the irises mentioned above).

coloring monroe skin tone

coloring monroe overlay

Once you’ve picked the skin tone, change the blending option to “Overlay” so that the color fill isn’t opaque but transparent, still showing details of lighting and texture of the original image.

Repeat the steps for the other parts- hair, eye, lips, earring, the fur coat.

Before (left) and after (right) colorisation

Instead of applying overlay for the lips, I used “Multiply”, which is why Monroe looks like she has applied a very matte, dark chocolate – red colored lipstick. I’m happy about how the popping pink hair and purple background contrasted with the color of her lips (complimented with the fur coat), and I used honey and brown colors for her irises & eyebrows in attempt to neutralise the bold and screaming colors.