Archive for the Category ◊ Tutorials ◊

Author: Gavin
• Wednesday, March 31st, 2010

Im sure most of us were curious as to How a small Icon appears in the address bar – next to the URL in certain sites.

http://www.gavinmendes.com/blog_images/totu2.jpg

So Here’s how we get that :

First Create an Image in JPG / Gif / BMP / Etc in     24 x 24 Px
http://www.gavinmendes.com/blog_images/tuto1.jpg

Save it and Upload it in your Root Directory . I suggest not to upload it in any sub folder – although it might work.

http://www.gavinmendes.com/blog_images/tuto3.jpg

And now in the HEAD TAG of your HTML page place the following code :
<link rel=”shortcut icon” href=”imagename.jpg” />

* I’ve tested this Mozilla and Safari and it works fine . If in case you know of any other method of getting the Icon – Please share it with us !!!

Author: Gavin
• Thursday, March 04th, 2010

If in case you copy and paste an e-mail address from your inbox into dreamweaver it normally automatically generates the e-mail link code . If it does’nt here’s what needs to be done . You will also need these codes if your editing in notepad or if your linking a word/ sentence to the e-mail .

example :
<a href=” mailto:example@example.com”> example@example.com </a>

As mentioned – you can also link text
example :
<a href=”mailto:example@example.com” > text example here </a>

To add Cc  :

<a href="mailto:example@example.com?cc=example2@example.com">example@example.com</a>

Similarly for Bcc :

<a href="mailto:example@example.com?bcc=example3@example.com">example@example.com</a>

To add SUBJECT :
<a href=”mailto:example@example.com ?subject=example”> example@example.com </a>

If your adding both SUBJECT and CC together then separate the two with an ” & ” between them.
example :
<a href=”mailto:example@example.com ?cc=example2@example.com&subject=example” > example@example.com</a>

Author: Gavin
• Wednesday, February 24th, 2010

So today I’m going to show the basic steps on How to create a “James Cameron Avatar” or a “na’vi avatar” as its commonly know as on the web.

These are just going to be the basic steps and not the complete tutorial – Cos I think each picture will have its own individual tweaking to work on . And that will also leave open a scope for improvement in this tutorial !!!

The Finished Pics :

http://www.gavinmendes.com/blog_images/gavtar2.jpg http://www.gavinmendes.com/blog_images/avatar_face.jpg

So First in Photoshop open your Pic and with the lasso or pen tool select the skin area’s and then open -> Hue and Saturation . -> Turn the Hue all the way upto +180 and click OKhttp://www.gavinmendes.com/blog_images/gavtar1.jpg

Select the Lips and the Lower Nose area with the lasso or Pen tool -> Copy and paste the selection on a new layer -> open Hue and Saturation and turn the Hue to +100 ( or whatever shade of pink U’d prefer ) -> Reduce the opacity to 50 ( or less till you get a good blend with the purple ).
http://www.gavinmendes.com/blog_images/gavtar4.jpg

Then for the eyes Go to filter -> Liquify . Select the Bloat Tool and use it on the eyes ( click around 2-3 times on center of the eye ) .
http://www.gavinmendes.com/blog_images/gavtar5.jpg

If  you want to use the proper Avatar eyes you can cut out the eyes from your pic and use these Avatar eyes .
http://www.gavinmendes.com/blog_images/avatar_eye.jpg

http://www.gavinmendes.com/blog_images/gavtar6.jpg

For the skin . download a zebra texture and with the liquify tool adjust it like I have and then Transform -> Flip Horizontal .  ( you can right click and copy the below image ) .
http://www.gavinmendes.com/Images/avatar_zebra_texture.jpg

set the texture over the face and change the Blend mode to Soft light . Reduce the opacity ( according to your pic ) . With the Eraser – remove the unwanted part out side the face . Do the same for other parts of the skin.http://www.gavinmendes.com/blog_images/gavtar7.jpg

On a New layer draw some small dots like the “Avatar freckles ” . I used the color #d1dfea . and then On the Layer Style -> select Outer Glow and set the below parameters .http://www.gavinmendes.com/blog_images/gavtar8.jpg

So that’s a Basic Avatar here and feel free to play around and add improvements . I later added the ears from the Below Pic .
http://filmwonk.files.wordpress.com/2009/12/avatar-sully-neytiri.jpg

Author: Gavin
• Wednesday, February 10th, 2010

Here’s one of the simplest ways of creating an animated picture.
1) We need to have 2 or more versions of the pic (or 2 or more pic’s) in separate layers in Photoshop .
2)Now select WINDOW -> ANIMATION
3) In the Animation Timeline , click the drop down arrow on the top right. And select “Make frames from Layers”
4) And finally adjust the time on each frame ( as the default is pretty fast). Click the PLAY button to Preview.
5) “Save as” or “Save for web and devices” . Make sure its selected as Gif ( if its selected on Jpeg or any other ext the animation will not play).
Keep in mind that certain Image Preview Software’s like “Nero Photosnap Viewer” do not play animations .
Animated Gif Cartoon

Author: Gavin
• Friday, February 05th, 2010

Im not sure if the title is right. But anyways this tutorial is very helpful if you want to remove vehicles or passer-buys from a still image . For the example I’ve taken out 4 picture’s that I clicked today evening. Its just a 2 step tutorial , wherein Photoshop will examine multiple images and average them – And I’m sure u’ll are going to find it pretty interesting !!!

Remember to use at least 3 images from the same angle

Author: Gavin
• Saturday, January 16th, 2010

Hi Narendra , this post will give the basic instructions for using worpress in ur website or creating a website in wordpress. I presume U’ve already done the initial step that I instructed that is : download wordpress and unzip it .

Now U can rename the default folder that is “Wordpress” to the desired name. In the case here I named the folder “blog” therefore the url is “www.gavinmendes.com/blog”  .

Now the only page that you need to edit is wp-config-sample.php. So Bfore that create an SQL database and then fill in the details in wp-config-sample.php . Rename it to wp-config.php and save.

Now upload the entire folder “Wordpress” ( or whatever name U’ve given it ) to your server .

note : if your hosting provider has an option called “FANTASTICO” ( check in the control panel)- U can then ignore all the above steps and just install wordpress from there.  U don’t have to create an SQL database or folder called blog . Fantastico will do it automatically.

Now go to ur browser and type ur url . In this case www.gavinmendes.com/blog . And if all works well it will redirect to http://www.gavinmendes.com/blog/wp-admin/install.php , fill in the info and once the blog is set up . U can loggin jus go through all the options on the dashboard .

Log In and Log Out are standard options which are there by default. If U want members to log in as well go to Settings > General and check “Anyone can register” .

If in case U want to add more features go to pluggin > Add New – and install additional features to ur blog .

The most imp point is “How to make wordpress look more like ur website or How to make it look like a website” .  There are 2 ways I would suggest .      Go to themes and install the theme that fits your website the best . Install it and then download it to ur remote computer . and edit the different attributes such as header.php , footer.php , images , etc.

The other way is to create ur own theme and then upload it and  activate it on ur blog. But I found this  too complicated as its time consuming and U need to have a good knowledge of php.

I guess this covers all ur queries , let me know if U have any other doubts !!!

Category: Tutorials  | Tags: , ,  | 5 Comments
Author: Gavin
• Thursday, January 14th, 2010

Here’s  a small tutorial I had done some time back.  Its very easy to follow ,But do write back in case of any queries …

Author: Gavin
• Thursday, January 14th, 2010

I just came accross this script while I was going through an old website I had done . Its a java script for Disabling the right click and save option. Its idealy used if U dont want viewers to copy pics from ur website.

<script language=JavaScript>
<!–

//Disable right mouse click Script
//By Gavin (gavinmendes@gmail.com)

var message=”Function Disabled!”;

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function(“alert(message);return false”)

// –>
</script>

If in case it does’nt work . U might want to check the following : 1) make sure the script is in the body of your HTML page, 2) Ideally this script is meant for HTML only ( I dont think it would work well in php, as the scripts might conflict) , The script should not be inside any angle brackets of a tag – example < > .