Laying out a website is obviously one of the most important parts of the design process. In this post we’ll feature a number of helpful resources, tutorials and articles for various aspects of layouts:

Tutorials for Creating Website Layouts in Photoshop:

These 20+ tutorials will show you different ways to design the layout of your site and each one takes a slightly different approach.

How to Create a Sleek and Textured Web Layout in Photoshop

Create a Nature-Inspired Painted Background in Photoshop

Create a Professional Portfolio Design in 17 Easy Steps

Create a Sleek, High-End Web Design from Scratch

Watercolored Design Studio Blog Layout

Create a Web Design with Grungy Paper

Chocolate Pro WordPress Style Layout

Making the “Clean Grunge” Blog Design

Website Gallery Layout Design

Design a Fresh Blog Theme on the 960 Grid

Company/Business/Software Web Layout

Create a Business PSD Layout in Less Than 10 Minutes

Design a Sleek Real Estate Website

GreenPress WordPress Theme Design

Create a Magic Night Themed Web Design from Scratch in Photoshop

How to Create a Grunge Web Design in Photoshop

Design a Cartoon Grunge Website Layout

Full Photoshop Web Design – Journal

Creating a Professional Magazine Web Layout

How to Create a WordPress Theme from Scratch – Part 1

Design a Website Using the 960 Grid System

Carbon Fiber Layout

Design a Clean Business Layout

Making Your Own Portfolio Webpage

Real Estate Web Design

Premium WordPress Theme Design





Tutorials for Creating CSS-Based Layouts:

Want to learn more about achieving a certain layout with CSS? Here are 12 tutorials that will show you a variety of different layouts.

Three Column Fixed Layout Structure Using CSS

Design Page Layouts Using CSS

Super Simple Two Column Layout

Simple 2 Column CSS Layout

Advanced CSS Layouts: Step-by-Step

How to Create a Horizontally Scrolling Site

Creating a CSS Layout from Scratch

Multi-Column Layouts Climb Out of the Box

In Search of the Holy Grail

Creating Liquid Layouts with Negative Margins

Breaking Out of the Box with CSS Layouts

The Perfect 3 Column Liquid Layout





PSD to HTML/CSS Tutorials:

Once you’ve got your layout done in Photoshop, these tutorials will show you how to code the layout in HTML and CSS.

Converting a Photoshop Mockup (video)

Converting a Photoshop Mockup – Part Two

From PSD to HTML, Building a Set of Website Designs Step-by-Step

Build a Sleek Portfolio Site from Scratch

How to Convert a PSD to XHTML





Layout Resources:

The various resources in this section will provide you with starting points for your layouts. Some are blank templates and others are resources to help you with creating the layout that you want.

Layout Gala

Layouts from Dynamic Drive

CSS Creator

Sample CSS Page Layouts from Max Design

CSS Layouts from Intensivestaion

Layouts from CSS Play

Layouts from the Noodle Incident

Layouts from Iron Myers

Layouts from Code Sucks

CSS Easy

For more design resources, please see: