How a WordPress theme is designed

Before you install WordPress, pick a theme, and customize the theme, it is important that you understand the process of 1) designing a website Photoshop mockup, 2) converting the Photoshop mockup to html and css, and 3) converting the html to the WordPress php files. This is a very complicated process, but the better you understand it, the better you will be able to customize your theme to getting it looking and working the way you (or your boss/client) wants it.

If you have never used html or css then follow this video tutorial on html & css – The very basics. There are a lot of great resources online that can help you learn html and css, and now with firebug (tutorial 1, 2) you can preview your html and css changes before you make them.

Here is a good written tutorial to follow for the first time: Design and Code Your First Website in Easy to Understand Steps.

Here is a good video tutorial follow to follow for the first time: Converting a design from PSD to html.

Here is a complilation of “The Ultimate Collection of Brilliant Web Design Tutorials” that just came out today!

1) Designing a Photoshop mockup

a. How to Design a Band Website Layout in Photoshop

b. How to Create an Illustrative Web Design in Photoshop

c. Design and Code a Sleek Website from Scratch Part I

2) Converting a Photoshop mockup to html

a. Coding a Band Website Created in Photoshop

b. Coding a Clean & Illustrative Web Design from Scratch

c. Design and Code a Sleek Website from Scratch Part II

3) Converting html to WordPress php