TutWow

Create a Simple and Secure Contact Form with jQuery and PHP

Ben Lind — Sat, 21 Jan 2012 20:45:55 +0000

Today we will be creating a simple yet secure contact form with PHP and Javascript. I have used this contact form on multiple websites, and I find it to be very easy to use and install, so you should enjoy it.

See the final result in action.

Download the files for this tutorial.

Step 1 – Download the Files

Before we get started, go download the following javascript files:

The latest minified version of jQuery
The jQuery Validate plugin (click the Download link on the page, unzip the downloaded file, and then copy out the jquery.validate.js file)
The jQuery Form plugin

After you have downloaded those three files, place them in a folder named js in the directory where you want to have your contact form. Now you’re ready to start crafting the contact form!

Step 2 – HTML

First off, make sure that you have a basic understanding of HTML, PHP, and Javascript. W3schools.com is a great resource for quickly getting up to speed with these languages. Once you have a grip of these technologies, you should be able to understand what is going on in this tutorial much better.

To start off, create a new file on your server named contact.html. It can be named whatever you want (or you can add the contact form to an existing file), but for the sake of this tutorial we will use contact.html.

In this file, add the following code:



	
		Contact Form

		

		
		
		
		
	
	
		
			Contact Sweetness
			
				
					
						Name:
						
					
					
						Email:
						
					
					
						Message:

This code contains the structure for our contact form. Let’s take a look at what each section is doing.



	
		Contact Form

These lines set up the basic structure of the HTML document, and they should be second nature to you.

First we include the CSS stylesheet that we will be creating shortly, and then we proceed to include all three of the javascript files that we just downloaded into the js folder. The last line is including contact.js, a file we will create later on.

	
	
		
			Contact Sweetness

This ends the head and starts the body of the page. We set up a “wrap” div that will be used to style the contact form with CSS later on, and add a heading at the top of the new div. Then we start the form that will contain all of the inputs where the user will type in their info and message. The action of the form is set to processForm.php, another file which we will create later on. The reason we add this file to the action attribute of the form instead of just doing all of the processing with javascript is that someone without javascript enabled will be able to use the form as well as someone with javascript enabled. The key here is progressive enhancement, or making sure that users with less capabilities will still be able to use your website. Always start by coding for the lowest common denominator – users who don’t have javascript in this case – and then adding better functionality for users with better browsers/more capable systems.

				
					
						Name:
						
					
					
						Email:
						
					
					
						Message:

These lines contain the actual input areas for the contact form. As you can see, I am using a table to format the form, even though tables are typically frowned upon in the design community. I find that in certain situations, when I want to easily align different elements in nice grids, tables are just the easiest option, but you can of course use divs if that’s what you prefer. Each input element has both an id and a name which are needed for processing the input with javascript and PHP and for styling the form with CSS. We’ll see how all of these values work together soon.

Here we are basically just closing all of the tags that we opened up above. However, line 36 contains a new “response” div that will contain the response of the processForm.php file when we try to submit a message to it. Again, you will see how this comes into play soon.

Now that you have this basic HTML structure, you should see something like this when you open up contact.html in your browser:

It’s not too pretty yet, but that’s where the next step comes in…

Step 3 – CSS

I always love it when I get to the CSS portion of my designing. There’s something about taking an ugly and deformed hunk of content and crafting it to beautiful pixel perfection that just sets my heart to racing. Okay, that might be going a bit far, but that’s not really all that far off.

Start by creating a new file next to contact.html named style.css. Remember that line in the head of contact.html where we included style.css? Yup, this is the very same one. What a funny coincidence. Anyway, in this new css file, put in this code:

body {
	background: #24333d;
	color: #4a606f;
	font: 21px 'Helvetica', 'Arial', sans-serif;
	margin: 0;
	padding: 50px 0 0;
}

h1 {
	color: #24333c;
	font-size: 48px;
	font-weight: normal;
	margin: 25px 0 15px;
	text-align: center;
}

#wrap {
	background: #eaf0f4;
	border: 5px solid #7a91a1;
	margin: auto;
	width: 500px;
}

form {
	padding: 0;
	margin: 0 0 20px;
}
table {
	margin: 0 auto;
}
tr, td, input, textarea {
	margin: 0;
	padding: 0;
}
td {
	padding: 0 0 5px;
}
tr td:first-child {
	padding-right: 10px;
	padding-top: 11px;
	text-align: right;
	vertical-align: top;
}
.error[generated=true] {
	color: #dc0000;
	font-size: 16px;
	padding: 5px 0 2px 5px;
}
tr.error td {
	padding: 0;
}
input, textarea {
	background: #FFF;
	border: 3px solid #7a91a1;
	font: inherit;
	font-size: 16px;
	line-height: 29px;
	min-height: 30px;
	padding: 5px 10px;
	width: 300px;
}
input:focus, textarea:focus {
	border-color: #b0c3d0;
	outline: none;
}
textarea {
	height: 240px;
	resize: vertical;
}
input[type=submit] {
	background: #24333d;
	color: #FFF;
	font: inherit;
	padding: 7px 20px;
	width: auto;
}

#response {
	margin-bottom: 20px;
	text-align: center;
}
#response .success {
	color: #08a300;
}
#response .failure {
	color: #dc0000;
}

Now I could go through each selector and tell you exactly what everything in here does, but that would ruin the fun of you figuring it out yourself (plus it would take a long time for me to write and for you to read, which would be boring for everyone). So take a look at it yourself and see if you can figure out everything that’s going on. If you run into something you don’t understand, there’s this amazing tool that can help you with basically every aspect of coding that you should take a look at. It’s a lifesaver and you should learn to use it if you ever want to get anywhere with your web design.

Some of the things in that CSS have to do with errors and responses, and you probably don’t know what those mean yet. Don’t fret, my friend, for soon you will be an expert on errors and responses – just as soon as we take a look at the javascript portion of this contact form. Now you should have something that looks like this if you refresh contact.html:

Not too bad!

Step 4 – Javascript

Now we get to the fun part – making everything actually work (to some extent)! More specifically, by adding javascript to this contact form, we will be adding validation (making sure the user enters acceptable things into the different fields) and ajax in a nice blend of usefulness. You’ll see what I mean soon enough.

Remember when we referenced contact.js in the HTML file? That’s right, now it’s time to create it! Here we go: inside the js folder that you created in step 1, create a new file and name it contact.js. This will hold all of our jQuery goodness. More specifically, it will look like this:

$(function() {
	// Validate the contact form
  $('#contactform').validate({
  	// Specify what the errors should look like
  	// when they are dynamically added to the form
  	errorElement: "label",
  	wrapper: "td",
  	errorPlacement: function(error, element) {
  		error.insertBefore( element.parent().parent() );
  		error.wrap("");
  		$("").insertBefore(error);
  	},

  	// Add requirements to each of the fields
  	rules: {
  		name: {
  			required: true,
  			minlength: 2
  		},
  		email: {
  			required: true,
  			email: true
  		},
  		message: {
  			required: true,
  			minlength: 10
  		}
  	},

  	// Specify what error messages to display
  	// when the user does something horrid
  	messages: {
  		name: {
  			required: "Please enter your name.",
  			minlength: jQuery.format("At least {0} characters required.")
  		},
  		email: {
  			required: "Please enter your email.",
  			email: "Please enter a valid email."
  		},
  		message: {
  			required: "Please enter a message.",
  			minlength: jQuery.format("At least {0} characters required.")
  		}
  	},

  	// Use Ajax to send everything to processForm.php
  	submitHandler: function(form) {
  		$("#send").attr("value", "Sending...");
  		$(form).ajaxSubmit({
  			target: "#response",
  			success: function(responseText, statusText, xhr, $form) {
  				$(form).slideUp("fast");
  				$("#response").html(responseText).hide().slideDown("fast");
  			}
  		});
  		return false;
  	}
  });
});

Yes, that’s a lot of code to wade through. Let’s get into it.

$(function() {

If you have used jQuery before, this should look very familiar. This is jQuery’s way of waiting until the page is loaded to execute something. Anything inside the function’s curly brackets will run as soon as the page has finished loading.

// Validate the contact form
  $('#contactform').validate({

This is telling the Validate plugin that we downloaded and included earlier to validate the #contactform form. By using a plugin instead of validating everything ourselves, everything is just easier for everyone.

// Specify what the errors should look like
  	// when they are dynamically added to the form
  	errorElement: "label",
  	wrapper: "td",
  	errorPlacement: function(error, element) {
  		error.insertBefore( element.parent().parent() );
  		error.wrap("");
  		$("").insertBefore(error);
  	},

Though the validate() function works great without any help, we need to give it some extra info so that it will display everything nicely. These first few options deal with where we should display errors when the user types in something they shouldn’t. You can read about all of the possible options on this page.

Here’s what the different arguments do:

errorElement: What element the error message will be placed in. The reason I chose to put it in a label is so that if the user clicks on the error, it will automatically focus the correct text box for them.
wrapper: Basically like errorElement – it wraps the error, including the label, in a td tag.
errorPlacement: A function that specifies where the error should be placed after it is generated. It looks complicated, but really all we are doing is putting it in a tr element next to the tr that the input box is in, and adding an empty td tag before the error to push the error to the right. You’ll see what I mean if you take a look at the code of the page after an error is generated.

  	// Add requirements to each of the fields
  	rules: {
  		name: {
  			required: true,
  			minlength: 2
  		},
  		email: {
  			required: true,
  			email: true
  		},
  		message: {
  			required: true,
  			minlength: 10
  		}
  	},

The rules option specifies the details of each input element in the contact form. As you can see, every one of the inputs is required, and the name and message text boxes have minimum amounts of characters allowed. The email text box has a special parameter which tells the Validate plugin that it is an email element. This ensures that any email entered into the form will truly be an email and not just something like “asdf.”

  	// Specify what error messages to display
  	// when the user does something horrid
  	messages: {
  		name: {
  			required: "Please enter your name.",
  			minlength: jQuery.format("At least {0} characters required.")
  		},
  		email: {
  			required: "Please enter your email.",
  			email: "Please enter a valid email."
  		},
  		message: {
  			required: "Please enter a message.",
  			minlength: jQuery.format("At least {0} characters required.")
  		}
  	},

As you can see, this messages option looks suspiciously like the rules option we just looked at. The reason for this is that in this option we specify what error messages to show the user when they break one of the rules we just set up. For example, if the name that they enter doesn’t meet the minimum length requirement, it will say “At least 2 characters required.”

  	// Use Ajax to send everything to processForm.php
  	submitHandler: function(form) {

This line of code is yet another option that we’re passing the Validate plugin, this time specifying what should happen when the form is submitted (with no errors). Let’s take a look at what’s going to happen when the Send button is clicked:

$("#send").attr("value", "Sending...");

So when the form is submitted, we begin by changing the text in the submit button from “Send!” to “Sending….” The reason for this is that the Ajax server request takes a few seconds, so we want to make sure that the user knows something’s going on.

  		$(form).ajaxSubmit({
  			success: function(responseText, statusText, xhr, $form) {
  				$(form).slideUp("fast");
  				$("#response").html(responseText).hide().slideDown("fast");
  			}
  		});

The cool thing about this form is that it doesn’t reload the page when the Send button is pressed, it just sends the email asynchronously (in the background). It’s called using Ajax, and it’s pretty nifty. These lines of code use the other plugin we downloaded at the start – the Form plugin – to do all the Ajax kungfooery. We pass just one parameter to the ajaxSubmit function: success. This tells the form what to do when the form is submitted successfully. In there we tell the entire form to hide itself by sliding up, and we then insert the response text into the #response div.

Here’s how it works: The user fills in the form and hits the send button, and the content is sent to processForm.php to be emailed. If there are no errors with the sending of the email and it is sent successfully, the processForm file sends back a message to contact.html saying “Success!” However, if there is an error along the way, it sends back a “Failed!” message. This message (either success or failure) is then put into the #response div.

That’s it for the javascript! Now the form should validate correctly, and if you type in some bogus information, it will give you pretty errors like this:

Step 5 – PHP

We’re onto the final section of our little contact form – PHP! The purpose of the PHP is first off to actually send the message that the user typed into the form, and secondly to do some additional error validation. Why do we need to do more validation, you ask? Why can’t we just rely on the javascript to catch everything? Well, think about what would happen if the user doesn’t have javascript enabled when they submit the form – no errors will occur! All of their data, including anything that might be erroneous, will be emailed to you, and that’s not what you want. So we’re forced to repeat all of the validating that we did before in javascript, this time in PHP. Here we go!

Create another file – the final file – and name it processForm.php. In it, put the following code:

 $value) {
	if(ini_get('magic_quotes_gpc'))
		$_POST[$key] = stripslashes($_POST[$key]);

	$_POST[$key] = htmlspecialchars(strip_tags($_POST[$key]));
}

// Assign the input values to variables for easy reference
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

// Test input values for errors
$errors = array();
if(strlen($name) < 2) {
	if(!$name) {
		$errors[] = "You must enter a name.";
	} else {
		$errors[] = "Name must be at least 2 characters.";
	}
}
if(!$email) {
	$errors[] = "You must enter an email.";
} else if(!validEmail($email)) {
	$errors[] = "You must enter a valid email.";
}
if(strlen($message) < 10) {
	if(!$message) {
		$errors[] = "You must enter a message.";
	} else {
		$errors[] = "Message must be at least 10 characters.";
	}
}

if($errors) {
	// Output errors and die with a failure message
	$errortext = "";
	foreach($errors as $error) {
		$errortext .= "".$error."";
	}
	die("The following errors occured:". $errortext ."");
}

// Send the email
$to = "YOUR_EMAIL";
$subject = "Contact Form: $name";
$message = "$message";
$headers = "From: $email";

mail($to, $subject, $message, $headers);

// Die with a success message
die("Success! Your message has been sent.");

// A function that checks to see if
// an email is valid
function validEmail($email)
{
   $isValid = true;
   $atIndex = strrpos($email, "@");
   if (is_bool($atIndex) && !$atIndex)
   {
      $isValid = false;
   }
   else
   {
      $domain = substr($email, $atIndex+1);
      $local = substr($email, 0, $atIndex);
      $localLen = strlen($local);
      $domainLen = strlen($domain);
      if ($localLen < 1 || $localLen > 64)
      {
         // local part length exceeded
         $isValid = false;
      }
      else if ($domainLen < 1 || $domainLen > 255)
      {
         // domain part length exceeded
         $isValid = false;
      }
      else if ($local[0] == '.' || $local[$localLen-1] == '.')
      {
         // local part starts or ends with '.'
         $isValid = false;
      }
      else if (preg_match('/\\.\\./', $local))
      {
         // local part has two consecutive dots
         $isValid = false;
      }
      else if (!preg_match('/^[A-Za-z0-9\\-\\.]+$/', $domain))
      {
         // character not valid in domain part
         $isValid = false;
      }
      else if (preg_match('/\\.\\./', $domain))
      {
         // domain part has two consecutive dots
         $isValid = false;
      }
      else if(!preg_match('/^(\\\\.|[A-Za-z0-9!#%&`_=\\/$\'*+?^{}|~.-])+$/',
                 str_replace("\\\\","",$local)))
      {
         // character not valid in local part unless
         // local part is quoted
         if (!preg_match('/^"(\\\\"|[^"])+"$/',
             str_replace("\\\\","",$local)))
         {
            $isValid = false;
         }
      }
      if ($isValid && !(checkdnsrr($domain,"MX") || checkdnsrr($domain,"A")))
      {
         // domain not found in DNS
         $isValid = false;
      }
   }
   return $isValid;
}

?>

That’s definitely the biggest file we’ve had yet. Let’s take a look at what’s going on.

 $value) {
	if(ini_get('magic_quotes_gpc'))
		$_POST[$key] = stripslashes($_POST[$key]);

	$_POST[$key] = htmlspecialchars(strip_tags($_POST[$key]));
}

This foreach statement is reading all of the variables in the $_POST array and sanitizing them. When you sanitize data, you make sure that it doesn’t contain anything harmful that could potentially hurt your website.

// Assign the input values to variables for easy reference
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

As the comment states, all we are doing here is putting each $_POST option into its own variable. That way it will be easier to access the variables later on (less typing).

// Test input values for errors
$errors = array();
if(strlen($name) < 2) {
	if(!$name) {
		$errors[] = "You must enter a name.";
	} else {
		$errors[] = "Name must be at least 2 characters.";
	}
}
if(!$email) {
	$errors[] = "You must enter an email.";
} else if(!validEmail($email)) {
	$errors[] = "You must enter a valid email.";
}
if(strlen($message) < 10) {
	if(!$message) {
		$errors[] = "You must enter a message.";
	} else {
		$errors[] = "Message must be at least 10 characters.";
	}
}

Here we have the actual error testing for each of the variables we just initiated. As you can see, we are basically just performing all of the tests that we did in the Javascript. Every time we encounter an error, we pass the appropriate error message to the $errors array so that we can output all of the errors to the user.

if($errors) {
	// Output errors and die with a failure message
	$errortext = "";
	foreach($errors as $error) {
		$errortext .= "".$error."";
	}
	die("The following errors occured:". $errortext ."");
}

If there were any errors, we output them to the screen in a nicely formatted list, and then we kill the page using the handy die() function.

// Send the email
$to = "YOUR_EMAIL";
$subject = "Contact Form: $name";
$message = "$message";
$headers = "From: $email";

mail($to, $subject, $message, $headers);

// Die with a success message
die("Success! Your message has been sent.");

Now we get to actually send the email! Whoop! First we set all the appropriate variables (change “YOUR_EMAIL” to whatever email address you want the messages to be sent to), and then we use PHP’s built-in mail() function to send the email.

That last line (the die function) is very important. It tells the scrip to kill itself once the email is sent, which does one of two things. If the user has javascript enabled, this die function will send the success message contained in itself back to the javascript file we created in the last step, which will in turn update the #response div with the success text. However, if the user doesn’t have javascript enabled, the script will simply die and output the success message. It’s kind of like killing two birds with one stone, isn’t it?

// A function that checks to see if
// an email is valid
function validEmail($email)
{
   $isValid = true;
   $atIndex = strrpos($email, "@");
   if (is_bool($atIndex) && !$atIndex)
   {
      $isValid = false;
   }
   else
   {
      $domain = substr($email, $atIndex+1);
      $local = substr($email, 0, $atIndex);
      $localLen = strlen($local);
      $domainLen = strlen($domain);
      if ($localLen < 1 || $localLen > 64)
      {
         // local part length exceeded
         $isValid = false;
      }
      else if ($domainLen < 1 || $domainLen > 255)
      {
         // domain part length exceeded
         $isValid = false;
      }
      else if ($local[0] == '.' || $local[$localLen-1] == '.')
      {
         // local part starts or ends with '.'
         $isValid = false;
      }
      else if (preg_match('/\\.\\./', $local))
      {
         // local part has two consecutive dots
         $isValid = false;
      }
      else if (!preg_match('/^[A-Za-z0-9\\-\\.]+$/', $domain))
      {
         // character not valid in domain part
         $isValid = false;
      }
      else if (preg_match('/\\.\\./', $domain))
      {
         // domain part has two consecutive dots
         $isValid = false;
      }
      else if(!preg_match('/^(\\\\.|[A-Za-z0-9!#%&`_=\\/$\'*+?^{}|~.-])+$/',
                 str_replace("\\\\","",$local)))
      {
         // character not valid in local part unless
         // local part is quoted
         if (!preg_match('/^"(\\\\"|[^"])+"$/',
             str_replace("\\\\","",$local)))
         {
            $isValid = false;
         }
      }
      if ($isValid && !(checkdnsrr($domain,"MX") || checkdnsrr($domain,"A")))
      {
         // domain not found in DNS
         $isValid = false;
      }
   }
   return $isValid;
}

?>

This is a function that I found online (in this article) that validates email addresses. It is very handy, and I use it in a lot of my projects because it covers so many different possibilities. If you want to, you can look through and see what it’s doing, but if you’re like me and don’t really care, you can just treat it like a black box and feed it email addresses. It works, believe me.

Conclusion

And that’s it! Now you know how to code a simple and secure contact form that you can easily implement on your own websites. It looks great, is very functional, and has good error checking – what more could you want?

See the final result in action.

Download the files for this tutorial.

CSS Remove Textarea Scrollbar

Ben Lind — Thu, 23 Jun 2011 18:33:58 +0000

One of the frustrations of browser testing is that Internet Explorer often renders elements of the page in ways you would never expect. One such example is in scrollbars on textareas. IE (and some other browsers) likes to throw scrollbars into your textareas even when they’re not necessary.

Thankfully, there is a very simple and easy way to fix this.

The Solution

To fix this little annoyance, just add this one line of code to your textarea’s CSS:

textarea {
     overflow: auto;
}

That’s it! Easy, right? Now the scrollbar will only show when it’s necessary. In other words, it will be invisible until enough text is written in the textarea to grow beyond its bounds, in which case the bar will be shown.

Want to really kill that scrollbar?

Just add this line of code to your textarea’s CSS, and the scrollbar will never be shown, even if the user fills up the textarea!

textarea {
     overflow: hidden;
}

I wouldn’t recommend doing that unless you have a good reason, though, because you won’t be able to see what you’re typing into a textarea with that CSS. It can be useful sometimes, though. Try it out!

Create a Shiny New iTunes Gift Card in Photoshop

Ben Lind — Tue, 22 Feb 2011 23:47:01 +0000

The other day I got a $25 iTunes gift card from a relative. I was almost more excited than if I had gotten real money, because now I know that I have to spend $25 on music, and I can’t spend it on anything else. That being said, I was surprised by how cool the actual card looked, so I thought I’d make a tutorial on how to recreate it in Photoshop. Random? Maybe. Cool? Definitely.

Final Image

Here’s what the card will look like when we’re done:

Shiny!

Step 1 – New Document

Ok, let’s get started.

Open up Photoshop and make a new document of the dimensions 800px by 100px. Double click on the Background layer and press enter in the dialog box that pops up to unlock it. Then double click on it again to open up the Layer Styles window. Apply a Gradient Overlay like the below image:

That should give you this:

Step 2

Now we will create the actual iTunes gift card shape. Get the Rounded Rectangle Tool (U), and set the Radius to 10px. Drag out a shape similar to the one below (my rectangle is 304 x 475 pixels, if you’re a pixel perfectionist), and place it slightly above the center of the image.

Step 3

For the card background, you will need to download a stripe pattern from Stripemania. I already created the stripe for you, so all you need to do is click this link and click the “Download this stripe” button on that page.

Save the stripe image they give you to your computer somewhere, and open it up in Photoshop. Go to Edit > Define Pattern, and name the pattern “Stripes”. Click ok and close the file.

Now you will have a nice orange stripe pattern that you can apply to your iTunes card. Switch back over to that document, double click the rectangular shape layer, and apply these layer styles:

Inner Shadow

Inner Glow

Satin

Pattern Overlay

Result

And that should give you this result:

Step 4

Now let’s add some of the text and decorations to the card. First, go to this website and download the Apple logo there. Go back into Photoshop, go to File > Place, and choose the apple_logo.eps file that you just downloaded. Resize and move the logo into the position shown below (or close to it – you can change it later), and press enter to finish the place. Rasterize the logo layer by going to Layer > Rasterize > Layer, press D to reset your foreground and background colors, and press Control + Shift + Backspace to fill the logo with the background color (white).

You should now have this:

Step 5

To add some text to the card, get out the type tool (T), and type out “iTunes” next to the Apple logo. Set the font to Myriad Pro, the weight to Semibold, and the size to 40 pt. If you don’t have the Myriad Pro font, you could use a substitute like Arial, Lucida Grande, or Helvetica.

Position the text like below:

Step 6

Add a few more text layers, using the image below as a reference. Here are the font values for each of the different new text layers (they are all in the Myriad Pro font):

25: 51 pt Semibold

Gift Card: 13 pt Bold

$: 24 pt Semibold

Get the latest music…: 11 pt Semibold

Now that we have the text in the right places, let’s style them a bit. Double click the logo layer and enter the settings as follows:

Drop Shadow

Outer Glow

Gradient Overlay

Press ok, and with that logo layer selected, go to Layer > Layer Style > Copy Layer Style. Click on each of the other text layers you just created and on each one go to Layer > Layer Style > Paste Layer Style or just right click on the layer and choose Paste Layer Style. This will replicate the style you just created onto each of the layers.

Step 7

Take the Rounded Rectangle tool (U), set the radius to something large (anything above ten will work), and drag out a shape that is 106 x 17 pixels. You can make sure your shape is exactly this size by clicking on the little arrow next to the Custom Shape tool icon in the toolbar and selecting “Fixed Size” like below:

Drag it into position like below:

Next take the Ellipse tool (U), and drag out a 20 x 20 ellipse (you can make sure it is perfectly round by holding Shift while creating it). Position it like this (I have made it white in the image so you can see it better – the actual color doesn’t matter):

Take the Pen Tool (P), and by holding down Control and clicking in the ellipse you just created, select all of the points in the ellipse. Press Control + C to copy the points, click on the rounded rectangle layer you just created, and press Control + V to paste the points into that layer. Now select all the points in this rounded rectangle layer and in the same fashion copy them. Now click on the vector mask thumbnail of the original gift card layer (the one with the stripes), and paste the points into it. Press the “Subtract from path area” button in the toolbar (see the image below), to “cut out” those points from the layer.

You can now delete the rounded rectangle and ellipse layers.

Step 8

On to the headphones! Set your foreground color to white, grab the Line Tool (U), and drag out a 3 pixel line across the bottom third of the card shape. Control + Click on the card shape layer’s thumbnail to make a selection of it, click on the line layer you just created, and go to Layer > Layer Mask > Reveal Selection. This ensures that the line won’t go out of the bounds of the card shape.

Take the Ellipse Tool (U) and drag out a 13 pixel circle, placing the circle in the center of the white line you just created. Then take the Pen Tool (P) and create a shape similar to the one below:

Set the Fill opacity of the newly created shape layer to 0%, double click on the layer, and apply a stroke with the following settings:

That will give you this:

Duplicate this layer and go to Edit > Transform > Flip Horizontal. Drag the new layer into position like below:

Step 9

Take the Line Tool again and drag out a 3 px line like below:

Press Control + T to enter transform mode for the shape, right click on the shape, and select Warp from the dropdown. Drag the controls until you get a result like below, and press Enter:

With the Pen Tool, draw out a shape like this:

Take the Ellipse Tool and make an thin oval of 4 x 26 pixels with the color #464646. Control + Transform the shape, rotating it to the left and placing it over top the earbud shape you just created:

Group the three layers you created in this step (the earbud cord, the earbud shape, and the gray oval) by selecting them and pressing Control + G, and duplicate the group by going to Layer > Duplicate Group. With the new group selected, go to Edit > Transform > Flip Horizontal, and then move the group into position like in the image below.

And voilà! You have a sweet bow made out of iPod earbuds. Cool? I think so.

Step 10

All that’s left to do now is to add some cool “special effects” to the card, and we’ll be done.

To begin, create a new layer above all of the other layers in the document. Take the Elliptical Marquee Tool (M), and drag out a selection like the one in this image:

Fill the selection with white by pressing D and then Control + Backspace. Set the Blending Mode of the layer to Overlay, add a layer mask to the layer (Layer > Layer Mask > Reveal All), and drag out a Black to White Gradient on the layer mask so that you get a result like below:

Lower the opacity of the layer to around 20%. Duplicate the layer and transform the new layer, rotating it slightly to the right. That should give you this effect:

Group the two layers you just created together, Control + Click on the gift card shape layer’s thumbnail (the one with the stripes) to create a selection of it, and add a mask to the group you just created by going to Layer > Layer Mask > Reveal Selection.

Step 11

What we need now is a shadow behind the card to give it a 3D look.

Find the card shape layer and duplicate it. Move the new layer to the bottom of the layers palette (right above the background layer that contains our blue gradient), press Control + G to add it to its own group, and then press Control + E to flatten the group. This is a quick way to rasterize the layer without having to go into menus.

Now that you have a flat layer, press D to reset your colors, and then press Alt + Shift + Backspace to fill the shape with black. Press Control + T and transform the layer down like so:

Right click on the transformation controls and select Perspective from the dropdown. Drag the top right corner to the right so that you get this result:

Press Enter to apply the transformation, and then go to Filter > Blur > Gaussian Blur. Enter 8.0 for the blur amount, and press enter. Lower the opacity of this shadow layer to 30%, and add a layer mask to it by going to Layer > Layer Mask > Reveal All. Take the Gradient Tool (G), and drag out a black-to-white gradient from above the shadow to its center, like below:

This will give you this effect:

Step 12

What we need now is a good reflection under the card. Group all of the layers in your document together except for the background and shadow layers (i.e. the card and everything on it) by selecting them and pressing Control + G. Then duplicate the newly created group and press Control + E to merge the new group into a single flat layer.

With the new layer selected, press Control + T, right click somewhere in the document, and select Flip Vertical from the dropdown. Then drag the layer down so that it is just at the bottom of the original card, like so:

Press Enter to apply the transformation, and decrease the opacity of the layer to 20%. Add a layer mask to the layer and drag out a white-to-black gradient like this:

Check out that snazzy reflection!

Step 13

To finish off this shiny new iTunes gift card, let’s add a bit of a sparkle to the top right corner. Go to this website and download the glint brushes on that page. Load them into Photoshop, get out your Brush Tool, and select the fifth brush in the set (its size is 269 pixels). Set your foreground color to white by pressing D and X. Make a new layer above all of the other layers in the document, decrease the brush size to about 150 pixels, and click once on the top right corner of the card to create the sparkle. Press Control + T and rotate the sparkle about 60 degrees to the right to complete the effect.

Conclusion

And we’re done! Give yourself a pat on the back and take a look at the result below:

Update: You can now download the PSD file for this tutorial!

Win $25 Worth of Prints at Next Day Flyers!

Ben Lind — Mon, 18 Oct 2010 19:45:38 +0000

Hey everyone! Today our good friends over at Next Day Flyers have offered to host a giveaway here at TutWow. It’s a win-win situation – they get the publicity, and you guys (or at least one of you guys) get a $25 printing credit to their online store. Look below to find out how to win.

About Next Day Flyers

Next Day Flyers is an online company that offers printing services. You can choose from a whole bunch of different items such as business cards and postcards, and in return you get great high quality prints.

How to win

Alright already, how do you win the $25 credit? It’s simple – all you have to do is leave a comment on this post asking to win! Please make sure to give us a valid email address so that we can contact you if you win. Remember, you have to be 18 years of age or older to win. Sorry, kids!

The contest as ended!

Winner!

By using a very complicated and CPU-wearing function, I have been able to deduce the winner of the contest! And the winner is…Sam from the comments! Congrats, Sam – you should be getting an email with your credit very soon.

6 URL Shorteners That Still Create Short URLs

Ben Lind — Tue, 12 Oct 2010 14:23:03 +0000

With the burst in the popularity of social media sites over the past few years, massive amounts of people have started using URL shortening services like TinyURL to create small links that don’t contain too many characters. This is how it works: say you have a really long, ugly URL like this one…

http://www.amazon.com/JVC-FX34-GN-Marshmallow-Headphones-ear/dp/B001PPQJVI/ref=sr_1_2?ie=UTF8&s=electronics&qid=1286846958&sr=1-2

…and say you want to put that URL into a Twitter status to show off to your friends. The only problem is that the URL is 129 characters long, and you only have 140 characters available in your Twitter status! This means that you only have 11 characters to write as a description of the URL, and as we all know, this would never do.

Enter the URL shortener.

URL shorteners do exactly what it sounds like – they simply take your URL and make a shorter version of it for you to use instead of the original. So, if we took the above long URL and put it through a shortening service, we would get something like this:

http://shrt.st/o49

Much shorter and easier to remember! And it leaves plenty of space in your Tweet to describe what’s in the link.

The Problem

There’s just one problem with URL shortening services, and that is that after a ton of people have used them, the URLs get longer and longer until they don’t really shorten your URL much anymore. For example, if I put a URL through the TinyURL service, I will get something like this:

http://tinyurl.com/2fn2vo8

Sure, that URL is shorter than the original one, but it is still a good 26 characters long. How can you solve this problem? There is only one way – find a new service that hasn’t been used as much, and still has short URLs.

Below I have put together a list of five such URL shortening services, so that you can create super short URLs without worrying about extra characters. Under each heading I put what you get when you put the above Amazon URL through their service, and how long it is.

➡.ws

http://➡.ws/⌘瞂 - 14 characters!

This service (tinyarro.ws) uses Unicode characters to create virtually the smallest URLs possible.

Tweak

http://loyg4.tk - 15 characters.

Tweak actually creates a custom domain name for your URL, meaning that there are no “trailing characters” in it like other services.

3.ly

http://3.ly/B3uv - 16 characters.

0.mk

http://0.mk/b8027 - 17 characters.

That’s a zero (0), not an ‘o’.

j.mp

http://j.mp/b1WGIc - 18 characters.

j.mp uses this save service as bit.ly, which means that you can get statistics and click data on your shortened URLs.

is.gd

http://is.gd/fYDuU - 18 characters.

a.gd

http://a.gd/cf3dbd - 18 characters.

10 Inspiring Web Design Groups on DeviantArt

Ben Lind — Thu, 09 Sep 2010 15:22:54 +0000

DeviantArt is, in my opinion, the best place a designer can go to find inspiration on any type of project. Wether it be web design, graphic design, or a different media, someone is sure to have posted something unique and inspiring related to it on the site.

Below I have put together a list of 10 groups on DeviantArt that you should follow if you want to find great web design inspiration. Enjoy!

1. Artists Union

2. Dev Webdesign

3. 1st Web Designer

4. Design Shell

5. iWebDesign Layouts

6. Design Spot

7. Creative Inspiration

8. Template Artists

9. Designers Couch

10. 92pixels

11. mintDesign

12. Design My World

13. Interface Space

14. World of Web

15. Design Addicts

Turn Your Mac Menu Bar Black

Ben Lind — Tue, 10 Aug 2010 01:45:05 +0000

Mac OS is, in my opinion, the most beautiful operating system out there. I won’t go into the reasons why I think this for the sake of limiting hot discussion, but I truly do love its design and user experience.

That being said, there are always those of us who like to customize our computers to crazy lengths just so that they look different from the “normal”. Thankfully, Mac has a lot of ways of doing just this (some of which I hope to write about in future articles), and one of them is by turning the menu bar at the top of the screen black with white text instead of the usual gray with black text.

How?

Let’s get down to the details:

Go download the Nocturne app from Blacktree.
Install the app by dragging it into the Applications folder on your Mac.
Start the app and open up the preferences by pressing Cmd + , (comma).
Under the “Menu bar” section, click the box that says “Invert menu bar”.
Enjoy!

Why not use a different theming app?

You might be wondering why I chose to use a big program like Nocturne (that has many other features besides menu bar inversion) instead of using an app specifically designed for changing the appearance of a mac (like ThemePark). The reason is that even though apps like ThemePark can change the menu bar background, they can’t change the menu bar font. So if you used ThemePark to make the menu bar black, the font would remain black as well, making the menus impossible to read. Nocturne, on the other hand, simply inverts the entire menu bar; so if you start out with a white menu bar with black text, you will end up with a black menu bar with white text.

7 Sleek NetNewsWire Styles

Ben Lind — Thu, 01 Jul 2010 04:18:14 +0000

Though there are many, many RSS feed readers out there for Mac OS, my absolute favorite is one called NetNewsWire. It is simple and streamlined, and it makes it very easy to plow through LOTS of feed items if you’re like me and have over 300 subscriptions.

Below I’ve compiled a list of seven of my favorite NetNewsWire “styles”, which are basically just different looks that you can give to it.

Feast your eyes on this goodness, and choose the one(s) you want to install!

Default

For reference, here is the default NetNewsWire style that comes pre-loaded with every installation:

JetReader

Bullit

Serif Black

Serif White

ReadLight

Hardcover

Daring Serif

Fix the YAPB “File Does Not Exist” Problem

Ben Lind — Mon, 14 Jun 2010 17:57:08 +0000

Recently I installed the WordPress “Yet Another Photoblog” (YAPB) plugin to use on my up-and-coming photoblog. I had heard a lot about it all over the web, and I figured that if it was so popular, I might as well give it a try.

The Problem

Everything went well with YAPB until I decided to upload my first photo to my blog. I created a new post, added a title, image, and description, and pressed submit. Then I waited. And waited. And waited. After quite a while, the web page decided to load for me and it spewed a rather cryptic error that went along the lines of “Warning: unlink() [function.unlink]: No such file or directory”. Below that it simply said “Error: file does not exist!” My super-geeky brain didn’t seem to be working well that day, so I couldn’t seem to decipher the error until I turned to my extra-super-geeky friend Google and asked him what I should do.

A quick search showed that many other people seemed to be having the same problem, and when I searched a bit deeper, I managed to trace the solution.

The Solution

It’s quite simple, really:

Login to your WordPress admin area.
Navigate to Settings > Miscellaneous.
In the Store uploads in this folder text box, enter “wp-content/uploads”.
Click the Save Changes button.

That’s it! For some reason, when WordPress says that the default upload folder is wp-content/uploads, it’s really lying. Either that, or YAPB is holding a knife to its back and making it lie. Either way, the above steps should solve your problem once and for all. You can now upload photos to your photoblog happily ever after.

Let me know in the comments if this solution works for you!

Make a Glowing Landing Page in Photoshop

Ben Lind — Thu, 10 Jun 2010 01:55:48 +0000

Though landing pages aren’t usually recommended for your websites, every once in a while you run across an insanely awesome one that deserves the space it takes up. Today, we will (hopefully) be creating one such page in Photoshop for you to enjoy.

Final Result

Here is what we will be creating:

Step 1

Let’s get started! First of all, open up Photoshop and create a new document of the dimensions 800 by 800 pixels (the size isn’t too important here). Set your foreground color to #6c8000 and press Alt + Backspace to fill the Background layer with an olive green:

Step 2

Grab the Rounded Rectangle Tool (U) from the Tools palette, and in the top toolbar, enter these settings:

Notice that the radius is set to 200px, the width is 309px, and the height is 147px.

Now click somewhere in your document and you should get a nice oval shape. Make sure the oval shape layer is selected, press Ctrl + A to select the entire document, and then in the top toolbar (with the Move Tool selected) press the Align Vertical Centers and Align Horizontal Centers buttons. This is what those buttons look like:

Press Ctrl + D to deselect everything, and now you should have your rounded rectangle centered to the document nicely like this:

Step 3

Fill the rounded rectangle with #6c7f00 by double clicking on the layer’s color thumbnail. Onto the layer effects! Double click on the rounded rectangle layer, and enter these settings:

Drop Shadow

Inner Shadow

Outer Glow

Gradient Overlay

Gradient

Result

That should give you this:

Step 4

Now it’s time to spruce up our design a bit by adding some light “whisps” to the background. Go to this page on QBrushes and download the Radial brushes featured there. Unzip the brushes and add them to Photoshop.

Create a new layer below the rounded rectangle layer, and select the tenth brush in the downloaded set (pictured below):

Press D and then X to reset your colors, and paint the brush behind your rectangle in this position:

Now create a new layer above the brush layer but still below the rounded rectangle layer, and select the 12th brush in the set:

Paint the brush anywhere on the document, and then go to Edit > Transform > Flip Horizontal. Press Ctrl + T, and resize and position the brush to about this place in the image:

Set the blending mode of both of the brush layers you just created to Color Dodge, and set the opacity to 60%, and you should get this:

Step 5

Now all that remains is to add the text to the image. Take the Type Tool (T), and make a new type layer in the middle of your oval. Type in two lines of text (you can say whatever you like, but I chose to say the truth: “TutWow – rocking your world” ), and in the Paragraph palette, set them to Center Justify.

I used the font “Gotham ExtraLight” for the first line of text, and “Gotham Light” for the second, but any thin font will work for this, like Helvetica Neue. I set the first line to 48pt size, the second to 18pt, and the color to white. Play around with the settings until you get the look you want.

Center the text to the oval, and you’re done!