Website Layout Toolbox
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
- Tutorials for creating CSS-based layouts
- Tutorials for converting a PSD to HTML/CSS
- Layout resources
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
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
Design a Clean Business Layout
Making Your Own Portfolio Webpage
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
Super Simple Two Column 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
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
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.
Sample CSS Page Layouts from Max Design
CSS Layouts from Intensivestaion
Layouts from the Noodle Incident
For more design resources, please see:
