Not too long ago, I created a tutorial on psdtuts+ that demonstrated how to build a beautiful website PSD from scratch. This time, we'll take things much further. I'll show you how to slice and create the HTML+CSS of my design. You'll learn how to keep the mock-up process simple, create a custom HTML framework to put your design in, some practical CSS tricks, save images for web, and more.
Join Now to read the in depth tutorial.











User Comments
( ADD YOURS )huzzi March 11th
I like
( )Raducu March 11th
Thanks a lot. I love the design and this tut was necessary!
I’m happy to be a member of tuts+
( )Raducu March 11th
After seeing the tutorial .. the footer is not positioned absolutely at the bottom (if I have only 1 post for example).
Can you give us some info how to do that ?
Thanks
( )Alvaro March 11th
Since both layers content and sidebar are inside another container and both are floating left, there’s no problem if sidebar is larger, or if there’re some few lines on the post, the design will adjust the height of the larger container. Try it!
( )Raducu March 11th
I got the idea.
Still, a way to position the footer absolutely would be nice
Thad March 11th
try these links to position the footer absolutely to the bottom…
http://www.cssstickyfooter.com/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
( )Raducu March 11th
thanks
Yoosuf March 11th
hmm i guess Jeffry did around 3 tuts like this, so pointless of same old wine :S
( )Saro March 11th
Not all layouts are coded the same…
( )Jeffrey Way March 11th
Everyone codes differently. For that matter, there should only be one PSD to HTML tutorial on the web.
( )Ryan March 15th
You tell him Jeffrey! Im not a plus member but from all the things I’ve learnt from your other tutorials, your are tutorial king.
crysfel March 11th
code xhtml/css it is really easy
you don’t need to be a developer to do it
but it would be fun to check this out.
( )Matt Radel March 11th
Ahhh…looks like you’re actually cropping and using undo’s? THAT’S how ya do it – forget those sissy web slice tools!!!
Awesome design btw – top notch.
( )Nick March 11th
Amazing looking design, glad to see this follow-up was posted.
( )Chris Robinson March 11th
I haven’t seen the actual tutorial but it looks like he’s using the crop tool to slice up the PSD?!?
The slice tool is your friend, use it…that’s what its there for.
( )Brent March 15th
I don’t understand using the crop tool to create your slices. The amount of time you save by using the slice tool makes it no-brainer to use that instead of cropping. Oh well…I guess everyone has their own way of doing things
( )Cosmo & Wanda March 11th
I have understood as time goes by, that looks are the most important thing for users. But for designers and developers the important thing is that the design allows cutting easily, without wasting precious time and without changing its shape, LOL.
Based on this simple reasons, I liked this design and tut.
Thank you Alvaro.
( )adryi19 March 11th
thanks for share info
( )iPad March 11th
Hey dude, the results are amazing, what a great job!!! Thankfully I have subscribe to Plus… And even greater is that you’re Bolivian… we’re LatinAmericans. Great work.-
( )Shane March 11th
Looks like a nice site
( )Jean Michel March 11th
Alvaro, i would like adapt make a theme for CMS Dotclear 2 (www.dotclear.org). It’s possible ? A licence ? Thanks you for your reponse.
( )Eneza March 11th
nice! I like clouds! are there more tuts like these that is not a blog template?
Thanks Guys!
( )li kai March 11th
wow
( )Martyn March 12th
I really need to get round to joining, I would like to see more into how you go about coding it.
( )Nico March 12th
Nice Tutorial, but i code my sites first and make after this the Graphics
( )Deddy March 12th
*Joins Tuts Plus*
( )dia_75 March 12th
*Joins Tuts Plus in 2 or 3 hours*
( )Moksha Solutions March 12th
really nice one, thanks for it
( )Valics Lehel March 12th
One small addition, for css can be the value
.entry .meta_categories{
width:340px!important;
As I saw, in this way is better.
( )Also why you do not use clear after DIV, the code is perfect, but is not better to clean after each major part, like header, page?
John March 12th
Hello. I love all the ‘tuts sites. I’m on the verge of getting a one month PLUS membership just for this tutorial. I do have two questions though:
1. Is tutorial good for someone who doesn’t code at all? I know photoshop well but I don’t normally hand code my designs. Is it worth it for a newbie like me to use this tutorial?
2. If I sign up for a PLUS membership, is there a minimum amount of months I have to stay? Can I cancel after just one month?
Any help would be great guys. Thanks!
( )Jeffrey Way March 13th
Hi John,
1) You should probably have some coding knowledge for this tutorial.
2) You’re more than welcome to sign up for just one month. However, you’ll get a discount if you sign up in 3 month increments!
( )John March 14th
Hi Jeffrey,
Thanks for the response. It’s good to know that I can sign up for PLUS month-to-month.
As for the coding part of this tutorial, do you suggest knowing some coding knowledge simply because it would be good to know or because it almost required for this tutorial?
Thanks again.
Abdullah Alhourani March 13th
Greate.. I Like it.
( )Rahul Chowdhury March 14th
This tutorial is awesome. I loved it.
( )Jason Wilson March 14th
Not a Plu member so I couldn’t see, but did you come up with a way to make this layout flexible?
I know that was a major concern with the commenters on the PSDTuts post.
( )João Pedro Pereira March 14th
Very, very poor unfortunatly because the subject is very interesting.
( )Conhuir March 15th
Im glad I became a Plus member
this has helped me so much!
Hope to see more tutorials like this, not everyone is a pro developer remember so little tuts like this go a long way with people at my level.
Thanks man!
( )Nina Morena March 16th
I use this as a reference point. I am always interested to see how other developers use css effectively. I suggest this to anyone who uses the PSD wireframe to a working prototype of a site.
The only thing I noticed was the sticky footer use. I may have overlooked it but I have it saved in my library for good use.
Good stuff…
( )arnold May 4th
Mr.Alvaro Guzman I wish you will upload some more tutorials like this,
( )this awesome by the way..
Netviper June 19th
Was this tut for a WordPress site? or just any HTML site? It looks like it would be a great WordPress Theme
( )Mario October 6th
Thank for sharing idea
( )i m lucky to meet it
i m trying to be professional designer like u
cheer me ……….