How to remove color cast from an Image

Today I am discussing how to remove color cast from image using Adobe Photoshop CS5.

For demonstrating this I have taken the following image.

Step 1)

First open this image in Photoshop and Duplicate the background layer using (ctrl+j ) in windows and (cmd+j )in mac.

Step2)

Using eyedropper tool with sample size of 5 by 5 average take 3 sample from highlight, midtones and shadow region respectively as shown in fig below. Hold down shift key and click the with eyedropper tool to get the sample and then open the info panel by pressing F8 function key.

Notice in info panel the three sample ‘s RGB value. At each sample point these value are not equal. To make color correct this image we will use curve adjacent layer.

Step 3)

Add curve adjustment layer above the existing layer. With the curve adjustment try to make RGB value almost equal to all three point by adjusting Red, Green and Blue Channel curves respectively. Eventually you will find that the color cast from image has removed completely. After this your info panel will have almost like this.

Try this technique with other image and have fun.

JQuery Introduction

Add Google search field in your site

Today I am discussing how to add Google search box to your site page, so you can allow your site visitor to search some content within your site




Step1.
Add div section to you page using the div tag.

Step 2.
Add form element inside the div with method attribute set to GET and action attribute set to “http://www.google.com/search”.

Step3.
Add input field with type “text” with id attribute set to “query”.
Add input type with type “submit”
Add an input field with type “hidden” with name attribute set to “sitesearch” and value attribute set to your site URL.

Save and test your page by entering some keyword for searching. Enjoy…

Rotating Div with CSS3

In this demo I am explaining you how to rotate div with help of CSS3 transform property.

Step 1.

Create a simple HTML page with two div element as shown bleow

Save this page as testrotate.html.

Step 2.

Now add style tag in the head section of your page

Step 3

Add following style to div selector inside the style tag

div{

width:150px;

height:75px;

background-color:yellow;

border:2px solid black;

}

Save and test the page you will see two div with yellow background

Step 4

Now add another style for second div using id selector below previous style

div#my{

background-color:cyan;

transform:rotate(60deg);

-moz-transform:rotate(60deg); /* For Firefox */

-webkit-transform:rotate(60deg); /* For Safari and Chrome */

-o-transform:rotate(60deg); /* For Opera */

}

Save and test the web page. You will see the the div with id my will transformed with angle 60 deg.

*Note this feature is not supported in Internet explorer.

Here is you final page with rotated div…. Enjoy