You can view the demo page here. Do not right click on the link, simply do a click-through.

view demo: Borders – An experiment with border widthsVersion 1.0 \ File size: 4 KB \ 44 downloadsA demonstration page on how we can manipulate CSS borders to create custom shapes and polygons.

Borders - An experiment with border widths

The visual elements shown in the remainder of this post will be drawn purely using CSS only – not images. Feel free to dissect the code for reference. It helps a lot if you can try imagining how you would want to construct a specific shape before referring to the source code to see how it is done.

The Basics

The principle behind creating custom shapes using border is the interface between two borders:

By increasing the border-width, the slant becomes more apparent. We can manipulate each of the border-widths to create the gradient that we want as well.

Triangles and Trapeziums

It becomes clear that we can create triangles and trapeziums based on the observation of such behaviours at the interface of two borders.

Trapeziums are possible too, if we increase the width of the empty <div> from zero to a positive numerical value:

Regular Polygons

Creating regular polygons require some calculation. Their parameters can be found in the source code, and you can scale the border-width and width properties in order to scale the entire polygon proportionately.

From left to right, we have triangle (trigon), quadrilateral (tetragon), pentagon, hexagon and heptagon. The demo page will have more regular polygons, up to decagon.

Creating Graphics

For more examples, refer to the demo page: Borders – An experiment with border widths.

One advantage of creating visual elements using CSS (and in this case, CSS borders) is that your visitors will not have to download images that are huge. Of course, this technique is usually experimental because certain image extensions such as .png and .gif will greatly reduce the size of images (given certain conditions) and that it is sometimes not feasible to code an image from ground up.

What you see on the left is one of the examples demonstrated on the demo page. The Christmas tree is actually constructed from 10 <div> elements vertically stacked on top of each other. The topmost <div> has its borders modeled after a triangle, while subsequent <div>s have their borders modeled after trapeziums. Their border-width, margin and width has been adjusted so as to give the tree a tapered out look towards the bottom. I finished off the tree with a brown stump made from a single <div> again.

And there you go – the code for the lovely, purely CSS Christmas tree (all encoded in inline CSS so that you can understand how it works – and for the sake of clarity). Do remember to wrap it around a box with a defined width.

<div style="margin: 0 auto; font-size: 0; line-height: 0; border-left: 10px solid #fff; border-bottom: 20px solid #238229; border-right: 10px solid #fff; float: none; margin-left: 90px; width: 0;"></div>
<div style="margin: 0 auto; font-size: 0; line-height: 0; border-left: 10px solid #fff; border-bottom: 20px solid #238229; border-right: 10px solid #fff; float: none; margin-left: 86px; width: 8px;"></div>
<div style="margin: 0 auto; font-size: 0; line-height: 0; border-left: 14px solid #fff; border-bottom: 20px solid #238229; border-right: 14px solid #fff; float: none; margin-left: 78px; width: 16px;"></div>
<div style="margin: 0 auto; font-size: 0; line-height: 0; border-left: 18px solid #fff; border-bottom: 20px solid #238229; border-right: 18px solid #fff; float: none; margin-left: 68px; width: 28px;"></div>
<div style="margin: 0 auto; font-size: 0; line-height: 0; border-left: 22px solid #fff; border-bottom: 20px solid #238229; border-right: 22px solid #fff; float: none; margin-left: 56px; width: 44px;"></div>
<div style="margin: 0 auto; font-size: 0; line-height: 0; border-left: 26px solid #fff; border-bottom: 20px solid #238229; border-right: 26px solid #fff; float: none; margin-left: 42px; width: 64px;"></div>
<div style="margin: 0 auto; font-size: 0; line-height: 0; border-left: 30px solid #fff; border-bottom: 20px solid #238229; border-right: 30px solid #fff; float: none; margin-left: 26px; width: 88px;"></div>
<div style="margin: 0 auto; font-size: 0; line-height: 0; border-left: 34px solid #fff; border-bottom: 20px solid #238229; border-right: 34px solid #fff; float: none; margin-left: 8px; width: 116px;"></div>
<div style="margin: 0 auto; font-size: 0; line-height: 0; background-color: #6e3912; border-right: 2px solid #ac5f26; margin-left: 92px; width: 14px; height: 40px;"></div>

One may also explore other options of using CSS borders in creating visual elements – for example, you can use jQuery insert the necessary code into the start of list items, bulleting each item with a tiny triangle created by CSS borders. Of course, this method will be frown upon by semantics purists, but I’m going to leave the discussion open.

Credits, Resources & References

I would like to thank the genius designers who conceived the idea of creating custom shapes using border slants. It never came across my mind until I read Slantastic and Border Slants. I have also learned how to code for border slants from there too.

There are several aspects of the application of border slants that I fail to cover in this article and my demo page. The reason is simple – because they have been done before and little follow-up is needed. Try checking the two links above – they provide intricate explanation on how wrapping text around a diagonal shape is possible. Go figure!

There are a lot more techniques and ideas that I have included in the demo page. I did not include them in this article to keep it short and palatable :)

Your thoughts?

What are your thoughts on the manipulation of CSS borders and their applicability? If you have any questions regarding the demo page, feel free to post your questions in the comments below. I will be more than happy to help!

Random

Here are some posts that might interest you:

• Tiring Day (3)
• Checking Paper Day (0)
• My Vacation So Far… (4)

Family is still the dearest

I returned to my mom’s hometown to celebrate the biggest festival of the Chinese culture – the Lunar New Year. My mother was born in a modest family in a town named Bukit Mertajam, which is located at the foot of a mountain. After graduating from secondary school she traveled south of the Malaysian capital Kuala Lumpur in search of an interior designer job, and that was where she met my dad. She could still recount to me with great detail how her Ugly-Betty-esque experience when she first started work – her colleagus scoffed at her comprehension of the local dialect, or rather my mom’s lack thereof, and how she had a hard time working with colleagues that are cunning and throw knives at your back (or sometimes right in your face).

That’s just the backstory. We have been traveling to the sleepy little town of Bukit Mertajam every year since I was an infant. My mother would tell me how much my grandpa loved me – as an infant I was very disturbed by the foreign envrionment in my grandparents’ house, and grandpa made great effort to make me feel home, which includes using a lot of money making all the windows mosquito-proof.

It has been a tradition of my family, as well as the extended maternal side of my family, to travel to this place during Lunar New Year. We would gather at my granduncle’s house where my greatgrandma is living to meet each other on the first day of the new year. In the 20 years of my life, we only missed it once – back in 2009 there was some problem and all of us decided to celebrate it in the capital instead, and boy I tell you how different it felt. If you ask me, I’d prefer celebrating this time of the year with my family in Penang. Nothing beats the close bonding of a family.

603km on a jet plane

Oh, and here’s a photo of the plane that I took to Penang. It’s pretty cool, isn’t it?

Returning to Singapore

I had to leave Penang on the third day of the new year because my unforgiving, unapologetic lecturer decided to conduct a test. Unlike my other Malaysian friends who remained in Malaysia for the entire week, I didn’t have the luxury to do so all thanks to a pathetic quiz.

The halls of residences were totally deserted, even when I arrived on the evening before school started. Even locals are skipping lessons in the spirit of the new year, and I couldn’t believe I am missing out all that family loving for that test. For once I regretted by decision to return early. I even got a little homesick, especially when mom called the day after hearing all my other relatives in the background having a really good meetup.

However, my trip back to Bukit Mertajam renewed my hopes of my family. As I grew older, I was informed of problems that were deep-rooted in my family. Conflicts and bickerings, disagreements over care of parents, financial issues and etc. Mom felt that I was too young to handle the truth back then, so she didn’t really inform me about those. Over the years I uncovered flaws of my dreamy extended family – no matter how close we are, we are still imperfect and I guess that is what makes us human. I was very worried about one particular thing – what is holding my extended family together is the close bonds between the older generation. The younger generation congregated into cliques. I could not imagine the family fabric being gradually torn apart as we replace our grandparents and parents. What will my extended family be like, say, a decade into the future?

However, that doesn’t stop me from loving them. Afterall, we are family. Problems can be resolved, if everyone take a step back and look at the big picture instead of being increasingly obsessed with their personal interests. It is nice to see everyone together again this Lunar New Year, and I hope we can keep this tradition alive as long as possible.

Related

Here are some posts that might interest you:

• Over a cuppa (13)
• Congratulations Juanma for being a daddy! (8)
• On Tumblr (20)

Since then I have diligently shied away from the musical instruments, stopped being a nosy kid poking around the village for lion dance performances and joined the crowd enjoying the performance from a safer distance. A safer distance simply because you wouldn’t want to be showered with a generous offering of peeled tangerine skin when the lion dancers ritually peel the fruit up (or sometimes even tearing vegetables up) and throwing it away, right towards the crowd that is looking on intently.

Oh, and it’s Valentine’s Day too! Here’s a really nice poster I’ve got from my Tumblr feed:

Love is like Pi.

Via chiawei: schmae: fuckyeahhappy

So far I’m doing good without much Internet access. Looks like I wasn’t *that* addicted afterall :)

Related

Here are some posts that might interest you:

• Mele Kalikimaka! (4)
• If ten million fireflies lit up the world as I fell asleep (20)
• Your smile of honey gold (24)

Bregitt and Rick at IKEA's cafe.

A few weekends ago, Bregitt, Rick and I headed over to the IKEA outlet at Queenstown to look at their displays and more importantly, to eat. All of us share this love of their food – from their Sweedish meatballs to their local delights. Not to mention their $1 hot dogs on the ground floor! Everyone can have themselves a very generous helping of mustard, chili sauce or tomate ketchup – all in the goodness of a dollar.

My lunch - poached salmon with black pepper sauce.

That’s my lunch – poached salmon with black pepper sauce. I am a big fan of boiled baby carrots too! Of course, IKEA food fans like us will never miss out their meat balls – Bregitt got a huge plate of it and we shared the dish among ourselves.

Sweedish meat balls

One thing I like about IKEA is their effort to incorporate local dishes into their menu. In Malaysia, breakfast will usually be nasi lemak¹. I’m not very sure of the menu in Singapore but I do know that on a few occasions, they do sell stewed beef as lunch and dinner in their cafe.

Dear readers: At what unique places do you enjoy eating?

Random

Here are some posts that might interest you:

• Israel-Lebanon Conflict (1)
• Hwa Chong Open House (3)
• Feeling Really EMPTY (0)

Clock Tower Building, a HDR.

I grew up in Hwa Chong Institution – since I very luckily scrapped the bottom for a candidature slot for the Singapore Mathematics Olympiad and found myself in Chinese High School in 2001, I decided that I will spend many years of my future in Singapore. I ended up, again, very luckily snagging a slot in Chinese High School from 2002. I graduated in 2005, moved on to Hwa Chong Junior College in 2006 and then graduated with a Cambridge A Levels certificate in 2007.

In the 6 years in HC, I witnessed many changes made – from the construction of the new boarding school to the tearing down of the ricketty, old, demure hostel that made way for a new CCA building; from the celebration of the 85th anniversary of foundation of the high school section to the ultimate, prized merger of Chinese High School and Hwa Chong Junior College into a single, functional entity now known as Hwa Chong Institution.

I could still remember how terrified I was of my history teacher Ms Teo. I never quite passed a history test in my first two years of secondary school much to her disappointment and my frustration. My English was in shambles when I first arrived, and under the tutor (and frequent scolding and cudgeling) of my English teacher Ms Kalavathi, my English improved gradually over the years. However, she made me hate reading novels – I only regained my love for reading in the recent years after being introduced to White Oleander a few years back.

Another teacher that really left a lasting impression in my mind was Ms Esther Cheong. She first came across as the fierce and loud teacher that scared all the young, immature secondary school kids shitless *laughs* but after she taught my class geography, she’s actually one awesome teacher. She’s a very nurturing and kind teacher inside. Her screams and howlings at bad students still haunt me till today, though :)

College years were marked by frequent and short-lived bouts of depression – an undesirable manifestation of adolescence. I am not ashamed to admit that I felt that I needed counselling, and the horrible thought of actually ending one’s life did, for a very brief moment, emerged from the sea of darkness. For most of the time I seeked solace with my Malaysian friends who have a much kinder demeanor than many others, and that was it.

Ms Kwee and Ms Wong were one of the teachers that made me feel better about college life. Ms Kwee was, is and will be, without doubt, the best mathematics tutor I have ever come across. She voluntarily stayed back on school days, working way past her working hours without any concern of monetary remuneration to help students who were weak in maths. She selflessly conducted revision and remedial classes, dished out maths questions quicker than the fastest printer. Her caring demeanor helped a lot in convincing me to anoint her as the best teacher ever.

Ms Wong was the funny, down-to-earth biology teacher. She gets very strict sometimes (especially on timing, you wouldn’t want to know what happened when we ran late for lectures and tutorials) but then again, that’s what makes her a great one.

In a flash, I graduated and left HC for good. Or that was what I thought.

Soon after, I started to miss my life in HC a lot. I was dumbstruck by the newfound freedom in university – in terms of my life and academic pursuits. No more curfew for the hostel dorm, but I had to make do without a shared refrigerator and a microwave as provided in college dorm. No more compulsory lectures and tutorials, no more attendance taking of sorts. If you don’t motivate yourself in university and watch your back, you’re a piece of dead meat.

So last Friday I actually took the liberty to travel all the way back to HC, just to relive that very few moment of bliss of which I can now still remember.

Just so in case you’re wondering, the first photo is the clock tower building which sits on top of the gentle hill overlooking the tracks and the soccer field. There’s where I spent my last year in high school in – fully air conditioned (but stinky as hell) classroom :)

The central courtyard.

This is the place where we had our daily flag raising ceremony in the morning, except on Mondays where we will have to proceed (and we do it very sluggishly, much to the dismay of our teachers) to the high school field. Every morning you’ll see people rushing like madmen towards this very courtyard because after the bell rings, latecomers will be considered as absentees. That day the courtyard seemed to be deserted, besides three guys playing frisbee.

The new administration office.

You wouldn’t believe this but the new administration office (which also holds the principle’s office) is actually converted from a rather old building on campus. What they did was to totally knock down the interior, build a huge roof extending from the front of the facade, some really decent paint job and voila!

High school section

The high school section has a really nice water feature running along the blocks of classrooms and it ends up at a fountain near the old administration block. I spent my first two years of secondary school on the block to the left, and then my third year in the white block far right.

Boarding school, a HDR.

The boarding school, containing seven halls of residences, was designed by renowned architect Kenzo Tange in 2005. I believe it is one of the last works of his before he passed away in March 2005. The blocks were clustered around a central courtyard or festival garden, complete with a meandering stream. I spent my first 6 years living in this place. Don’t be deceived by the good looks though – as far as I could remember, the food can only be described by a word – bleagh. We were served the same common fodder everyday, and I clearly remembered how sick I could get by just the mere thought of canteen food, so much so that for most of my college life I actually dined elsewhere before returning to my room.

Looking up a void in one of the halls.

The style of the boarding school differed remarkedly from Kenzo Tange’s older style though. I adore the high ceiling heights and generous space in the form of voids that were included in the design – this made the entire complex rather windy, especially during stormy nights. It also helped that the boarding school was located on top of a taller hill behind the school, and many of us actually land a room with a great view of Bukit Timah and the town.

There were rumours circulating that the school was intending to auction this very plot of land off to private corporations – that came at no surprise to me due to the pristine location. Good view, check. Great location, check. Famous school, check.

I left the school around early evening to avoid the evening crowd. With a heavy heart I bid HC goodbye, and I’m sure I’ll return to my alma mater some time in the future again :)

Related

Here are some posts that might interest you:

• Lunch and tea in town (4)
• Off to Old Turf City! (6)
• Floating Platform Panorama (10)

On Tumblr

After contemplating for ages, I finally decided to get a Tumblr account and start a Tumblelog. I have to admit that I was partially driven by John Grogan’s comment in his best selling book Marley & Me, that how keeping a daily log of his life actually helped a lot in recalling things that he believed he had far forgotten. His entry on Jenny’s miscarriage was so detail and in depth that he didn’t do much editing to his log before publishing it as a standalone chapter in that book. That is the power of a diary – and I was convinced.

So on impulse, or rather, after thoughtful consideration, I conceived a Tumblelog. I decided to name it Soliloguy, because I frequently find myself engaged in a monologue with my inner self. It is an abbreviation of “A guy’s soliloquy”, substituting the ‘q’ with a ‘g’. It was actually decided on the spot since a quick check revealed that the ’soliloguy’ address was taken, apparently by yet another domain parker.

It’s available via soliloguy.tumblr.com or simply jotter.teddy-o-ted.com.

Ember was kind enough to warn me that I might end up killing this main blog. He uncovered by deepest fear and I have to admit that I did worry that the new Tumblelog will drain me of all my energy, ideas and creativity that is keeping this blog alive. However, I will try to maintain Soliloguy as a separate entity – a place where I write about my daily ramblings, thoughts and experiences. This blog will still remain, very solid-seated, as a photography and design site of mine. Photo journals, tutorials and other things I dig up from the Internet will still find themselves here.

After a three-day test run I am sold. Tumblr is indeed, awesome.

1. Tumblr keeps me thinking. I have committed myself to write a meaningful entry a day. It’s not an easy task to juggle, especially when my lecturers demand undivided attention and being a guy it’s hard to multitask *laughs*. I keep short notes on my iPod touch whenever an idea strikes me, and I try very hard to observe things around me. It made me think more in depth, to appreciate certain moments that are seemingly dull and bland, and to be aware of my surroundings. I actually kept a close watch on how my classmates reacted during a dissection of an unfortunate lab mouse today. I would not have done that if I didn’t task myself to come up with something by 12 midnight.

2. Tumblr takes my camera out of the drybox. There’s an entry about a person literally spraying excrement all over (not as if he wanted, I believe that it was purely an accident, a manifestation of, perhaps, an acute food poisoning) the cubicle right opposite my favourite shower stall in the communal toilet. I tried to append an image to every single entry and I actually made myself to take a photo of the cleaned toilet (no way I’m going to photograph a soiled toilet) – something that I wouldn’t even consider doing because I initially believed there’s nothing to photograph in a restroom.

3. Tumblr motivates me. In order to tell a good story, one has to have a good grasp of the language. Since I started Soliloguy, I have been actively combing through novels that I have read, and learned to appreciate how different authors describe certain scenes in detail. In White Oleander, Janet Fitch describe how moon light filtered through the window drapes. What a lovely adjective to use. In Marley & Me, John Grogan used words like “rambunctious” and “impudent” to describe the seemingly uncontrollable Marley filled with truckloads of puppy energy, and “torpid” to describe a lazy, lethargic summer afternoon. They seemed so foreign to me that I made myself to check up dictionaries and remember by heart how to use them when the context calls for it.

I guess that’s all I could say! I shall not kill this blog simply because I have started a Tumblelog. More updates to come, no worries!

Dear readers, if you have a Tumblelog, do leave your address behind so that I could follow you. Thanks!

Related

Here are some posts that might interest you:

• Family is still the dearest (5)
• We’ve only just begun (8)
• On comes the panic light (15)

To celebrate the end of the first week of the semester and one of the few four-day weekends that we have, Bregitt, Rick and I decided to make a trip to town to get some good food on Friday. Over the dinner table at Thursday we laid out plans on how to spend this Friday together and what we did was to dismiss and laugh at each other’s silly ideas. Rick piped up, we should go Genting!. Bregitt suggested that we could go skating when Rick retorted, but it would rain in the afternoon (and he was bloody right).

It was only on Friday morning that we decided to go to this place somewhere near my junior college, from which I graduated two years ago, that serves really great Thai food. I took me awhile to figure out that they were talking about Thai Noodle House – the place where my classmates and I used to hang out after school especially after being brain dead from all the studying and tutorials.

At Thai Noodle House

Bregitt ordered olive rice while Rick settled for a bowl of tomyam seafood soup and a bowl of rice. I decided to have my all-time favourite, tomyam seafood noodles. It has been two years since I last dined at Thai Noodle House but the aroma of the soup immediately remind me of the times when our class scampered out of school during breaks for a taste of outside food.

I apologize for the lack of photos from Thai Noodle House because we were all furiously gulping down the amazing food and before I knew it, I’ve polished off the last noodle from the bowl – even when Rick tasted my soup, which I’ve requested to be not as spicy as usual, commented that it tasted like plain water. I’m so used to people poking fun at my low spiciness threshold anyway, hah.

A sweet-sour Thai lunch made us crave for ice cream even more. We walked over to Island Creamery for dessert. That’s when I took a photo which I named this post after:

Coloured rice and very berry ice cream.

Saccharine. Very berry ice cream with a generous topping of coloured rice. Now that’s one photo opportunity that no decent photographer would want to give a pass. The ice cream cup was placed on a wooden table and was naturally-lit from the floor-to-ceiling window to the right. Perfect.

One thing I love about Island Creamery is how they really took great lengths to make you feel at home – from the earthy-toned interiors to the walls full of photos taken by patrons, the place exudes this unique warmth of snuggling in the comfort of your own home – with the luxury of enjoying home-made ice creams at the same time. We took a photo of ourselves at the outlet before bringing it for print. I dropped the photo in a tiny plastic box where the staff would help us paste it on their wall. Looks like we’ve got a lot of searching to be done during the next trip to Island Creamery again because we will have to find our faces in a sea of photos. Ooooof.

Our group photo at Island Creamery.

Posing with our printed photo. Ready to go onto the wall!

Since we were already in the Bukit Timah area and the Botanic Gardens is within reach, it didn’t take us too long to decide that having a short afternoon walk in the garden isn’t half bad. It drizzled sporadically throughout the afternoon during our visit to the Botanic Gardens, and we find ourselves constantly ducking from a few miserable raindrops only to discover shortly after that the rain had stopped yet again. It’s like playing hide and seek with the rain.

Gazebo at the Botanic Gardens.

We also visited the heritage tree, which was featured on the back of the Singapore $5 note. There were a group of teenagers underneath the tree so we took a breather on the lawn instead. In the distance, kids frolicked under the cloudy sky and on the endless carpet of grass stretching over the hills and into the woods. A group of four kids were having spaghetti – I couldn’t help but to stare with great envy when my stomach starting growling again.

On the lawn, in the setting sun.

On the low-lying branch of the heritage tree.

We left the Botanic Gardens and headed to town for finger food before deciding on where to have dinner. We alighted the bus at ION Orchard and headed straight for the food hall. Bregitt and Rick bought takoyaki¹ but I didn’t fancy the amount of mayonnaise added, so I gave it a pass.

Takoyaki madness!

Before we leave for cheaper food in the outskirts of the town, we had fried chicken from 4fingers. After tasting their wonderful delicacy I told myself that KFC is nothing compared to 4fingers. You should really give it a try if you drop by the ION Food Hall in the future!

4fingers chicken

We foolishly decided to take bus instead of train back to the university campus, and we ended up failing to find any bus services that would bring us there – and I later realized that we were boarding the bus from the other side of the road, which explains our frustrated attempts to get on one. So, we took a long detour from town to the northern part of the island, and then immediately hopping onto another bus which whizzed past army camps, jungles and grave yards. As the bus zipped through the empty traffic light junctions I started to wonder whether we were still in Singapore, where bumper-to-bumper traffic is a common scene on a Friday evening.

I reached my room late at night, collapsed in a heap and drifted off into my dreams.

Related

Here are some posts that might interest you:

• A day in town with CK (16)
• Mixing the Unlikely (24)
• Suddenly I see, this is what I wanna be. (5)

Before I start blogging about the roadtrip, here’s something to keep you entertained: a song titled United State of Pop 2009 (Blame It on the Pop). It is a remix made up from the 25 top billboard hits in 2009 by DJ Earworm and I think it’s a perfect way to celebrate the new year (and the old one as well).

Hope you love it! And here’s a preview of the upcoming entry on our roadtrip!

Roadtrip Preview Photo

Have a great Friday and weekend! :)

Related

Here are some posts that might interest you:

• We’ve only just begun (8)
• From the other side of the world (7)
• Can I stay for awhile? (10)

Black and White conversion - A how-to guide

You’re shooting in colour, and now you want to convert it into black and white. Here’s a tutorial / informative article on how you should convert your photos using photoshop (or any other editors such as Gimp). I got the inspiration to write this article when I stumbled upon a similar writeup on black and white conversion in a recent issue of Landscape Photography magazine.

Note: Grey/Gray are used interchangeably in the article. It’s simply a matter of convention. Grayscale is used in Photoshop and other US-based editors.

We all shoot in colour, most of the time.

Majority of us who uses digital cameras shoot in colour – the sensors in our camera collect data from each colour channel (red, green and blue) and the processing unit in the cameras will then intrapolate data among neighbouring sensor units to yield the final photo, which is compressed and saved in JPEG format. The RAW format simply means that the file (usually 2-4 times larger than the original JPEG file at the same resolution) contains all the data collected by the sensors that are yet to be interpreted by the algorithm built into the camera’s processing unit.

Some photographers may want to convert their colour photos into black and white during the post-processing step. Usually it’s safer to shoot in colour and then convert the image into black and white because vice versa is impossible due to the exclusion of colour data in black and white photography. Now you’re stumped – what should you do to convert a colour photo into black and white? You’re presented with two choices – (1) desaturating the photo or (2) converting the image from the RGB mode into grayscale. Both methods will yield monochromatic, black and white photos but they may give results that differ – whether the difference is barely noticeable or great depends on the colours in the photo.

To desaturate an image in Photoshop, simply go to Image > Adjustments > Desaturate or you can use the shortcut [Shift] + [Ctrl] + [U].

To convert an image to grayscale, go to Image > Mode > Grayscale. The RGB option should be selected by default and a warning dialogue box will popup when you select the grayscale option. Proceed with the conversion anyway. Alternatively, you may convert the image into LAB colours and then discard all other channels (channels a and b)except for the lightness channel.

Note: You can control how the conversion to grayscale is done by applying a Black & White adjustment layer in Photoshop. This feature is only found in versions CS3 and above. For those using CS2 and below, you can use channel mixer to achieve the desired results when converting an image to grayscale.

The colour palette

Here’s how a standard colour palette (the default one as seen in Photoshop) will appear when we apply desaturation (center) and grayscale (right) to the palette.

The difference between a desaturated and a grayscaled palette becomes a little more obvious here. If you do look at the top row of the palette, the colours red, yellow, green, cyan, blue and magenta all share the same shade of gray upon desaturation. However, the grayscaled version showed them in different shades. Why is that so? The answer is simple – desaturation merely removes colour information (well, that’s how it should work anyway) while grayscaling does the same thing but takes into account the luminance value of the colour. That’s why grayscaling an image is known as luma-preserving the image as the luminance is preserved as it is.

Different colours have different luminance values – for example, green has a higher luminance value than blue because our eyes are in fact, more sensitive to the former than to the latter. Therefore, grayscaling an image actually takes into account the brightness perceived by the human eye while desaturation doesn’t. By the same principle, we can argue that grayscale approximates the contrast of the scene we would see – if we see black and white only – better than what can be achieved by desaturation. In general, desaturated images will have less contrast than greyscaled images. However, it should be noted that the loss of contrast will not be as drastic as depicted in the colour test strip above because in reality, photos have hues of varying degrees of saturation and therefore the difference in colour intensity (not luminousity) will still be able to lend sufficient contrast to a desaturated image.

Photo samples: desaturating vs. grayscaling them

In this section, we will be comparing the different results obtained by desaturating or by greyscaling an image. I’m using a few sample photos here – the colour photo (left) followed by a desaturated version (center) and a grayscaled version (right). The photos may be viewed in a larger resolution if you choose to – very useful when you want to scrutinize the slight differences between the two monochromatic versions.

Sample 1: Sky scraper and the sky

Skyscraper and the sky: The sky is a slightly darker in the greyscaled image, and more importantly, the building’s beige and brown facade enjoyed better contrast in the grayscaled image as compared to the desaturated image.

Sample 2: Don’t jump

Don’t jump: The area of photo where the toes and slippers are showed better contrast. Differences can also be detected between the bright and shaded regions of the lawn on the left.

Sample 3: Day out at Sentosa Beach

Day out at Sentosa Beach: The shade of blue on the ball is better contrasted against the yellow in the grayscaled image.

Sample 4: Food hunting in town

Food hunting in town: Note the difference in contrast at the area of the photo where the cup with straws above it – in the grayscaled image, the inner surfaces of the straws are slightly darker, and more details can be seen on the cup as well.

Sample 5: A florist’s little world

A florist’s little world: The grayscaled version showed considerable better contrast than the desaturated version, especially around the area between the cupboard and the pillar.

Sample 6: Mommy and gummy bears

Mommy and gummy bears: This is one of the better examples for comparison – check out the gummy bears with warmer colour tones. In the desaturated version, there is little contrast between the red, orange and yellow gummy bears while contrast is better in the grayscaled image.

Verdict

Grayscaled photos showed better contrast than desaturated photos, and this effect is well observed in photos with warmer tones or with objects of warm colours. The degree of contrast differences between photo varies depending on the scene, lighting and colour temperature. Warmer coloured photos will most probably show more contrast than cooler photos when you compare their desaturated / grayscaled versions side by side. Therefore, I recommend converting an image to greyscale instead of desaturating it for the effect.

Even better: Channel mixing

Sometimes, grayscale conversion does not best preserve all the tones in an image – if you would want to selectively brighten/darken certain colours in a black and white image, channel mixing is the way to go. Let’s say we want to convert the following photo into black and white, using channel mixing.

download: Black & White conversion test photoVersion 1.0 \ File size: 1.48 MB \ 61 downloadsA test photo with a resolution of 1800*1200 pixels for the black & white conversion tutorial using the channel mixing method.

You can download the sample image above if you would want to follow the channel mixing tutorial step-by-step. It’s not absolutely necessary though, especially if you’re well-versed with Photoshop and have your own photo to start off with. In this short tutorial – I promise, will take you less than 15 minutes – I will be using Photoshop CS4. The adjustment layer feature is only available in Photoshop CS3 and above. However, worry not if you’re using version CS2 and below. I’ll get that covered as well.

1. Create new channel mixer adjustment layer

Open up the image in Photoshop. Check the bottom bar of the Layers panel and there should be an icon that looks like this: . When you hover over the icon (which looks like a yin-yang symbol with a tiny inverted triangle at the bottom right) it should say “Create new fill or adjustment layer”.

Click on it and a menu should appear. Select Channel Mixer and a new channel mixer layer should appear. And yep, it is from the same menu where you can select the Black and White adjustment layer as well.

Create a new channel mixer adjustment layer

For users on CS2 and below, it gets a wee bit more complicated. You will have to duplicate the original image (by the way, it’s standard practise) by hitting [Ctrl] + [J]. Hide the original layer and then go to Image > Adjustments > Channel Mixer. Unlike CS3 and above, you cannot modify the channel mixer settings once you have applied them, so trial and error will be a little more troublesome with CS2 and below. The History panel or the undo command will be helpful in this case.

2. Modify the channel mixer adjustment layer

This is where you let your creativity roam free, guided only by experience, inspiration and intuition.  An adjustments menu should appear when you create the new adjustment layer. If it doesn’t, simply click on the black and white circle of the adjustment layer in the Layers panel.

You may select a range of preset channel mixer settings, or you can customize your own mixer. For starters, you can pick one of the presets and modify them from there onwards to your liking. Once you familiarize with how channel mixer works, you can directly customize your mixer.

To customize the channel mixer for black and white conversion, check the Monochrome option. The output channel should change from Red/Green/Blue (usually it’s Red by default) to Gray. Your photo will change into a monochromatic image instantly. However, that’s not the end of the story yet – see the red, green and blue sliders? By default they’re set to 40%, 40% and 20% for the RGB channels respectively.

For the sample photo, we want more contrast between the building and the sky, so I would want to drag the blue channel down so that blue is ‘under-represented’ and therefore the sky, which is predominantly blue, will appear darker. The exact settings depends on your personal tastes and preferences, and the following settings are just my own – for your reference only. You would notice that once you start dragging the blue slider leftwards, the total percentage (100% by default) will start to fall. No worries, because we’ll be tweaking other channels later.

Once you have achieved the desired contrast for the blue sky, now drag the red slider rightwards. Since the building’s facadé is predominantly red and I want to brighten it, I will increase red channel’s share. As you drag the red slider rightwards, notice that the total percentage will rise again.

Done with the red slider? Now tweak the green slider until the total adds up to 100% to maintain the correct exposure as the original image. You do not need to stick to 100% though – then again, it depends on you. You can also play with the contrast slider, too.

Modify the channel mixer adjustment layer

For users on CS2 and below, the same applies to the dialogue box that pops up when you select Channel Mixer from the overhead menu.

3. Final result

Here is the final result of the greyscaled image customized using channel mixer:

Final result of using channel mixer

Finally, here’s a useful comparison between the different methods of black and white conversion techniques we have previously discussed:

The differences between the desaturated and grayscaled versions have been covered earlier on. For the channel mixer version, we have selectively darkened the blue sky and brightened the facadé and the contrast is better than the grayscaled version.

4. Verdict

While grayscale conversion is generally preferred over desaturating an image, if you have more time on hand and are willing to invest some time in more detailed, customized post-processing, channel mixing is definitely the way to go.

References and resources

So, it’s a wrap! Here are some other tutorials and articles that I have referred to when penning this tutorial and you may find them useful as well.

1. Grayscale vs. Desaturate for Black and White printing
2. Desaturate vs. Graysale Mode
3. Definitive Guide to B&W Conversion

Related

Here are some posts that might interest you:

• HDR Merging & Tweaking Tutorial (14)
• A Guide to Infrared Photography (10)
• Painting on canvas (21)

Merry Christmas, folks!

Here’s a big Merry Christmas to everyone! In fact, Mele Kalikimaka is a Hawaiian greeting, a transliteration from the very familiar phrase because the Hawaiian language simply lacks the matching phonemes equivalent to that of the “R” and “S” of English. I only learned about it after listening to a song from KT Tunstall’s 2007 Christmas album titled Have Yourself a Very KT Christmas, and the song is titled Mele Kalikimaka.

So, here is my Christmas greeting from the two countries that I’m currently based in – Malaysia and Singapore. Both countries are just like Hawaii where it never snows during this festive season and we have the sun by day and all the stars at night :) the two photos are actually taken around two weeks apart in December – the first one was during an outing with friends to Singapore Flyer for dinner, and the other was a very recent trip to town with Tysern and Kokxian. Both of which I am yet to blog about… *sigh* the backlogs are getting terribly long!

Title: Mele Kalikimaka
Album: Have Yourself a Very KT Christmas
Artist: KT Tunstall

To my readers who are from the Northern Hemisphere, I hope the blizzard isn’t going to be too bad this year :/ I’ve heard various news reports that there’s very heavy snowfall in the US and a rather wet winter in London. I pray hard that the weather will be kind to all of you in the week to come! It’s such a great festive season I don’t want the weather to spoil everything. Nonetheless, nothing beats the warmth and comfort of snuggling besides a heater or the fireplace when it’s snowing so badly outside, does it? Too bad we don’t get to experience this in Asia Pacific. The weather in Malaysia is sweltering hot and I’ll need to turn the air con at full blast on the bedroom. I guess that goes the same way for the people from the land down under, too!

Okay, before I end this post let me squeeze in a photo update first! I’ve been to so many outings in the past two weeks that I totally lost track of the number of photos taken.

ION Orchard outing with Chankeet!

This was long overdue and it was pushed back by a week or so due to scheduling conflict. Finally we settled for last Tuesday when Chankeet will be heading to town later in the evening with his darling Yueqi for a surprise birthday party. Coincidentally I was travelling to town that day to collect my new ultra wide angle lens from Peninsula Plaza so we decided to meet up at Orchard station to get some food.

Waited for 45 minutes for that lazy bum to arrive because he couldn’t pull himself out of bed, lol! So much for making me rushing out of my room like a madman when I realized I nearly overslept. He overslept big time! Walked around ION orchard hunting for food outlets. The food court was a big nono because both of us knew that travelling all the way to town and then settling for food that one can find anywhere else on the island is just plain sad – so we stuck to a restaurant where one could make DIY teppanyaki! It wasn’t a bad experience :)

The DIY teppanyaki restaurant.

I totally forgot the name of the restaurant and I lost the receipt so I could only tell you that it’s on basement three. The pricing is rather okay, not too expensive but the portion is barely enough to fill one’s stomach. Each set lunch is served with a bowl of raw egg – Chankeet told me to fry it in the pan but I didn’t want to end up scooping the charred bits and pieces up so I ended up having it… raw. Don’t balk at that! I know many others who do that also. I’m not a big fan of raw eggs too since one could risk getting Salmonella infection but then I was lazy and couldn’t bear to see the raw egg go to waste.

Who's in that reflection?

After lunch we walked around the shopping strip to kill time before the time is 3pm. There’s this huge Christmas tree outside ION Orchard but it’s a shame that they have cleverly closed off the at-grade pedestrian crossing along Patterson Road (a sly move by the developer to divert pedestrian traffic into the subterranean shopping spaces of ION Orchard) and that totally massacred the street culture :( the plaza used to be packed with crowds in the old golden days of the good old Orchard station where the land which ION Orchard sits on was a large green lawn. Bah.

Looking up from the interior of the giant Christmas tree

I got the idea to convert the photo to black and white from Darrick! Afterall, the photo doesn’t look any bit flattering in RGB because of the blatant lack of other colours besides purple and green :/ which is kind of boring! But still, the view if magnificent and the lines radiating from the top of the cone makes it a lovely photo.

Chankeet and the Christmas tree!

Here’s a photo where you’ll roughly get the idea how dull the colors of the Christmas tree is, hah. That’s Chankeet taking a photo of the scene as well! Getting this perspective isn’t easy because I had to lie on the floor and gasp who knows how many people have stepped on it and whether the carpet was ever cleaned before.

Candid shot, outside the Christmas tree.

We finally left the Christmas tree! We took a stroll along Orchard Road all the way to Somerset – it was a 10-minute walk. The crowd wasn’t too heavy that day so we didn’t have to tunnel through the endless sea of sweaty armpits haha. At Somerset, he met up with Yueqi who was busy ogling at all the stuff at Forever 21 (believe me, it’s of GARGANTUAN scale – I’ve never seen a boutique so huge) and then I left to scout for the buffet place where Dayna and Ivy booked a lunch date for the coming afternoon – read it here!

Have fun, be nice!

That’s all for today’s entry! I guess the next few days I’ll be very busy too – my cousin, uncle and aunt from Penang will be dropping by for a stayover, and then Bregitt and Rick will be staying over after them before we leave for a backpacking trip in Malaysia. Oh boy, this is getting really exciting!

Have a great Christmas and in case I didn’t have time to update this site in the next coming week, happy new year too!

Related

Here are some posts that might interest you:

• Merry Christmas Everyone! (9)
• First Day Of December (8)
• Blue Sky Series + X’mas Special! (16)