Features

• Make any element’s background or border transparent without effecting everything inside the element
• Quick, easy, small footprint
• Works in all browsers
• Control over opacity
• Works with background colors, background images, and borders (if you want to use CSS3 border-radius, you’ll need to apply your own CSS values to the div that is created, it has a class of ‘transify’)
• Easily make background animate opacity on hover
• Verified with jQuery 1.4.3, but should work fine with older versions

How to use

It’s a simple plugin, but satisfies the need to easily and quickly make an element’s background and/or its border transparent, while leaving all of its children elements and content at 100% opacity. It’s extremely small, less than 2KB while minified. What the plugin essentially does is creates a second div inside of the element that you specify, giving it a lot of the same CSS properties of your selected element and places it behind your element in the z-index. This works in all browsers that I’ve been able to test, and it also works with background images. Not only that, but I’ve added the functionality for you to provide two opacity settings which will automatically give the background a fade transition on hover, which you can view on the demo.

By default, the plugin will give your element’s background and border 60% opacity when no other settings are defined. To run it, just use a normal jQuery selector to select your element, this example gives the element with an id of ‘selector’ a 60% transparency.

$('#selector').transify();

Other options you can set include:

• opacityOrig - this will change the opacity of the element, default is 60%
• opacityNew - if you assign this a value, then the element will do a fade animation from what you set as the opacityOrig to this opacity
• fadeSpeed - pretty self explanatory, if you want to change the speed of the animation from it’s default of 600 than give this a value
• percentWidth – since neither jQuery nor javascript have a very elegant way of determining whether you gave your element a width in pixels or percentage with CSS, you’ll need to assign this option a value in order to use widths in percentages instead of exact pixels.

Example with some more settings:

$('#selector').transify({
   opacityOrig:.2,
   opacityNew:.8,
   fadeSpeed:1000,
   percentWidth:'100%'
});

These options will give your element’s background and border a 20% opacity, which will animate to 80% opacity when hovered with a speed of 1000, and will also extend the full length of the browser with a 100% width.

For our example, we have index.php which includes all of the necessary PHP to parse the XML file and generate the content for the viewer. An images folder has 6 images in it, which are referenced in the XML file, home.xml. Let’s start with the XML file, and how to set it up. If you are viewing the demo, just refresh the page and you’ll see different content every time.

  
<homepage>
	<featured>
		<picture>1.jpg</picture>
		<name>Title 1</name>
		<description>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</description>
	</featured>
</homepage>

So, with XML, every item has to have an opening and closing tag. In our example, we will be creating content from each ‘featured’ block, so you can add as many of these as you like as long as you keep the format the same. Our test XML file just has 6 of these to use. Now, for our PHP, let’s just look at a few lines at a time.

$xml_file = "home.xml";
$xml_picture_key = "*HOMEPAGE*FEATURED*PICTURE";
$xml_name_key = "*HOMEPAGE*FEATURED*NAME";
$xml_description_key = "*HOMEPAGE*FEATURED*DESCRIPTION";

Here we are setting up some variables to tell our script where the XML file is located, as well as how to correctly parse the file. You should create a new variable for each new item you add within the featured blocks.

    function startTag($parser, $data){
        global $current_tag;
        $current_tag .= "*$data";
    }

    function endTag($parser, $data){
        global $current_tag;
        $tag_key = strrpos($current_tag, '*');
        $current_tag = substr($current_tag, 0, $tag_key);
    }

    function contents($parser, $data){
        global $current_tag, $xml_picture_key, $xml_name_key, $xml_description_key, $counter, $featured_array;
        switch($current_tag){
            case $xml_picture_key:
                $featured_array[$counter]->picture = $data;
                break;
            case $xml_name_key:
                $featured_array[$counter]->name = $data;
                break;
            case $xml_description_key:
                $featured_array[$counter]->description = $data;
                $counter++;
                break;
        }
    }

Here we create 3 functions, one to tell the script what to put before the content, one after, and the function to tell it which content block to use. The only thing you’d have to change in this section to apply it to your own work is to add or change each case for each new content in the XML file.

$xml_parser = xml_parser_create();
xml_set_element_handler($xml_parser, "startTag", "endTag");
xml_set_character_data_handler($xml_parser, "contents");

Creating the parser and setting the start tage, end tag, and data handlers. The arguments are the functions that we created earlier.

$fp = fopen($xml_file, "r") or die("Could not open file");
$data = fread($fp, filesize($xml_file)) or die("Could not read file");

Basic PHP file handling functions, that also determine the response if the file is inaccessible

if(!(xml_parse($xml_parser, $data, feof($fp)))){
    die("Error on line " . xml_get_current_line_number($xml_parser));
}

This is the key PHP function that we’re using to parse the file, and if it has an issue it will let you know the line number of the XML file where the problem occurred.

for($y=0;$y<=3;$y++){
    $featured_array = array_values($featured_array);
    $arrayamt = (count($featured_array)-1);
    $x = rand(0,$arrayamt);
    
    echo "<li>";
    echo "<img src='images/" . $featured_array[$x]->picture . "' width='50' height='50' alt='' />";
    echo "<strong>" . $featured_array[$x]->name . "</strong> &nbsp;&nbsp;";
    echo $featured_array[$x]->description;
    echo "</li>";

    unset($featured_array[$x]);
}

Here is where you will do the majority of customizing to suit your needs. Before this, we had all of the data parsed, placed into an array, and ready to be put somewhere, so that’s what we’re doing now. In our example, we will be generating 4 random list items with content from the XML file.

for($y=0;$y<=3;$y++){
    $featured_array = array_values($featured_array);
    $arrayamt = (count($featured_array)-1);
    $x = rand(0,$arrayamt);

First start a ‘for’ loop. the number 3 is significant because we are starting from 0, since arrays start from 0, and we want to generate 4 random items. Second, array_values() is re-indexing our array each time so that when we remove the current item from the array, we have no holes in our array which prevents the loop from spitting out an empty entry. Next we create a varible that determines the length of the array, so we know how large of a number we can randomly generate. Lastly, we choose a random value from our array between 0 and $arrayamt.

echo "<li>";
echo "<img src='images/" . $featured_array[$x]->picture . "' width='50' height='50' alt='' />";
echo "<strong>" . $featured_array[$x]->name . "</strong> &nbsp;&nbsp;";
echo $featured_array[$x]->description;
echo "</li>";

Here you can figure out where you want to place each item. X is used to determine which number of the array you are getting content from. Follow this format when doing your own work and you should be fine.

    unset($featured_array[$x]);
}

Lastly! We remove the value from the array that we just used with unset(), ensuring that we will not use that same value again the next time the loop runs through. Thanks to Richard for the inspiration on this change.

That’s the end! If you have any questions as usual please leave them in the comments. Thanks to kirupa for providing a tutorial that helped me get started on XML parsing with PHP.

All you’ll have to do is type in a list of what fields are required, and then change the CSS style of a class to suite that particular website, and that’s it!

First we’ll start with the HTML and CSS. The script will add a class called “needsfilled” to any fields that don’t pass the validation, so you’ll want to specify how you’d like it to look, and make it stand out so that the user knows something went wrong! Be sure to have included the latest version of jQuery and the script file itself in your header.

#error {
	color:red;
	font-size:10px;
	display:none;
}
.needsfilled {
	background:red;
	color:white;
}

<form action="mail.php" id="theform" name="theform" method="post">
    <p><label for="name">Name</label><br /><input id="name" type="text" value="" name="name" /></p>
    <p><label for="email">E-mail</label><br /><input id="email" type="text" value="" name="email" /></p>
    <p><label for="message">Message</label><br /><textarea id="message" rows="7" cols="30"  name="message"></textarea></p>
    <p><input class="submit" type="submit" name="submit" value="Submit Form" /></p>
    <p id="error">There were errors on the form, please make sure all fields are fill out correctly.</p>
</form>

Please take note of any ID’s used (theform, email, etc.) because you’ll need those ID’s to stay consistent from within the javascript. The HTML and CSS is pretty self-explanatory, so we’ll move onto the javascript. All of this code will be placed within a $(document).ready(function(){}); so that it’s all loaded when the DOM is loaded.

	// Place ID's of all required fields here.
	required = ["name", "email", "message"];
	// If using an ID other than #email or #error then replace it here
	email = $("#email");
	errornotice = $("#error");
	// The text to show up within a field when it is incorrect
	emptyerror = "Please fill out this field.";
	emailerror = "Please enter a valid e-mail.";

First we will setup our variables. Just follow the comments so that you know what goes where. If you are using the same ID’s as this tutorial, then all you really have to change is the list of fields that are required, just follow the format used so that the array isn’t broken.

	$("#theform").submit(function(){	
		//Validate required fields
		for (i=0;i<required.length;i++) {
			var input = $('#'+required[i]);
			if ((input.val() == "") || (input.val() == emptyerror)) {
				input.addClass("needsfilled");
				input.val(emptyerror);
				errornotice.fadeIn(750);
			} else {
				input.removeClass("needsfilled");
			}
		}

Now for an explanation on the code, taking it line by line. $(“#theform”).submit(function() tells the page to execute the following script whenever someone hits the submit button in the form with ID ‘theform’. Next, we create a ‘for’ loop that will run through as many variables as you defined in the ‘required’ array earlier. The next ‘if’ statement will check to see if the current input field is empty, or if it is equal to the text that we set to appear if the field is empty. If either of these cases are true, then it adds the class ‘needsfilled’ to the empty input, replaces its value with the value of ‘emptyerror’, and then fades in ‘errornotice’ alerting the user that something went wrong. If the case is false, then we make sure to remove the class ‘needsfilled’ from the input because that is what we will use later on to see if the form is safe to be submitted.

        // Validate the e-mail.
        if (!/^\S+@\S+\.\S+$/.test(email.val())) {
            email.addClass("needsfilled");
            email.val(emailerror);
        }

Just about every form is going to ask for an e-mail address, so I felt it was necessary to include this bit. This is a regular expression which is filtering the value of the ‘email’ input. It is making sure that the e-mail adress follows the format of “email@domain.something”. NetTUTS has many awesome explanations of regular expressions if you would like more information on them. After this ‘if’ statement is where you would also place any other validation that you’d like, such as checking a URL string for proper formatting.

		//if any inputs on the page have the class 'needsfilled' the form will not submit
		if ($(":input").hasClass("needsfilled")) {
			return false;
		} else {
			errornotice.hide();
			return true;
		}
	});

With the above code, we are closing the $(“#theform”).submit(function() at the end. The first if statement is going to be checking to see if ANY inputs on the page have the class ‘needsfilled’. If it does, then ‘return false’ tells the form to not submit.

	// Clears any fields in the form when the user clicks on them
	$(":input").focus(function(){		
	   if ($(this).hasClass("needsfilled") ) {
			$(this).val("");
			$(this).removeClass("needsfilled");
	   }
	});

This block is just a little bit of user experience improvement. If a user clicks on an input field that did not pass the validation, then the value will clear so that the user can immediately start typing without having to delete our message. Updated this portion on 10-27-09 a bit, thanks Tom for the suggestion.

And there you have it, quick and simple live form validation that you can easily add within a couple minutes, and hopefully you learned something while you were at it!

Let’s start by going over a list of a questions, and how each one will help. Typically what I do in these kinds of calls is I build my list each time in a text document (things can change depending on the client, but many stay the same), and then I take my notes on that file while I’m talking to the client and save the file with the rest of the client’s project information. Certain questions like discussing all of the features of the website and how big it is going to be should have already been taken care of before the contract was signed. The procedure up to this design phone call is a completely different discussion, but if you’d like to view an example contract template that I use then click here.
 

1. What is the goal of your website?

What do they hope to accomplish? This answer can be pretty typical sometimes. Well, to make money, silly! But we want to make sure we get a deeper answer from our client, more than just "get to the checkout" or "fill out the contact form".

• Where do they want their clients to go?
• How do they want them to feel when they’re done with the website?
• What are all of the features that your users will be interacting with, what is each one’s end result, and which features are priority?
• What kind of exposure do they expect the website to receive?

This will help us learn how to guide the users and find out which items are the most important to the client and the user.
 

2. What are some other competitor or non-competitor websites that you like?

What websites do they like? Also, it’s always a good idea to find out what websites they don’t like. Having a competitor’s website is even better. Take as many notes as you can think of on these websites. You should always do research on your client’s industry if you want your design to have a good impact on them.
 

3. Are there any other design ideas you had in mind?

• Is there anything that the client already expects to see? 
• Is there anything that the client wants to avoid?
• What did they have in mind as far as colors, fonts, layout, etc.?
• Do they already have a logo and an identity standard?

4. What makes your company stand out from your competitors’?

• Why is their company and their products better than the competition?
• What selling points make them stand above and beyond?

You need to be able to convince the user to your client, and this can easily be incorporated into your design. E.g. "Greatest customer service", "Lowest Prices!", "More experience than the competition". This can easily give you an idea for a theme for the website and help you create something that isn’t "just another website design".
 

5. What can you tell me about your target audience?

With a design, there is always a tricky balancing act that you have to play. You’ve got to make a design that both yourself and your client are satisfied with, and also one that is easily accessible and usable by your client’s customers.

• What is their age, culture, technical savvy, economic status, education, and other demographics? Obviously a design that you create for 10 year old children is going to be a vastly different website than what you would create for middle-aged women.
• There is always the possibility of a secondary audience group, so be sure to note that.
• Are these users going to have any special needs (accessibility, handicaps, etc.)?

Time for design feedback

So you did your research and made a snazzy design. Before you send it off, it’s always a good idea to get some feedback from your peers! If your contract allows, show it off on twitter, or check out this Six Revisions article on 10 Feedback Tools for Web Design. Criticism is the only way you are going to be able to grow as a designer, so take advantage of your community. When you send your design off to the user for approval and revision comments, then go the extra mile and get them involved with a feedback tool. I like to use redmark, but there are others out there like proofhq. Most importantly of all, remember to have fun while creating your design!

The Pen Tool

I thought about writing my own tutorial on using the Pen tool, but then I just decided that would be a waste of time. There are already a million great tutorials out there that give instructions on how to use the Pen tool, and it just takes some practice to really get the hang of it. Luckily we’re just creating swirly shapes with it for this tutorial, so you don’t need to be an expert. Doing a Google search came up with plenty of sources, here is a pretty extensive tutorial on the Pen tool if you are a beginner with it http://www.photoshopessentials.com/basics/pen-tool-selections/.

The Swirls

So first whip out that Pen Tool (A) and start making some anchor points and start drawing (make sure to have Shape Layers selected at the top after you’ve selected the Pen Tool). You should be able to accomplish a similar shape to what I’ve done with around 10 points. After clicking and dragging to make each of your points, just use the Direct Selection Tool (A) to move them around and get them to a position that you are satisfied with. If you’d like, you can grab this image below and put it on a layer beneath yours then start tracing it with the Pen Tool. Lowering the transparency of your new shape layer helps with tracing. So at the end you should end something like this, you can also see where I’ve placed all of my anchor points (pick whatever color you’d like):

Next we’ll create your second shape layer, and that’s all the drawing we’ll have to do in order to see the effect take place. All I did to this second layer so far was lower the opacity to 60% and make it a slightly darker blue. You can draw it however you’d like, just have it smaller than your original shape. Also, make sure this second shape goes on the outside and the inside of your original shape layer in some places, like so:

Now the easy part. Right click on one of your shape layers and then click Blending Options. It doesn’t matter which one because both layers will have the exact same layer style applied to them, except for the opacity. Now select Inner Glow, change the blend mode to Multiply, the Opacity to 17%, and change the color to a darker gray (I used #7b7b7b). Change it’s Choke to 13% and it’s size to 7px. These settings are all assuming that you are creating this for a web document with swirls about the same size that I’ve used here. If you are using them for anything a lot bigger or smaller, you will have to change these settings respectively, and the same goes for the rest we will be talking about. Here is a screen shot of the Inner Glow settings:

Next we will give the shapes a Gradient Overlay. Change the Blend Mode to Screen, Opacity to 45%, and the Angle to -18°. You can leave the gradient set to a black-to-white gradient. When doing multiple shapes like these, I changed the Angle of the Gradient Overlay on each shape in order to give it a less uniform look.

And finally for the last layer style, we’re just applying a Stroke. Make it 1px, set its Position to Inside and its Opacity to 69% and a light gray color once again.

Now all you need to do is apply the layer style to the other shape layer. Right click on the layer with the style, select Copy Layer Style, then do the same to the other layer selecting Paste Layer Style. Your first shape layer should have an opacity of 100% and the second one 60%. Voilá! You now have your swirlies. Start making as many shapes in as many variations as you’d like, just keep them smooth by using as small of an amount of anchor points as you can. You can play around with their color and opacity, as well as the gradient angle to get whatever shapes you’d like. If you’d like, you can download the PSD of what we did here:

Downloadthe source files.

Once again, a description of these posts: I provide a list of links that I have collected over the past year, as well as all of the Firefox tags that I use to keep them indexed. This gives you a ton of easy and quick resources. If you are unfamiliar with Firefox’s bookmarking system and want to know how to truly take advantage of this post, click here.

Also, be sure to check out the other posts from the series if you haven’t yet:

• Useful Javascript, jQuery, and AJAX Tutorials and Resources – Massive Link Collection Part #1
• Design Tutorials, How-tos, and Resources for Photoshop and Illustrator – Massive Link Collection Part #2
• Web Design Inspiration | Galleries, Websites, And More – MLC#3

Hacks, Fixes, & Techniques

• Using CSS to Fix Anything: 20+ Common Bugs and Fixes – 2 column, center, centering, column, css bugs, double margin, double margin float, fix, form, ie fixes, ie hacks, min-height
• Powerful CSS-Techniques For Effective Coding | CSS | Smashing Magazine – button, css, css table, dock, dock menu, favicon link, file input, hacks, hover, recipe, reset, site map, sitemap, speech bubbles, step menu, table, table of contents, techniques, transparency
• Spiffy Corners – Purely CSS Rounded Corners – css, rounded corners
• CSS 2.1 selectors, Part 1 | 456 Berea Street – css, selectors, selector
• Create Custom Search Bars with Image Replacement using CSS – css, custom search bar, search, bar
• Scalable CSS Buttons Using PNG and Background Colors | David’s kitchen – css, scalable buttons, scalable css buttons
• 30 Exceptional CSS Techniques and Examples | Six Revisions – css, hacks, techniques
• CSS Decorative Gallery – css, gallery, website gallery
• Mozilla Webdev » Blog Archive » Cross-Browser Inline-Block – block, css, display, float, gallery, grid, inline, layout
• Safari’s text-shadow anti-aliasing CSS hack Revision · Komodo Media – font, hack, render, safari, shadow, text, weight
• Firefox 3.5 for developers – MDC – box, css, firefox, mozilla, opacity, shadow, text
• SonSpring | Hoverbox Image Gallery – box, css, enlarge, hover, rollover
• 20 CSS Short Hands You’ll Love – browser, cross, font, opacity, shorthand, transparency, transparent
• 10 astonishing CSS hacks and techniques – block, border, browser, cross, css, display, height, inline, min, rollover, transparency

Navigation & Menus

• Stu Nicholls | CSSplay | CSS demonstrations – css, menu, layout, box, opacity
• Dynamic Drive CSS Library- Horizontal CSS Menus – css, menu, horizontal
• CSS Image Rollover Advanced Menu – css, image rollover, navigation, navigation rollover, rollover
• CSS: Menu List Design – css, food, list, menu, restaurant
• Designing the Digg Header: How To & Download – click, clickable, digg, dropdown, menu, navigation

Fonts

• » 8 fonts you probably don’t use in css, but should – Web Design Marketing Podcast & Blog – common font, css, font, web font
• Better CSS Font Stacks :: Unit Interactive – css, font, stack
• Common fonts to all versions of Windows & Mac equivalents (Browser safe fonts) – Web design tips & tricks – common, css, default, font, fonts, mac, system, windows

Transparent PNG Methods

• PNG-8 Alpha Transparency with Fireworks – fireworks, css, png, fix, transparency
• 24 ways: Transparent PNGs in Internet Explorer 6 – css, hack, javascript, png, transparency, transparent
• Unit Interactive :: Labs :: Unit PNG Fix – css, fix, hack, ie6, javascript, png, transparency
• DD_belatedPNG Medicine for your IE6/PNG headache! – javascript, css, png, transparency

CSS3

• Take Your Design To The Next Level With CSS3 – background, border, box, corner, css3, face, font, multiple, opacity, radius, rounded, selector, text-shadow, transparency
• Push Your Web Design Into The Future With CSS3 | CSS | Smashing Magazine – css3
• 20 Useful Resources for Learning about CSS3 – Six Revisions – css3
• Web Designer Notebook » An Ode To Border-radius – border, corner, css, radius, rounded

Layouts, Positioning, & Templates

• Joomla Templates: Creating a Pure CSS Template | Part 4 – webreference.com – css, template
• CSS Dock Menu – css, dock, menu
• Open Source Web Design – Download free web design templates. – css, templates
• Alternative Style: Working With Alternate Style Sheets :A List Apart – alternate, alternate style sheet, css
• Horizontal and vertical center – css, hacks, horizontal center, vertical center
• Faux absolute positioning demo – absolute, positioning, css, layout
• Web Design Resource – 25 Sites to download Free Web Templates – css, layout, template, website
• CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices – css, demo, hacks, hover, layout, max-height, max-width, min-height, min-width, png, structure, transparent, tutorial
• Dave Woods – Freelance Web Designer UK » CSS Fixed Footer – absolute, bottom, css, fixed, footer

Other Styling & Miscellaneous

• CSS Redundancy Checker – checker, css, redundancy, tool, verify
• A List Apart: Articles: Return of the Mobile Style Sheet – css, handheld, javascript, mobile, sheet, style
• CSS Drive Gallery- CSS Compressor – compress, compression, compressor, css, tool
• Form Elements: 40+ CSS/JS Styling and Functionality Techniques &ndash auto, autotab, checkbox, css, dropdown, fancyform, field, form, help, helptext, html, javascript, live, option, resize, select, slider, tab, text, validate, validation
• Beautiful Forms – Design, Style, & make it work with PHP & Ajax | Noupe – design, form, forms, jquery, style
• Top 10 CSS Table Designs | CSS, Events | Smashing Magazine – background, css, filter, ie hack, table, tables
• Tiling Backgrounds in Internet Explorer – Snook.ca – background, cell, hack, ie, row, table
• 8 CSS Techniques for Charting Data – Six Revisions – bar, css, graph
• CSS-Tricks #52: Building a Print Stylesheet – css, print, sheet, style, stylesheet
• Video: An Introduction to CSScaffold | Anthony Short | Web Design & Development – css, csscaffold, framework, php, scaffold
• CSS Image Map Techniques and Tutorials | Design Reviver – CSS Image Map Techniques and Tutorials | Design Reviver
• Learn How to Style Articles for Print and Email – Nettuts+ – article, css, e-mail, mail, print, sheet, style, web
• CSS Browser Selector – browser, conditional, css, select

All you need is jQuery. No plugins are necessary for this to work, and it is only 2kb of extra code in addition to the jQuery library. This also works on all browsers, IE6 and up.

For a demo of what we are creating you need not go any further than the contact form at the top of this website, as well as the contact link in the footer, or you can go here. I’ve packaged all the files for your easy editing and applying to your own personal needs (please just don’t reuse my images. . . that would be a bit arse-like of you). I did include all of the same styling that I used on this form, to make it easier for me to write this tutorial and just in-case someone wanted to peak into how I pulled off some of the CSS.

The HTML:

<div class="container">
  <div id="contactFormContainer">
    <div id="contactForm">
      <div class="loader">&nbsp;</div>
      <div class="bar">&nbsp;</div>
      <form name="cform" class="contactForm" action="mail.php" method="post">
        <p>Talk to me about anything. If you&rsquo;d like to work with me, or <br />
          even if you just need a hug, I&rsquo;ll get back to you shortly.</p>
        <div class="input_boxes">
          <p>
            <label for="name">Name</label>
            <span class="name-missing">Please enter your name</span><br />
            <input type="text" value="" id="name" name="name" />
          </p>
          <p>
            <label for="e-mail">E-mail</label>
            <span class="email-missing">Please enter a valid e-mail</span><br />
            <input type="text" value="" id="e-mail" name="email" />
          </p>
          <p>
            <label for="message">Message</label>
            <span class="message-missing">Say something!</span><br />
            <textarea cols="" rows="" id="message" name="message"></textarea>
          </p>
        </div>
        <input type="submit" onfocus="this.blur()" value="Submit Form" name="submit" class="submit" />
      </form>
    </div>
    <div class="contact">&nbsp;</div>
  </div>
</div>
<div id="backgroundPopup">&nbsp;</div>

I’m going to assume you know what you are doing with HTML. If you don’t, well then. . . this is NOT the post to start with! Moving on. . .

The PHP:

    <?php
    //declare our variables
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = nl2br($_POST['message']);
    //get todays date
    $todayis = date("l, F j, Y, g:i a") ;
    //set a title for the message
    $subject = "Message from Your Website";
    $body = "From $name, nn$message";
    $headers = 'From: '.$email.'' . "rn" .
        'Reply-To: '.$email.'' . "rn" .
        'X-Mailer: PHP/' . phpversion();
    
    //put your email address here
    mail("youremail@yourdomain.com", $subject, $body, $headers);
    ?>
    <!--Display a thankyou message in the callback -->
    <div id="mail_response">
        <h3>Thank you <?php echo $name ?>!</h3><br />
        <p>I will answer your message soon as possible.</p><br />
        <h5>Message sent on: </h5>
        <p><?php echo $todayis ?></p>
	</div>   

Our mail.php breakdown:

• The comments on this more or less speak for themselves. First we are getting the variables that are passed to the file from the javascript (NOT the HTML, that’s why the ID’s of the inputs don’t match up. I had to change email to e-mail so that it didn’t conflict with the comment forms on the blog posts). Also, the function nl2br() helps to replace any new lines that the user enters onto the ‘message’ textarea with line breaks so that you get a properly formatted e-mail.
• Next, we define variables for the date, subject, body, and headers for the standard PHP mail() function.
• After the mail() function is finished executing, you will see in our javascript that we will replace the form & loader with #mail_response so that the user gets some comfy feedback that we got their message! I see way too many folks leave out user confirmation on their contact forms, and that is just plain silly. Don’t leave your users in the dark!
• I would also recommend putting some form of PHP spam protection in here as well. Another post, another time perhaps.

The CSS:

 
.container {
	width:960px; 
	margin:0px auto; 
	position:relative;
	}
	
/* Positions the contact form so it doesn't interfere with any other content, as well as a z-index above any other elements on the page */	
#contactFormContainer {
	position:absolute;
	left:368px;
	z-index:12;
	}
	
/* Hides the whole contact form until needed */	
#contactForm {
	height:289px;width:558px;
	background:#515151 url(../images/birdy.jpg) no-repeat 241px 11px; 
	border:1px solid #929191;
	display:none;
	padding:7px 12px; 
	color:#fff
	}   

/* Loading bar that will appear while the ajax magic is happening */
.bar{
	display:none; 
	background:url(../images/ajax-loader.gif) no-repeat center; 
	margin-top:100px; 
	height:40px; width:230px;
	}

/* This hides the form validation alert messages until needed */
#contactForm span { 
	display:none; 
	font-size:9px; 
	line-height:10px; 
	padding-left:6px; 
	color:#f5c478;
	}
	
/* Some styling for the contact button */
#contactFormContainer .contact {
	height:47px; width:211px;
	background:url(../images/contact_me.png); 
	position:absolute; 
	left:368px; bottom:-44px; 
	cursor:pointer;
	}
			
/* Hides the darkening layer for the Modal effect. The z-index is necessary for layering purposes, and be sure to keep the positioning/height/width the same */	
#backgroundPopup{
	display:none; 
	position:fixed; 
	_position:absolute; 
	height:100%; width:100%; 
	top:0; left:0; 
	background:#000; 
	z-index:11;
	}     

I did not include the CSS styling that I used for appearances, only what was necessary to get this functional. For everything that I used to create the form, please download the source files.

And our CSS rundown / explanation:

• .container is just used for positioning everything in the middle of the page, and the position:relative property lets us absolute position the elements inside of the div.

•  
  #contactFormContainer {
  	position:absolute;
  	left:368px;
  	z-index:12;
  	}

  #contactFormContainer is absolute positioning the whole contact form, this div is also necessary so that the .contact button moves with the contact form, and the z-index puts it above the darken div.

• #contactForm Contains the form as well as all other content inside of it (loading bar, background, etc.) and is hidden until the .contact button is pressed.
• The spans are hidden until a user tries to submit the form without properly filling out all of the fields. You will see why each one has its own class when we take a look at the scripting.

• #backgroundPopup{
  	display:none; 
  	position:fixed; 
  	_position:absolute; 
  	height:100%; width:100%; 
  	top:0; left:0; 
  	background:#000; 
  	z-index:11;
  	}    

  #backgroundPopup is placed at the bottom of the page in the HTML (it needs to be OUTSIDE of any container or else it won’t work right in IE6). This is the div that will appear and have its opacity changed when the .contact button is pressed. Make sure its z-index is above everything, but below the #contactFormContainer.

The Javascript:

PLEASE NOTE: The following javascript is a little clunky and not very well optimized. For a much cleaner version of the validation portion of this script, please visit my post The Simple, Quick, and Small jQuery HTML Form Validation Solution.

$(document).ready(function(){
	//function for contact form dropdown
	function contact() {
		if ($("#contactForm").is(":hidden")){
			$("#contactForm").slideDown("slow");
			$("#backgroundPopup").css({"opacity": "0.7"});
			$("#backgroundPopup").fadeIn("slow"); 
		}
		else{
			$("#contactForm").slideUp("slow");
			$("#backgroundPopup").fadeOut("slow");  
		}
	}
	 
	//run contact form when any contact link is clicked
	$(".contact").click(function(){contact()});
	
	//animation for same page links #
	$('a[href*=#]').each(function() {
		if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
		&& location.hostname == this.hostname
		&& this.hash.replace(/#/,'') ) {
		  var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
		  var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
			if ($(this.hash).length) {
				$(this).click(function(event) {
					var targetOffset = $(this.hash).offset().top;
					var target = this.hash;
					event.preventDefault();			   
					$('html, body').animate({scrollTop: targetOffset}, 500);
					return false;
				});
			}
		}
	});



   //submission scripts
  $('.contactForm').submit( function(){
		//statements to validate the form	
		var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
		var email = document.getElementById('e-mail');
		if (!filter.test(email.value)) {
			$('.email-missing').show();
		} else {$('.email-missing').hide();}
		if (document.cform.name.value == "") {
			$('.name-missing').show();
		} else {$('.name-missing').hide();}	
		if (document.cform.message.value == "") {
			$('.message-missing').show();
		} else {$('.message-missing').hide();}		
		if ((document.cform.name.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "")){
			return false;
		} 
		
		if ((document.cform.name.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) {
			//hide the form
			$('.contactForm').hide();
		
			//show the loading bar
			$('.loader').append($('.bar'));
			$('.bar').css({display:'block'});
		
			//send the ajax request
			$.post('mail.php',{name:$('#name').val(),
							  email:$('#e-mail').val(),
							  message:$('#message').val()},
		
			//return the data
			function(data){
			  //hide the graphic
			  $('.bar').css({display:'none'});
			  $('.loader').append(data);
			});
			
			//waits 2000, then closes the form and fades out
			setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 2000);
			
			//stay on the page
			return false;
		} 
  });
	//only need force for IE6  
	$("#backgroundPopup").css({  
		"height": document.documentElement.clientHeight 
	});  
}); 

Oh joy, lots and lots of javascript explainin’ to do:

• $(document).ready(function() {}); is the necessary jQuery function required to kick off anything that runs after the page is loaded. All our code will be placed inside of this.

• function contact() {
  		if ($("#contactForm").is(":hidden")){
  			$("#contactForm").slideDown("slow");
  			$("#backgroundPopup").css({"opacity": "0.7"});
  			$("#backgroundPopup").fadeIn("slow"); 
  		}
  		else{
  			$("#contactForm").slideUp("slow");
  			$("#backgroundPopup").fadeOut("slow");  
  		} 	

  Here we are defining the function contact that will run each time a link with the class .contact is pressed, using jQuery’s selectors:

  $(".contact").click(function(){contact()});

  This allows us to give that class to any link to execute the function that opens the contact form. What this function is doing is first determining whether the form is hidden or not, and if it is then it will slide the form down, and then change the opacity of the #backgroundPopup div as well as fade it in.

• $('a[href*=#]').each(function() {
  		if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
  		&& location.hostname == this.hostname
  		&& this.hash.replace(/#/,'') ) {
  		  var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
  		  var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
  			if ($(this.hash).length) {
  				$(this).click(function(event) {
  					var targetOffset = $(this.hash).offset().top;
  					var target = this.hash;
  					event.preventDefault();			   
  					$('html, body').animate({scrollTop: targetOffset}, 500);
  					return false;
  				});
  			}
  		}
  	}); 

  This script grabs any anchor on the page with a same page link (e.g. #something), determines the distance between it and the destination, and then creates a scrolling transition. You can edit the speed at which it transitions by changing the ’500′ on the line $(‘html, body’).animate({scrollTop: targetOffset}, 500);.

•   $('.contactForm').submit( function(){
  		var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
  		var email = document.getElementById('e-mail');
  		if (!filter.test(email.value)) {
  			$('.email-missing').show();
  		} else {$('.email-missing').hide();}
  		if (document.cform.name.value == "") {
  			$('.name-missing').show();
  		} else {$('.name-missing').hide();}	
  		if (document.cform.message.value == "") {
  			$('.message-missing').show();
  		} else {$('.message-missing').hide();}		
  		if ((document.cform.name.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "")){
  			return false;
  		} 

  I know there is a better way of doing this, but in the interest of time I quickly put this together. This is a nice long if statement that checks each required input field on the form to see if they are filled in properly or not. Doing it this way is definitely not a problem if you only have a couple of required fields, but if you have several than this will need to be rewritten. There are jQuery plugins out there that offer much more extensive validation functionality, but it was not necessary for what I wanted to accomplish with this simple form. If the field in question is not filled in correctly, then the corresponding error message (those spans we made earlier) is shown and return:false; stops the form from being submitted.

•     
       if ((document.cform.name.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) {
  			//hide the form
  			$('.contactForm').hide();
  		
  			//show the loading bar
  			$('.loader').append($('.bar'));
  			$('.bar').css({display:'block'});
  		
  			//send the ajax request
  			$.post('mail.php',{name:$('#name').val(),
  							  email:$('#e-mail').val(),
  							  message:$('#message').val()},
  		
  			//return the data
  			function(data){
  			  //hide the graphic
  			  $('.bar').css({display:'none'});
  			  $('.loader').append(data);
  			});
  			
  			//waits 2000, then closes the form and fades out
  			setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 2000);
  			
  			//stay on the page
  			return false;
  		} 
    });

  If all of the fields are correct, then we run the script that hides the form, shows the loading bar until the ajax variable passing to the mail.php script is complete, and then set a timer that waits ’2000′ until it closes the whole thing. If you’d like to demo this action, please do not use the form on my website unless you want to say something to me; you can demo the form that sends a message to nowhere here.

Keep in mind, this was one of my first forays into really screwing around with jQuery/javascript using some of my own code, so I’m sure things are not perfect, and a veteran may look at some of my scripting with a bit of “wtf?” on their face. If you do get that face, please let me know of a more optimal way of doing something, and I will definitely update the code and give you credit. If you have any questions, as usual please leave them in the comments here!

Give me feedback! I appreciate anything and everything. While the portfolio is for the clients, the blog is for the readers so I value your opinions. Also, if anyone has any requests as to how I did anything on this website, please let me know in the comments, and I’ll be sure to make a tutorial for it! I experimented with a lot of new things. Also, I updated the comment system, so it now uses WordPress 2.7′s threaded comments.

Once again, a description of these posts: I provide a list of links that I have collected over the past year, as well as all of the Firefox tags that I use to keep them indexed. This gives you a ton of easy and quick resources. If you are unfamiliar with Firefox’s bookmarking system and want to know how to truly take advantage of this post, click here. Also, be sure to check out the other posts from the series if you haven’t yet: Useful Javascript, jQuery, and AJAX Tutorials and Resources – Massive Link Collection Part #1 and Design Tutorials, How-tos, and Resources for Photoshop and Illustrator – Massive Link Collection Part #2.

Inspirational Websites

• 25 Modest Websites With a Muted Colour Scheme | Blog.SpoonGraphics – color, design, inspiration, muted, pastel, web
• Retro and Vintage In Modern Web Design | Design Showcase | Smashing Magazine -design, inspiration, retro, vintage, web, websites
• 24 Kick Ass Portfolio Designs | + fuel your creativity + – inspiration, portfolio design, portfolio gallery, web portfolio
• 40 most beautiful and inspirational website designs of 2008 | CrazyLeaf Design Blog – inspiration, website
• 25 of the Best Photographer Portfolio Websites | Vandelay Website Design – gallery, photographer, web
• 27 Best Places You Should Visit To Get Incredible Web Design Inspiration! – Opensource, Free and Useful Online Resources for Designers and Developers – design, gallery, inspiration, web
• 50 Beautifully Dark Web Designs – Six Revisions – dark, design, inspiration, website
• Vintage and Retro Typography Showcase | Inspiration | Smashing Magazine – inspiration, retro, typography, vintage
• 30 Stylish Examples of Doodles in Web Design | Blog.SpoonGraphics – doodle, draw, drawn, hand, inspiration
• 30 Beautiful Examples of Grunge in Web Design – Six Revisions – design, grunge, inspiration, site, web
• Showcase Of Clean And Minimalist Designs | Design Showcase | Smashing Magazine – clean, design, gallery, inspiration, minimalist
• Inspirational Design from Extreme Sports Sites | Blog.SpoonGraphics – biking, extreme, skateboarding, snowboarding, sport
• Best of CSS Design 2008 – css, inspiration
• Textures In Modern Web Design | Design Showcase | Smashing Magazine – design, inspiration, texture, web
• 50 Insanely Good Vector-based Web Designs – VECTORTUTS – art, inspiration, site, vector, web, website
• 30 Beautifully Textured Web Designs – background, inspiration, texture, website
• 25+ Inspirational E-Commerce Website Designs – Part Two | Vandelay Design Blog – cart, e-commerce, inspiration, shopping, website
• 15 Beautiful Web Designs Empowered With Ajax Techniques – Opensource, Free and Useful Online Resources for Designers and Developers – ajax, inspiration, sites, technique, web
• 18+ Sources of Inspiration from Coffee, Ink, Blood and other Stains – PSDTUTS – blood, coffee, crack, inspiration, smear, stain
• 50 Monochromatic Website Designs | Webdesigner Depot – color, inspiration, monochromatic, one, website
• 25 Beautifully Colorful Websites – Part 4 | Vandelay Design Blog – colored, colorful, design, inspiration, rainbow, website
• alistapart.com by Mobify – css, example, html, inspiration, mobile
• 30 Creative Examples of the Hand Drawn Style in Web Designs – draw, drawn, example, hand, inspiration
• 20 Examples Of Dark & Minimalist Website Designs With Great Typography | Spyre Studios – dark, design, inspiration, minimal, website
• 50 Trend-setting Design Studios and Agencies | Inspiration – company, design, inspiration, portfolio, profile, studio, website
• Corporate Websites – 50 Excellent Corporate Website Designs | Webdesigner Depot – big, business, company, corporate, design, inspiration, large, website

Blog Designs

• 50 Beautiful Blog Designs | Design Showcase | Smashing Magazine – blog, creative, design, inspiration, blogs
• 16 Inspiring Typography Based Blog Designs | Design Reviver – blog, design, site, typography, web
• 21 Beautiful Blog Designs | CrazyLeaf Design Blog – blog, design, inspiration
• 51 Amazing and Inspiring Blog Style Web Designs : Speckyboy Design Magazine – blog, blogs, inspiration
• 30 must see blog designs – blog design, inspiration
• 40 Excellent Blog Designs – Six Revisions – blog, design, inspiration
• 30 More Must See Comment Designs for Blog Designers | Blog design Blog for Blog Designers – blog, comment, design, comments

Logos

• Beautiful And Creative Logo Designs For Your Inspiration
• Logo Design Trends 2008 – inspiration, logo design, logo trend, logos
• 30 Brilliant Vector Logo Designs, Deconstructed – VECTORTUTS – design, inspiration, logo, logos, vector

Navigation

• 37 Examples of Unique Navigation | Inspiredology – inspiration, navigation
• 50 Beautiful And User-Friendly Navigation Menus | Design Showcase | Smashing Magazine – inspiration, navigation
• 50+ Gorgeous Navigation Menus | Vandelay Website Design – design, inspiration, modern, navigation, web

Other Inspiration Elements

• 15 Unique Flash Gallery Techniques – flash, gallery, image, inspiration, photo
• 15 Beautifully Minimal Business Cards | Web Design Ledger – business, card, design, inspiration
• Button Design Showcase – button, design, inspiration, link
• 30 Creative Illustrative Website Headers – header, inspiration, site, web
• 50 great examples of infographics – FrancescoMugnai.com – infographic, inspiration
• Creative Print Typography Layouts – design, inspiration, layout, print, structure, typography
• Brand Nu – Art Direction, Illustration, Graphic Design, Typography and more – album, art, cover, graphic design, illustration, inspiration
• Amazing Graphic Design Portfolio of Pawel Kaminski : Speckyboy Design Magazine – design, graphic, inspiration
• How To Create A Great Web Design CV and Résumé? | How-To | Smashing Magazine
• 18 Wickedly Creative Brochure Designs | Graphic Fetish – brochure, brochures, design, inspiration
• The 20 most creative resumes i’ve seen in a long time. Pure inspiration – FrancescoMugnai.com – inspiration, resume, curriculum vitae
• Breathtaking Photo Sets Guaranteed to Inspire | Design Reviver – design, inspiration, photo, photography

Quality Design Galleries

• 16 Best Web Design Galleries for Inspiration – best of, design, gallery, web
• jQuery Style – Awesome sites built with jQuery – gallery, inspiration, javascript, jquery
• Inspirational CSS, Web 2.0 and Blog Design Gallery | Design Shack – blog design, css, css design, css gallery, inspiration, web 2.0
• Design Meltdown – color gallery, css design, css gallery, design gallery, element gallery, inspiration, organized gallery, type gallery, web 2.0
• The Best Designs – The Best Flash and CSS Web Design – Web Design Awards – css design, css gallery, design gallery, flash gallery, inspiration
• CSS Vault » The Web’s CSS Gallery & Site – css design, css gallery, design gallery, inspiration
• CSS Remix – css design, css gallery, design gallery, inspiration
• Stylegala – Web Design Publication – css design, css gallery, design gallery, design news, inspiration
• CSS Beauty | CSS Design, News, Jobs, Community, Web Standards – css design, css gallery, design gallery, design job, design new, inspiration, web standard
• Fresh Church Websites :: Showcasing the best church web sites
• Best Web Gallery – Flash + CSS Gallery – design, gallery, inspiration, web

And now without any further blabbering from me, here is the list of collected articles that include everything from text effects, to vector drawing tutorials, to laying out a web interface in photoshop. Have fun!

• 14 Most Impressive Photoshop Typography Effects – 3d, cloth, copper, dream, effect, flower, font, glowing, grass, metal, patch, recessed, splash, text, watercolor
• 50 Stunning Photoshop Text Effect Tutorials – 3d, design, font, style, text, tutorial
• 40 Useful Adobe Illustrator 3D Tutorials and Techniques – 3d, alarm, book, bowl, box, can, chess, clock, dice, flower, fruit, gift, globe, hammer, illustrator, infographic, isometric, letter, logo, planet, plug, pot, pumpkin, rotate, spark, text, tutorial
• 30+ Fresh & Useful Adobe Illustrator Tutorials & Neat Tips – art, basic, border, cloud, colorful, gradient, illustrator, isolation, lighting, line, mode, mosaic, painting, pattern, seamless, shading, spirograph, tutorial, vector, watercolor
• 30+ Adobe Illustrator Tutorials : Mastering Your Tools and Options – illustrator, tool, tools, tutorial
• 15 Artistic Watercolor Effects Photoshop Tutorials – color, font, paint, photo, photoshop, text, to, transform, tutorials, water, watercolor
• 70 Beauty-Retouching Photoshop Tutorials – manipulation, photo, retouch
• 30 Beautiful Photoshop Text Effect Tutorials – Six Revisions – effect, font, photoshop, text, tutorial
• 40 Icon Tutorials for Photoshop – icon, tutorial
• 40 Photoshop Tutorials On Rain Showers and Water Drops – drop, liquid, ocean, rain, sea, water, wave
• Graphic Design – How to Combine Pixel and Vector to Produce Striking Artwork – artwork, graphics tutorial, vector tutorial
• 6 Quick’n’Dirty Photoshop Text Effects From Scratch – text effect, text tutorial
• Create a Watercolor Vector Flower Illustration – flower tutorial, vector flower, watercolor flower
• Photoshop: How To Make An Awesome Grungy Paper Texture From Scratch – grunge paper, texture paper, textured paper tuturial
• 27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts – design, glossy, grunge, layout, photoshop, portfolio, retro, tutorial, web
• Create a Citrus Fruit Design From Scratch in Photoshop – PSDTUTS – citrus, drop, fruit, photoshop, water
• 50 Photoshop Tutorials For Sky and Space Effects – photoshop, sky, space, tutorial
• Adobe Photoshop: 50+ High Quality .PSD Files and Tutorials – aero, apple, battery, butterfly, cassette, coffee, credit card, film, frame, frames, glass, iphone, magnify, nametag, old, paper, pass, photoshop, planet, plastic case, psd, sticker, strip, wallpaper, wing
• Photoshop Tutorial: Stunning 3D effects in 30 minutes – FrancescoMugnai.com – cold ice, photoshop, text, tutorial
• 50+ Excellent Body Enhancement Photoshop Tutorials | Design Reviver – enhancement, image, manipulation, photo, photoshop
• A Comprehensive Guide: Illustrator’s Paintbrush Tool and Brush Panel – art, brush, illustrator, pattern
• 31 Breathtaking Planet & Space Tutorials For Photoshop | Design Reviver – photoshop, planet, solar system, space, tutorial
• Vector Freebie & Micro Tutorial: Seamless Swirls | GoMediaZine – illustrator, pattern, seamless, tutorial
• 51 Text Effect tutorials – text effect tutorial, text tutorial
• The Ultimate Collection Of Useful Photoshop Actions – color, comic, cross, enhance, enhancing, hdr, image, infrared, ir, lomo, manipulation, photo, polaroid, processing, retro, skin, smooth, soften, tone, vintage
• How a Turn a Texture into a Seamlessly Tiled Background – any, background, pattern, tile, seamless
• The Top 30 Photoshop Text Effects Tutorials of 2008 – effect, effects, font, text, tutorial
• 50 Illustrator Tutorials Every Designer Should See – adobe, illustrator, tutorial, tutorials
• 40 Photoshop Tutorials for Amazing Lighting Effects – Part Two – alpha, beautiful, camera, channel, cloud, clouds, color, creepy, digital, effect, energy, fluffy, ghost, glow, illustrate, light, lighting, neon, sparkle, sphere, sreak, starburst, storm, swirl, tutorial
• How to Create Advanced Isometric Illustrations Using the SSR Method – diagram, guitar, illustration, isometric, view
• favicon.ico Generator – favicon, favorite, generator, icon
• 12 Useful Techniques For Good User Interface Design – interface, keyboard, shortcut, tips, user
• Vector Polishing Techniques
• Create a Magic Night Themed Web Design from Scratch in Photoshop – cloud, clouds, design, evening, inspiration, layout, night, psd, stars, web
• Photoshop HDR Workflow – hdr, photo, tutorial
• Design a Print-ready Ad in Adobe InDesign – ad, indesign, print, tutorial
• 15 Tutorials for Recreating Authentic Photo Effects – authentic, cross, hdr, photo, processing, render
• 20 Great Tutorials for Digital Painting – design, digital, graphic design, graphics, painting, tutorials
• Tips for Working with the Gradient Mesh Tool In Illustrator – adobe, illustrator, mesh, tool, tutorial
• How to Use Content-Aware-Scaling in Photoshop CS4 – aware, content, photoshop, scaling, transform, tutorial
• 50 Dirty, Filthy Grunge Photoshop Effects – dirty, filthy, grunge, photoshop, tutorial
• 40 Beautiful Grunge Photoshop Tutorials – grunge, tutorial, vintage
• 15 Excellent Logo Design Tutorials Using Illustrator – design, logo, tutorial
• 25+ Photoshop Tutorials for Poster Design – ad, design, inspiration, poster
• 40 Free Tutorials on Advanced Drawing Techniques – drawing, illustrator, tutorial
• 40 Amazing C4D Tutorials for Photoshoppers – 3d, 4d, c4d, cinema, photoshop, tutorial
• Photoshop Tutorials To Improve Your Modeling and Design Skills – 3d, model, modeling, object, photoshop, tutorial
• 40 Tutorials for Working with Shapes in Illustrator – illustrator, shape, shapes, tutorial
• 43 Really Useful Photoshop Tutorials For Excellent 3d Effects – 3d, effect, photoshop, tutorial
• 70 Excellent Logo Design Tutorials and Resources – design, logo, logos, resource, tutorial
• 35 Creative Portrait Effects Photoshop Tutorials – effect, face, person, photography, photoshop, photoshop tutorials, portrait, tutorials
• 14 Tutorials for Creating Photoshop Brushes – brush, brushes, create, how, make, photoshop, to, tutorial