We are starting from the nice symbols from Sophis set.
Here’s the screenshot of PDF sapmle. So let’s play with this symbols.

At first, create a blank document (File->New or Ctrl+N), width – 200px, height – 200px. You can set the white background at “Background Contents” option or simply fill the default layer.

Next – create a new layer (Layer->New->Layer… or Ctrl+Shift+N). Pick “Elliptical Marquee Tool”, select circle holding Shift, something like that:

Then you can fill selected area (”Paint Bucket Tool”) with some color to play with layer styles.

Go to layer styles (Layer->Layer Style->Blending Options or doubleclick on layer) and apply “Inner Shadow” with such options

Next – create smaller circle in the center of bigger one. Ctrl+Click on the circle layer icon to select all the layer area. To center the selection simply hold Shift+Alt while modyfiyng selection (Select->Transform Selection). Something like that:

Now you can create a new layer for the smaller circle, of course you were able to create that layer earlier (when selecting the new area). Fill the layer with some color and go to layer “Blending Options”. We’ll apply “Inner Shadow” and “Color Overlay” to make a little glass effect. The inner shadow color: #003483 and the color overlay: #dbe0e3.

Next step – to improve background circle. Select smaller layer (Ctrl+Click on layer icon), go to Select->Modify->Contract and Contract the selection with 1 px. The next – select background circle layer and hit del to delete unnecessary area. Now you will see

To add glass effect we will add a new gradient layer. Create a new layer and select smaller circle area (Ctrl+Click on layer icon), then pick Gradient tool with a white foreground color. Start to drag gradient from the center of the circle.

The result:

And now, the hardest part – creating the crystal swirl. Pick the “Pen Tool” and select the area to modify:

Click on the center of the bottom border and drag mouse to the bottom-right to make a symmetric swirl:

Now you are able to cut off unnecessary space. Rasterize the layer (Layer->Rasterize->Layer or right-click on the layer), select the smaller circle area and invert selection (Select->Inverse or Ctrl+Shift+I) – you wil see something like that:

Hit Del to remove selected part of the layer, and make it a little smaller (Edit->Free Transform):

After applying the transformation, apply a fade out effect to the swirl. You can do it by adding the layer mask and Gradient Tool. So, add the layer mask (little icon at the layer menu) and select rectangle area around the layer. Now pick the Gradient tool (you will notice foreground/background colors switched to white/black, also note the gradient options). Now drag the mouse to the top and you will see your swirl fading out, like here:

Finally, the last step – add the “i” symbol (place it under the swirl layer, “Times New Roman”, 157pt) with the following layer styles (”Bevel and Emboss”, “Gradient Overlay”, “Stroke”):


That’s it. Enjoy.

Don’t forget to download the icon set. And wait the next part of Sophis tutorial.

This PSD was downloaded 14383 times.

First, we need new document (Ctrl + N) and new layer (Shift + Ctrl + N) to work. I’ve used 200×100 canvas and 105×29 button layer.

Apply some (no matter what) color to selected area

Let’s now work with the styles. First – select true glass gradient colors.
I’ve used : #656a6d – #000000; #434343 – #dedede;
Something like that:

Apply gradient style to layer and you should see:

The next – add some stroke to layer
I’ve used 1 px dark stroke

The result

The next step – apply another inner stroke, since it’s impossible – we’ll use “Inner Glow”

The result

The button is almost done, except one little thing – tiny rounded corners
I’ve used rectangle-circle technique to select soft corners (don’t forget to hold Shift while selecting rectangle)
To understand better what’s going on – disable styles

Deselect all corners except left top, then hit del. To select and delete other corners you can transform selection (Select->Transform selection) or copy the top left corner to another layer and then edit it. The second solution is prefarable cause you’ll get completely identycal corners
Enable styles and you will see:

That’s it!

You can compare my result with Vista screenshots

Save this style to use in future (Blending Options->New style)
As the bonus – another 9 buttons for you. Enjoy!

Here you can find a few very useful solutions to track link clicking or whatever-action-you-want-to-track.

Basic solutions

This file was downloaded 683 times.

The first solution – to redeclare global default functions:

document.onclick = function(e) {
	e = e || event;
	var el = e.target || e.srcElement;
	if (el.tagName=='A')
	{
		alert('The link was clicked');
	}
}

Pretty simple, right?
Let’s improve it to make useful stats:

document.onclick = function(e) {
	e = e || event;
	var el = e.target || e.srcElement;
	//el - clicked element
	if (el.tagName=='A' && el.target=='_blank')
	{
		//Here we can send ajax response to our stat
		//script to collect the outbound link anchors
		SendResponse('stat.php', el.innerHTML);
		/*Keep in mind - you can do whatever you want
		with that data -
		store time, referer, page name or other
		details
		You can even build click map of single page
		or entier web-site*/
	}
}

This solution works great in IE6-7, FF 1.5-2.0 and Opera 9
Another solution – dynamically add onclick events to target elements
Here’s the code:

function addEventListener(instance, eventName, listener) {
	var listenerFn = listener;
	if (instance.addEventListener)
	{
		instance.addEventListener(eventName, listenerFn, false);
	} else if (instance.attachEvent)
	{
		listenerFn = function() {listener(window.event);}
		instance.attachEvent("on" + eventName, listenerFn);
	} else
	{
		throw new Error("Event registration not supported");
	}
	return
	{
		instance: instance,
		name: eventName,
		listener: listenerFn ;
	}
}
function AddOnclickToAllLinks() {
	for (i=0; i<document.links.length; i++)
	{
		//Check for outbound parameter - target
		if (document.links[i].target == '_blank')
		addEventListener(document.links[i],
					"click",
		function() {alert("You clicked me!");});
	}
}

Let’s add onload=”AddOnclickToAllLinks();” to <body> tag.
You see – now you have onclicks on every outbound link.

Ok, let’s learn now how to implement this code and solutions in real tasks

Sample script : Collecting exit-pages

I’m sure you have hard-structured web-site, or may be not, anyway – some template system should be in use.

So the first step – is to paste .js library code to your output HTML

Don’t forget to save your Javascript code to independent file (in example js-code was saved to /js_library/ directory and named “tracker.js”)
It doesn’t matter what solution will you choose (first with onclick redeclare or second with dynamic onclick declare)

it should look like this:

……

<meta name=”robots” content=”index, follow” />

<script src=”/js_library/tracker.js” mce_src=”/js_library/tracker.js” type=”"></script>

</head>

……

Here’s what I’ve saved to .js file:

document.onclick = function(e){
	e = e || event;
	var el = e.target || e.srcElement;
	if (el.tagName=='A' && el.target=='_blank')
	{
		makeRequest('stat.php');
	}
}

function makeRequest(url) {
var http_request = false;
if (window.XMLHttpRequest)
{
	http_request = new XMLHttpRequest();
	if (http_request.overrideMimeType)
	{
		http_request.overrideMimeType('text/xml');
	}
} else if (window.ActiveXObject)
	{
		try
	        {
		http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e)
		{
		try
	        {
		http_request = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e)
		{}
	}
}
if (!http_request)
{
	return false;
}
	http_request.onreadystatechange = function()
	{};
	http_request.open('GET', url, true);
	http_request.send(null);
}

I’ve used the simplest way to send GET HTTP request (function makeRequest) – you are able to use your favourite AJAX-framework.

Collecting the stats on the server-side

The simpliest way – not to use any frameworks or classes, keep in mind – the more visitors you have – the more stats will collect your script. Be aware of server’s overload.

Mysql table

Create “stats” table in PhpMyAdmin or whatever you use to manage your MySql server.

CREATE TABLE `stats` (
`id` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`ip` VARCHAR( 20 ) NOT NULL ,
`page` VARCHAR( 512 ) NOT NULL ,
`time` INT( 11 ) NOT NULL
) ENGINE = MYISAM ;

Now we have the table.
The next code is just a sample of tiny stats collector written on PHP:

<?php
	//Config
	$db_host = "localhost";
	$db_user = "root";
	$db_password = "";
	$db_basename = "tracker";
	$db_debug = false;

	//Tiny DB-lib
	include('lib_db.php');
	//Connecting to DB
	sql_establish();

	//Current time
	$tracker_time = time();
	//Tracked page
	$tracker_page = mysql_real_escape_string(
	substr(getenv("HTTP_REFERER"), 0, 512));
	//IP of the visitor
	$tracker_ip = getenv("REMOTE_ADDR");

	//Checking for double
	$double_check = sql_first_query(
		"SELECT id FROM stats WHERE ip = '$tracker_ip'
					AND page = '$tracker_page'
					AND time = $tracker_time");

	if (!is_array($double_check) || empty($double_check))
	{
		//Inserting new query
		sql_db_query("INSERT INTO stats
		VALUES('', '$tracker_ip', '$tracker_page', $tracker_time)");
	}
?>

That’s it!. You’ve just created a simple exit-page tracker.

P.S. For lazy guys

You can easily track your link by pasting onclick events on every link manually.
This file was downloaded 683 times.