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.
Join Tuts Premium
For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at nettuts+, psdtuts+, and vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I like :)
Thanks a lot. I love the design and this tut was necessary!
I’m happy to be a member of tuts+
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
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!
I got the idea.
Still, a way to position the footer absolutely would be nice :)
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/
thanks
hmm i guess Jeffry did around 3 tuts like this, so pointless of same old wine :S
Not all layouts are coded the same…
Everyone codes differently. For that matter, there should only be one PSD to HTML tutorial on the web. :)
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.
code xhtml/css it is really easy ;) you don’t need to be a developer to do it :o but it would be fun to check this out.
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.
Amazing looking design, glad to see this follow-up was posted. :)
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.
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 :)
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.
thanks for share info :)
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.-
Looks like a nice site
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.
nice! I like clouds! are there more tuts like these that is not a blog template?
Thanks Guys!
wow
I really need to get round to joining, I would like to see more into how you go about coding it.
Nice Tutorial, but i code my sites first and make after this the Graphics :D
*Joins Tuts Plus*
*Joins Tuts Plus in 2 or 3 hours*
really nice one, thanks for it
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?
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!
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!
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.
Greate.. I Like it.
This tutorial is awesome. I loved it.
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.
Very, very poor unfortunatly because the subject is very interesting.
Im glad I became a Plus member :D 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!
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…
Mr.Alvaro Guzman I wish you will upload some more tutorials like this,
this awesome by the way..
Was this tut for a WordPress site? or just any HTML site? It looks like it would be a great WordPress Theme
Thank for sharing idea
i m lucky to meet it
i m trying to be professional designer like u
cheer me ……….
good stuff
nice and clean tutorial
It’s wonderful.