The steps are clear and in this post you can find some useful tutorials and excellent readings to really become a star as WordPress Themes Designer.
I tested many of the following tutorials, and they help me to improve my skills. My brain thanks.

First Step: Design Your Layout in Photoshop

Below there are the top tutorials for learning how to design a perfect web-layout. They show how to create the essential elements for a WordPress-based website using amazing techniques in PhotoShop.

How to Make an Impressive Blog Layout in Photoshop

Create an Elegant Photoshop (PSD) Template for Wordpress

Create a wordpress interface in Photoshop

How to Create a Unique Wordpress Theme

Creating a tech blog layout in Adobe Photoshop

Wordpress Layout #5

Create a Vibrant Modern Blog Design in Photoshop

Create a Magic Night Themed Web Design from Scratch in Photoshop

Creating A Professional Magazine Web Layout

How to Create a Sleek and Textured Web Layout in Photoshop

How to Create a “Worn Paper” Web Layout Using Photoshop

#71: Building a Website (1 of 3): Photoshop Mockup

Second Step: PSD-to-HTML Conversion

I understand, maybe you are bored switching from Photoshop to a blank page that needs your skills to become a perfect (x)html/css web-layout. Don’t worry, below you can find more information to speed and to improve your techniques in psd-to-html conversion.

How to Convert a Photoshop Mockup to XHTML/CSS

Styling Post Headings That Stick Out

Animated Navigation with CSS & jQuery

Tips for Developing Semi-Liquid Layouts

#72: Building a Website (2 of 3): HTML/CSS Conversion

SportNewsPvm Coded, How To Plan A Web Layout For A WordPress Theme

MakingSEO coded, Free CSS Template with PSD-to-HTML tips

How to Code a Grunge Web Design from Scratch

Third Step: WordPress Rocks!

You are ready “to get in the zone”. Read the following posts to discover the techniques and tricks to build a great WordPress theme.

#73: Building a Website (3 of 3): WordPress Theme

How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

How to Create a Wordpress Theme from Scratch

How to write your own wordpress theme

Build a Newspaper Theme With WP_Query and the 960 CSS Framework

Styling Your Wordpress Comments

So you want to create WordPress themes huh?

Four Step: Hacks to Improve your Theme

Customize your website using the tips collected below. You’ll find some fantastic suggestions on how to boost your website.

The Ultimate Wordpress 2.8 Optimization Guide

Display Thumbnails For Related Posts in Wordpress

Displaying Author Meta Information in Wordpress 2.8

How to : Make a control panel for your wordpress theme

Display Subcategories on Category Pages in WordPress

How To Rearrange Comments in WordPress – Display the Most Recent One on Top

WordPress loop: Get posts published between two particular dates

Wordpress tutorial: Blog posts in different columns

Multiple WordPress Loops Explained

Extra: Resources and Utilities

Build your own set of tools to speed up the the development of your website proudly powered by WordPress.

Wordpress – Lorem Ipsum Test Post Pack

WordPress PSD Framework

Blank Wordpress Themes

Thematic, A WordPress Theme Framework

Free HTML 5 WordPress Theme

ThemeHybrid is about users, quality and WordPress

WP Framework, A blank WordPress Theme Framework

Whiteboard – A Free Wordpress Theme Framework

Extra: Other Useful Articles and Roundups

Below you’ll see a collection of other great articles and roundups to find other awesome resources.

Wordpress Posts Explained…

WordPress Theme / CSS Techniques

Power Tips For WordPress Template Developers

22 Mixed Quality Wordpress Hacks

135+ Ultimate Round-Up of Wordpress Tutorials

300+ Resources to Help You Become a WordPress Expert

Top 50 Wordpress Tutorials

Personalise your WordPress Weblog

Best of the Best? WordPress.org!

All-In-One! Browse Wordpress.org to discover the secrets behind the state-of-the-art publishing platform.

If you want to learn the basic techniques to make a PSD template, you can read Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop.

For our purpose we’ll use SportNewsPvm template, the reasons for this choice are explained below.

Why SportNewsPvm template can become a WP theme

We’re going to take a look at the relevant elements you need when you develope a template that will be used for a WordPress theme. In this case we have a preset target: a sport magazine with a weekly updates.

The SportNewsPvm layout was thought to accomplish this goal. A soft grunge magazine template with a large header and featured news box.
As you can see the structure is really valid for our purpose, in fact the basic elements are: top-menu, header, featured news box, posts container, sidebar and footer.
We can also divide the structure in four macro-areas that are top, left-container, right-container and bottom. This partition is useful for a visual representation of content layout that help us during all the steps of our work.

In this way, with this kind of structure, we are trying to consider all the needful containers for the main components of a WordPress theme. Basically, a WordPress theme is composed by the header, the post loop, the sidebar and the footer. Now it’s clear that our template have all spaces to host them.

Other important elements, in the theme development, are single post page, comments structure, category template, page template and archive. Right now, however, we just want to understand how to prepare the basic (x)html/css layout for the home page and these last elements listed will be considered at a later time.

Final Result, Css Template

Here you can see a preview image and a live demo. You can also download the zip archive with the complete CSS template.

Coding SportNewsPvm

A little summary.
In top of the structure we insert the top-menu and the header with the logo.
The left-container expects the featured news box and the posts container.
The right-container is useful to put in sponsors and other information like blogroll or recent posts list.
In the bottom there is a simple footer with credits.

Now is time for the code. This section of the post will show the essential steps to code the psd template using the techniques explained in WaterColored Portfolio Coded, Free CSS Template With PSD to HTML Tutorial and DesignSchool Coded, Free CSS Template With PSD to HTML Tutorial.

In the folder “sportnews” we put in “images” and “js” folders and the necessary files: “index.html” and “style.css”.

Step 1 – Main Structure

For the general background we use a repeatable image.

The markup for the main structure (edit “index.html”).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sport News Design | A free CSS Template | made in PV.M Garage</title>
<link href="style.css" rel="stylesheet" type="text/css" /><!-- stylesheet -->
</head>
<body>

<div id="top"><!-- top menu -->
  <div class="top_left">
    <!-- categories menu -->
  </div>

  <div class="top_right">
    <!-- pages menu -->
  </div>
</div>

<div id="header">
<!-- header -->
</div>

<div id="container">

  <div id="left_cont">
    <!-- left container -->
  </div>

  <div id="sidebar">
    <!-- right container -->
  </div>

</div>

</div>

<div id="footer">
<!-- footer container -->
</div>

</body>
</html>

To initialize Cascading Style Sheet (edit “style.css”) we write the following rules.

/*Yahoo! Reset CSS*/
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,
blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
/*End Yahoo! Reset CSS*/

body {
  background: #fff url("images/bck.jpg") repeat-x top;
  font-family: Verdana, Georgia, “Lucida Sans Unicode”, sans-serif;
  font-size: 14px;
  color: #333;
  margin-top: 15px;
}

:focus {
	outline: 0;
}

a {
  text-decoration: none;
  color: #ca5235;
}

a:hover {
  color: #75a7b4;
}

small {
  font-size: 10px;
}

h1 {
  color: #ca5235;
  font-size: 28px;
}

h2 {
  color: #ca5235;
  font-size: 28px;
}

Step 2 – Top menu and Header

Now we add all elements of the design for the menu and header. Below there are the background images exported from psd.

The following images are for the logo and the down-header elements.

Note: in the down-header section there are the search form and the button to subscribe RSS feed. Below the (x)html code for header and top-nav bar.

<div id="top">
  <div class="top_left">
    <ul>
      <li><a href="#">Football</a></li>
      <li><a href="#">Basket</a></li>
      <li><a href="#">Volley</a></li>
      <li><a href="#">MotorSports</a></li>
      <li><a href="#">Special</a></li>
      <li><a href="#">Interview</a></li>
    </ul>
  </div>

    <div class="top_right">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Write for us</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

<div id="header">
  <div id="logo">
    <a href="#"></a>
  </div>

  <div id="search_box">
      <input name="textfield" type="text" class="search_input" id="textfield" value="Search" />
  </div>

  <div id="feed">
    <ul>
      <li><a href="#" class="rss_icon"></a></li>
      <li><a href="#" class="rss_mail"></a></li>
    </ul>
  </div>
</div>

And now, the style.

#top {
  background: url("images/bck_top.png") no-repeat center left;
  height: 53px;
  width: 1030px;
  margin: auto;
}

  .top_left {
    position: relative;
    float: left;
  }

  .top_left ul {
    margin: 23px 0 0 105px;
  }

  .top_left ul li {
    padding:0 5px;
    display: inline;
    font-size: 12px;
  }

  .top_left ul li a {
    color: #706d67;
    font-weight: bold;
    text-transform: uppercase;
  }

  .top_left ul li a:hover {
    color: #ca5235;
    font-weight: bold;
    border-bottom: 1px dotted #ca5235;
  }

  .top_right {
    position: relative;
    float: right;
  }

  .top_right ul {
    margin: 20px 60px 0 0;
  }

  .top_right ul li {
    padding:0 2px;
    display: inline;
    font-size: 10px;
  }

  .top_right ul li a {
    color: #706d67;
  }

  .top_right ul li a:hover {
    color: #ca5235;
    border-bottom: 1px dotted #ca5235;
  }

#header {
  background: url("images/bck_head.png") no-repeat center left;
  height: 244px;
  width: 1030px;
  margin: auto;
}

  #logo {
    background: url("images/logo.png") no-repeat center left;
    margin: 0 0 0 50px;
    padding: 26px;
  }

  #logo a {
    width: 463px;
    height: 167px;
    display: block;
  }

  #search_box {
    position:relative;
    float: left;
    top: -18px;
    margin-left: 40px;
    width: 260px;
    background: url("images/search.png") no-repeat center right;
    margin-right: 10px;
  }

  .search_input {
    border: 1px solid #c8c9d0;
    width: 150px;
    color: #c8c9d0;
    padding: 8px;
  }

  #feed {
    position:relative;
    float: left;
    top: -18px;
    border-left: 2px solid #c8c9d0;
    padding: 0px 5px;
    background: url("images/subscribe.png") no-repeat center right;
    width: 340px;
  }

  #feed ul li {
    display: inline;
    padding: 0 5px;
  }

  .rss_icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("images/rss.png") no-repeat;
  } 

  .rss_mail {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("images/rss_mail.png") no-repeat;
  }

Step 3 – The Main Container

Below the repeteable image used for the main container of the layout. We use a graphic with a height of 375px to emphasize the grunge effect.

In this step we don’t forget to use a clearfix technique to give a cross browser float clearing solution. So the html code for the main container is the following.

<div id="container" class="clearfix">

  <div id="left_cont">
    <!-- left container -->
  </div>

  <div id="sidebar">
    <!-- right container -->
  </div>

</div>

#container {
  background: url("images/bck_container.png") repeat-y top left;
  width: 1030px;
  margin: auto;
}

  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }

Step 4 – Left Container

In this section there are two important elements: featured news and post container. Below you can see the images for this section.

In the featured news box there are three sliding elements, so we must write a correct (x)html code to prepare document for UI jQuery Tabs.
In post container we have title, post-image, the excerpt and the “meta-info” boxes. Below you can see the code.

<div id="container" class="clearfix">

  <div id="left_cont">
  <div id="featured_title"></div>
  <div id="featured" class="clearfix">

    <ul class="nav">
      <li>
          <a href="#featured-1">
          <span class="imag_list"><img src="images/image1-small.jpg" alt="" /></span>
          <span class="meta_info_list">Category - 07.11</span><br />
          <span class="title_list">Lorem ipsum dolor sit amet</span>

          </a>
      </li>
      <li>
          <a href="#featured-2">
          <span class="imag_list"><img src="images/image2-small.jpg" alt="" /></span>
          <span class="meta_info_list">Category - 04.11</span><br />
          <span class="title_list">Etiam rhoncus</span>
          </a>
      </li>
      <li>
          <a href="#featured-3">
          <span class="imag_list"><img src="images/image3-small.jpg" alt="" /></span>
          <span class="meta_info_list">Categoria - 03.11</span><br />
          <span class="title_list">Etiam ultricies nisi vel augue</span>
          </a>
      </li>
    </ul>

    <div id="featured-1" class="featured_content">
      <a href="#" ><img src="images/image1.jpg" alt="" /></a>
			<div class="info" >
				<h2><a href="#" >Lorem ipsum dolor sit amet</a></h2>
			</div>
    </div>

    <div id="featured-2" class="featured_content">
      <a href="#" ><img src="images/image2.jpg" alt="" /></a>
			<div class="info" >
				<h2><a href="#" >Etiam rhoncus</a></h2>
			</div>
    </div>

    <div id="featured-3" class="featured_content">
      <a href="#" ><img src="images/image3.jpg" alt="" /></a>
			<div class="info" >
				<h2><a href="#" >Etiam ultricies nisi vel augue</a></h2>
			</div>
    </div>

  </div>

  <div id="news_title"></div>
  <div id="post_container" class="clearfix">
      <h1>Sed ut perspiciatis unde omnis iste</h1>
      <div class="post_image">
        <img src="images/post1.jpg" alt="post1" />
        <div class="meta_tag_comment">
        <p><a href="#">Commenti (10)</a></p>
        <p><small>Author: <a href="#">Leo Miranda</a></small></p>
        <p><small>Tags: <a href="#">football</a>, <a href="#">interview</a>, <a href="#">serie A</a>, <a href="#">serie B</a>, <a href="#">liga</a>, <a href="#">premier league</a></small></p>
        </div>
      </div>
      <div class="post_content">
        <span class="meta_info">Category - 10.07.09</span>
        <p><!--the excerpt--></p>
        <span class="more"><a href="#">Read More</a></span>
      </div>
  </div>
</div>

Here the CSS rules for the “style.css” file.

#left_cont {
    float: left;
    width: 650px;
    margin: 10px 10px 10px 21px;
  }

  #featured {
    width: 600px;
    background: url("images/img_feat_bck_big.png") no-repeat center left;
    margin-left: 20px;
    margin-bottom: 30px;
  }

  #featured_title {
    background: url("images/feat_tit.png") no-repeat center left;
    width: 632px;
    height: 27px;
    margin-bottom: 25px;
    margin-top: 5px;
  }

  #news_title {
    background: url("images/news_tit.png") no-repeat center left;
    width: 632px;
    height: 27px;
    margin-bottom: 18px;
  }

  ul.nav {
    float: right;
    left: 360px;
	  width: 225px;
	  padding-top: 3px;
  }

  ul.nav li {
    overflow: hidden;
    padding: 4px 1px;
  }

  ul.nav li a{
	  display: block;
	  height: 60px;
	  color: #333;
  }

  ul.nav li a:hover{
    outline: 1px dotted #ca5235;
  }

  ul.nav li img {
	  float: left;
    margin: 4px;
    padding: 5px;
    width: 75px;
    height: 40px;
  }

  span.imag_list {
  	 float: left;
     background: url("images/img_feat_bck.png") no-repeat center left;
     width: 95px;
     height: 58px;
  }

  span.title_list {
    color: #ca5235;
    font-size: 11px;
    font-weight: bold;
  }

  span.meta_info_list {
    color: #75a7b4;
    font-size: 10px;
    font-weight: bold;
  }

  .featured_content {
	  width: 350px;
    height: 205px;
  }

  .featured_content img {
	  padding: 9px 8px 8px 8px;
  }

  .featured_content .info {
    position: relative;
	  top: -61px;
    left: 5px;
	  height: 50px;
	  width: 340px;
	  margin: 0 3px;
	  background: url("images/transparent-bg.png");
	  overflow: hidden;
  }

  .info h2 {
    font-size: 18px;
    font-weight: bold;
    line-height: 20px;
    padding: 5px;
  }  

  .info h2 a {
    color: #d8d7d7;
  }

  #post_container, #post_container1, #post_container2 {
    margin: 0 23px 30px 23px;
    clear: both;
    min-height: 220px;
    background: url("images/post_sep.png") no-repeat bottom right;
  }

  .post_image {
    float: left;
    margin: 10px 25px 13px 15px;
    width: 201px;
  }

  .post_image img {
    border: 1px solid #75a7b4;
  }

  .meta_tag_comment {
    padding: 3px;
    background: #75a7b4;
  }

  .post_image p {
    font-size: 10px;
    color: #fff;
    padding: 3px;
  }

  .post_image p a {
    color: #fff;
  }

  .post_image p a:hover {
    border-bottom: 1px dotted #fff;
  }

  .post_content {
    margin-top: 15px;
  }

  span.meta_info {
    padding: 5px;
    background: #75a7b4;
    color: #fff;
    font-size: 14px;
  }

  span.meta_info a {
    color: #fff;
  }

  .post_content p {
    margin: 15px 0 10px 0;
    font-size: 12px;
    line-height: 20px;
    padding-left: 241px;
  }

  span.more {
    position: relative;
    right: 293px;
    float: right;
    margin-bottom: 10px;
  }

  span.more a {
    font-size: 12px;
    color: #ca5235;
    font-weight: bold;
  }

  span.more a:hover {
    border-bottom: 1px dotted #ca5235;
  }

Step 5 – Activate Slider Tabs Effect

Now we download the minified package of the framework from the official download page and also the UI package (select UI Core, Tabs and Effects Core).

We copy the two files (”jquery-1.3.2.min.js” and “jquery-ui-1.7.2.custom.min.js”) in “js” folder. To use the power of jQuery for featured news box we call the library from the “index.html” with the following lines of code between head tags:

<head>
  [...]
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
	[...]
</head>

We place this code in “index.html” (after <body>) to activate tabs:

	<script type="text/javascript">
	$(function() {
		$("#featured").tabs({ fx: { width: 'toggle', opacity: 'toggle' } }).tabs("rotate", 6000, true); });
	</script>

and this in css style file:

.ui-tabs-hide { display: none !important; }

Step 6 – Right Container, the sidebar

For the sidebar we use only an image for the title background (general back image is in the main container).

This is the markup.

<div id="sidebar">
    <div class="side_cont">
    <h2>Sponsor</h2>
      <div class="adv">
	       <a href="#"><img src="images/pvmban125.jpg" alt="pvm" /></a>
	       <a href="#"><img src="images/ads.gif" alt="Advertisement" /></a>
	       <a href="#"><img src="images/ads.gif" alt="Advertisement" /></a>
	       <a href="#"><img src="images/ads.gif" alt="Advertisement" /></a>
	       <a href="#"><img src="images/pvmban2504.jpg" alt="Advertisement" /></a>
	    </div>
    </div>

    <div class="side_cont adv">
    <h2>BlogRoll</h2>
    <ul>
      <li><a href="#">Sport Magazine - Resources for Sport Lovers</a></li>
      <li><a href="#">Football Mag - We Play Football</a></li>
      <li><a href="#">BuzzerBeater Magazine - Basket Fans</a></li>
      <li><a href="#">Premier Paper - Premier League News</a></li>
      <li><a href="#">European Sport - News from Europa</a></li>
      <li><a href="#">Focus on Carling</a></li>
      <li><a href="#">NBA News - Do you wanna play?</a></li>
      <li><a href="#">Road to South Africa 2010</a></li>
      <li><a href="#">Volley World League</a></li>
    </ul>
    </div>

    <div class="side_cont adv">
    <h2>Most Read Articles</h2>
    <ul>
      <li><a href="#">Nisi ut aliquid ex ea commodi consequatur?</a></li>
      <li><a href="#">Nam libero tempore, cum soluta nobis</a></li>
      <li><a href="#">At vero eos et accusamus et iusto odio</a></li>
      <li><a href="#">Nemo enim ipsam voluptatem quia voluptas</a></li>
    </ul>
    </div>
  </div>

Right now we write the css rules.

#sidebar {
  float: left;
  width: 335px;
}

.side_cont {
  background: url("images/side_tit1.png") no-repeat top right;
  margin-bottom: 25px;
  padding-right: 35px;
  padding-left: 20px;
  width: 280px;
  font-size: 12px;
  line-height: 18px;
}

.side_cont h2 {
  font-size: 20px;
  color: #fff;
  padding-top: 3px;
  margin-bottom: 20px;
}

.adv {
  margin-top: 37px;
}

.adv img {
  margin: 0 10px 10px 0px;
  border: 1px solid #ccc;
}

.side_cont ul {
  margin-bottom: 15px;
}

.side_cont ul li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  display: block;
}

.side_cont ul li a {
  color: #333;
  padding: 10px 0;
}

.side_cont ul li a:hover {
  color: #ca5235;
}

.side_cont ul li:hover {
  background: #e1e1e1;
}

Step 7 – Footer

Below the footer background, the markup and the style.

<div id="footer">
<p>SPORT NEWS PVM MAGAZINE 2009 - Creative Common License. It's a free template for you!</p>
<p>It's a PV.M GARAGE PRODUCTION - <a href="http://validator.w3.org/check?uri=referer">valid (X)HTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">valid CSS</a>
</p>
</div>

#footer {
  background: url("images/bck_foot.png") no-repeat top left;
  height: 113px;
  width: 1030px;
  margin: auto;
  padding-top: 48px;
}

#footer p {
  font-size: 12px;
  text-align: center;
  padding: 2px;
  color: #666;
}

#footer p a {
  border-bottom: 1px dotted #666;
  color: #666;
}

Stay tuned, the next step is WordPress Theme

Yes, the next step for SportNewsPvm is WordPress Code. Soon a new post where we’ll learn the basic operations to create a WP theme, then SportNewsPvm WordPress Theme will be released.

With this quick post I’ve collected ten high quality WordPress Themes that use useful JavaScript solutions for some elements of the their design.
The following themes are good for Magazine and Corporate web-projects and they are FREE!

WordPress Magazine and Corporate Free Themes

A collection of 10 high-quality WP-Themes for your next on-line project!

WP-CODA

Preview | Download

SchemerMag Theme

Preview | Download

Magazeen

Preview | Download

Gamezine

Preview | Download

Milano

Preview | Download

ZinMag Tribute

Preview | Download

E-channel

Preview | Download

Magaling

Preview | Download

Scarlett

Preview | Download

Freemium

Preview | Download

For these reasons you might want to check out the following wonderful and practical examples of data post positioning and design.

Burger King Studio

CSS Tricks

Kulturbanause

Matthias Schuetz

Jono Buchanan

For a Beautiful Web

Razvan Stavila

WebDesigner Depot

Mirificam Press

Agenda Oeste

Blog Medianotions

The theme has been tested in all the major Web browsers: Firefox, IE6+, Opera, Safari, Chrome and it is released for Wordpress 2.7+.

This the main features for the WP theme:

• Widgetized Sidebars;
• Customized Error 404 Page;
• Gravatar support for comments;
• Author Section in the Sidebar;
• and more…

Web-kreation, OneRoom Wordpress Theme

Preview | Download

Read about the license. More information for a useful usage.