Resources for Web Development Students @ Robin’s Blog

I am republishing this article because so many new resources have been added since the original publishing date. If you know of additional resources that should be added please leave a comment below.

Part of the Photoshop class project is to create a Web site mockup. I have recently found several tutorials that may help you to complete this project. This post is updated as new tutorials are found. I would recommend that you read How to Effectively Organize your Photoshop Layers before you begin these tutorials so you understand how to properly organize your layers for easy XHTML and CSS development.

Create a Sleek, High-End Web Design from Scratch – put together a high-end Web design using a crisp, thin font, gorgeous background images, and clever use of space and layout. You can easily use the technique to create your own unique designs.

Build a Sleek Portfolio Site from Scratch – take a PSD file and build it with some nice clean HTML and CSS.

How to Convert a PSD to XHTML – a screencast that shows you exactly how to convert a PSD into perfect XHTML/CSS.

From PSD to CSS/HTML in Easy Steps – Part 1 – how to take a PSD file and convert it into a fully CSS based html page. Be sure to check out parts 2, 3, and 4.

From PSD to HTML – how to take the design created for the Fundamentals of Interface Design tutorial and turn that into a usable web interface.

From PSD to HTML, Building a Set of Website Designs Step by Step – entire process of getting from Photoshop to completed HTML. Build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme.

Creating CSS Layouts: The Best Tutorials on Converting PSD to XHTML – a collection of tutorials to help you to convert PSD files to CSS based layouts.

20 Wonderful Photoshop Tutorials for Designing Professional Navigation Menu – a collection of 20 Photoshop Tutorials on creating professional, clean and stylish navigation/menu bars.

For those of you who prefer to use Illustrator, check out Use Adobe Illustrator to Create a Clean Website Layout.

For Fireworks users check out Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 1: Initial design, Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 2: Markup preparation, and Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 3: Layout and CSS

Edit 11/17/08 – DesignMag has come out with a list of Top 10 Tutorials for Converting PSDs to HTML/CSS

Edit 11/21/08 – CSSTricks has numerous videos/podcasts on creating and converting Photoshop Mockups. You can find all of these tutorials and more on their video page.

Edit 12/4/08 – New tutorial, Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!, released at PSDTuts.

Edit 12/15/08 – New tutorial, Converting a Design From PSD to HTML from NetTuts

Edit 2/3/09 – 40 Useful Photoshop Web Layout Tutorials from Six Revisions

Edit 3/17/09 – 60 Layout design tutorials – 60 layout design tutorials, from which you can learn how to make your own website design.

Edit 3/17/09 – 43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation – More resources for create Web mockups in Photoshop and converting them to XHTML and CSS based sites.

Edit 3/17/09 – psd2css Online – An online service that allows you to upload your Photoshop PSD file and convert it automatically to an XHTML and CSS based layout. Be sure to read the documentation and tutorials for this service before you begin you begin your project. There is also a forum for support.

Edit 3/24/09 – 150 Useful Adobe Photoshp Web Design Layout Tutorials and Techniques

Edit 3/25/09 – Converting a PSD to XHTML/CSS

Edit 3/31/09 – 44 Must Learn Web Design Layout Tutorials in Photoshop – Here is a collection of 44 Web Design Layout Tutorials in Photoshop to teach you create your own layout for your website.

Edit 4/1/09 – 80+ Photoshop Tutorials: Practical Web Interface Design

Edit 4/2/09 – 25 Photoshop Tutorials for Creating that Perfect Web Page Design – Includes some WordPress Mockup tutorials

Edit 4/2/09 – The 100 Most Popular Photoshop Tutorials 2008

Edit 4/2/09 – 150 Useful Adobe Photoshp Web Design Layout Tutorials and Techniques

Edit 4/2/09 – 35 Awesome User Interface Design Tutorials

Edit 4/28/09 – Website Layout Toolbox

Edit 4/28/09 – How to Create a Sleek and Textured Web Layout in Photoshop

Edit 4/29/09 – 20+ Best Tutorials to Convert Psd to Html/CSS

Edit 4/30/09 – Make a Professional Business Website Template Using Photoshop

Edit 4/30/09 – How to Create a Simple, Dark Yet Stylish Portfolio Design

Edit 4/30/09 – 52 Professional Website User Interface Photoshop Tutorials

Edit 5/4/09 – How To Build Your Own Single Page Portfolio Website

Edit 5/4/09 – Create a Clean Modern Website Design in Photoshop

Edit 5/5/09 – Top 30 Photoshop Web Design Layout Tutorials

Edit 5/11/09 – How to Convert a Photoshop Mockup to XHTML/CSS – A walkthrough of coding up a graphical website layout into valid, standards compliant XHTML and CSS. Starting with the initial process of exporting the individual images from the Photoshop document through to building the complete page.

Edit 5/11/09 – 16 PSD To HTML/CSS Tutorials For Creating Website Layouts.

Edit 5/12/09 – How to Create a “Worn Paper” Web Layout Using Photoshop

Edit 5/12/09 – Create a sleek web 2.0 hosting layout

Edit 5/13/09 – Design a Beautiful Website From Scratch & Coding a Beautiful Website From Scratch: Plus Tutorial

Edit 5/15/09 – Ultimate Round Ups Of Photoshop Interface Design Tutorials

Edit 5/16/09 – 2 Designs From PSD to HTML

Edit 5/16/09 – Create a dark portfolio pixel layout

Edit 5/17/09 – How to Elevate Your Website Design Process and Results

Edit 5/20/09 – How to Create a Clean Web 2.0 Style Web Design in Photoshop

Edit 5/21/09 – 44 Must Learn Web Design Layout Tutorials in Photoshop

Edit 5/26/09 – 5 Page Website Design in Photoshop with Source

Edit 5/26/09 – How to Create a Stunning Grunge Portfolio

Edit 5/26/09 – How To Design Studio Header

Edit 5/26/09 – Design Studio Layout #2

Edit 5/26/09 – Clean Photo Gallery Website Layout

Edit 5/26/09 – Coding: Design Lab TV Styled Layout

Edit 5/26/09 – Watercolored Design Studio Blog Layout

Edit 5/26/09 – Coding: Corporate WordPress Style Layout

Edit 5/26/09 – MyBlues WordPress Style Layout

Edit 5/26/09 – Awesome Tutorial Portfolio Design

Edit 5/26/09 – 33 Excellent Web Layout Photoshop Tutorials

Edit 5/26/09 – 30 Tutorials On Converting A PSD To XHTML And CSS

Edit 5/27/09 – 18 Photoshop Header Tutorials

Edit 5/28/09 – 45 Step-by-Step Tutorials on Web Design with Photoshop

Edit 5/29/09 – Design and Code a Slick Website from Scratch – Part I and Design and Code a Slick Website From Scratch – Part II

Edit 5/29/09 – Coding a Clean Web 2.0 Style Web Design from Photoshop – you may want to complete How to Create a Clean Web 2.0 Style Web Design in Photoshop before beginning this tutorial.

Edit 5/29/09 – Create an awesome portfolio layout

Edit 5/30/09 – Design and code a layout without using slice tool

Edit 6/1/09 – Create a modern blog layout

Edit 6/2/09 – Create a Dark and Sleek Web Layout Using Photoshop

Edit 6/3/09 – 24 Top Sources for Photoshop Website Layout Tutorials

Edit 6/4/09 – 6 Free PSD/(X)HTML-Templates @ Smashing Magazine – Very nice!

Edit 6/4/09 – How to Create a Large Header with a Simple Western Scene

Edit 6/5/09 – 40+ Tutorials on Photoshop Website Design and PSD to HTML

Edit 6/5/09 – Design a Layout for a Non-Profit Organization in Photoshop

Edit 6/6/09 – Design a clear website layout in Photoshop

Edit 6/6/09 – Quality Web Layout Tutorials Roundup

Edit 6/6/09 – Photoshop to WordPress: A Basic Guide

Edit 6/7/09 – 10 excellent website layout tutorials courtesy of psdvibe.com

Edit 6/9/09 – 18 Absolutely Stylish Designs Using Photoshop Brushes and How to’s

Edit 6/9/09 – 6 Free PSD/(X)HTML-Templates

Edit 6/9/09 – Create a web 2.0 layout in Photoshop

Edit 6/9/09 – Design a creative unusual layout

Edit 6/9/09 – 25 Beautiful One Page Portfolio Websites of Designers on Twitter – This is really more for inspiration than a tutorial.

Edit 6/10/09 – 30 Best Photoshop Web Layout Design Tutorials to Design Decent Websites

Edit 6/10/09 – 45 awesome Photoshop website template/layout tutorials

Edit 6/10/09 – How to Create a Dark and Sleek Web Design from Photoshop

Edit 6/11/09 – Original Clean Style for Your Website

Edit 6/11/09 – Design a creative clean blog theme in Photoshop

Edit 6/15/09 – 16 Best Photoshop Tutorials for Creating Web Designs

Edit 6/15/09 – Top 30 Photoshop Button And Interface Tutorials

Edit 6/15/09 – Design a two color website layout in Photoshop

Edit 6/15/09 – How to Create a Grunge Web Design Using Photoshop and How to Code a Grunge Web Design from Scratch

Edit 6/15/09 – Website Design Tutorial for Shopping Cart with Source PSD

Edit 6/16/09 – Create a Clean and Colorful Web Layout in Photoshop

Edit 6/16/09 – 20 great tutorials on PSD to XHTML Conversion

Edit 6/19/09 – PSD to HTML Slicing Tutorials

Edit 6/21/09 – Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop

Edit 6/30/09 – WaterColored Portfolio Coded, Free CSS Template With PSD to HTML Tutorial

Edit 6/21/09 – Design a premium WordPress blog with Photoshop

Edit 6/22/09 – Creating a tech blog layout in Adobe Photoshop

Edit 6/22/09 – 26 Complete WordPress Blog Design Tutorials

Edit 6/23/09 – 7 Highly Practical Photoshop Site Mockups + 1 Amazingly Detailed Tutorial About Converting Them into Working Web Pages

Edit 6/24/09 – How to Create an Illustrative Web Design in Photoshop and Coding a Clean & Illustrative Web Design from Scratch

Edit 6/28/09 – Photoshop tutorial to design a clean business layout

Edit 7/01/09 – Wordpress Design and Theme Tutorials

Edit 7/02/09 – How to Design a WordPress Theme in Photoshop

Edit 7/05/09 – Creating an Amazing Layout Using Textures

Edit 7/07/09 – Wordpress Layout #5

Edit 7/07/09 – Web Design Layout #10

Edit 7/08/09 – Create a webdesign company layout in Photoshop

Edit 7/08/09 – 70 Tutorials Using Photoshop To Design A Website

Edit 7/08/09 – Let’s Design Rock’n’Rolla Website Design Tutorials

Edit 7/09/09 – Web Design Tutorials: The Ultimate Roundup

Edit 7/09/09 – Web Site Design Tutorial: Wellknown.as Case

Edit 7/10/09 – Coding a Clean & Illustrative Web Design from Scratch

Edit 7/10/09 – Create a Stylish Business Layout in Photoshop

Edit 7/12/09 – SportNewsPvm Coded, How To Plan A Web Layout For A WordPress Theme

Edit 7/13/09 – Top 20 User Interface Design in Photoshop

Edit 7/13/09 – How to Design a Portfolio Site

Edit 7/13/09 – 30+ Easy To Follow Photoshop Layout Design Tutorials

Edit 7/13/09 – Web Design Layout #10: Sitebuild

Edit 7/14/09 – Create a communication layout in Photoshop

Edit 7/14/09 – 23 Inspirational Photoshop Tutorials For Creating Impressive Web Layouts

Edit 7/15/09 – 8 Tutorials about How to create a WordPress theme

Edit 7/15/09 – Essential Web Designers Guide on PSD to HTML/CSS – Scroll down the page to see the tutorials

Edit 7/15/09 – How to Design a Space Futuristic Gallery Layout in Photoshop

Edit 7/19/09 – Design a travel PSD layout with Adobe Photoshop

Edit 7/19/09 – 30 Web Design Tutorials from Scratch in Photoshop

Edit 7/20/09 – How to Make a Green & Sleek Web Layout in Photoshop

Edit 7/21/09 – Software Layout #4

Edit 7/24/09 – 10 awesome PSD to XHTML tutorials

Edit 7/24/09 – Design a creative wordpress theme

Edit 7/26/09 – 160+ Mega Web Design Tutorial Roundup

Edit 8/04/09 – Create a Portfolio Layout with Wooden Background in Photoshop

Edit 8/04/09 – Create A Forum Layout Using Photoshop

Edit 8/08/09 – 33 Newly Fresh Web Design Layout Tutorials

Edit 8/08/09 – Create a Nature Inspired WordPress Layout

Edit 8/09/09 – Design web 2.0 wordpress themes

Edit 8/09/09 – Portfolio Themes in WordPress, Examples and Tutorials

Edit 8/10/09 – How To Create a Green Grunge Web Layout

Edit 8/10/09 – 50 Really High Quality Photoshop Navigation Menu Tutorials

Edit 8/10/09 – 25 Detailed Tutorials for Coding Up Your Web Designs

Edit 8/10/09 – 11 Excellent Clean Corporate Style Layout Tutorials

Edit 8/10/09 – How to Create a Clean Blog Design with Photoshop

Edit 8/16/09 – 90 New And High Quality Photoshop Web Layout Tutorials

Edit 8/16/09 – Create An Orange Web Layout Using Photoshop

Edit 8/17/09 – How to Effectively Organize your Photoshop Layers

Edit 8/19/09 – Create an amazing consulting layout

Edit 8/19/09 – Design a corporate WordPress layout

Edit 8/20/09 – 22 Photoshop Web Design Interface Tutorial Sites

Edit 8/23/09 – Business Layout #6

Edit 8/26/09 – How to Design the Web in a High-Def World

Edit 8/26/09 – Design a creative cosmetics layout with Photoshop

Edit 8/30/09 – Design an impressive web hosting layout

Edit 8/30/09 – Over 500 Layout Design Tutorials

Edit 9/1/09 – How to Design and Code a Flexible Website

Edit 9/1/09 – YoDaa – The Design Process

Edit 9/1/09 – Design a breath-taking portfolio layout

Edit 9/1/09 – Design a Transparent Website Layout in Photoshop

Edit 9/8/09 – How to Create a Dark and Sleek Blog Design in Photoshop

Edit 9/8/09 – Create a Web Layout with 3D Elements using Photoshop

Edit 9/15/09 – Design A Clean And Fresh Company Website In Photoshop

Edit 9/15/09 – How to Make a Light and Sleek Web Layout in Photoshop

Edit 9/15/09 – Making the ‘Clean Grunge’ Blog Design

Edit 9/15/09 – Create a web 2.0 business layout

Edit 9/15/09 – Create a Business PSD Layout in less than 10 minutes*

Edit 9/15/09 – Wordpress portfolio layout

Edit 9/16/09 – Photoshop 101 – Working with Slices

Edit 9/16/09 – Create An Orange Web Layout Using Photoshop

Edit 9/16/09 – How To Create a Green Grunge Web Layout

Edit 9/16/09 – Design a Beautiful Website From Scratch

Edit 9/16/09 – Learn a Professional Workflow for Illustrating a Comic-Style Header Image

Edit 9/16/09 – Create a Professional Portfolio Design in 17 Easy Steps

Edit 9/16/09 – How to Design a WordPress Theme in Photoshop

Edit 9/16/09 – Create a grunge personal portfolio layout

Edit 9/16/09 – How to Create a Unique Wordpress Theme

Edit 9/16/09 – Design a Furniture layout or a Manufacturer layout

Edit 9/16/09 – Design a creative design studio layout

Edit 9/16/09 – 70+ Ultimate Round-Up of Free PSD Website Templates

Edit 9/17/09 – How to Create a Minimalist and Typographic Blog Layout From Scratch

Edit 9/17/09 – Design an amazing 3d hosting layout

Edit 9/17/09 – Software Layout #5

Edit 9/21/09 – How To Create Professional Looking Website Layout With Photoshop

Edit 9/22/09 – Create a wordpress interface in Photoshop

Edit 9/23/09 – How to Create a Unique Colorful Site Layout

Edit 9/25/09 – Create a photorealistic web layout – CSS/XHTML available

Edit 9/28/09 – Build a Promotional iPhone App Website Wireframe in Fireworks

Edit 9/28/09 – MakingSEO coded, Free CSS Template with PSD-to-HTML tips and Design A Clean And Fresh Company Website In Photoshop

Edit 9/29/09 – How to Make an Impressive Blog Layout in Photoshop

Edit 9/30/09 – Create a Promotional iPhone App Site in Photoshop

Edit 10/2/09 – How to design a simple and sleek web Portfolio

Edit 10/5/09 – Create a Very Simple Portfolio Web Layout with Photoshop

Edit 10/6/09 – Design a car dealer website layout with Photoshop

Edit 10/13/09 – Design a Clean Portfolio Site in Photoshop and How to Code a Clean Portfolio Design (Plus Free Five-Page Template)

Edit 10/13/09 – BoxedArt Website Design Tutorial

Edit 10/13/09 – The Pencil Project – The Pencil Project’s unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.

Edit 10/13/09 – Create a Hosting Layout #2 in Photoshop, Hosting Layout #2: Sitebuild Pt.1, and Hosting Layout #2: Sitebuild Pt.2

Edit 10/13/09 – Create a Wordpress Layout #6 in Photoshop

Edit 10/13/09 – Become A WordPress Theme Developer Who Rocks In Four Steps (and 50+ readings)

Edit 10/15/09 – Designing for WordPress: Complete Series & Downloads

Edit 10/15/09 – Screencasts – Building a Website (1 of 3): Photoshop Mockup, Building a Website (2 of 3): HTML/CSS Conversion, and Building a Website (3 of 3): WordPress Theme

Edit 10/20/09 – How to Make a Creative Blog Layout

Edit 10/21/09 – From Photoshop to Wordpress – Part I – Design and From Photoshop to Wordpress – Part II – Coding. Watch the Web Squeeze for Part III

Edit 10/21/09 – Web Design Layout #11

Edit 10/21/09 – 30 Photoshop Tutorials for Creating Web Layouts and UIs

Edit 10/21/09 – How To Create a Pure CSS Polaroid Photo Gallery

Edit 10/23/09 – 20 Mind Blowing Website Layout Tutorials in Photoshop

Edit 10/23/09 – Create a Clean Business Web Template Design in Photoshop

Edit 10/26/09 – The Ultimate Guide to Creating a Design and Converting it to HTML and CSS

Edit 10/26/09 – 75 PSD to HTML Resources for Web Designers

Edit 10/30/09 – 26 Complete WordPress Blog Design Tutorials

Edit 10/30/09 – Design a Minimal and Modern Portfolio Layout with Photoshop and Minimal and Modern Layout: PSD to XHTML/CSS Conversion

Edit 10/30/09 – 40 Quality Photoshop UI Design Tutorials

Edit 11/19/09 – How to Design a Band Website Layout in Photoshop

Edit 11/24/09 – Create a Clean and Colorful Web Layout in Photoshop

Edit 11/24/09 – Create a gritty website layout

Edit 11/24/09 – Create an advanced game or clan layout

Edit 11/24/09 – Create a clean hosting layout

Edit 11/24/09 – Design a colorful theme for wordpress

Edit 11/24/09 – Create a nature inspired layout in photoshop

Edit 11/24/09 – Create an Apple inspired website layout in Photoshop

Edit 11/24/09 – How to design a simple and sleek web Portfolio

Edit 11/24/09 – Top 10 Tutorials To Learn PSD To HTML Conversion

Edit 11/25/09 – Business Layout #7

Edit 11/25/09 – The Design Lab #2

Edit 11/25/09 – Windows 7 Inspired Navigation

Edit 11/30/09 – Web Design Process: Zee Site

Edit 11/30/09 – Design a wordpress theme from scratch – Theme available

Edit 12/3/09 – Cloud9 Web Design Layout

Edit 12/8/09 – Create a Watercolor-Themed Website Design with Photoshop

Edit 12/8/09 – 25 Photoshop Tutorials for Designing Portfolio Sites

Edit 12/9/09 – Top 10 Tutorials for Converting PSDs to HTML/CSS

Edit 12/14/09 – How to Make a Highly-Textured Site Layout in Photoshop

This post is updated as new resources are found on the Web.