Designing is indeed fun! I’ve read several Photoshop tutorials and downloaded several fonts from Smashingmagazine.com - and I subsequently realised that there’s more that just photo manipulation work that Photoshop can do! It can be an awesome substitute for Adobe Illustrator, although it lacks quite a number of illustration-specific tools, a bit of adaptation can do you lots of magic.

The Wordpress Poster above is created using a combination of Photoshop tips and tricks from THREE separate tutorials:

1. General design (lens flare and glitter) plus the Wordpress logo - Flare Effect Tutorial by Dan Philibin.
2. Rising sparks - Amazing Photoshop Light Effects by Fabio Sasso.
3. Horizontal lines in the background - Lines Tutorial by Giacomo Coppola.

I would want to thank them for sharing their tips and tricks for free and in great detail on their blogs. Thank you designers! In case you’re interested, the font I’m using in the poster is one of the 40+ Excellent Freefonts For Professional Design published at Smashingmagazine - it is called Lacuna, by Glashaus Design.

teddY-risatioN™ Delta becomes v1.1

After a few days of editing and learning, I’ve made some major modifications to the current Wordpress theme, teddY-risatioN™ Delta.

Modification #1 - Footer becomes a little bigger

This is one of the modifications I don’t think will be welcomed by everyone, because it’s making my footer even bulkier! I’ve decided to move the random display of Flickr photos to the footer, so as to prevent distraction from the main content. The number of tweets is also increased from the original five to the current seven, so as to prevent the footer from looking lopsided.

Modification #2 - Cleaner comment form

The perfectionist mindset in me has been frequently irked by the rather cluttered comment form - there is a whole bunch of comment notes and instructions between the input fields and the comment textarea. Having in mind that I’ve already installed Scriptaculous for the collapsible sidebar effect, I’ve decided to incorporate this effect to create the collapsible comment notes.

Simply click on the Show/Hide Comment Notes to reveal the instructions. It is set to hidden by default, so the comment form will be kept clean, neat and tidy! If you need any help to create such an effect, feel free to ask me, either through commenting or the contact form.

Modification #3 - Auto-copy of comment to clipboard upon submission

From now on, never worry about losing your comments when this blog experiences a server time-out, when your Internet connection suddenly breaks, when you accidentally hit the Back button or when my nasty Spam Karma decides that you’re talking spam instead of the real stuff.

Jeffrey is very nice to share his copy to clipboard script on his blog for free! Installing the javascript is simple - upload the .js file and the .swf file (the .swf file is for a Firefox security fix) onto your server, load the .js file in your header and you’re ready to go! I’ve added a javascript ‘onclick’ event to the comment submit button, so everytime you submit a comment, it is automatically copied to your clipboard. You can try this feature out by pasting ([Ctrl]+[V] in Windows) it in anything (comment textarea, word document, notepad or whatever) and you’ll see your comment again

Of course, you can manually copy your comment to clipboard if you’re feeling a little unsafe. There’s a link near the comment form that allows you to do this. Since installing this script is a little complicated, I am more than happy to be able to come to your help if you need any. You can ask for help in the comments section or through the contact form.

Modificaiton #4 - Smooth Scrolling

I got this idea after realising that you can scroll smoothly through in-page links on Brandy’s blog. I did a little Google search and there’s a simple and short javascript called Smooth Scroll that once loaded in your header, allows a smooth transition between different locations on the same page. You can try this effect out by clicking the Tagcloud link at the header navigation.

I can’t believe I’m late for a Mother’s Day tribute! I felt ashamed of myself because I couldn’t express my love for my mom in writing, unlike how Destiny and NoktahHitam did (read their entires! It’s a must) - I love her a lot, and I’m extremely grateful that she’ve been through so much hardships and obstacles to accompany me through my childhood and adolescent years.

My mom’s birthday happens to fall on the day before Mother’s Day, the 10th of May every year, we celebrate her birthday alongside with Mother’s Day - double the fun and double the love.

When I took my baby steps, you were always there. I’ve been a little disaster since I was born - I barely managed to speak, babbling incomprehensible, one-syllabus words when I turned two. You were so worried that I might have some developmental problems. We shuttled between hospitals, doctors’ and specialists’ offices - they’ve reassured that I’m okay, although you were clearly distraught. But, but and but, you’ve never called me stupid, you’ve never gave up on me. You would spend hours each day talking to me, trying to extract a ‘human’ word from me. And I did - when I turned three.

When I started to learn and to grow, you’ve never left me alone. I was a weak little kid when I was young. Constantly bugged by illness, I missed lessons frequently. But you never got frustrated at me - instead, you’ve combed books for homemade remedies, stayed up late to brew some bitter-tasting Chinese herb. When the exams are near, you make sure that I do my revisions, sat patiently by my side to answer my questions. You’ve never engaged a tuition teach for me until I was eleven - you preferred to teach me yourself.

When I went far away from home, you’ve never stop showering me with love. You’re always so supportive and caring. 6 years ago I left for Singapore alone to pursue a better education in a country that places great emphasis on meritocracy instead of your skin colour, race or religion (well, I’m not trying to hint anything, but I’m just stating the facts) - and I found the new environment horribly daunting. Rejected by my peers as a foreign spy (I couldn’t believe how childish people can be even when they’re already thirteen) and being very, very bad at English, I faced a lot of problems in terms of coping with the academic pace as well as trying to fit into the new schoolmates. You are always there, over the phone, to soothe my hurt feelings and to motivate me.

When I’m going through my hardest time, you gave me advices and not harsh words. In my adolescent years, I grew emotionally mature, but there’s still that testosterone, puberty-driven aggression and rebellions. I find myself growing progressively distant from you, I find myself hard to relate to not only you, but my other friends. But you’ve never scolded me for being not sociable, inconsiderate, insensitive - you gave me advices, words of kindness and guidance. You are my beacon of light, my source of unwavering support. You are a pillow for me to fall back on, a shinning knight to save me whenever I’m in trouble that I couldn’t possibly resolve myself. You are a wall to kick against during my rebellious years, but you’ve never muttered a word. You’re my benchmark, my starting point - I learn to be close to you emotionally, but set my personal standards independent of yours, to differentiate myself from you and dad but to remain close to home.

Thank you for everything, mom. I love you.

Feeding time for my babies!

Let me take you on a short trip to visit the kittens during their mealtime!

I think I’ve mentioned this before, that I’ve unofficially adopted a bunch of stray kittens and cats in my neighbourhood it was quite some time back I knew that they’re living there, but it wasn’t until recently that I’ve assumed the role as the unofficial adopted. They’re just too adorable and angelic to be neglected. Since mom has a chronic fear of fur and a chronic love for cleanliness, it is impossible for me to even purchase a pet (except fish, that is), not to mention adopt a bunch of strays who are probably never toilet trained.

The last time I counted, there’s actually 9 cats to the family, but two are missing in this photo. The reason is simple - one doesn’t like the meat I feed them (I think he doesn’t like the taste of Chinese herbs because the meat is actually used to give flavour to mom’s many Chinese-herbs-based soup), while the other is too busy roaming the neighbourhood.

Let me introduce the 7 little adorable angels in this photo - from bottom left and in clockwise order:

• Ms Valentine - the reason is simple: do you see a patch of dark fur that resembles the shape of a heart on it’s right thigh? She loves bullying her sister (the next one to the introduced) by chasing her around the place, but she never tried to snatch food from her sister. How nice! Her favourite toy is man-powered, moving dry leaves. I’ll pick a dried leaf and use it as a surrogate mouse-toy to play with her.
• Ms Fuzzy - her coat of fur is exceptionally fuzzy, I didn’t know how she got that trait because none of her parents got those. All the cats in that brood has straight, smooth fur. She is still a little wary of people, so I will approach her only after I’ve squatted down.
• Mr Flower Coat - I didn’t know much about him because he usually appears only when I start feeding them. And he doesn’t quite like me caressing his coat, so I’ll just let him be himself them, and he’ll regret it! Haha.
• Mr Alpha Male #2 - the first alpha male isn’t around (he’s the one I’ve mentioned who doesn’t like the taste of the meat). I think he’s an alpha male instead of simply an ordinary one because he makes sure that he is the first one to eat, and will snatch food away from those who’ve arrived first. How bad! If I find him doing such hideous acts, especially to weak but lovely Ms Valentine and Ms Fuzzy (they’re my favourites!), I will spank his butt AND wrestle the piece of meat away from his as punishment
• Mr Grey Coat - he is the first of the few cats I’m close with before adopting the family. Back then, Ms Valentine and Ms Fuzzy weren’t even born yet! I’ve never heard a meow from him before, but he does give a soft purr when you scratch his ears - he loves it!
• Mrs Snowy - she’s pregnant with another kitten! That’s why usually I’ll keep a few extra piece of meat in my hands after feeding the rest of the cats because I think she needs more nutrient to keep her little baby healthy! She loves sunbathing, lying on the hot tarmac when I do my occasional lunchtime visits (I usually go before dinner, in the evening), and her pregnancy didn’t stop her from enjoying lots of tropical sun.
• Ms White - she’s the mischievous one! Everytime when I play with her, she would instinctively grab my fingers with her CLAWS! That hurt a little, so I’ll usually put her on my lap so she can scratch my khakis without harming me. After searing a few threads of my khaki, now I only entertain her with the man-powered, moving dry leaves

This is not my first time featuring this feline family they’ve been introduced twice before this post:

Cute Little Furball! - posted when I embark on a trip to capture the face of the cute little Ms Valentine in photos. She is cute, isn’t she? Read post »

Cute Kittens! - my first experience on animal photography. The photos were taken before Ms Valentine and Ms Fuzzy were born! Back then I only knew Mr Grey Coat and Ms White. Read post »

I guess I’ll wrap up this post here!

Dear Readers,

Do you keep any pets at home? And what kind of experience is that? I’m starting to learn about the habits and loves of cats, like how they love to get their heads and ears scratched and etc - do you have any experiences with handling felines?

Anyway, I had lunch with my mom at Sushi King (a Japanese restaurant) yesterday, and I am so grateful that they’ve plugged this song in! my first reaction was, OMG, are they serious? Since the song is heavily related to anime, I initially thought that they won’t possibly be playing this song. And they did! No bull!

Title: Beautiful Word (in the album Beautiful World / Kiss & Cry)
Artist: Utada Hikaru (宇多田 ヒカル)

The lyrics to the song is available here (alongside with its English translation), but you’ll need to scroll down a little to the bottom of the page. Here are a few of my favourite lines:

言いたいことなんか無い
iitai koto nanka nai
I really have nothing I want to say to you,

ただもう一度会いたい
tada mou ichido aitai
But I still want to see you one more time.

言いたいこと言えない
iitai koto ienai
The things that I want to say – I cannot say.

根性無しかもしれない
konjou nashi ka mo shirenai
Perhaps I am a coward,

それでいいけど
sore de ii kedo
But it’s alright.

Back to the post, the reason why Beautiful World is selected as the title is not only because I’ve got a lovely song to plug, but also because I’ve got a couple of random photos to share, all depicting that we’re actually living in a beautiful world - you just need to be a little more adventurous, observant and appreciative to realise that.

Photos are shot using my faithful ol’ P&S, consumer-grade Pentax Optio S55 digital camera. Photos are modified for colour balance, saturation, contrast and exposure (with a certain degree of artificially widened dynamic range) using Photoshop CS2. Click on the images to view the larger ones in a lightbox. Photos in this post comes with their respective metadata as well as geolocation information (geographical coordinates are found using this neat webpage, and geotagging is part of my experiment with microformats).

Cityscape Silhouette
Taken on: 2^nd of May 2008, 7:07pm

I rode to an adjacent neighbourhood one evening and discovered that there’s a huge lake tucked behind three colossus condiminium blocks. I’ve never found it even though I’ve been living a mere 3km away for 17 years!

The evening sun is directly behind the office blocks and so the camera is shielded from sun’s glare (to make sure that the sky is properly exposed). I’ve positioned the horizon exaclty at the dead middle because I was lazy to do cropping during post-shooting modifications.

EXIF data:

• Focal lengh: 6mm
• F-number: F/4.3
• Exposure time: 1/500 sec
• ISO speed: ISO-50
• Metering Mode: Pattern
• Geolocation: 3.079259, 101.601198

Bridge Silhouette
Taken on: 1^st of May 2008, 5:56pm

On Labour’s Day, we went shopping to kill time and then headed home for dinner. As dad drove along the Federal Highway, a toll-free expressway that connects the suburb we live in with the downtown area, I noticed the late afternoon sun hidden behind a layer of clouds, thus creating the God’s rays (a.k.a. Crepuscular rays) in the sky. The bridge (it’s more like a viaduct because it’s parallel to the flyover underneath it) is special because it is on the third level above the highway.

EXIF data:

• Focal lengh: 6mm
• F-number: F/4.3
• Exposure time: 1/1500 sec
• ISO speed: ISO-50
• Metering Mode: Pattern
• Geolocation: 3.08410, 101.61407

Floating Water Lettuces
Taken on: 12^th March 2008, 2:32pm

A macro shot of the water lettuce in my Aunt’s House garden. Sometimes it takes a little initiative on your behalf to get a nicer photo - I’ve dipped my hands into the mold-green water (of course I did wash my hands thoroughly after that) to sprinkle some water onto the waxy leaves to create a more dramatic effect.

I did a little cropping though - it was initially shot at landscape mode but the original photo had too much distracting details (flower pots, grass, bricks etc.) so I cropped away the left side.

EXIF data:

• Focal lengh: 10mm
• F-number: F/3.5
• Exposure time: 1/100 sec
• ISO speed: ISO-50
• Metering Mode: Pattern
• Geolocation: 3.03114, 101.57347

Tree-lined Avenue
Taken on: 5^th of March 2007, 4:33pm

This photo is taken along the path that brings me from the bus stop to my boarding school in Singapore. The avenue where this photo is taken is called Namlee Avenue, and it isn’t really surprising to find a thousand more roads in Singapore with exactly the same scene - trees with thick canopy overhanging the road. Singapore emphasizes a lot on environmental protection, preservation and rehabilitation.

I love the way how light from the late afternoon sun bounched off the road and into my camera. Isn’t that lovely?

EXIF data:

• Focal lengh: 6mm
• F-number: F/2.6
• Exposure time: 1/50 sec
• ISO speed: ISO-100
• Metering Mode: Pattern
• Geolocation: 1.32889, 103.80172

Tree
Taken on: 3^rd of March 2008, 10:32am

I went to a national forest reserve adjacent to the town I live in. I could still remember that we cycled quite a long way from the rental shop, and to find ourselves at the border of the forest reserve - what laid in front of us is a new housing scheme under construction, how sad. I was dying under the hot morning sun and the melting tarmac, and the only place for refuge is underneath the thin canopy of this tree. When I caught my breath and look up, I saw what is in this photo - a magnificent canopy against the blue morning sky!

EXIF data:

• Focal lengh: 6mm
• F-number: F/4.3
• Exposure time: 1/640 sec
• ISO speed: ISO-50
• Metering Mode: Pattern
• Geolocation: 3.10110, 101.49476

A few weeks ago, the sky was completely inundated with fierce thunderstorm clouds - a perfect remedy for lightnings! I grabbed my point-and-shoot consumer-grade camera (it’s a Pentax Optio S55 camera, a pretty ancient model by current standards), rushed to mom’s bedroom and poised myself to get ready for a thunderstorm photoshoot. I took exactly 100 photos in total, all of them taken with burst mode (a.k.a. continuous shooting mode):

If you’ve spotted the unique one out of the hundred photos, you’re sharp!

The lightning was almost out of the frame, that’s why I was talking about the Lady Luck thing. If I’d aimed slightly towards the right, the lightning wouldn’t have been captured! So here’s the larger version (in case you have not located the photo, it’s the second photo from the right, on the third row):

I’m starting to wonder how could I get amazing lighting shots like these (well, compared to those, mine is bollocks), found on Flickr. Perhaps the desire to get those is pushing me towards a new camera (most probably, a dSLR!). Here are some, randomly selected from the search result:

Note: Photos are copyrighted by their respective owners, click on the thumbnails to access the photo’s Flickr page.

Birthday Wishes

Chankeet (29^th April) - Happy belated birthday! I actually wanted to dedicate a section for you in the previous post but it was too long, and no body will probably read it. Haha!

Yuting (3^rd May) - Happy birthday! Today is your day when I get back to Singapore next time, I’ll haunt you!

Yintung (4^th May) - Happy early birthday! I hope you’re coping well with life and remember, have fun!!!

Tag Replies

Sorry I’ve been very, very lazy lately!

@ahbing: Thank you! NGE is a really nice anime - if you appreciate those with darker themes (but not so much violence), and extensive character development and analysis, it’s definitely your cup of tea.

@Artix: Woah I never knew you watch NGE too! You can torrent it, or google for a direct download.

@Eric: The last time I checked, it’s running fine. I think it’s because your Blogger RSS feed takes time to update so my CommentLuv didn’t manage to capture your latest post. CommentLuv relies on RSS feed and not the actual blog, by the way.

@Levine: Nothing much, just that I’ve been running out of ideas for photography lately. Not another creativity drought!

@Guest: Whoever you are… NGE is for everyone who knows how to appreciate it, regardless of gender.

@Melle: The tagboard wasn’t visible at first, but I guess many visitors didn’t figure out that clicking on the Tagboard text will bring it out, so I’ve decided to display it by default! Haha. You’re so generous with your compliments, I’m so darn flattered, really!

@LogicYuan: Thanks for reminding! I’m running a little dry on creativity lately, sorry!

@Tungz: Yeap, it’s one of the best ones around! Oh and I’ve never seen the videos before, so thanks for sharing so I know that such talented kids really do exist, haha! I think it takes a lot of effort and sacrification for them to reach where they are today *applause*

@Eric: Take your time, it won’t disappear, haha!

@Guest: Thanks…?

@kenny4eva: Okay roger sir. Will check out asap!

@ck: Ahhh you’ve revealed my close-friends-only nick to the world! Anyway, you’re welcome! You’re asking something that I should be asking - I’m wondering how you’re coping with NS, bud! I hope you’re fine! Take care.

That’s all for this post!

Cheer up! It’s another Photoshop tutorial to keep you entertained and your mind sharp with creativity. When I release my new personalised Wordpress theme, teddY-risatioN™ Delta, it came with a header image that contains a 3D looking icon / logo. The one on the left is slightly different as compared to the original one (the background is not centere in the original favicon for design purposes).

The original concept of this favicon (that uses a gradient as the background instead of a dull, boring, solid color) comes from Id’s favicon for her blog Notbrainwashersafe.com. Thank you Id for the inspiration!

Hendra asked me a few weeks ago (sorry, it took me so long to write this!) as of how to create a 3D looking icon, so here it is - a step-by-step, idiot-proof Photoshop tutorial to teach you how to create a Web2.0 3D icon from scratch. I wrote another one, Glossy Logo Tutorial a few months ago, and if you’re interested, you can check it out as well.

A sample .TIFF file is included at the end of the tutorial (it’s highly recommended that you read through the steps first because it’s the process and methodology that is important, NOT the final product! So what are you waiting for? Grab some coffee (it’s long, with 20 screenshots in total!) and let’s get it started!

Step 1 - Open Canvas

Since I want to make sure that the icon I’m creating is as detailed as possible, I’ll be using a huge canvas size (250*250 for this tutorial) and then shrink the icon to 36*36 pixels when I want to convert it to a favicon. Alternatively, you can use the icon for your blog header (like what I’ve done!) or other purposes. 250*250 pixels is a pretty safe size, since most blog icons won’t exceed the width or height of 150px.

It doesn’t matter if you have a transparent background or a solid white background (as shown in the screenshot). Anyway, if you’re interested, the background can be configured when you create a new canvas - you’ll have three choices, under Background Content, of White, Background Colour or Transparent.

Step 2 - The All-mighty Gradient Tool

Head over to the toolbar (by default, it’s to your left), and select the Gradient Tool. In case you couldn’t find it, look for the Paintbucket tool, since both tools share the same position in the toolbar and you can change it by clicking the black triangle at the bottom-right corner of the tool’s icon.

Now select the type of gradient - I’ve used Angel Gradient to design my icon, but you can always experiment with other types! Click on a mockup display of the gradient at the top to edit it. A dialog box will appear as shown below:

I’ve used a particular configuration for my icon:

• *Note: Opacity at 100% for all colours
• Color: #282e65, Location: 0%
• Color: #2c6893, Location: 25%
• Color: #7da6c3, Location: 50%
• Color: #405671, LocatioN: 75%
• Color: #282e65, Location: 100%

Step 3 - Draw Gradient

Create a new layer and rename it as ‘Background Gradient’. You can now draw the gradient on the new layer. If you want to center it perfectly in the middle of the canvas, simply turn on the grids by pressing [Ctrl] + [']. If the default grid settings does not subdivide your canvas properly, you can access its settings via Edit > Preferences > Guides, Grids & Slices. Adjust the pixel spacing and number of subdivisions to your liking. Since I’m using a 250*250 canvas, I will divide the canvas every 50 pixels with 2 subdivisions. If you follow my settings, this is what you’ll get:

And now position your cursor at the center of the image, click and start dragging the gradient towards the side of the canvas. Since you have turned on the grids, the cursor will automatically snap to the nearest dividing line. Neat, isn’t it? Saves you from all the trouble from trying in vain to achieve pixel precision.

Step 4 - Typography

Now start entering anything you like into the canvas. I have used a slightly blue colour for my text (#a6c7f3) to give it a blue tinge. You can use any colour you wish, it’s all about trial and error! Since I wanted something striking and unique, I’ve settled for ‘tr™’ which stands for teddY-risatioN™.

After you’ve entered your text, it’s time to give your text a more three-dimensional effect. Double click on the layer to bring up the Layer Style dialog box. I’ve applied the following settings:

For Blending Options (check screenshot?):

• Blend Mode: Overlay

For Drop Shadow (check screenshot?):

• Blend Mode: Multiply
• Opactiy: 25%
• Angle: 120° WITH global lighting (check the global lighting option)
• Distance: 3px
• Spread: 10%
• Size: 3px

For Inner Glow (check screenshot?):

• Blend Mode: Screen
• Opacity: 25%

*Note: if you have mutiple layers of text, remember to copy the layer style of one layer and paste it to the others. There’s no need to repeat all the tedious steps above for the remaining layers. Hurray!

Here is a simple visual comparison of the before and after the tweaking of Layer Style.

Step 5 - Create a curvy shape

In order to have a convincing glossy effect, you don’t just create a simple shape and reduce it’s opacity to a low percentage. You’ll actually have to create a custom shape by hand. But no worries, it’s actually quite simple with the Pen tool!

Click on the Pen tool icon in the toolbar, and then proceed to the top to configure that nifty little sweetie. Remember that you wanted to create SHAPES and not PATHS, so remember to click on Shape Layers, and then click on Pen Tool - you wouldn’t want a freeform pen tool, unless you have a sturdy hand and a Wacom (or whatever) tablet in hand. Remember to turn on the grids again, by presisng [Ctrl] + ['].

In order to create a curvy shape, you’ll need to know a little bit how the Pen tool works. It actually draws you a Bézeir Curve when you play with the handles. Now to continue, click on the center left side of the canvas. Since the grid is on, it will automatically snap to the grid, so no worries (and that’s what grids are for!). Now click at the dead center of the canvas, and drag the horizontal, tangential handle until it looks something like in the screenshot below:

It’s all up to your experimentation - you can create very curvy or straighter shapes, mine is just for your referrence. Feel free to experiment with it! Photosohp is all about APPLICATION and not DEAD, ROUTE-LEARNING keep that in mind!

Now click on the center left corner of the canvas. You don’t need to tweak the handles this time, and an almost perfectly symmetrical curve will appear, as seen below:

After you’re done with the curvy part, breeze through the rest - by just clickin on the top right and then the top left corners of the canvas, and CLOSE THE PATH (important!) by clicking on the starting point again. Now you’ve got a nice, neat shape!

*Note: Don’t be bothered by the black background, we’ll deal with it later, very soon!

Step 6 - Glossy effect using layer stlyes

Since the black background is really irritating (and we don’t need it as well), head over to the Layers container and set the Fill to 0%. The black filling disappears!

Now double click on the curvy shape layer to bring up the Layer Styles dialog box, and follow the instructions below:

For Drop Shadow (check screenshot?):

• Blend Mode: Multiply
• Opactiy: 5%
• Angle: 90° WITHOUT global lighting (uncheck the global lighting options)
• Distance: 5px
• Spread: 10%
• Size: 5px

For Gradient Overlay (check screenshot?):

• Blend Mode: Overlay
• Opacity: 10%
• Gradient (white fades from left to right):
  • Color: #ffffff, Location: 0%, Opacity: 100%
  • Color: #ffffff, Location: 100%, Opacity: 0%
• Style: Linear
• Angle: 90°

After applying these styles to the layer, remember to drag the layer to the top so that it is above all layers:

Step 7 - Create rounded corners

This is when we’ll make use of Photoshop’s Quickmask function. Select the Background Gradient layer. In order to mask it, press [Q] or click on the Quickmask icon. Then select the Rectangle tool and at the top toolbar, configure it to the Rounded Rectangle Tool with 50px radius. For the radius, it’s all up to you - 50px is just my personal preferrence.

Open the grid again by pressing [Ctrl] + [']. Now draw a rounded rectangle from the top left corner towards the bottom right corner. It will automatically snap to the gridlines, so don’t worry too much. When you’ve done, a red and slightly transparent rounded rectangle will appear over the area you’ve masked. This means that the part of the image on the Background Gradient layer will not be edited in any way when you exit Quickmask:

To exit Quickmask, click on the other icon below the foreground/background palette or press [Q]. Now you’ll have ‘marching ants’ around the four corners of the layer. With Background Gradient layer still selected, press [Delete] to remove the corners of the layer. Now you have rounded corners!

But you’re not quite done yet - the Shape Layer is still rectangular at the top. Do not deselect your selectiong (in order words, make sure that the ‘marching ants’ are still there). Select the Shape 1 layer (this is the layer’s name by default), and then press [Delete] again.

Step 8 - You’re basically done!

You’re basically done with the icon. To drag the icon to another image (like your blog header), just select all layers (besides the locked Background layer, if there is any) and drag them to another image. To create a transparent background, delete the locked Background layer, if there is any.

Here is the final product!

Download Sample!

You can also download the sample for the icon here. Please note that the file is for personal usage only and do not distribute it commercially. If you would want to share this file on your blog or website, feel free to do so but please provide a link back to this tutorial.

Icon Tutorial Sample | 25 hits | 496.71 KB

*Note: The .TIFF file will appear just like a .JPEG image when you open it with the default Windows Picture and Fax viewer, but if you open it up in Photoshop, you’ll see different editable layers. Oh, and the .TIFF format I’ve used is a lossless compression format, so everything you see is exactly what I’ve done, down to every single pixel

Request a Tutorial

Yes, I do accept requests - and probably the best thing to it is that I write Photoshop tutorials for free! I would consider myself semi-amateur (more towards the expert side, heh) along the novice-expert scale, so I’m terribly sorry if I couldn’t write one that I think it’s beyond my capabilities. However, I’m willing to read up of new techniques, so most probably I won’t reject 90% of the requests. You can post a request as a comment, or you can directly contact me.

Aisyah’s new theme!

Aisyah, whose blog is one of my greatest source of inspiraiton for design and layout, has released her new theme, My Scrapbook, on Sunday! Her themes are always a refreshing and very, very artistic, looking as if they’re drawn in real life and later scanned into Photoshop

Her previous theme (here’s a screenshot!) is already a big hit with me, and this time, her new theme packs a bigger punch! It comes with a cleaner sidebar and more cheerful colours at the header.

Aisyah also never forget to include those nifty CSS hover effects in her layout, such as the navigation links in the header and the sidebar, as well as in the footer section.

I couldn’t help but keep thinking of her next theme! Brilliant job, Aisyah! Keep it up, heheh.

Digital Art

Recently I’ve picked up a few cool digital art tutorials on various Photoshop magazines and I realised that there is so much more than just simple digital darkroom tweaking that Photoshop allows you to do! Here’s are two samples I’ve done so far - they’re equivalent to doodling, just more on the digital side. For this time, I’ve used the Calvin and Hobbes font for the photo captions

Flower Against the Setting Sun - The discovery of buried photos in my photo archives got me exciting and so I started experimenting with various brushes. I’ve used two separate brushes to do the framing, but I found the edges rather jaggy and so I’ve applied Gaussian Blur to smooth out the edges. Now it looks better right? The key to an authentic looking frame is RANDOMNESS - don’t drag your cursor along the edges, but rather make short pauses in between and draw at different angles.

Mr Potato! - Creating the pseudo-painting effect was a big pain in the butt, but after an hour I’ve got it done! I’ve experimented with different blending options coupled with a photoshop filter called Glowing Edges (thus the high contrast of the edges in this photo). Finally I’ve used Diffused Glow to create a comfy and dreamy effect, and finished off with a little more tweaking with the saturation and contrast.

[Edit] I’ve reorganised the before and after comparison between identical scenes found in the original anime and the first film into their respective episodes. I hope this will make things a little clearer! This post will be continuously updated if I have extra before and after stillshots to compare [/Edit]

The latest count puts the number of screenshots in this post at 37. I may have more to add in the future!

Introduction: Neon Genesis Evangelion

*Skip this part if you’re tired of wordy posts, and proceed directly to the ‘Read More’ link happily browse through the pages! There’s so much information that I have to abandon the Read More link and use pagination instead.

I first learnt about Neon Genesis Evangelion (NGE from now on) from my ex-roommate, Pow. I immediately fell in love with it because of the unique mix of psychological experience and mecha-anime, which is previously unheard of. Shame on me, because I’ve been very out of touch of the anime world that before being introduced to NGE - the only animes I have in mind is Naruto. I don’t particularly adore other animes because they aren’t really quite my cup of tea (seriously, I get bored with these stereotypical male hero, female warrior, boy-girl-relationship, adventure themes…)

Produced and directed by Hideaki Anno, NGE offers a whole new perspective to anime. It’s an old anime, I would call it, since it was aired about 13 years ago and it surprises me of the producer’s ability to portray a futuristic Tokyo-3 in a very realistic manner. It deviates from the normal anime by resurrecting the mecha theme (big giant robots) in Japanese anime culture. It stuck to the old methods of mecha anime, but it has added something deadly inside to make it such an addictive mix - psychological turmoils of each character, making them either horribly introvert or notoriously extrovert. Almost every character have to deal with their inner demons and their struggle with existence.

NGE was such a huge hit partially because it leverages heavily on religious icons of Christianity. Such incorporation is largely based on the producer’s observation that Christianity was not a well-known and understood religion in Japan, and thus will give NGE-viewers a cutting-edge experience. He was even quoted that if he knew NGE was to be aired in overseas, he would have abandoned the incorporation of Christianity themes (but if he really did, NGE will be a total disaster, I think).

Basically the storyline of NGE surrounds the three protagonist - (from left, as seen in the image above) Asuka, Shinji and Rei, who are child pilots to the three respective Evangelion units and are responsible of defending Tokyo-3 from attacking Angels (huge monster figures that either approach Tokyo-3 by land, by air or appear directly above it). The series got progressively (but I think it’s more towards exponentially) darker as it progresses, partially influenced by the producer’s prior experiences with depression. The end of the anime was very apocalyptic, for the sake of those who are yet to watch it, I’m not going to reveal the exact details, but it is generally an end-of-the-world scenario. No spoilers!

There are before and after comparisons of the new film to the original anime (19 screenshots in total) after the jump! Keep reading

Here is a menu of the following pages, just in case you get lost:

1. Introduction: Neon Genesis Evangelion » You’re here!
2. The Remake: Rebuild of Evangelion 1.0
3. Comparisons: Episode 01
4. Comparisons: Episode 02
5. Comparisons: Episode 03
6. Comparisons: Episode 04
7. Comparisons: Episode 05
8. Comparisons: Episode 06

I got inspired after watching so many iPod commercials! This is one of my favourite:

The trick behind creating this Apple-esque poster is just using Photoshop’s handy Quickmask function! Here’s a short tutorial (sorry, no screenshots!).

1. Open the image - Either drag the image into the workspace or go to File > Open…
2. Enter quickmask mode - Press [Q] or find the button just below the foreground / background colour swatches.
3. Painting time - Remeber to set the foreground and background colours to the default ones by just pressing [D]. Paint over the areas of the image you want to turn black (painted areas will appear red in quickmask mode, so don’t worry!).
4. Exit quickmask mode - Press [Q] to exit. Now you’ll find the marching ants (those moving black dashed lines at the border of the selected area).
5. Invert selection - Since you’ve painted over the selected areas of the image, you’re actually MASKING them (eg, preventing them from being modified). So you’ll have to invert your selection. Just right-click on any place on the canvas, and click Select Inverse on the menu that appears.
6. Create new layer - Press [Ctrl] + [Shirt] + [N], select a huge brush (and make sure that the foreground colour is black, #000000), and start painting within the selected area. You don’t want to pain over the original image, so that’s why you will need a new layer!
7. Repeat step 2 to 5 - Now select the part of the image you want to paint white (e.g. mp3 players, headphones, shoes or any objects)
8. Create another new layer - Do not paint on the first new layer! You want to maintain editability, remember? Make sure that the foreground colour is white, #ffffff, before proceeding.
9. And you’re done!

Do tell me if you want a more detailed tutorial I’ll be more than happy to share!

Comic © Bill Amend, published on 6th of January, 2008. Did I mention that Foxtrot is one of my favourite comic strip? Haha I dig its sarcasm (plus the nerdy Jason and the rather stupid Paige)! Anyway Foxtrot has ceased dailies a few years back, but Bill Amend is nice enough to bring it to us on weekends!

Random Facts Meme

Vivacious, cute, lovely, artistic but evil Ivy tagged me for it because she wants revenge for the five vices meme that I’ve tagged her for. Okay, as you wish, here it is!

Once you’ve been tagged you have to write a blog with 10 weird, random facts, habits, or goals about yourself — at the end choose 5 people to be tagged. Don’t forget to leave them a comment saying “You’re It!” and to go read your blog. You cannot tag the person that tagged you.

So here we go.

1. I have a toy that is older than me - it’s Mr Potato! And HELL NO it’s not the Mr Potato Head you find in the stores or in Toy Story, nor is it the mascot of some random potato chip manufactuer. It’s authentically mine. My mom bought it to add it to her collection one year before I was born - this makes my dear Mr Potato 20 years old! It has been a good listener and comforter i during my childhood years. When I was five, a male flight attendant saw me carrying it around and joked that “Oh my why do I see still young boys carrying dolls?” which inflicted an angry stare from me. I remembered bringing it to my middle school dorm by hiding it in my closet (I don’t want anyone to know I keep a doll), but one day one of the nastier friend got hold of it and tore it’s legs apart. I cried for a week after that, and finally mom got her friend to stitch it up for me - she’s so nice that she did not only repaired his legs but also gladly donated an old pair of denim jeans for the new shirt he’s wearing! Since then I kept it safely in my closet away from curious hands and prying eyes, and I’ve brought it out today to have it photographed for you
2. I am afraid of mannequins - I find that rather spooky! Being extremely similar to humans, the plastic bearing humanoid shapes and curvatures simply evokes a strong sense of revulsion within me. I find the sight of people dismantling mannequins into smaller parts (limbs, head, torse and etc.) very unsettling. My reaction towards mannequins made me to somewhat believe in the Uncanny Valley theory - when robots and other facsimiles of humans look and act almost, but not entirely, like actual humans, it causes a response of revulsion among human observers.
3. My BEST dreams always end at the BEST part - this theory stands true since the day I told it to my mom when I was seven. It was a Sunday morning when I suddenly woke up from a dream of having my parents bring me to a huge waterpark. I was about to splash down the longest ever water slide on earth… and realising that I’ve just wet my bed. And then a few weeks ago when I was angry when my mom woke me up because I dreamt about being invited to a friends’ wedding where they’re a lot of good food (the last time I checked, I remembered dreaming about drumsticks, Korean barbeque, Japanese udon, pizza, breezers, sandwiches and etc). When I was about to dig in she woke me up. DANG!
4. I am short and light - At 160cm I’m one of the shortest 19-year-olds you can ever find on the street. I’m reluctant to reveal my weight because if I ever, ever do that, you’ll probably report my parents to the child protection services for fear of them abusing me. I eat a lot, swim a lot and cycle a lot, I just can’t figure out why I can’t get some extra height and put on some extra fat (or muscle, I don’t care, I just need more MASS). And I have narrow shoulders, a very un-masculine trait and people will probably see me as infertile (well, scientific study says that females prefer guys who have wider shoulders. I’m doomed!)
5. I can pull my hand through a ring formed using your palm, thumb and middle finger - I’ve tried it on many friends and my hands can gracefully squeeze through almost all of them (except for a few who have stubby and ‘obese’ fingers). That’s one unqiue trick that I can pull but you can’t!
6. I have a creative and a scientific mind - a very weird combination. That’s my diagnosis when I sat for not one but several career tests. I scored very high in artistic / creativity and logic / analysis, and the person who conducted the test had a hard time finding a list of suitable jobs for me. And at last he settled for Environmental Engineering, Urban Planning and Architecture. I went against all the choices and opted to get into Life Sciences in university.
7. I don’t watch horror flicks - my uncle said it right - why waste money on something that will scare you, make you sleepless for nights and make you think that it’s better to wet your bed rather than to go to the toilet at midnight? After watching my first horror flick, Darkness Falls (which gave everyone a lousy scare as it was one of the worst movies ever made, but I was genuinely scared!), I vowed never ever to watch anything that has to do with ghosts.
8. I bought my one and only HTML bible at 13 - and it punches a big hole in my piggy bank. It costs around MYR180+ (I know, I know, it’s a rip off because I could’ve just learn HTML myself online), and I finished reading that 500+ pages thick book in a week!
9. I could speak Javascript… back then - after purchasing my first HTML bible (see above!), I got interested in webdesign and layout - I surfed the web for countless Javascript tutorials and finally, I mastered the language and was able to speak Javascript as if it’s my second language. BUT after 5 years of disuse, I can only call for the document.write and alert function using Javascript - nothing more than that. How sad.
10. teddY-risatioN is going to be my first and final blog - when this blog turned three last July, I told myself that I shold never let anything stop me from blogging since then. And I swear not to change my blog title (and URL, if I can restraint myself, since teddy-o-ted.com sounds like kids stuff) until the day I stop blogging.

And the sky falls on…

1. Han - for tagging me to do the evil Five Vices Meme! Remember, revenge!
2. Aisyah - for being a great designer and a wonderful blogger!
3. Brandy - for introducing me Naked CSS Day (thanks!) and I heard you love doing memes!
4. Nel - for getting her new contacts!
5. Cherngyo - for being one of my greatest friends!

For the people who have the sky falling on their heads, do inform me if you don’t do memes - I’ll get another innocent victim to replace you and if you’re in a dire need to do meme, feel free to tag yourself AND inform me, I’ll be linking you as well.

Here you go, Ken Lee!

In case you’re craving for background information, the lady who sang Ken Lee (who insisted that she sang in English and the song is Ken Lee instead of Without You by Mariah Carey) is Valentina Hasan (Bulgarian: Валентина Хасан), a contestant auditioning for the Bulgarian show Music Idol in February 2008. The simple reason for the funny way she sang it:

Hasan explained to the Bulgarian media that she actually used to listen to the song “when she was 15,” using a cassette recorder, and “sang it the way she felt it.”

I’m not being rude, but I really had a good laugh.