plus

New Premium Tutorial – Designing a Family of Websites

on Apr 22nd 2008 with 63 comments
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

Tags: Premium
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hello! I started Psdtuts+ because years ago reading Photoshop tutorials was how I got into design. You can find me on Twitter or on my blog theNetsetter.  

Plus Premium
 
 
← Older Comments
  • http://www.doximagry.com patience

    Waiting on the second part of the tutorials as well!!!

    ****Plus membership is great****

  • JasonK

    Is it possible to know the name of the font you used to wrote Creative in the header? thanks in advance.

  • Matt O.

    Excellent theme, looking forward to the code!

  • http://www.mhuberts.nl iMike

    When is the psd to html tut going to come? i subscribed for plus especially to see that one…

  • http://www.dssquared.com Clint

    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.

  • http://www.tutorialwow.com Josh Drake

    I really should get a plus membership…but I’m saving up to buy an iPhone. ;) Maybe I will later…

  • Pingback: Simple Grafix » Blog Archive » From PSD to HTML - Site Build over at NETTUTS

  • shanmugam

    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…..

  • Pingback: From PSD to HTML, Building a Set of Website Designs Step by Step - NETTUTS

  • http://www.xhtml-css-code.com R Aflec

    “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.
    “

  • http://www.greatcycling.com/italy Italy Biking – E. Singer

    Me think, I really should get a plus membership…this seems to worth it!

  • twc

    The ‘From PSD to HTML, building a Set of Web Site Designs Step by Step’ link doesn’t exist?

  • http://greatdiane.deviantart.com Diana

    Great! That´s what I´ve joined Premium!

  • http://www.jordantwiggdesign.co.uk Ryan

    I’m having trouble downloading files from your premium account, i keep getting took to error loading page, and cannot download any sample files?

  • http://www.facebook.com/joey.hue.5 Joey Hue

    I’ve read your tutorial about psd to html,but i can’t find the “designing a family of websites” tutorial by searching at Premiun.Does it exist any more?or only the Premium members can see it?(sorry about the grammatical mistakes..i’m a Chinese guy)

← Older Comments