New Plus Tutorial - Designing a Family of Websites

Apr 22nd in News by Collis
I've added a new Plus 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.

Author: Collis

Hello! I started PSDTUTS because years ago reading Photoshop tutorials was how I got into design. I hope the site helps and inspires others! You can find me on Twitter!

PSDTUTS Plus

As you know, we run a premium membership system here called PSDTUTS Plus that costs $9 a month (or $22 for 3 months!) 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 Plus 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

Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

  1. homs April 22nd

    yayyy finally some tutorial from collis :)


  2. photoshop April 22nd

    first of alll Im the first to comment yeah!!!!
    Next This is so cool!!


  3. goldenthunder April 22nd

    Sweet, thanks Collis, I’ll download this and read it tomorrow! Have a great night!


  4. al April 22nd

    nice i love this tutorial


  5. Michael Castilla April 22nd

    Wow this convinced me to sign up! Keep up the good work guys. You keep on impressing me!


  6. Jonathan Solichin April 22nd

    Wow, it looks good. Too bad I don’t have plus though.


  7. Aminur Rahman [aka Tom R] April 22nd

    looks good, not a member yet but looking into it :-)


  8. omarterrones April 22nd

    thaaank you!!! using my plus account!!


  9. D. Carreira April 22nd

    Me too, I’m not a member, but in a few days, I will join PLUS! :D

    David Carreira


  10. yokoto April 22nd

    I like that stuff!


  11. JoJo April 22nd

    A Demo of the site would help sell this.
    There are already so many wordpress themes that look good in the pix, but are terrible when in actual use.

    So if you got it, flaunt it, flaunt it! :D


  12. Arnaud April 22nd

    Thx for us.


  13. Lamin Barrow April 22nd

    I would like to join the Plus program but i have no chance of joining because there is no way you can get a credit when you live in Africa. It’s very frustrating.

    By the way that’s a professional looking WordPress theme got you got together Collis. It’s very creative and it look appealing plus the functionality that WordPress offers it should be on hell of a blog theme.


  14. Ben Griffiths April 22nd

    Thats it - I’m signing up next week when I get some cash! Stupid teaser that looks too damn good ;)


  15. Daniel April 22nd

    sounds great, thanks.


  16. Godonholiday April 22nd

    Great!


  17. Joefrey Mahusay April 22nd

    Cool design. :)


  18. Fodcj April 22nd

    This one looks really interesting so think I may have to sign up now… will wait and see what the second post looks like before committing though :)

    Great tutorial idea! Keep up the good work.


  19. skut April 22nd

    this is what im talking about, web design :D

    Thanks im gonna sign up again :P


  20. Constantin Potorac April 22nd

    Great design Collis. I was looking forward for a new tutorial from you. ;)


  21. Shane April 22nd

    I’m not yet a Plus member, but this is looking good. I’m especially interested in web design aspects of graphic design, so if there’s more of this to come for Plus members, it’ll sure get me more interested in joining.


  22. 1984 April 22nd

    What a pity to charge know on the internet.

    The tutorials are always paying or is an exception ?

    Done shit! In addition I found the super, this tutorial. ;-)


  23. William Ahouma April 23rd

    Wow so great! I really need to sign.
    Hey Lamine, do u live in Senegal?
    I’m in Côte d’Ivoire.


  24. Flaunt April 23rd

    Love my Plus account, glad to give back and support the site.


  25. Lamin Barrow April 23rd

    @william

    I am from the Gambia, West Africa.
    Good to see some African dudes are interested in this stuff too. :)


  26. Nate April 23rd

    wooo this is going to be fun. Thanks Collis


  27. Daniel April 23rd

    Don’t have PLUS :-(

    Can’t afford…

    Daniel

    @Lamin: Africa rocks ;-)


  28. aleks April 23rd

    no creditcard, no plus… :-(


  29. iMike April 23rd

    damn i wish i had a credit card… maybe i can borrow my moms :P


  30. Snorri3D April 23rd

    realy well done. if the tutorial will include how to connect the design to wordpress.
    then i will sign up for the plus membership

    this looks so good thanks alot Collins


  31. Aminur Rahman [aka Tom R] April 23rd

    dear plus user please, input your feedback so people knows the nature and the quality of of work so we go further towards getting membership. cheers


  32. Chris Henn April 23rd

    I wish I had plus. Oh well….. Maybe sometime in the future.


  33. Nick April 23rd

    I’m super excited to see where you guys are going with this! Great work!


  34. Qbrushes April 23rd

    errr i might have to join the Plus members after all…


  35. Andrei Constantin April 23rd

    Looking forward for the PSD - XHTML/CSS tut Collis ;)


  36. Harry April 24th

    Awesome tut :)


  37. swaggz April 24th

    Can you download the theme if you are a plus member? or is it just a tutorial?


  38. Noc April 24th

    Hi.Thnx for this great site and tutorials..I want to be a plus member but i want to ask sth before it..i really want to learn designing in ps and converting to a wordpress or xhtml template..is this tutorial or ur future tutorials help me for that..or enough to learn the basic of it.And lastly can we modify the psd files and use in our projects.

    Thnx again..


  39. Summer April 25th

    Excelent !! Gracias por tan buenos aportes…


  40. FlashRipper April 25th

    This is a cool theme! Tnx


  41. insic2.0 April 25th

    Very nice. im starting to learn photoshop. yey? thanks PDSTUTS!


  42. Yaseen April 26th

    Hello, I just signed up for the month subscription after reading about this tutorial.
    When will the HTML tutorial be out?

    :) Very nice site btw.


  43. Prabhjeet Singh April 26th

    will join too :-)


  44. Rybaxs April 26th

    good!


  45. Mark April 26th

    Is the Plus account $9 a month fee recurring?


  46. Soreng April 27th

    Hi,

    Is there a WP template created for this excellent piece of work?

    Cheers,
    Soreng


  47. Danny May 1st

    Makes me want to get a PLUS account now… Hmmm :)


  48. George Forrich May 5th

    Hi,
    Is the HTML Tutorial out?
    Thanks,
    George Forrich


  49. Ryan May 12th

    I am curious when the HTML companion tutorial will be coming out for this as well. Looking forward to it. Thanks for the great tutorial!


  50. Joseph May 18th

    When will the PSD to Wordpress tutorial be posted?
    I have a Plus account and am desperately in need of the second tutorial that takes us from the PSD to the Wordpress file!


  51. patience June 1st

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

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


  52. JasonK June 4th

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


  53. Matt O. June 5th

    Excellent theme, looking forward to the code!


  54. iMike June 9th

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


  55. Clint June 10th

    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.


  56. Josh Drake June 20th

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


  57. shanmugam June 26th

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


Add Your Comment

( GET A GRAVATAR )
  • Gravatar

    Your Name January 8th

Arrow