To accomplish this I looked into what it would take to get a script running that I could schedule on my MBP to have it jump out and download my email every day.

This is going to require you to be comfortable using the command line so take that as the one of the first warnings of this post. What we will be doing in this tutorial is as follows.

1. Install Proper Certificates on our system so we can connect to GMail via the command line
2. Configure fetchmail to properly download email
3. Configure Thunderbird to read our newly downloaded email

The prep work will be to download and install Thunderbird. Feel free to use whatever standalone mail reader that you are familiar with but I’ll be showing what it takes to get Thunderbird to work.

Installing Certificates

First thing we need to do is to go download the root certificate and ensure its installed in our system for this tutorial. Go out to GeoTrust and download the certificate.

Open the commandline and we’ll create the directory that we need to save these certificates into.

mkdir ~/.ssl/certs/

Download the previous certificate into that folder but ensure that the extension is now ‘.pem’. Now we need to gather the appropriate GMail certificates.

openssl s_client -connect pop.gmail.com:995 -showcerts

You will find two sections like this.

-----BEGIN CERTIFICATE-----
[large text block]
-----END CERTIFICATE-----

Save the first one as googlepop.pem in the same folder as the last certificate.

Rehash this folder with c_rehash.

c_rehash ~/.ssl/certs/

This is where I encountered my first problem with this tutorial. When I ran that command I got a ‘bad command interpreter’ error. The scripting nerd that I am knew that it meant the first line in the c_rehash script wasnt pointing at the right thing. So I went to check on it and it had this.

#!/usr/bin/perl5

Well there is no file there, nor a link named perl5 to the current perl5 version installed on my system. So rather than just creating a link I decided to just edit the c_rehash script. But to do this you need root access at the command line in OSX. To enabled root on your OSX machine follow this KB article.

http://support.apple.com/kb/HT1528

After that is done you can switch to root like any normal Unix system and then update the file however you are comfortable with, vi/sed/awk/etc.

Configuring Fetchmail

Create the following file and set the permissions

~/.fetchmailrc
chmod 710 ~/.fetchmailrc

Enter the following text in the fetchmailrc file that we just created.

poll pop.gmail.com with proto POP3 and options no dns user 'GMAIL_USERNAME@gmail.com' there with password 'GMAIL_PASSWORD' is 'LOCAL_USERNAME' here and wants mda "/usr/bin/procmail -d %T"  options ssl keep sslcertck sslcertpath "/Users/LOCAL_USERNAME/.ssl/certs"

Update the following Variables with your appropriate information

GMAIL_USERNAME = Your GMail username
GMAIL_PASSWORD = Your GMail password
LOCAL_USERNAME = Your username on your system

Configure Thunderbird

In Thunderbird, go to Tools > Account Settings > Local Folders to get to the Local directory path. Go into this directory and create a symbolic link there that points to the mail spool file (/var/mail/LOCAL_USERNAME)

cd [Folder you just found above]
ln -s /var/mail/LOCAL_USERNAME ./GMailBackups

Now wend you open Thunderbird, down in the Local Folders section you will see a new folder named ‘GMailBackups’ and it will contain all the email that you have downloaded. But we haven’t downloaded any yet! Here is how you will download your email.

Downloading Email
Downloading it is simple, just run the following command.

fetchmail -v

If you are like most OSX users you have Growl installed. You can write wrapper scripts in whatever language that they support to hook into Growl and show status updates as fetchmail pulls down your mail. I need to write a nice wrapper for this still.

Scheduling the Mail Backups
If you have a scheduler installed already on your system that you are comfortable with feel free to use that. You can also set it up in crontab. Rather than give a tutorial on crontab here, I’ll just send you guys here.

Thoughts

The first time you will run the script you will need to run it multiple times depending how much mail you have. It was only downloading 300-500 emails at a time for me. The script was also taking about 5 minutes to run each time as well. So after a few runs everything was done and when I fired up Thunderbird all the email was there in my nice little archive.

After some searching I found that Microsoft actually created VMs for the various versions of Internet Explorer for testing and development. Yes, I was amazed as you are when I found this out. The bad part is that they are Virtual PC (VPC) VMs and incompatible with VMware Fusion. That is expected, and works fine if you develop on Windows 100% of the time and you can install VPC (Windows Only). I wanted to see if I could get these up and running in VMware Fusion, so that they could run along with my other VMs.

In doing the research to figure out how to do this I came across a nice tool that we can use to convert the Microsoft VMs to VMware VMs. The application is called Q (found here) and we will use one of the command line tools it installs on your system. It does also have a nice GUI for managing some VMs and doing other things but we will only need one of the command line tools to get this job done.

There is a tricky part to this if you intend to do it all on your Mac. You will need to find an application that can extract windows .exe files that are just fancy zip files as the default one on the Mac cannot handle these files. I already had a Windows Vista VM running so I just downloaded and extracted it in there and then moved it to the shared folder between the VM and my Mac. However you manage this process is up to you and should be fairly straightforward.

Keep in mind that while these files, even extracted aren’t that large you will need 10-20GB free per VM instance you want to setup. Now that we have the VPC file on our Mac we can use Q to convert it to a VMware VM.

Open a Terminal session and switch into the directory that has the VPC file. Use the following command to convert the image, this process should not take that long on newer hardware, 5-10 minutes.

/Applications/Q.app/Contents/MacOS/qemu-img convert -O vmdk -f vpc [VPC File] [VMDK Outfile]

- VPC File is the file name of the downloaded file
- VMDK Outfile is the name of the new image, with the .vmdk extension

Now you can start up VMware Fusion and create a new VM. When asked about the disk you select to use an existing disk and select the new VMDK file that you created.

Power the VM on and when it has finished prompting you to install drivers, install the VMware Tools and reboot. You will get some more driver errors and there are a few ways to handle these. This is really only being setup to test IE, which will work fine at this point, so you have a few options. You can simply disable all the devices in question in the Device Manager and leave it alone or you can start hunting down files.

The hunting that you need to do will get you to download the latest service pack for the OS and keep the extracted files somewhere in the VM, and also an original WIndows CD of that particular version. I just went ahead and used the Service Pack and skipped the CD part, it cleared up some things and the others were just disabled. After all of these things were done I must say that I have a very stable version of Windows XP with IE6.

The catch with these Windows VMs is that they are set to expire after a certain amount of time. So you will need to take note of that when you download them and then repeat this process as you need it. This has been a much cleaner process than I have seen so far.

I hope this helps you out and makes your designing and development go easier. Here again are the tools you need to download to get this up and running .

• Internet Explorer Application Compatibility VPC Images
• VMware Fusion
• Q

Text Editor
Notepad++

This is probably the single most changing section of this list over the years. Notable past editors were TextPad and UltraEdit. Notepad++ replaced them with its light footprint, speed and all of its plugins and functionality. Really great editor for editing just about anything very quickly when you dont need or want to fire up your entire IDE.

IDE
Eclipse

This entire section really didn’t even exist for me until a few years ago. It was about 2007 when I started looking into PHP IDE’s specifically. At the time I was using Zend’s IDE, which is great in its own right. I moved to Eclipse, for one, because it is free and well maintained. It is still very robust but more lightweight than Zend’s IDE. Eclipse also has a nice plugin system which even makes it integrate very well with the Subversion system I have setup.

Code Repository
Subversion

Most of you know what a Code Repository is or even know what CVS might be. Long and short of it is that a code repository is where you store you code when you are working on it. Then whomever is working on it can check files in/out and update files as needed without having to worry about who else is working on the files. It can get more complicated and involved than that but that is as deep as we will get in to it today. I never really had a need for one. But as I started working on larger projects, even by myself, and from different computers/locations, it has already proven itself invaluable. Combine this with the plugin to Eclipse and I can check files in/out of my repository and update them right there in my IDE.

FTP Client
Flash FXP

Some things are better not updated and stored in the Code Repository, for example images. Along with doing many other things you’ll still need a decent FTP client and let’s be honest, there are quite a few terrible ones out there. I have been using Flash FXP for years and recommend it to everyone. Tons of features, security options, everything you can think of as well as supporting server to server transfers (assuming your server support this behavior). This is trialware, but is worth every penny!

Design / Graphics
Adobe Photoshop
Adobe Illustrator

I could go into a lot of detail here but I think we all know what these are great for. I typically use Photoshop for all my site mockups. Illustrator gets used for logos as well as print media.

So what do you use?

For most cases, using this method should speed up your site, your users experience and your development time. It is very simple to implement, let’s take a look at what it takes.

First you need this line no matter what library you want to load.

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

Google’s Documentation for their API has the current list of supported versions and the libraries they are hosting. To load the library you desire it is as simple as this.

google.load("jquery", "1.3.1");
google.load("prototype", "1.6.0.3");
google.load("scriptaculous", "1.8.2");

Quite easy and it saves you a lot of trouble!

On the jQuery site you will find versions of their library to include on your site, so you can download those. They are also hosted at Google Code so you can search for them there and just load the Google hosted versions if you’d rather do that. This is a bit more of an advanced tutorial. I may go back and write a more basic “Intro to jQuery” for those of you that are unfamiliar with the library. If this flies over your head bear with me as I’ll try and break it down as well as I can.

Let’s write some HTML for the navigation list.

Home
News
Forum

This is just a pretty standard navigation setup. Take note of the class on the first list item as well as the extra div named “View_News”. This extra div is where the tabs are going to be dynamically loaded.

Let’s setup the jQuery needed for this navigation system now.

$(document).ready(function(){

  $("#View_News").load("ajax/tab.php?tab=Home");

  $("#nav li>a").click(function(){
    $("#View_News").load($(this).attr("href"));
      $("#nav li").each(function () {
        $(this).removeClass("tab-selected");
      });
      $(this).parent().addClass("tab-selected");
      return false;
    });
});

Let’s step through this line by line.

The first line is how you start a jQuery section of code. The next line is setting the default tab to be loaded. We setup the HTML to have the Home tab as default, so here is where we get it to load the Home section.

This next section is the handler for the rest of the tabs and the browsing/loading of them. This event you are creating on this line is fired every time an anchor link, inside a list item in your nav section is clicked. You should be able to read that CSS selector if you have done CSS before. That brings up a good point about jQuery. CSS Selectors are its primary way of finding items in the DOM to manipulate. This makes it very easy to jump right into a project and get things moving fairly smoothly.

After you click that link we move to the next line which tells it to look up the href attribute of the link and then fetch that URL. It will then load it into the #View_News div. This handles the loading. Pretty simple huh!

This next section of code is going to handle changing the look and styling of the tabs. Normally we would make some visual styling to indicate which tab you are currently on. The way I chose to do it for this particular project goes like this.

We first clear the class of all of the tabs, the default look and feel for the tabs in your CSS should be the ‘not selected’ style. Then I search the DOM for the parent object of the Anchor link we just clicked. Knowing that the parent is always going to be a list item, and that it will be the one that I will need to style as the ’selected’ tab. That is how I build the final line, adding the class to the list item that we want to reflect the tab we are on.

Now you are thinking “What the heck is this ‘tab.php’ in his links?”. Well that is the script that I wrote that handles what section is returned (based off of the querystring) as well as what format it is sent back. There are many ways to do this in a fully programmed PHP file. The most simple way that you may want to test with is by creating stand alone html files with juts the code you want to go into the #View_News div. It will then load them just the same. Using the PHP files there just allows you to get into more advanced things to be loaded and done.

There you have it, a basic tabbed navigation system that you could use for any number of things on your site!

Let’s take this a bit further and talk about some of the advanced features that could be added to this example. Some of you might be thinking “Why return full chunks of HTML, isn’t that passing much more data than you would need to?”. The quick answer is “Yes, maybe”. The slickest way to do this would be to have your tab.php return a JSON object and then you could style that data in the jQuery and build it that way. It should be faster. I could see myself changing what I’m working on to going that way but as it stands my timers say that I am able to make a call for the page, and have my version of tab.php gather the data and style it and return it in under 0.0005 seconds. If I were to see these numbers get higher, or page draws to be delayed then I might think about moving over to a JSON object setup.

This new tabbed navigation is going to be showing up on the new Game Gossip. Keep an eye out for the announcement for when we launch the alpha of that site very soon!

That is it for today. Hopefully you can no go ahead and implement your very own tabbed navigation system using jQuery. If you set one up feel free to link to it in a comment!

To start things off for your new theme go ahead and make a folder in the wp-content/themes folder with the name of your new theme, no spaces. Create a folder ’style’ inside of that folder.

How you do the next part depends on you really. If you Google around you will find a few WordPress reset themes. They strip away all formatting and standardize some tags being used. They are very nice for designers who want to have a decent base to just stylize with some CSS. I used one of these originally, but during my conversion, WordPress redid their theme system. While my method worked, I really need to redo my theme already and change the ways I did a few things. If you are going to use a reset to lay your base down, make sure it is for the version of WordPress you are running.

For our case we will just start with the ‘default’ theme as our base. Just copy the contents of the default theme into your folder for your theme. Create another folder in your themes folder named ‘unfinished’ as well. You can see there are a lot of php files in this directory. They are all described in the previous link to the Codex. We want to just start working on the bare minimum to get your site working so we are going to move the ’secondary’ files to the ‘unfinished’ directory. WordPress’ theme system will default to your index.php if it doesnt find a specific one for that section of your site. So it would be best to get the base down, and then start working on specific sections of your site from there.

Here are the files that I would leave in your themes base folder, the rest of them move to your ‘unfinished’ folder.

comments.php
footer.php
functions.php
header.php
index.php
screenshot.png
sidebar.php
single.php
style.css

You will want to edit the style.css file to have the information for your theme. Just open the file and edit the comments to reflect the proper information about your style. You will also notice the other CSS files that are included. While you are converting your theme over you can start to split up your style like this or import another one with your master CSS file for the time being. Replace screenshot.png with a screenshot of your own site as well. This is the thumbnail you see on the theme selection page.

From this point on, having a slight knowledge of PHP is helpful but not needed. You are going to be cutting up your mockup into the parts that you see in that file list above. Start working on your header/footer/sidebar files. Your index file will make calls to those files and have the rest of your code in there. At that point your site should work. You can edit single.php so that you can tweak your index.php layout for looking at just one post at a time. The file comments.php controls how the comments for your site are styled.

There is some extraneous data in the files that you shouldnt feel bad about removing, particularly in the sidebar.php, especially if you know exactly the data you want and how to put it in there. Hand-holding you through customizing those files isn’t what we are going to do here as you can find that anywhere. The programming fun part of this article will be showing you how I customized the sidebar on this site.

Our side bar at the Cove contains a Twitter section, a Recent Articles section and a Delicious bookmarks section. To get all these sections to work I could have spent a few hours custom coding all the required API plugin hooks to the services and been fine. In fact I had a Twitter one done in the past. Instead of doing all that again I went to look for WordPress plugins.

I happened to find two plugins that let me be able to do what I was looking for. Twitter for Wordpress and Delicious for Wordpress by Ricardo González.

Normally you would just enable these plugins and add the widgets to the sidebar. Well that is all find and dandy for most, but I wanted to customize their output a bit more. Ricardo did a great job documenting his functions he created for these two addons so that we can pass what we want and style things up too. Here are the two lines of code that I used in my sidebar to get Twitter and Delicious working.

Twitter
<?php twitter_messages('jpwalsh1', 1, false, true, "&raquo", true, true, false); ?>

Delicious
<?php delicious_bookmarks('jpwalsh1', 10, true, false, false, false, true, false, false, false); ?>

Ricardo’s documentation goes into detail on the options but you can see what it takes to get similar data to what I have showing up in my sidebar.

That just leaves us with getting the recent posts into the sidebar. After all of my looking I could not find any plugin that did what I wanted, which was expected. The default WordPress has a ‘recent articles’ widget that people use to get this effect, but I couldnt style it the way I wanted or control it as much as I’d like. That left us needing a custom solution.

I read through some of the documentation and found this wp_get_recent_posts() function that WordPress uses. That eliminated me from trying to figure out what kind of database queries I needed to write so I was happy.

Here is my final code for my recent posts section of my sidebar.

<?php
$rposts = wp_get_recent_posts();
foreach ($rposts as $rpost) {
  if ($rpost['post_status'] == 'publish'){
  print "
" . $rpost['post_title'] . "

\n";
  }
}
?>

To dive into that a bit. The call to wp_get_recent_posts returns all the data that we need, actually too much. It even returns articles that are in draft or scheduled states. That is where the next line comes in, filtering all of those out and only grabbing my published stories. My print statement is a bit butchered by this code formatting utility I have right now. But that is just formatting the list item in the way you see on the right here.

As you continue to customize sections of your WordPress site just keep grabbing files from your ‘unfinished’ folder and customizing them to fit your site. You may not need to customize or even use all of them, but hopefully this article has given you a little better understanding of what it takes to take your HTML/CSS mockup and convert it to a WordPress theme.

Admittedly, my theme conversion is still not done and there are many things left for even me to do. So you can also expect that tweaking is par for the course for a little while. This is just like any other type of designing in that the more that you do it, the easier and faster it gets each time. Feel free to leave comments or contact me on Twitter/Facebook if you have questions.

Read the rest of this series:
Sketch to Wordpress: Part II
Sketch to Wordpress: Part I

I’ll post code snippets and then explain them.

There are quite a few things that you’ll have to do beforehand as this script, while mostly is ‘drop in’ still should require some pre-work on your end.

What you’ll need.

• *FTP ip/user/pass of destination server
• *MySQL user/pass/host
• *Folders to backup

As I discovered while writing this, some things may need adjusted for your system and I’ll flag them as we go through the script.

First we will need to setup the configuration variables of the script.

### Setup Environment ###
DIRS="/home/user/public_html"
BACKUP=/tmp/backup.$$
NOW=$(date +"%d-%m-%Y")
INCFILE="/root/tar-inc-backup.dat"
DAY=$(date +"%a")
FULLBACKUP="Sun"

### MySQL Config ###
MUSER="user"
MPASS="pass"
MHOST="localhost"
MYSQL="$(which mysql)"
MYSQLDUMP="$(which mysqldump)"
GZIP="$(which gzip)"

### FTP Config ###
FTPD="/incremental"
FTPU="username"
FTPP="pass"
FTPS="hostname"

### Email Config ###
EMAILID="email@domain.com"

DIRS: Separate paths with spaces.
BACKUP: Where to store backup files temporarily during the script.
INCFILE: Is what we will use to control the incremental backups.
FULLBACKUP: Day of the week to run your full file backups.

Let me point something out about the MySQL configuration. It is quite easy to just slap your root account in there and let it go to town. Try NOT to do that if you can help yourself. Make a database backup user with the proper privileges and access to the databases you want to back up. Those privileges are, SELECT, SHOW DATABASES, LOCK, RELOAD.

The rest of the configuration is self-explanatory. On to the next section.

### FS Backup ###
[ ! -d $BACKUP ] && mkdir -p $BACKUP || :

### Determine which backup to run ###
if [ "$DAY" == "$FULLBACKUP" ]; then
  i=$(date +"%Hh%Mm%Ss")
  FTPD="/full"
  FILE="fs-full-$NOW.tar.gz"
  tar -zcvf $BACKUP/$FILE $DIRS
else
  i=$(date +"%Hh%Mm%Ss")
  FILE="fs-i-$NOW-$i.tar.gz"
  tar -g $INCFILE -zcvf $BACKUP/$FILE $DIRS
fi

### Start MySQL Backup ###
# Get all databases name
DBS="$($MYSQL -u $MUSER -h $MHOST -p$MPASS -Bse 'show databases')"
for db in $DBS
do
 FILE=$BACKUP/mysql-$db.$NOW-$i.gz
 $MYSQLDUMP -u $MUSER -h $MHOST -p$MPASS $db | $GZIP -9 > $FILE
done

This is the meat of the script. If you are reading this you can most likely read that and see what it is doing.

We are going to create the backup directory, and then backup the files based on what day it is. Then we will dump all the tables that the user account has access to a gzipped text file.

Time for the next section.
(sorry couldn’t get this section working right with the code highlighter.)

### FTP Backup to Remote Server ###
#Start FTP backup using ncftp
ftp $FTPS< prompt
bin
mkdir $FTPD
mkdir $FTPD/$NOW
cd $FTPD/$NOW
lcd $BACKUP
mput *
quit
EOF

Here is something that you will need to test on your system. This is what you need to figure out. How can you, in one line, open and authenticate to a remote FTP server. This example looks very simple, but it requires setting up an .netrc file with the authentication information. I don’t want to get into .netrc config but it is very simple and documented all over the Internet. I had to create an entry for the remote server, and then I could connect like you see in the script. Some people may need to pass user/pass/host on one line, etc. Figure it out for your system and change the line above that is right after the comments.

The rest is basic FTP commands, easy enough.

### Backup Fail Check ###
if [ "$?" == "0" ]; then
 rm -f $BACKUP/*
else
 T=/tmp/backup.fail
 echo "Date: $(date)">$T
 echo "Hostname: $(hostname)" >>$T
 echo "Backup failed" >>$T
 mail  -s "BACKUP FAILED" "$EMAILID" <$T
 rm -f $T
fi

This is just the wrap up that will email you if the backup bombed. You can add all the info that you want into that email if you choose to.

Save all those code chunks as a new shell script and start testing. It's working great for me and hopefully it helps you out.

Add this line in the head section of the index.html:

The CSS file will stay empty for now but let’s talk about where I usually start a CSS file with. There is a CSS method called the ‘CSS Reset’. The idea is that all browsers define what the ‘defaults’ are of tags differently. So what we would like to do is to get them all as close to the same to start with, before we start adding our custom code for our site. The cascading style of the CSS system will then allow our defaults to be there and we can just then edit the attributes we need for each tag.

The reset that I use the most, or at least a variation of, is the reset that Eric Meyer has maintained for us. The easiest way to implement this into your site is to first save his code as its own file, say reset.css. Place it in that style folder.

In your default.css file add the following line to the top.

@import reset.css

This only works for modern browsers, so if you’d like to support older browsers on this project, you will need to include the code in your default.css file. Either way we have a blank slate and are ready to go. Fire up Photoshop and lets start learning to love the Slice tool.

I tend to slice items by section first so that I’m slicing just what I need, rather than slicing up the entire document at once and trying to save all the images at once. The goal is to minimize the amount of images/slices required to build your page. If you can recreate the effect in CSS/HTML/JS then its probably faster to do it that way, but again not always and this varies.

We will take the new Cove layout for example. You can see that there aren’t many images around. The script section headings, the RSS and twitter icons and the navigation buttons and drop shadow below the header section and then lastly the background for the content section that adds the drop shadow on the outside edges. Go around the net and see how your favorite sites are cut up too. Check out some of the ones in our sidebar here. If you haven’t already, now would be when you start using Firefox and Firebug.

Some tips on good slicing. Slice the least amount you can, and try and reproduce as much of the effect in CSS as possible. It might also be helpful to hide certain layers when you are slicing things to make it easier to grab things. Layer->New Layer Based Slice, is nice and has its place as well so use that when you need to. I’ll use that on things like those script headings on the Cove. After you have carved up your first few slices switch to the Slice Select tool and double click the slice, in that box name your slice what you want the image to be named. Then when you do the Claw (Ctrl + Alt + Shift + S, aka Save for Web, yes I know a PC shortcut!), and select save, the names will be set and you can just use the save options to just save the slices you want. I also try and not use GIFs if at all possible. Slice in background colors and things that will make them easier to incorporate into your site. Transparent PNGs are also widely used and there are workarounds to get them to work in old browsers if you are worried about that.

As with any layout start with getting the basic layout structured in your HTML/CSS file and then we will start on the header. I dont want this lesson to be a copy/paste-fest so do a little Googling if you need to catch up to certain points. A basic 968px wide centered two column default HTML/CSS setup can be found easily.

Now since we are about to start typing in some CSS into your project its best to decide on what format you are going to type it out in, either single or multi-line (how the Cove is done). You then should organize your CSS file into code that is related, like ’sidebar’ and ‘header’ or ‘navigation’ things like that will make it easier to maintain.

Here is the HTML code for the header section at the Cove:

Home
About
Tutorials
Portfolio


Pirate Cove


A Safe Haven for Designers and Programmers

You will notice that the row of navigation buttons at the top of the page is nothing more than a standard Unordered List element, the logo is an H1 tag and the slogan is an H2 tag. Remember HTML needs to semantically describe the content. You need to keep style related phrasing and coding out of your HTML, it belongs in your CSS file. Since a menu is basically a list of items, the UL tag is great for menus. H1/2 are great for logos and headlines and things of that nature.

Here is then how we style the header (Press expand to see full code…it’s a bit long):

/* Typography */
h1 {
	background: #4F6373 url(../images/logo.jpg) no-repeat;
	text-indent: -9999px;
	height: 44px;
}

h2 {
	background: #4F6373;
	font-family: Verdana, sans-serif;
	font-size: 10px;
	color: #FFF;
	padding: 0 300px 5px;
}

/* Navigation */
#nav {
	margin: 0 90px;
	position: relative;
}

#nav ul {
	list-style: none;
	float: left;
}

#nav ul li {
	float: left;
}

#nav ul li a {
	float: left;
	display: block;
}

#nav a.home {
	background: url(../images/home.jpg);
	width: 55px;
	height: 40px;
	text-indent: -9999px;
}

#nav a.home:hover, #nav a.home:focus {
	background: url(../images/home_h.jpg);
}

#nav a.about {
	background: url(../images/about.jpg);
	width: 65px;
	height: 40px;
	text-indent: -9999px;
}

#nav a.about:hover, #nav a.about:focus {
	background: url(../images/about_h.jpg);
}

#nav a.tutorials {
	background: url(../images/tutorials.jpg);
	width: 84px;
	height: 40px;
	text-indent: -9999px;
}

#nav a.tutorials:hover, #nav a.tutorials:focus {
	background: url(../images/tutorials_h.jpg);
}

#nav a.portfolio {
	background: url(../images/portfolio.jpg);
	width: 76px;
	height: 40px;
	text-indent: -9999px;
}

#nav a.portfolio:hover, #nav a.portfolio:focus {
	background: url(../images/portfolio_h.jpg);
}

The techniques used just in this header section should get you rolling on the rest of your site. Images, unless they are the actual content, as in they are part of the styling of the site, should be in your CSS as backgrounds usually. Remember things in HTML should be content, things in CSS should be styling.

The background element is the first thing you will need to get used to using. The next hack is the text-indent line you see in the H1 element. This will remove the text from being displayed, and then you are just left with your image. This has quite a few applications, and I could even use that a bit more in spots here.

This part of the process, if you are new to HTML/CSS, can be pretty frustrating. Leveraging Firebug to help you with spacing and seeing how the pieces of the page fit together will be a big help. As you get better with HTML/CSS and the various tricks and hacks, this step will go much faster than you expect.

In the next article we will talk about how I went about converting this new HTML Mockup over to the WordPress Theme system.

Related Articles:
Sketch to WordPress: Part I
Sketch to WordPress: Part III

From here I grabbed a few colored pencils and a sketch book and drew out an idea for the site. Click the picture below to see what I came up with.

You can see the overall look and feel of what I had on paper made it to the site. I think it may be a good time to talk about some design basics. I like the fixed width centered layout two column system. Sometimes I may extend it to three columns but the design methods are the same. There are various ideas on how wide to make the content area but its generally 968px -ish. Then I tend to use one number to then create the columns. The Golden Ratio is a lovely number used by designers all the time, even if they aren’t doing it on purpose.

Even if a good designer is just eyeballing something, if they measure it, most likely it will be close. I just used my width of my content area (970px) and divided it by 1.618 and that ends up being what I’ll try and get close to for the ‘blog’ area of the site. I use that number to include all the padding and margins also. That gets the columns in an aesthetically pleasing width and you don’t have to sit back and ask if the column is too wide or narrow. From there you can easily leverage Grid Design techniques to lay out the site. There are lots of articles out there about Grid Designs and that is not in the scope of this tutorial, maybe a future one.

With just all of that info we can get started converting this sketch to Photoshop. Fire up Photoshop and create a new document that is about 1100 x 1000. You can setup your background on the initial layer and lock it. Then create a new layer and paint a box that is the 968px wide and center it. Gratuitous use of Rules and Guides are going to help you through these early stages of design.

Now that you have the base setup, close Photoshop because we are taking a break. No matter what you think, if this is one of your first sites you have done, I am willing to place a lot of money that the colors you selected for the site are wrong and are terrible. I’d like to introduce you to the Color Wheel and Color Swatches.

The site that I have found that is the most enjoyable for me to work with is Kuler at Adobe. You can develop, share and see what other color swatches people have developed. You can then export these to files that you can then import right into Photoshop/Illustrator to help speed along the process. Finding good complementary colors is harder than it sounds. Work at it for awhile, remembering things like links, headings and other things you may want to use to have things stand out on your site. I used a combination of two swatches I found on there and then also another color. Here is one of the swatches.

Typography is another thing you need to consider while designing. Most of the time I can find the fonts that I want on my system or at DaFont. They have plenty of free fonts there, and there are plenty of other sites/fonts out there you can find and even pay for if you need.

I ended up using 3 different fonts on the Cove [list font names here]. You may have more or less on your site, the key is just making it pleasing to the eye. Once you have nailed down some color ideas, some fonts and your overall layout get back into Photoshop.

Now it is up to you to finish your Photoshop Mock of your design idea. Remember to also use spacing properly, more talk of that will come in the next tutorial. While this isn’t a Photoshop tutorial for now, but try and group all your layers by area on the page. Make a background/header/footer/content/sidebar folders and put all their related layers in those folders. It will make converting this all to HTML much easier. Don’t over complicate things to start with, if you cant quite get a technique down in Photoshop to create the effect you are looking for, either ask around or move to a simpler idea until you learn how to create what you are looking to do. The worst thing to do is to just sit and stare at the screen because you aren’t sure how to do something.

Take some time and don’t rush as you will find, nailing down the Photoshop part of this process will determine how easy and nice the rest of the process goes.

Must of this post is pointers and tips than just a step by step how to. The initial design stages are wildly varying depending on the project and the person. I hope that this guide got you thinking about some design ideas and gave you some methods on how to translate your ideas from paper to Photoshop.

Sketch to WordPress: Part II
Sketch to WordPress: Part III

For the first few tutorials I decided I’m going to take you all through the process of creating a Wordpress theme. Seems like a fairly basic tutorial and a good starting place since I’ve been doing it all week. It will go from drawing out the idea on paper, converting that into a PSD, taking that PSD to a basic HTML mock-up and then finally getting it to work with the WP theme system.

If there are any ideas you have for future tutorials feel free to leave a comment here or Twitter me.