VagrantRadio

How To Parse XML Using jQuery and Ajax

Jason Pant — Mon, 26 Oct 2009 09:00:56 +0000

In this tutorial I will show you how to parse or process an xml document to display the data on a page in html form. It can be used to filter raw RSS feeds, set up a cool sitemap on your blog or even the groundwork for your own search auto complete.

Harnessing jQuery's Ajax API and making it do most of the work for us, leaves only the simple tasks of formatting how our data will displayed on the page while it is being parsed. This whole process is fairly easy to implement.

Getting Started

There are only two pre-requisites to this tutorial, an xml file and of course jQuery CDN linked in either your header or your footer.

In a new document, I've already laid out the page and created a un-ordered list to house our formatted data once it comes out the other end. The #loading div shows the loading animation on page load and once our function is ran, it displays it until the function is done.

In the Ajax call, we have four basic parameters. The type of call we are doing is a GET, basically telling the Ajax to get this file. The url is the path to the file we are getting the data from. The dataType states obviously which type of data is being grabbed, and finally success tells the Ajax what function or action to run once the xml is ready to be parsed.

Setting up the Ajax call





Untitled Document






 Loading Data..

Setting Up the Parse Function

For the parsing of the xml file we're going to set up a function that will search each parent element and output the specified child element's value as text using the find and each statement. In the xml file the format consists of a parent element being "url" and the child elements contained within such as this:


  http://www.vagrantradio.com/
  2009-10-22T00:42:12+00:00
  daily
1.0

In the first line of our function we will simply search each element of "url", then in the following lines append each instance of "loc" (being the url in our sitemap), to the #site_list unordered list with "li" tags and wrap it in a link. Once the function has finished loading the xml to the page, the loading animation is hidden.

function parseXml(xml) {
$(xml).find("url").each(function() {
//find each instance of loc in xml file and wrap it in a link
$("ul#site_list").append('' + '' + $(this).find("loc").text() + '' + '');
$("#loading").hide();
 });
}
});

The Complete Code

Now we have an easy way to grab RSS feeds or XML documents and display them without a plug-in or sidebar widget. Below is the complete code with functions to parse and format XML documents. Don't forget to check out the demo to see how it works and download the provided source files zipped up so you can tear it apart and make something useful with it.





Untitled Document






 Loading Data..

Thanks for reading!

Show Your Stuff in Our Flickr Group

Jason Pant — Fri, 23 Oct 2009 05:56:57 +0000

Have some awesome digital art you just spent fifteen hours slaving over in Photoshop? Ground breaking new website design that will make everyone go "ooh" and "aah"? You should share them with everyone in our Flickr group.

Adding your images will increase your chances of eventually reaching that interweb stardom you've been hoping for since you downloaded your first stolen copy of Photoshop. Don't mind the echo in there, it's kind of empty as of right now. But that's where you come in.

It's really simple, you get to be featured in our sidebar and thousands of Flickr users will be exposed to your work. Sounds like a great trade off, right?

Join us: http://www.flickr.com/groups/vagrantradio/

Also, don't forget to post your articles in our user link feed. More and more subscribers are reading this every day.

An Explanation of CSS Color Codes

Jason Pant — Thu, 22 Oct 2009 00:00:29 +0000

CSS Color Codes are actually hexadecimal values of a specific color. If you've worked in Photoshop's color picker, or with Adobe Kuler, you have seen the codes I'm talking about.

RGB and Hexadecimal

The alternative to hexadecimal color codes are RGB color codes. RGB stands for Red Green Blue. So if you want to specify a specific color, you'll set each color value separately, for example R = 255, G = 0, and B = 0. Bear in mind that the minimum value is 0, and maximum value is 255, so in this example we have specified red color.

Hexadecimal color values also function this way, so if you want to specify a color, you will combine RGB values converted into hexadecimal numbers like this: Red: 255 = FF, Green: 0 = 00, Blue: 0 = 00, and the result is #FF0000.

Converting RGB to hexadecimal

RGB values are usually given in the 0 - 255 range; if they are in the 0 - 1 range, the values are multiplied by 255 before they are converted. This number divided by 16 gives us the first hexadecimal digit (between 0 and F, where the letters A to F represent the numbers 10 to 15). The remainder gives us the second hexadecimal digit. For instance the RGB value 201 divides into 12 groups of 16, thus the first digit is C. A remainder of 9 gives us the hexadecimal number C9. This process is repeated for each of the three color values. There are also many web applications available that carry out this task for you.

There are three ways to make all these Color Codes work for you. The first is combining the hexadecimal color values from above with a CSS element and listing it as a property. The second uses the RGB method, and the third simply states a CSS color name.

body {
 color:#FF0000;
}
body {
 color:rgb(255,0,0);
}
body {
 color:red;
}

The last example for setting the color by HTML color name has some limitations though: There are only 16 color names that you can use: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Using Shorthand

Just as every other CSS element property, you can abbreviate or use shorthand for the hexadecimal CSS Color Codes. Hexadecimal code can be shortened if the pairs have same values. For instance, if you want to specify a red color, you'd write #FF0000. To make it shorter you can safely write #F00, as you abbreviated code like this: FF = F, 00 = 0, 00 = 0 and the result is #F00.

I hope this clears up any confusion about color codes. As always, if you have a suggestion or would like to point out anything I've missed, please do so in the comments.

The Ultimate Halloween Design Resource List

Jason Pant — Mon, 19 Oct 2009 09:00:27 +0000

Every ghost, ghoul and goblin's favorite time of year is fast approaching. It's time to deck out your website, desktop or anything else for Halloween. Here's a collection of the best wallpaper, icons, tutorials and everything you need to create the scariest designs for Halloween.

Photoshop Tutorials

Create a Vintage Horror Movie Poster for Halloween

Create a horror movie style poster

Photoshop Effects: Ghosting An Image

Give your images a ghostly effect

Undead Celebrities

Make your favorite celebs into zombies!

Making of a Scary Mental Hospital Scene

spooky mental hospital scene

Zombie Photoshop Tutorial

Braaains!

Freakish Zombie in 11 Steps!

more braaains!

Dark Book of Photoshop

magic, light, d emons and blood

Killer Portraits

Enhance bones and facial fetures to get that undead look

How to Create a Flaming Photo Manipulation

Flame on, flamer?

How to Create a Severed Arm in Photoshop

Ow, that's gotta hurt a little.

A Slick Supernatural Text Effect

A smoky night effect on text with an eerie supernatural sort of feel.

Use type as a creative effect

create a creepy skull with text in photoshop

Wallpaper

Halloween Ghosts

Ghastly halloween ghosts wallpaper

halloween

dark halloween pumpkin wallpaper

Halloween Decorations WP

Halloween themed wallpaper

Halloween Pumpkin

More scary halloween pumkin wallpaper

GrimReaper Halloween Wallpaper

The Grim Reaper himself

Happy Halloween

Pumkins, pumkins and more pumkins.

Zombie Wallpaper

Braaaains!

Little Emo

Scary doll faced girl

Background Monthly Calendar

Bats, skeletons, pumkins and a calendar!

Halloween Bats

Halloween bats from css cream

Pacman Halloween Wallpaper

some cute amongst the scary

More Wallpaper Resources

Beautiful Halloween Wallpapers And Halloween DIY-Tutorials
Best Halloween 2009 Wallpapers
88 Impressive artworks, Tutorials and Free Icon Sets
Creepy October 2009 Calendar Desktop Wallpapers
1920x1200 Halloween illustrations - Halloween Haunts

Icons

Free Jack-o’-lantern Social Media Icons – Halloween Edition

Six free social media icons in pumkin flavor

Witch Hat Icon

witch, hat, icon, ya dig?

Vista Style Halloween Pumpkin Emoticons

free pumkin icons in Vista flavor

Halloween Avatars

Avatar icons from deleket

Halloween Vista Icons

Vista style halloween icons

Halloween Emoticons Icons

pumkin icons from fast icon

Halloween 2004

free icons from the icon factory

Smashing Pumpkins: A Free Halloween Vector Icon Set

smashing pumpkins from smashing pum.. er magazine

More icon Resources

45 Halloween Icon Sets And Vector Resources
701+ Halloween Resources and Tutorials
Collection of Best Icons for Halloween

Wordpress Themes

myHalloween

A halloween Wordpress theme

Halloween

Spooky Wordpress theme

Halloween WordPress Theme

Another creepy Wordpress Theme

Halloween in Blue

Halloween in Blue Wordpress Theme

More Halloween Resources

Lifehacker - Ten Firefox Themes as Dark as Your Soul
19 Creative Halloween Advertisements
30+ Halloween Photoshop Brush Sets And Vector Images
Make A Cylon Jack-O-Lantern
Halloween Photo Tips — Our Ghoulish Guide to Scary Snaps
13 Devilish Halloween iPhone Apps, Wallpapers & Ringtones
200+ Free and Unique Photoshop Brushes for Halloween

Hope you enjoyed this one, feel free to leave a comment with anything we missed or anything you would like to share. Thanks!

Getting and Setting Cookies with jQuery

Jason Pant — Mon, 12 Oct 2009 09:00:20 +0000

jQuery is one of the most versatile JavaScript libraries today. Extending it's functionality one step further, we can use cookies to enhance the user experience by helping the browser remember user site preferences, login details and more.

If you notice the sidebar of this site, when clicking the title header or plus/minus icon it expands and contracts the content below it. It also sets a cookie remembering the position of the content, so when you open or close something, it stays that way until it is clicked again, the cookie expires or is deleted. This tutorial will show you how to easily implement cookies using jQuery and use them in your site development. There will also be a working example and a sample file for you to download at the end of the tutorial.

Setting up Scripts

Since we're using a plugin for this demonstration, download that first and upload it to your server. You can grab the plug-in from here.

As always, when using jQuery make sure you have the library linked in your header (or footer above the closing body tag) by using the version you have uploaded to your server or the Google hosted version, and also add link to your cookie plug-in file.

Setting the Cookie

Setting a cookie with jQuery is as simple as:

$.cookie("example", "foo");

For an example on it's usage, I've created a function to set the cookie, gave it a name and set the variable of it's state that will be used later when the cookie is called. For this example I'm using the script I wrote for the sidebar toggle function. I named the cookie comments and it's state is collapsed when the function is ran and the content is hidden.

$("#recent-comments-3 h2").toggle(function() {
	$("#recent-comments-3 h2").css("background-position", "0 -34px");
	$("#recent-comments-3 ul").slideUp("slow");
  //set the name and value of the cookie
	$.cookie('comments', 'collapsed');
},

Now the other function that shows the content shares the same name but it's state when the function is ran is expanded instead of collapsed. We need these states to check against when calling the cookie to set our end result on page load. We'll get into that in a second.

function () {
	$("#recent-comments-3 h2").css("background-position", "0 0px");
	$("#recent-comments-3 ul").slideDown("slow");
  //set the name and value of the cookie
	$.cookie('comments', 'expanded');
});

Checking the Cookie

Continuing our example, once the page has loaded our script checks the state variable (expanded or collapsed) that was set up earlier in this tutorial and runs whatever definitions are specified for our content.

// set the variable of the cookie we're calling
	var comments = $.cookie('comments');
// if cookie is collapsed, then do stuff. Otherwise, cookie expanded is used
	if (comments == 'collapsed') {
		$("#recent-comments-3 h2").css("background-position", "0 -34px");
		$("#recent-comments-3 ul").hide();
};

There are so many other ways that this functionality can be used, not just for toggling or hiding content. Feel free to download the example files above or check out the demo and view the source to get a better understanding of how the whole thing works.

Two Free 960 Grid Photoshop Templates

Jason Pant — Mon, 05 Oct 2009 09:00:02 +0000

For most people who design custom websites, the first step is creating the layout in Photoshop. Having a three or four column template ready is the fastest solution to make sure that your design will fit inside the browser window and that everything is evenly spaced and lined up correctly.

Having done this over and over again when creating a new site, I whipped up a three and four column 960 grid templates for Photoshop that I'm going to offer free to my readers. The page size is 1920x1500 to accommodate those of us who like to use large background images and use the retail space of wide-screen monitors.

Preview of the three column template

If the guides aren't showing up when you open the file, go to View > Show > Guides and make sure you have them enabled. You can also change the color of the guides by going to Edit > Preferences > Guides, Grid, Slices & Count. I have mine set up for the screen shot as #999999 and I'm using dashed lines.

These templates are free to use, modify or redistribute as you see fit as long as you give a link back to me or this page. I Hope you find them as useful as I do, and comments, questions or suggestions are always welcome.

Template Downloads

Download the 4 Column Template

Download the 3 Column Template

Beautiful Logos to Inspire that Creative Spark

Jason Pant — Thu, 01 Oct 2009 23:30:07 +0000

Designing logos, like any other design process, sometimes requires a little inspiration to spark creativity and get you headed in the right direction. Here is a collection of logos that posses different styles but are all beautifully designed and high quality.

Additional Inspiration Resources

Logo Design Inspiration: 50+ Beautiful Examples - InstantShift

34 Excellent Punctuation Inspired Logo Designs - Spyre Studios

Logo of the Day - Daily Logo Design Inspiration

How important is your logo? - Design Investigator

Best Logo Designers from DeviantArt - Hein Mass

How to Create an Ajax Style File Uploader

Jason Pant — Sat, 05 Sep 2009 22:22:52 +0000

In this tutorial we will be creating a simple Ajax style file uploader using jQuery, Ajax and Php. Something you can easily implement on your site, complete with front and backend validation.

Introduction

The application we are going to build will use jQuery's versatility to allow multiple file uploads without refreshing the page or redirecting, complete with front and back end validation to prevent unwanted files being uploaded to your server. Each section will be broken down to describe what it does and why to help you understand it easier.

Ajax uploader example

Step 1 : HTML Markup

Start out by creating your html document and setting up the form that will be used for the file uploader. Save this as index.html.

index.html





Ajax Uploader









Choose file(s) to upload: 

 Loading, please wait...

We start our html document by adding the usual doctype, html, head and body tags. In the head we add the title, link to the stylesheet, a link to the Google jQuery CDN and our Ajax plug-in. Our second script tag is where we will load all of our code after the document is ready.

Inside the body, we layout our page with the #file_holder div which will be our wrapper, the form and the noscript submit button that will help retain usability if the user doesn't have javascript enabled in their browser, our file upload input and the two divs that will hold our loading image as well as the error messages.

Browser with javascript turned off

If our user doesn't have javascript enabled, the form action will take care of passing the file to upload.php and the user will simply be re-directed to it and the success or error message displayed instead of remaining on the same page.

Dependent Files

For the loading image, I used "arrows" from http://www.ajaxload.info/.
Choose the image you prefer, save it as ajax-loader.gif and upload it to your server.

We're also going to need the Ajax upload plug-in. You can download it from http://valums.com/ajax-upload/. Save it as ajaxupload.3.5.js and upload it to your server in a folder called "ajax".

Step 2 : CSS Styling

This simple form only requires three lines of styling for functionality, to hide the loading div on page load and to color the success and error messages text. You can of course expand on it and make it look prettier than my plain old uploader example. Save this as style.css

style.css

/* CSS Document */
#loading {display:none;}
.error {color:#900000;}
.success {color:#009900;}

Step 3 : The Javascript

Now we can get down to creating the jQuery functions that make this uploader work. Breaking down the sections by action will help outline how the whole thing works a little easier as we go along.

Defining variables

var upload = new Ajax_upload('#userfile', {
		//upload script
		action: 'upload.php',

First we start out by defining the variables for our Ajax uploader by setting our #userfile input as the upload variable and then defining the action the input will take when a file is chosen.

Defining onSubmit

onSubmit : function(file, extension){
		//show loading animation
		$("#loading").show();
		//check file extension
		if (! (extension && /^(jpg|png|jpeg|gif)$/.test(extension))){
       // if extension is not allowed
			 $("#loading").hide();
			 $("Error: Not a valid file extension").appendTo("#file_holder
			 #errormes");
			// cancel upload
       return false;
			} else {
			  // get rid of error
			$('.error').hide();
			}
			//send the data
			upload.setData({'file': file});
		},

The above section tells our uploader what to do as soon as a file is chosen from our file input. First, our loading animation is shown while the file extension is checked. If the file extension doesn't match the predefined ones, the upload is stopped and the user is shown an error message. Once the user tries again with a correct file extension the error is removed and the file data is passed to our upload.php file by our setData command.

Defining onComplete

onComplete : function(file, response){
		//hide the loading animation
		$("#loading").hide();
		//add display:block to success message holder
		$(".success").css("display", "block");
//find the div in the iFrame and append to error message
		var oBody = $(".iframe").contents().find("div");
		//add the iFrame to errormes
		$(oBody).appendTo("#file_holder #errormes");
}

Once our file has been passed to the upload.php file which we will get to soon, the loading image is hidden and the error or success message is shown by grabbing the status from an iframe that the ajaxupload plug-in creates.

The complete script

Copy and paste this entire code in the head section of your document.

Step 4 : The Php

The php file does the actual uploading to our server while the functions we will implement provide validation to make sure the uploaded file stays within our set guidelines. Breaking this file down by sections will aid in explaining it a little easier.

Setting up variables

$max_filesize = 2097152; // Maximum filesize in BYTES.
$allowed_filetypes = array('.jpg','.jpeg','.gif','.png'); // These will be the types of file that will pass the validation.
$filename = $_FILES['userfile']['name']; // Get the name of the file (including file extension).
$file_strip = str_replace(" ","_",$filename); //Strip out spaces in filename
$upload_path = '/path/to/uploads/'; //Set upload path

Although some of these are pretty self explanatory, I will explain what everything in the above section does.

The $max_filesize variable determines the maximum size allowed for upload, currently set to 2mb (which is what most hosting providers set their servers to by default), set in bytes.

The $filename variable gets the complete name of the file including extension from our #userfile input.

The $allowed_filetypes variable builds and array of allowed file types for reference when our check is run in the lower part of the code that we will get to shortly.

The $file_strip replaces any spaces in the file name with underscores, why? If the file name is used in a url such as a link to an image, etc. the spaces are often replaced with %20 making for a sloppy address and hard for search engines to index.

Finally, $upload_path defines the folder which the uploads will be moved into relative to home on your server. In other words, most servers are configured with a file structure like this: /home/yourusername/yoursite.com/path/to/uploads. To easily find the path you should enter here, try uploading the php script below to your server, name it root.php and access it from your browser. Make sure after you find your server root to delete the file as to not expose it publicly.

Find Server root

For the rest of the script, it simply processes functions based on our parameters that we set in the code above.

Processing the upload

// Check if the filetype is allowed, if not DIE and inform the user.
 if(!in_array($ext,$allowed_filetypes)) {
  die('The file you attempted to upload is not allowed.');
}

Starting out, the array of file types is checked and if the extension isn't there the script stops execution (die) and outputs a message about the error.

// Now check the filesize, if it is too large then DIE and inform the user.
  if(filesize($_FILES['userfile']['tmp_name']) > $max_filesize) {
     die('The file you attempted to upload is too large.');
}

Check the file size against the variable set, if larger, the script stops execution (die) and outputs a message about the error.

 // Check if we can upload to the specified path, if not DIE and inform the user.
  if(!is_writable($upload_path)) {
     die('You cannot upload to the /uploads/ folder. The permissions must be changed.');
}

This portion checks the folder on the server to make sure it is writable, or able to have our script move a file into it. If not, we use (die) again and output a message to our user.

// Move the file if everything checks out.
  if(move_uploaded_file($_FILES['userfile']['tmp_name'],$upload_path . $file_strip)) {
     echo ''. $file_strip .' uploaded successfully'; // It worked.
 } else {
     echo ''. $file_strip .' was not uploaded.  Please try again.>'; // It failed :(.
 }

If our file has passed all of our backend checks it is then moved into our uploads folder. If something else goes wrong, our user is notified to try again.

upload.php

Copy and paste this entire code into a new file and save it as upload.php

The file you attempted to upload is not allowed.');
	}
   // Now check the filesize, if it is too large then DIE and inform the user.
   if(filesize($_FILES['userfile']['tmp_name']) > $max_filesize) {
      die('The file you attempted to upload is too large.');
 	}
   // Check if we can upload to the specified path, if not DIE and inform the user.
   if(!is_writable($upload_path)) {
      die('You cannot upload to the /uploads/ folder. The permissions must be changed.');
	}
	 // Move the file if eveything checks out.
	 if(move_uploaded_file($_FILES['userfile']['tmp_name'],$upload_path . $file_strip)) {
      echo ''. $file_strip .' uploaded successfully>'; // It worked.
    } else {
      echo ''. $file_strip .' was not uploaded.  Please try again.'; // It failed :(.
 }
?>

Setting File Permissons

Before we can test out our uploader, we need to make sure the folder in which our uploads will go is writable. I'll spare you the usual CHMOD to 777 stuff and quickly moving on. If you are familiar with using a telnet client this part isn't for you, it's for the people who were just like me when I was starting out, eager to learn and read the CHMOD part and immediately thought wtf?

Basically, open your ftp client and navigate to the folder where the downloads go from this uploader. Right click on the folder and select properties, and make sure all the check boxes are set to read, write and execute, (777) hit OK and close the window.

In Dreamweaver, navigate to the uploads folder while in remote view and right click on the file and select Set permissions and follow the instructions above.

Changing file permissions on the server

Step 5 : Give it a try

The last and final step is to try it out and see if it works. If nothing happens or something breaks, go back and follow the steps I've laid out carefully and figure out what went wrong. feel free to download the source files and check out the demo to get a better feel for how it works.

Thanks for reading!

Making Custom Patterns and Brushes in Photoshop

Jason Pant — Fri, 04 Sep 2009 00:07:48 +0000

Making your own patterns and brushes in Photoshop for design projects is pretty easy, here are some quick tips to get you started creating your own.

Creating Custom Patterns

Open an image you wish to make a pattern from in Photoshop, I used this one that i created from bgpatterns.com.

In the top toolbar go to edit > define pattern. A window will pop up with a box to name your brush, rename it and click OK. You can now set a layer style as pattern overlay that will tile your pattern automatically.

Making a custom pattern in photoshop

Creating Custom Brushes

The same goes for creating your own brushes in Photoshop.

Open the image you wish to make a brush from, I used free vectors from Neno Design. Opened the .eps file in Photoshop, copied the brush I wanted and pasted it to a new document.

Making a custom brush in Photoshop

In the top toolbar go to edit > define brush preset and name your new brush. You can now select it from the brush drop down and use it to your hearts content.

Friday Freebies for August 28th, 2009

Jason Pant — Fri, 28 Aug 2009 23:20:26 +0000

What better way to kick off the end of the monotony of the work week than tons of free stuff like vectors, icons, Photoshop brushes and more? Another in our series of roundups, "Friday Freebies" containing tons of free items for your design projects. Have a great weekend!

Free Web Tools

myFontbook - Font viewer

Easily organize and view installed font

myFontbook is a free and easy way to browse your font collection. The font viewer allows you to easily review and catalog all of your installed fonts.

View and organize your fonts.
Rate and tag typefaces.
Save valuable time.

Go2Convert - Free online image converter

Easily convert or re-size images for use on the internet

Go2Convert is a free web based tool that allows you to convert or resize an image up to 5mb in size, then grab the url or download it to your computer. The hosted url's are good for up to 5 days.

Teamwork Project Manager

Manage projects easily with Teamwork PM

Teamwork Project Manager is an easy-to-use online teamwork & project management software application that helps managers, staff and clients work together more productively online. They offer a free account that allows two active projects, rss feeds and unlimited clients.

Box.net - Online collaboration, file sharing and more

Collaborate, manage and share files on the internet

Box.net helps you create an online workspace where you can share project files, add comments, assign tasks, start discussions or create new content.

PDF to Excel - The Most Accurate PDF-to-Excel Converter

Convert PDF files to Excel for easy sharing

Use PDF to Excel to quickly and easily create highly-editable XLS files, making it a cinch to re-use tables and spreadsheets from PDF files in Microsoft Excel, OpenOffice, Google Docs, and WordPerfect Office. Best of all, it's entirely free!

Ronin - Online invoicing and time tracking

Let Ronin manage your clients, projects, invoices so you can focus on what you do best.

Simple online invoicing and time tracking. Perfect for creative teams and solo freelancers. Designed to make you look professional.

Whos.amung.us - Real-time stats for your website or blog

See realtime stats of who is online visiting your site

Once you add our widget code to your pages, it immediately begins working for you. The widget will display the number of people currently browsing your website. This is not a page counter, think of it as a 'people' counter.

SlideRocket - The leader in online presentations

Organize, track, share and collaborate with SlideRocket

SlideRocket provides a software-as-a-service model starting at free that will help you manage content, create stunning presentations, collaborate with your co-workers and also offers stats.

Essential Image Correction and Sharpening Basics

Jonathan A. Clay — Mon, 24 Aug 2009 19:57:01 +0000

Proper color, contrast and sharpness can make or break the final look of an image. In this post I will show you some of the basic image correction and sharpening techniques used not only for photography, but also for use on the web.

Image Sharpening Using the High Pass Filter

Start out by opening the image in Photoshop, for this tutorial I used this image from stock.xchng.

Duplicate the image by pressing cmd+j (ctrl+j in windows) which will give us a copy of the image to go back to if anything goes wrong, then apply the high pass filter by going to filter > other > high pass and give it a setting of 9.3 and click ok. The image should now have gray discoloration to it.

Applying the high pass filter to create an hdr effect

For the final step, change the the blending mode to overlay, softlight, or hardlight, depending on what kind of effect or how much sharpening you want out of the image. For this example I used the hard light mode to give the photo a grungy, high dynamic range (HDR) look. As you can see from the image shown side by side, there is quite a big difference in the image quality on the left by simply adding a high pass filter.

images shown side by side (click to view large version)

You can get many different results from the image by setting the strength of the high pass filter to a higher or lower number or by applying a layer mask and using a black brush to cover certain areas and then lowering the opacity to get your desired effect.

Adjusting image levels, color and curves

A proper understanding of how to adjust the levels, color and curves of an image histogram will help you better represent tones in the final image.

Adjusting image levels

The levels tool can move and stretch brightness levels in a histogram using three main components: a black point, white point and midtone slider.

Going back to our original image, make a copy by pressing cmd+j (ctrl+j in windows). Then go to image > adjustments > levels and open the levels editor. On the histogram, adjust the black and white sliders so they touch where the histogram starts and ends then click ok. Our image levels are now properly adjusted.

Adjuting image levels in Photoshop

Adjusting image curves

Similar to the levels editor, the curves editor can take input tones and selectively stretch or compress them. Unlike levels, which only has black, white and midpoint control, a tonal curve is controlled using any number of anchor points up to a total of 16.

To adjust the image curves, go to image > adjustments > curves and open the curves editor. Drag the top white slider and the bottom black slider to about 15% of their original position. The final settings should resemble the image below.

Adjusting image curves in Photoshop

Color Correction

Bringing out the proper colors in an image can be easily done by using the color balance tool in Photoshop.

Go to image > adjustments > color balance and open the color balance tool. The image we're using doesn't necessarily need color adjustment, but if the image had too much green or blue you could adjust the sliders to a negative amount and bring the colors back to where they should be. I'm going to bring out a little more of the reds and blues of the image we're using by moving the red and blue sliders to give the image a little more pop.

Balancing the color in Photoshop

With all of the techniques that were used, you can achieve different looks of your final image by setting different values in all of the tools that were used. How the image turns out is simply a matter of taste, and these settings are basically a guideline to get the optimal end product.

Friday Freebies for August 21st, 2009

Jason Pant — Sat, 22 Aug 2009 02:13:31 +0000

What better way to kick off the end of the monotony of the work week than tons of free stuff like cheat sheets, icons, Photoshop brushes and more? Another in our series of roundups, "Friday Freebies" containing tons of free items for your design projects. Have a great weekend!

Wordpress Themes

Creative by Nature Theme by CssMayo

Creative by Nature Theme

A unique and flexible high-quality portfolio WordPress theme for artists, photographers and designers. The theme was designed by .css{mayo}.

Smashing Multimedia Theme by Sarah Neuber

An excellent all purpose theme released for Smashing Magazine

Smashing Multimedia was designed especially for podcasters, photographers and users who can now easily embed videos and images, rate them and showcase them in their own WordPress-based blog. It has a parent theme and an easily customizable child theme. This Wordpress Theme comes with layered PSD source files, a visual help guide and is fully localized ready for you to translate it into your target language.

Paper Wall Theme by Indeziner

Beautiful, high quality theme from indeziner

An original, beautiful, high-quality WordPress theme designed by Adrian Lazariuc from Indeziner.com exclusively for Smashing Magazine and its readers. The theme has a unique, colorful design that will perfectly fit for your personal blogs and, if customized, can be a perfect fit for a unique magazine-style-blog.

PSD's

Android GUI PSD by Pavel Maček

beautiful Andriod Phone mockup

Photoshop file with elements of Android 1.5 GUI to help open-source community with application mock-ups. PSD file contains resizable phone illustration (in vector paths), resizable basic elements in vector paths and basic screens.

NEW skateboard template by Nunosk8

Realistic skateboard deck psd for customization

A beautiful, realistic template for making your own skateboard designs with custom deck and wheel colors.

Free Resource: ASCII Symbol to HTML Converter

Jason Pant — Tue, 18 Aug 2009 20:45:14 +0000

Do you ever find it hard to remember the html entities for the ASCII characters you’re supposed to use so your code validates when designing a website or while making your next post in your favorite blogging program? If you don’t have them all stored in your memory by now, I may have a little tool that will help you.

With the help of some JavaScript and a whole page of ASCII characters, I whipped up a page that lets you click on the character you want to use, copy the html from the box below and then paste it into the page you are working on. It may be a helpful tool or a useless one depending upon who uses it I guess. It’s saved me from looking all over the internet many times while building a site.

It’s free to use, go ahead and bookmark it and feel free to leave a comment if this is something you can use or not. Enjoy!

Link: http://www.vagrantradio.com/keyboard

Alternatively, you can drag this bookmarklet to your bookmark toolbar: html keyboard

20 Beautiful Dark Website Examples

Jason Pant — Mon, 17 Aug 2009 03:20:17 +0000

It's not easy to design a dark website and have it come out absolutely stunning, but many in the design community have managed to incorporate beautiful visuals within a gorgeous dark layout. Here are just 20 of my favorite standards setting examples of Dark website design for your inspiration.

Poplabs - Interactive Marketing Agency

Poplabs integrates beautiful typography, images and texture

Ryan McMaster - Vancouver Web Designer

Ryan uses lighting effects and texture in his dark design

Mike Precious - The Design Studio of Mike Precious

Mike also uses lighting effects and texture in his design

World of Merix Studio - Web Design Agency

Merix Studio uses dark, transparent imagery and gradients

Black Estate Vineyard - New Zeeland Winery

Black Estate Vineyard uses it's simplicity to highlight it's beautiful typography

Texture Lovers - Free textures, Inspiration and Tutorials

Dark, seductive textures highlight this sites purpose

Oink-Fu! - Illustration and apparel designs by Kris Robinson

Typography, dark colors and texture adorn oink fu

Carnivale du Vin

Dark patterns and grungy brush backgrounds tie together nicely

Two24 Studios - Beautiful web Design & Development

Grunge textures mixed together with bright colors equal awesome

Handcrafted CSS by Dan Cederholm with Ethan Marcotte

Rich, brown color working together with eye pleasing typography

Internet Dreams - Creative web agency from Richmond, London

Beautiful, rich colors and large background images help this site to stand out amongst a crowd

Newspond - A Self Sufficient News Engine

Beautiful icons, gradients and detail oriented graphics are truly an inspiration

Danny Diablo - Portfolio of Daniel Knaack

The detail oriented images and grungy textures outline Dannys skills well

Galan - Interactive Media

the simple, dark layout helps draw the eye to the featured content

Carsonified - Creativity With Integrity

Simple is beautiful when done right, Carsonified hits it on the head

EyeMagazine - Orange County Web Design and Development

A dark design that really packs a punch... heh.

Ectomachine - Design with Intention

Grunge, punk and a killer robot baby just oozes awesome sauce

Ds Design - Personal space of Dries Schaballie

Amazing showcase of digital artwork

Hutchhouse - Creative Digital Design for Web & New Media

Crazy space giraffes and different background styles

VagrantRadio - Design and Development Resources

You see what I did there? It's an obvious choice.

Friday Freebies for August 14th, 2009

Jason Pant — Sat, 15 Aug 2009 02:10:33 +0000

Fonts

10 Free Retro Fonts That Rule – Part I

One of the free fonts shown at Little box of ideas

Fonts are one of the most powerful weapons in a designer’s arsenal. They can change the way one perceives a design. Fonts can make or break a design instantly. Proper usage of fonts or typography sets the scene for your design and conveys a visual message before your client/visitors even start reading.

Just Old Fashion Font by Manfred Klein

This time I found 65 high quality fonts, where many of them are very good for font creation, creative graphic typographic works, unique web design titles and so on.

Envato Freebies

Free File of the Month: September 2009 on Themeforest

Admin Theme by Rzepak

You’re a great PHP programmer, but you find that your web applications aren’t visually appealing? In that case, Ultimate Admin Theme provides the perfect solution!

FREE FlashDen File of the Month – September ‘09

Xml News on Flashden

For September, we’re giving away a totally customizable, XML-driven news file by FlashJunkie!

September Free File of the Month: Design Symbols Set

Design Symbols by Logorado

20 unique design symbols set. The pack includes PSD + AI + EPS + PDF!

FREE VideoHive File of the Month – September 09

Glossy Surface Collection by Bushido!

A slow moving, beautifully flowing animation. It appears to be a fabric, or abstract lights that smoothly move throughout the screen. The gray/silver color scheme help achieve the appearance of a liquid metal substance.

Brushes

Cloud Brushes by JavierZhX on Deviantart

10 free brushes from JavierZhX

Set of 10 free Photoshop brushes for use in designs.

Risingsun Brushes by JavierZhX on Deviantart

More brushes free from JavierZhX

this set contains brushes with a size of 1280x1024 pixels(very cool for those vector backgrounds or any style of background).

Making Stunning Buttons in Photoshop

Jason Pant — Wed, 12 Aug 2009 05:54:31 +0000

Buttons are an important part of a design. Their main purpose is to call a user to action and get them to press it, to make an action happen on the page. Many sites out there simply leave buttons in forms and on pages to the default style and let the users operating system take care of making them look, well, boring. In this tutorial I will show you how to create stunning buttons that will draw attention and get some clicking going on.

First things first

Open a new document in Photoshop by pressing ctrl+n (cmnd+n in mac) or alternatively, click File > New in the upper toolbar. Set your page width to any size you like, in this case I'll use 400 pixels by 400 pixels and click OK. In the tools menu select the rounded rectangle tool and set the radius to 8px, choose any color you like because it will get covered when we apply a gradient later on.

Selecting the rounded rectangle tool and the radius

Add a new layer on top of the background by pressing shift+ctrl+n (shift+cmd+n in mac) or clicking the new layer icon on the layers panel and name it "button". Click and drag the rounded rectangle tool until you have a shape of about 260 pixels or bigger.

Adding Layer Styles

Now I'm going to add a gradient by double clicking on the new layer I just created my rectangle on, and this will open the layer styles window. Make sure the gradient overlay box is checked and click on the gradient bar to open the gradient editor.

Adding our gradient and editing it

With the gradient editor open, click the stop to the left then the color panel that appears to the bottom and choose any color you like from the color picker, for this tutorial I'm using #660000. Click the right stop and choose your lighter color, I'm using #990000.

Now that we're done editing our gradient, click OK on the gradient editor but leave the layer styles window open because we're not quite done adding style to our button just yet.

Adding gradient colors by clicking the left and right stops

With the gradient now applied to the button, we should have something that resembles the bright red example below.

Our button with the gradient applied

With the layer styles box still open, click on the inner shadow box and apply the settings in in the screenshot below with the mode set to normal, color of #cc0000 and a distance of 1.

Highlighting the button shape with inner shadow

Now click the stroke box and apply the settings in the screenshot below with size of 1 and color of #660000.

Outline with stroke to show the inner shadow highlights

For the last and final layer style that we are going to add to our button (this is optional), click on the inner glow box and apply the settings in the screenshot below with a color of #990000 and a size of 1. Go ahead and click OK on the layer styles window to save and apply the styles we just added.

Adding depth with inner glow

As you can see from the thumbnail preview in the layer styles window, our button is starting to take on depth and character, but there's still much more work to be done to make it "stunning". Lets continue, shall we?

Adding a little extra emphasis

Add another new layer on top of the button layer and name it "shine". Hold ctrl and click on the thumbnail of the "button" layer to outline it, you should see an animated dashed outline around the inside of your button. Select the rectangular marquee tool by clicking it or pressing M on your keyboard, then hold alt while dragging over the bottom half of the button. The top half only should be selected.

Choose the gradient tool by clicking on it or pressing G on your keyboard and choose color #FFFFFF from the color picker. Make sure a liner gradient is selected from the top toolbar with a white to transparent gradient chosen. Click and drag from the bottom of the dashed line to about 3/4 of the way to the top of the button to add our shine gradient. From the layer panel adjust the opacity to about 5% or whatever your preference, then press ctrl+d to deselect the button.

Making the button shine

The all important text

Now that we have the styling handled, it's time to add the all important text to entice that itchy mouse button click. Select the text tool and click somewhere in the center of the button and type your text. Once you are done typing, move the text to the center of the button, change the size to 36px and the color #FFFFFF.

Making the text stand out

Now to make the text stand out by adding layer styles to it. Double click on the blank area of the text layer and click stroke in the layer style panel, add 1px of stroke with a color of #990000. With the layer styles panel still open, click on outer glow and change the color to #660000 with a size of 5px. This gives the text an inset appearance on the button.

You can also play around with adding a drop shadow, I usually set it to 2px of distance with a size of 3px to make it appear to rise off the button instead of being inset.

One stunning button if I do say so myself

You should now have a stunning button worthy of drawing attention. Try changing the settings to get some different effects. For instance, making the button seem more curved is as easy as applying a darker gradient color on the bottom and lighter on the top or changing the distance and the angle of the inner shadow.

I have also included the psd file I created for this tutorial for you to download. Feel free to share it and use it in any projects that you wish.

Download this PSD file

Must Have Code Snippet Resources For Developers

Jason Pant — Mon, 10 Aug 2009 17:09:15 +0000

Writing the same functions over and over again can be very tedious when coding a website or programming an app, code snippets are the best way to save and organize that information into a usable library and just may be one of the best resources a developer can have at their side.

Whatever your weapon of choice when it comes to freelance web design or building a new app in Ruby, there are hundreds of options available to insert, save, organize and share all of the snippets you use on a daily basis. In this post I will highlight some of the best and give you a rundown on some of their features. As always, feel free to share which ones you use and why, or any that were forgotten in the comments.

Handy Adobe Dreamweaver Extensions

There are hundreds of extensions available for Dreamweaver, here are just a few of the best that add much needed functions into the popular WYSIWYG editor.

jQuery API extension
Reduce tons of typing. If you are into jQuery and use Dreamweaver then you really need this extension. Let us save you tons of time by reducing keystrokes with our jQuery API extension for Dreamweaver which provides code coloring, Snippets, and code hints that list every jQuery and jQuery UI function for you.

jQuery made even easier with a Dreamweaver extension

Wp-Builder extension
This extension is specially for designing Wordpress template build under DW. Non-config-required installation, just grab it and click the extension (.exp) file and it will do the rest of work.

Automatically insert Wordpress tags easily

TagStention
With this extension a toolbar is added in Dreamweaver which you can use for inserting WordPress template tags into your theme files. If a tag has parameters, you’ll be asked to fill in a wizard.

Insert WordPress template tags into your theme files

Google Tools
Easily add Google checkout, search, and advanced mobile functionality to your web pages.

Insert Google functions into your website

Drupal API extension
Reduce tons of typing and get rid of the plain text look when editing Drupal files in Dreamweaver. If you are into Drupal and use, or want to use, Dreamweaver then you really need this extension.

Prototype API Extension
Reduce tons of typing. If you are into Prototype and use Dreamweaver then you really need this extension. Let us save you tons of time by reducing keystrokes with our Prototype API extension for Dreamweaver which provides code coloring,

RubyWeaver
RubyWeaver is an IDE for Ruby and Rails in Dreamweaver and is compatible with Dreamweaver MX through CS4.

Online Snippet Repositories

One of the biggest advantages to using snippets is the large list of online repositories where users can save and share their code with others creating a virtual endless library of resources at your fingertips.

Snipplr
Snipplr is a large snippet search engine. It allows users to post and share their code for over 80 languages. Not only can users post their code, but they can comment on other code snippets users have posted, mark them as favorites which saves them to your profile and there is even a Wordpress plug-in that allows you to use shortcode to post code on your blog.

Social Snippet Repository - Snipplr

Github
Github serves up a large number of forked repositories in a huge variety of languages. Browse repositories based on what’s popular, or search based on keyword, size, the number of forks, and more. Popular repositories include Rails, Scriptaculous, and MaNGOS.

Popular repositories on Github

Google Code Search
A code search engine from Google that lets you search public source code across the web. The advanced search lets you search within languages, licenses, packages, files, and more.

Google Code Search Engine

Refactor My Code
A great resource if you want to get help from others to check your code for errors and inefficiencies. Just post some code, let other members know what you need help with, and wait for responses. You can also browse through “refactorings” and codes based on language.

Get help with code on Refactor My Code

Dynamic Drive
Dynamic Drive is a large, community driven site with answers to any question you may have related to programming, image effects and more. Some of the main features are a CSS library, code forums and web development tools for any background.

Large, community driven Dynamic Drive

Stack Overflow
Stack Overflow is a collaboratively edited question and answer site for programmers. Users can then vote on the answers posted based on their quality. You can also search questions based on keywords or tags, view unanswered questions, and sort by newest, oldest, featured, and other criteria.

A collaboratively edited question and answer site for programmers.

Dev Snippets
An online snippet gallery that links to snippets as well as useful development articles for numerous of platforms and languages that are located off-site, generally on the blogs of their respective creators.

Online snippet gallery, dev_snippets

Text Replacement

Texter (Windows)
Texter lets you define text substitution hotstrings that, when triggered, will replace hotstring with a larger piece of text. By entering your most commonly-typed snippets of text into Texter, you can save countless keystrokes in the course of the day.

Defined hotstrings in texter

AutoKey (Linux)
AutoKey is a desktop automation utility for Linux and X11. It allows you to manage collection of scripts, and assign abbreviations and hotkeys to these scripts allowing you to execute them on demand in whatever program you are using.

Text replacement in AutoKey

TextExpander (Mac)
TextExpander saves you countless keystrokes with customized abbreviations for your frequently-used text strings and images.

Preferences panel in TextExpander

Friday Freebies for August 7th, 2009

Jason Pant — Sat, 08 Aug 2009 03:57:22 +0000

Wallpapers

Cool wallpapers from SW GRAPHIC

Free wallpaper Designs from SW Graphic

There's nothing better than having some beautiful wallpaper for your desktop. I recently found some of my old works and decided to make them into wallpapers. I thought it would be a great idea to share them. They are full of great color compositions and it's a reflection of places that I visited. Feel free to download them and send it to your friends. Oh yea they are currently 1024x768, but more sizes will be coming soon.

Free HD Wallpapers from Wallpaper HD.net

Pirate talk from wallpaperhd.net

12500+ Free HD Quality Desktop Downloadable Background Wallpapers! Multiple Resolutions and Wide Screen Options! HD Formats to 2560x1600.

Icons

Aluminum Macbook Icon Set by gpersaud

Alumi Macbook icons free on Deviant Art

This is a set of icons which are a replica of Apple’s macbook pro. The resolution is surprisingly high in this set, which makes them easy to incorporate. These Icons can be used in a variety of ways. Use them to create wallpapers, show a website, or incorporate them into a portfolio.

Free Icons by Jonas Rask Design

Danish Royalty Free icons from Jonas Rask

Lots of beautiful mac style icons free for use in personal projects, make sure you contact the author for use in commercial projects.

DOX ADDON - Adobe Collection by DeusEx74

Dox Addon Adobe Collection by DeusEx74

Adobe CS4 Collection with 151 ICNS in iCONTAINER Format. There are still some missing,but if you need special one just request.

Brushes

1977 Brushes by meth

1997 Punk Rock brushes by meth

Some brushes bigger in set than in preview. 30+ Brushes. Created in Photoshop CS but imagepack included in download.

1976 Brushes by meth

The first set of icons from meth on Deviantart

30+ more awesome grunge punk rock brushes made in Photoshop Cs from meth.

20+ High-Quality Free Fonts for Retro and Vintage Design from PV.M Garage

Retro fonts free from PV.M Garage

As you know typography is one of the most important key aspects of any web design project. An appropriate choice of typography can convert your graphic into wonderful artwork. The fonts (20+) of this list are absolutely free and you can freely use these resources for your designs.

That's it for this freebie, don't forget to check out some of our other freebie posts to get all kinds of cool free stuff every Friday. As always, comments and suggestions are welcome.

10 Incredibly Useful Wordpress Customizations

Jason Pant — Tue, 04 Aug 2009 04:43:43 +0000

Wordpress is the most versatile and popular blogging software on the internet today, but out of the box it doesn't always do what you would like it to. Fortunately, many hacks have been found to whip it into shape and get even more functionality out of it for your own personal use.

In this article, we’ll show you 10 useful Wordpress customizations along with explanations as to how they work to get more functionality out of this awesome blogging engine.

1. Create a Send to Twitter button

Twitter only allows tweets to be 140 characters, and that's usually never enough to display a long post title from Wordpress. Here's how to create a button to make your long url in to a tiny one.

Open up your functions.php file in your Wordpress theme and create a "getTinyUrl" function to automatically send your link url to tiny.url when clicked.

Links with a Napoleon Complex

Now that we have a function to pass our url to tiny.url we can set up our button in our theme. Create your link and add the Wordpress function for the title and call your getTinyUrl() function. You can see this link in action at the bottom of the page in the "Enjoy This Post" section.

Tweet my link, I dare you.

Tweet This

2. Create A Maintenance Page For Your Wordpress Blog

Wordpress doesn't have an option to temporarily redirect users to a maintenance page when updates, design problems are being fixed or tweaks are being done to your site. You may not want your users to see this, so we'll use the .htaccess file to redirect uses to another page.

First create your maintenance page, then open your .htaccess file (usually located in the root of your server at the root of your wp installation) and create a backup just in case things go awry. Now enter the following code into your .htaccess file and change two to your maintenance page url, then enter the ip address or addresses that you don't want to have re-directed on the third line exactly as they are formatted in the script.

Manipulate the apache webserver to do your bidding

RewriteEngine on
RewriteCond %{REQUEST_URI} !/maintenance.html$
RewriteCond %{REMOTE_ADDR} !^123\.123\.123\.123
RewriteRule $ /maintenance.html [R=302,L]

Now an explanation of the code that was entered into the .htaccess file. The first line tells the server to process the script below it. Line two tells our Apache web server to make an HTTP request to the specified parameter, in this case, our maintenance page. Line three specifies the ip address it should ignore for the request and the last line tells our server to serve up our maintenance page to any computer that isn't our specified ip address.

3. Automatically Retrieve The First Image From Posts

When uploading images for posts, Wordpress automatically re-sizes them and creates a thumbnail. If you would rather grab the first image from the post and use that as your post thumbnail instead of manually entering it into a custom field, here's how.

Open your functions.php file and enter the following code. Make sure you have created a default thumbnail in case your post doesn't have one.

Catch That First image

post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Define a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}
?>

Save your functions.php file and open your index.php or home.php file and call the function like this:

The function will parse the images on the page and retrieve the first one, if no image is found it serves up the specified default image.

4. List The Most Popular Posts Without A Plug-In

Displaying the most popular posts is a good way to make visitors stay longer on your website, as is displaying related posts. There are many plugins to this, but what fun is a plug in when you can hack Wordpress instead?

Simply enter the code below into your sidebar.php file and change the 5 to however many posts you would like displayed.

The List of Popularity Contest Winners

Popular Posts

get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>


 {}

The above code executes a WordPress database query to get a list of the five posts with the most comments. The results are then wrapped in an unordered HTML list and displayed on screen.

5. Use Shortcode to Display Related Posts on a Single Page

There are endless amounts of plug-ins to display related posts in your blog, once again, what fun is a plug-in when you can add your function?

If your functions.php file is still open from the rest of the hacks, enter the code below and save it. You can change the number five in line three of the code to the amount of posts you want displayed.

Shortcode: Easy, Breezy, Beautiful

function related_posts_shortcode( $atts ) {
	extract(shortcode_atts(array(
	    'limit' => '5',
	), $atts));

	global $wpdb, $post, $table_prefix;

	if ($post->ID) {
		$retval = '
';
 		// Get tags
		$tags = wp_get_post_tags($post->ID);
		$tagsarray = array();
		foreach ($tags as $tag) {
			$tagsarray[] = $tag->term_id;
		}
		$tagslist = implode(',', $tagsarray);

		// Do the query
		$q = "SELECT p.*, count(tr.object_id) as count
			FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ='post_tag' AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id  = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID
				AND p.post_status = 'publish'
				AND p.post_date_gmt < NOW()
 			GROUP BY tr.object_id
			ORDER BY count DESC, p.post_date_gmt DESC
			LIMIT $limit;";

		$related = $wpdb->get_results($q);
 		if ( $related ) {
			foreach($related as $r) {
				$retval .= '
'.wptexturize($r->post_title).'

';
			}
		} else {
			$retval .= '
No related posts found

';
		}
		$retval .= '

';
		return $retval;
	}
	return;
}
add_shortcode('related_posts', 'related_posts_shortcode');

Once you have the functions file set, enter the shortcode into your post page and save it. What the code does is selects the specified number of posts from your Wordpress database and displays them in a generated un-ordered list.


[related_posts]

6. Separate multiple author comments from the others

When you have a multiple author blog, you can enable styling each authors comments differently with a simple "if" and "else if" statement so each one has it's own unique style.

Bling your author comments

This code checks the comment loop for the specified email addresses and displays a variable based on that email address, so when more than one author shows up on a page, they all have different looks to their comments.

7. Automate the year change in your copyright footer

Opening up your footer.php file every first of the year and editing it is just one more of those little things that you just don't want to have to do. Why not make it change automatically? Adding the php code below will display the year in your footer and change when the year does. No editing required.

Party like you don't have to do this every year

Copyright ©  Your Site.

8. Disable Search Engine Indexing Posts Using Custom Fields

This could be a trivial one, but there might be an occasion where you want to keep certain posts off the search spider radar. Inserting a custom code in your header.php file and using the custom fields in Wordpress posts can add this functionality easily.

Robot Repellent

 ID, 'noindex', true);
    if (!empty($cf)) {
    echo '';
}?>

When creating your post, simply add a custom field named "noindex" (or whatever you wish) and leave the textarea next to it blank.

9. Remove Wordpress Smart Quotes / Curly Quotes

Smart / curly quotes might look nice typographically, but they are be a major pain if you want to copy and paste source code. Open your functions.php file and paste in this code to remove the Wordpress default formatting.

Ixnay on the smart curls

If you feel like getting a little more daring, add this code to remove them in the comments section.

Ixnay on the comment smart curls

10. Disable Automatic Post Saving

Wordpress automatically saves posts in timed increments. This can gunk up your database, cause posts to get reverted if something happens in your browser, etc. Paste this code into your functions file to stop the automatic debauchery from happening.

function disableAutoSave(){
    wp_deregister_script('autosave');
}
add_action( 'wp_print_scripts', 'disableAutoSave' );

Friday Freebies for July 31st, 2009

Jason Pant — Sat, 01 Aug 2009 02:40:39 +0000

What better way to kick off the end of the monotony of the work week than tons of free stuff like cheat sheets, icons, Photoshop brushes and more? Below is the second in our series of roundups, "Friday Freebies" containing tons of free items for your design projects. Have a great weekend!

Cheat Sheets

30 Handy Cheat Sheets and Reference Guides for Web Professionals

Liquidcity Wordpress Help Sheet

Cheat sheets and reference guides are useful for both beginners and advanced web professionals. They can be used to help you remember syntax or as a tool to aid in memorization. In this post, we aim to cover the reference guides for all of the most commonly used platforms, software and coding languages.

Fonts

22 Free Fonts To Achieve That Hand Drawn Effect

FFF Tusj on Dafont.com

These fonts will work on both Windows and Mac, and if used correctly will just put the cherry on top of your hand drawn design. If you think I have missed any more amazing fonts, drop a comment linking to the font. Enjoy!

Liberation Font by Red Hat, Inc. on Fontspace

Liberation font on fontspace

Photoshop Brushes

500+ Space Brushes for Photoshop

Flash Stars from Qbrushes

Graphic designers love free Photoshop brushes, so I decided to put together a collection of the best brushes for creating space scenes. This includes brushes for stars, planets, moon, galaxies, nebulae, and more.

46 Stunning High Resolution Photoshop Light Effect Brushes

Light Effect brushes on Colorburned

This set of brushes can be summed up with only 2 words “really” and “awesome”, but since this post would look rather silly if I only wrote “Really Awesome” as the headline I will tell you a bit more. Lately, I’ve been experimenting with lots of new Photoshop brush-making techniques. I’ve found that the inspiration for these new techniques always comes at the strangest times so lately I’ve been keeping some odd hours.

Books / E-Books

40 Free and Essential Web Design and Development Books from Google

Free Google Books on Speckyboy Design Magazine

Google Books is perhaps one of the most untapped design and development resources…time to change all that. In this post there are over 40 web design and development books freely available from Google, they range from CSS, HTML, XHTML, DHTML, Actioscript, Javascript, Ajax, Perl, Ruby, MooTools, jQuery, Firefox and evem iPhone development. Not all books are complete, but offer plenty of information to help with your development.

And that does it for another Friday Freebie, hope you enjoyed them and comments and suggestions are always welcome.

VagrantRadio

How To Parse XML Using jQuery and Ajax

Getting Started

Setting up the Ajax call

Setting Up the Parse Function

The Complete Code

Show Your Stuff in Our Flickr Group

An Explanation of CSS Color Codes

RGB and Hexadecimal

Converting RGB to hexadecimal

Using Shorthand

The Ultimate Halloween Design Resource List

Photoshop Tutorials

More Tutorial Resources

Wallpaper

More Wallpaper Resources

Icons

More icon Resources

Wordpress Themes

More Halloween Resources

Getting and Setting Cookies with jQuery

Setting up Scripts

Setting the Cookie

Checking the Cookie

Two Free 960 Grid Photoshop Templates

Template Downloads

Beautiful Logos to Inspire that Creative Spark

Additional Inspiration Resources

How to Create an Ajax Style File Uploader

Introduction

Step 1 : HTML Markup

index.html

Dependent Files

Step 2 : CSS Styling

style.css

Step 3 : The Javascript

Defining variables

Defining onSubmit

Defining onComplete

The complete script

Step 4 : The Php

Setting up variables

Find Server root

Processing the upload

upload.php

Setting File Permissons

Step 5 : Give it a try

Making Custom Patterns and Brushes in Photoshop

Creating Custom Patterns

Creating Custom Brushes

Friday Freebies for August 28th, 2009

Free Web Tools

Essential Image Correction and Sharpening Basics

Image Sharpening Using the High Pass Filter

Adjusting image levels, color and curves

Adjusting image levels

Adjusting image curves

Color Correction

Friday Freebies for August 21st, 2009

Wordpress Themes

PSD's

Free Resource: ASCII Symbol to HTML Converter

20 Beautiful Dark Website Examples

Friday Freebies for August 14th, 2009

Fonts

Envato Freebies

Brushes

Making Stunning Buttons in Photoshop

First things first

Adding Layer Styles

Adding a little extra emphasis

The all important text

Must Have Code Snippet Resources For Developers

Handy Adobe Dreamweaver Extensions

Online Snippet Repositories

Text Replacement

Friday Freebies for August 7th, 2009

Wallpapers

Icons

Brushes