jQuery quick start

Standard

What is jQuery?

  • jQuery is a huge library of JavaScript Functions.

Why jQuery?

You can add cool effects to your web pages such as:

  • HTML element manipulation, CSS manipulation, Hide and show boxes, FadeIn & FadeOut effect, Light box popups, Slide in and Slide out boxes and many more…
  • Its simple and easy to use…

How to start?

  • First thing to start with is to download jQuery file from jQuery.com.
  • Now include the file in your html page as follows:

<head>

<script type=”text/javascript” src=”jquery.js”></script>

</head>

Now you are ready to go… lets start with simple examples now

Example 1: Hiding a biv on click by using ” hide() ” function

Following is a simple  ” hide() ” function to hide a div or content

<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“#test”).hide(“slow”);
});
});
</script>

NOTE: With no parameters, the .hide() method is the simplest way to hide an element.
hide(“slow”) where slow is a parameter which will give a slow hiding effect to the div.

Now in the body tag we declare the div as follows:

<body>

<div style=”background-color:#f2f2f2; padding:20px; border:1px solid #333;” id=”test”><p >This is another paragraph.</p></div>
<br /><button>Click me</button>

</body>

/************** Here is the complete source code ********************/

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#test").hide("slow");
});
});
</script>
</head>
<body>
<div style="background-color:#f2f2f2; padding:20px; border:1px solid #333;" id="test">
<p >This is another paragraph.</p>
</div>
<br />
<button>Click me</button>
</body>
</html>

Converting an image to black & white and making selected areas colored

Standard

This tutorial will help you learn how to convert an image to black and white and making certain areas of the image colored.

Here is an example image with I created:

Step 1: Open your picture in photoshop

Step 2: Create and duplicate of the original image and you can change the brightness and contrast of the picture and set which looks best. You can also play around with the Blending modes, in this example I set the blending mode of the duplicate layer to “Overlay” as shown below:

Step 3: Now create another duplicate of the original image and change it to black and white.  To convert the image to black and white Go to Images >Adjustments > Desaturate or you can make adjustments by going to Images >Black & White as shown below:

Step 4: Remember your black and white image layer must be over the colored image layer. Now create a vector mask on this black and white image layer and select brush tool and start painting the parts of the image you want in colored as shown in the below image:

Step 5: This is how it looks like

That’s it … you can play around with this technique and use your creativity to create more interesting images. Have Fun 🙂

Adding multicolor effect to your Photos using photoshop

Standard


You can add new energy and color to your photos in few simple steps :

Step 1: Open the picture in Photoshop

Step 2: At the bottom of the Layers palette you will find an option to “Creat New Fill or Adjustment Layer” option, Click on that and select  Hue/Saturation option from the list,  you will see an adjustment palette with options to adjust Hue, Saturation and Lightness. Set Saturation to -50 or -70 … you can play around with this value and set a value which looks best on your picture. Once you change saturation value your picture fads as shown below:

Step 3: Now create a new layer and set its blending mode to “Soft Light”. Now take a hard brush and paint the new layer. Choose a 48px hard brush and to paint as shown below. You can choose the colors you like.

Step4: Now select the color layer and Go to Filter > Blur > Gaussian Blur > 80 pixels you can play around with this value and set a value that looks best on your picture.

Step5: You can now adjust the brightness and contrast of the picture layer so that the picture looks bright. Here is the final result of how the picture looks…

What your web design says about you

Standard

A website has many different components which together produce the final result which your see on your browser window. The colors, fonts, layouts which you use in your website each play a part in determining what your site will say to the viewers. But what does your web design say about you? This is an interesting infographic which tells what you are based on the colors, fonts etc you use on your web design.