Download Source Files
I’ve added a new Premium Members–only tutorial today on designing Web sites, written by myself! The tutorial takes you through the process I went through to design a set of blog templates to build into WordPress.
Psdtuts+ Plus
As you know, we run a premium membership system here called Psdtuts+ Premiumthat costs $19 a month which gives members access to the PSD files for tutorials as well as periodic extra tutorials … like this one! If you’re a member, you can log in and download the tutorial. If you’re not a member, you can of course join today!
A Family of Web site Designs
The tutorial I’ve added today is called “How to Design a Family of Website Designs” and is a step-by-step follow-along of a set of WordPress blog designs that I recently did. Because the Photoshop skills involved aren’t that advanced, I’ve spent more time talking about why certain things are done.
I’m now working on a PSD->HTML tutorial to follow up on this one, more on that later today. In the meantime these are the designs that the tutorial is on:
So anyhow enjoy the tutorial! Don’t forget you can Learn more about Psdtuts+ Premium here. I’ll be back posting again in a few hours as I have not one, but TWO big announcements to make today!
And just in case anyone feels like discussing why we have a premium system, to save myself repeating things, just go and read this post! :-)
Update: PSD -> HTML tutorial now on NETTUTS
Quick update, we now have a tutorial taking these PSD files and building the HTML of them available at NETTUTS. Read it at: From PSD to HTML, building a Set of Web Site Designs Step by Step





Waiting on the second part of the tutorials as well!!!
****Plus membership is great****
Is it possible to know the name of the font you used to wrote Creative in the header? thanks in advance.
Excellent theme, looking forward to the code!
When is the psd to html tut going to come? i subscribed for plus especially to see that one…
I echo iMike and a couple of my fellow plus members who would love any tidbit of info on when the html tut is coming out for this tutorial. It is specifically why I signed up for a plus account. Regardless this is still the best tutorial site on the web.
I really should get a plus membership…but I’m saving up to buy an iPhone. ;) Maybe I will later…
Hello this is shanmugam from pondicherry (India), i see this tuts very useful. And also download the zip and see it, In the images folder see the one picture background_light.png i also try it my own. I create and save into png file formate that size very large (my background_light.png file size is 51.2kb). What is the reason?
And my setting is (using photoshop cs )
png-8
interlaced (ok)
selective
color – 256
diffusion
dither – 75%
matt3 -
web snap -0
image size (quality-bicubic)
What is the reason the file size high ? please send the tips how to reduce the size of figure. i waiting for your replay …….
this is my mail id shanit6@gmail.com
thank you for good work of your tuts…..
“Great compilation! Thanks a lot for putting it all in one place, but there is another one to add to your list.
http://www.xhtml-css-code.com/html/things-to-remember-while-coding-a-website-to-make-it-search-engine-friendly
Though, not exactly a psd to html conversion article, but one must keep these tips in mind while coding a PSD into search engine as well as user friendly web layout.
“
Me think, I really should get a plus membership…this seems to worth it!
The ‘From PSD to HTML, building a Set of Web Site Designs Step by Step’ link doesn’t exist?
Great! That´s what I´ve joined Premium!
I’m having trouble downloading files from your premium account, i keep getting took to error loading page, and cannot download any sample files?