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:
very helpful tutorials, thanks for the wonderful list..
Wow you have great collection of web site lay out.
Great list. I have seen a lot the PS layouts already as single posts and have used a few for production sites. Very nice to have all these resources listed in one post. Thanks!
This is an awesome collection of resources. Thanks a lot for putting this together!
~ Jim
~ tweet: @seo_web_design
Pingback: Converting a Photoshop PSD File to an XHTML & CSS Web Site - Creating Mockups | Robin's Blog
Excellent source of information. Keep up the good work!
Brilliant list. Now I just need to spend an hour a day following the tutorials. I have already done Manilla and it is awesome.
Pingback: Website Layout Toolbox : Design Newz
Pingback: links for 2009-04-28 « Minesa IT
Thanks for the feedback everyone. I’m glad it’s helpful.
Pingback: Recursos para webdesigners « Junior Cazeri
Very nice, especially helpful with the WordPress theme designs.
Amazing collection! Thanks for posting.
Pingback: The Great Geek Manual » Link Round-Up: April 28, 2009
thanks for featuring my tuts at psdvibe, and the one I wrote for sixrevisions 🙂
Pingback: links for 2009-04-28 « riverrun meaghn beta
Pingback: links for 2009-04-28 at James A. Arconati
Pingback: links for 2009-04-28 « Mandarine
I would like to get one web-site designed by YOU, provided it is cost-affordable/reasonable. Please advise minimum price for comparative consideration. Thanks.
Pingback: Inspiring Design Links for Creatives for 2009-04-29 | This Inspires Me
Pingback: All the best links & resources of the past days about web & graphic design, design, photography and more | vitali software
Pingback: links for 2009-04-29 | wann.es
Pingback: Top 10 articles for web dev and design - April 2009 | HieuUK
Pingback: Top 10 Design Blogs | D-Lists
Pingback: Grumpy Git . org » Blog Archive » Links for 2009-05-03 [del.icio.us]
Pingback: links for 2009-04-28 - Go Web Young Man
Thank tou for your helpful resources,It’s great 🙂
Pingback: (Late) Linking Around: June 16/09 | Visual Nightmare
Steven Snell, tutorials are excellent. The best web site design layout in photoshop is „sleek and textured“. The best css based layout is „The Perfect 3 Column Liquid Layout“.
For me as a web designer, web design layouts are in first position step and foremost part of every web site design process. Because a useful web design layout and seo are very tightly interconnected.
Very good choice. Thanks a lot for making quite an effort.
Pingback: Textures Toolbox: 80+ Texture Resources for Designers
wonderfull list..
Excellent! You always have the best content on your site! =]
This is a great resource list. Thank you
Good composed web design layout of any page is the always the first and most important step when you decide to create serious web page. However web page layout must have appropriate graphic design elements, limited number of colors. Off course for this projects is always important to secure requested functionality in keys that we plan to develop some serious web applications.
Integration existing web design (web dizajn) project with some server side structure (web programming language) such as( PHP, MySQL, Java) in most cases depend of initially created page. So above layouts show us very good compositions of colors, also CSS styles are good implemented using new standards. This is the way – direction that quality web design projects or personal web pages should track.
Also visit our small web dictionary of web development terms:
http://www.elitesolution.net/index.php?id=web_dictionary
Nice collections..!!
It helps me a lot to get some clear idea
Fantastic design work and texture integration! I will be bookmarking this page for design inspiration 🙂
Hey I just wanted to let you know, I actually like the composition on your blog. But I am utilising Flock on a machine running version 9.04 of Xubuntu and the design is not quite correct. Not a strong deal, I can still essentially read the articles and explore for information, but just wanted to inform you about that. The navigation bar is kind of tough to navigate with the config I’m running. Keep up the superb work!
I have been studying your entries during my morning break, and I should admit the entire article has been very enlightening and rather well written. I thought I might permit you to recognise that for some reason this weblog does not view well in Internet Explorer 8. I want Microsoft would prevent converting their software. I have a query for you. Could you thoughts replacing weblog roll links? That might be truly neat!