Tutorial: How to create a simple drop shadow effect

This tutorial will demonstrate how to add a simple drop shadow effect on the image.

1. Fire your photoshop and open up the image.

cute dog

2. Minimize the image you just open and go to File->New.. as shown below

drop shadow

3. Drag the image to the new board you have created and it will appear as shown below

drop shadow

4. Go to layers pallet and look for 'Add a layer style' icon and click on drop shadow

drop down shadow

Notice there is a lot of other style you can appear on the image but they will not be demonstrated on this tutorial.

5. Adjust the setting you prefer and click 'ok'.

drop shadow setting

6. Viola~

drop shadow complete

Tutorial: How to remove background in an image using extract feature

This is another simple tutorial that demonstrate on how to remove the background of an image.

1. fire up your Photoshop and open up your image. I will use my fighter here as an example:


2. Ok! My fighter is summon out to my photoshop i will need to extract it out by opening up my extract tools, Filter->Extract


3.  Start highlighting the image you want or use  Smart Highlighting feature if you have shaky hand.


4. use the fill tools to specify which area you want and click ok.


5. You will see something like this which has a lot of missing details


6. Paint in missing drop outs using the History Brush Tool or use eraser to erase unwanted pixel as shown below


7. Viola~


There are other masking technique you can find to remove your background image from this site

Tutorial: How to change your color image to black and white

This is a simple tutorial to demonstrate how to change a  color photo to a stunning black and white image.

1. Fire your Photoshop and open up the color image. I will use these two 'things' in the cup XD


2. Choose Layer --> New Adjustment Layer --> Hue/Saturation and set the Blending Mode to Color and click 'OK'.


3. Choose Layer --> New Adjustment Layer --> Hue/Saturation and leave the Blending Mode to Normal. Set the Saturation to -100 Click 'OK'. Now you should have two Hue/Saturation Adjustment Layers.


4. Double-click on the layer thumbnail of the bottom Hue/Saturation Adjustment Layer which we first created on point 2.


5. The 'Hue' slider is what makes it all happen-move it around to see how the conversion reacts. You can also boost the saturation to make the effect more drastic.


6.  Tweaking the 'Hue' slider to your liking

7. Save the file and Viola!


Javascript Tutorial: Handling All Errors

I found a very interesting method to handle errors on JavaScript. What this does is to handle all error occurs in the script to a single function so whenever any error occurs, it will go into this particular function and alert the user.


function handleError()
alert(An error has occurred!');
return true;
window.onerror = handleError;

What it does is that whenever a run time error occurs, the function will goes into action! For example you try to trigger a function that does not exist! Instead of making your program stop functioning, we can provide a error message using the above method which can promote a more user friendly environment whenever an error occurs on our script. This is neat stuff!

Tutorial: Making a template for concrete5

I will try to show you how to create a simple concrete5 template! You can also learn it yourself by watching this video on c5 website.

Firstly, download a template from any template site and save it on your computer. For my example, i will visit http://www.freewebsitetemplates.com/ and download the template 'Music shop template'.

template location

Once the downloaded file has been unzip you should see the following files,


In order to make c5 recognize our template, we will have to make a little changes on this static html template.

Firstly, we have to change the file 'index.html' to 'default.php'

Secondly, we have to add a new .txt file called 'description.txt'. This file will describe our template on C5. Note that the first line will be the name of the template and the second line will be the description of our template as shown below.


Thirdly, we will add a thumbnail for our new template. This thumbnail should be the size 120x90 graphic image, .png extension and name thumbnail.png.


This is all we need for our new template to be recognize by C5 but we still have an important thing we will need to do before the template work flawless with C5! We will need to edit the content of 'default.php' that we have changed previously. The following shows the changes made on the file.



This might get a bit complicated but i will try to explain it clearly. The above picture highlighted in red boxes is the command given to C5 so that C5 is able to distinct which areas are editable.

    $a = new Area('Main Content 1);

We see the above code shown on the second picture highlighted boxes. This tells C5 which part is editable and the editable area is a content area with the name 'Main Content 1'.

    $a = new Area('header nav');

This tells C5 that this is a navigation bar on the header level which gave it the name 'header nav'. If another name is given, it will be categorized as a new type. Thus, there are a few standard names used in C5 to allow C5 to identify what does the editable area represent.

<?php Loader::element('header_required'); ?>

This is the most important instruction for our template! Without this, the edit bar will not be shown on top of our new template! We placed this between the tag as shown on the first picture above.


Lastly, this code is placed on EVERY src or href that tells the template where to retrieve our css/javascript/images. Thus, for every html code written with src="" or href="" to retrieve css/javascript/images we must place the above code to tell the template where is our new location in C5.


The picture above shows the end result files that should be contained in the template file we have downloaded after all of the changes we have made.

Once you get the files shown on the above picture, we will copy this template folder to c5 'theme' folder. Then proceed to login to your c5 control panel account and go to section 'Pages and Themes' you will see a new theme that we have just created!


Click install and activate it! viola~

if you edit the new theme you will see the below result.


Hope this helps =)

Update: 1st April 2009

i have recently created a concrete5 for someone at cocoonsg.com. They have fully ultilized the ability of c5 which i'm quite impressed with~