I continue to be amazed by how well Collis's "Build a Sleek Portfolio Site From Scratch" tutorial continues to perform. It's been months, yet it still posts strong numbers every week. Considering that fact, I decided to create a screencast that shows you exactly how to convert a PSD into perfect XHTML/CSS.
Part 1: Slicing the PSD and Creating the XHTML
Part 2: CSS
I won't lie to you. This video is a bit boring. It just isn't fun to watch someone enter margin values for thirty minutes. :) But it's essential.
Part 3: Implementing a Bit of Javascript
Part 4: Kicking IE6's Butt
Could we really call ourselves web developers if we didn't have to fight with IE6? And is it a coincidence that "6" is also the number associated with the devil? Who knows.
Mostly, the site looks just fine in IE6, but we should change a few quirks. Create a new stylesheet and call it "ie6.css". Place it in your CSS folder. Then paste in the following.
#container #mainContent #tier2
{
margin-bottom: 273px !important;
}
#tier3 #news
{
position: relative;
left: .56em;
}
#header
{
height: 158px;
}
#header #login
{
top: 1em;
right: 1.5em;
}
There's nothing that we really need to go over. Mostly, I'm adjusting the positioning of a few elements.
The last step is to reference our new stylesheet in the head tag of our document.
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
The PSD
The Website: 100% XHTML and CSS
I hope this helped you. Everyone has their own way of doing things; So I'd be interested to hear your thoughts. This tutorial was a huge undertaking. I'd appreciate a Digg if you found it to be beneficial.
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
User Comments
( ADD YOURS )Christian Mejia November 5th
This is exciting! I needed this memory refreshing!
Pedro Rogério November 5th
This will certainly be the best tutorial and more expected of all.
Cameron Kollwitz November 5th
Excellent.
Weblimite November 5th
Nice! I comment in my blog. I’m sure this is very helpfull to newbies.
andrea November 5th
nice tutorial!
but what’s application luncher do you use at the beggining of the video?
really cool, if you give me the name i’m happy becouse i looking for that applicaion for a long time…
exscuse for my english, i’m italian.
Jeffrey Way November 5th
@Andrea - The name of the IDE is “Visual Studio” from Microsoft. It’s a bit pricey, but you can download a free version that works fantastic. It’s called “Visual Web Developer” You can get it here:
http://www.asp.net/downloads/essential/
It’s designed to be an IDE for the ASP.NET framework, but you can create simple HTML websites and ignore the ASP functionality.
Jeffrey Way November 5th
Guys, sorry for the delay with the second two videos going up. They were uploading when I went to bed last night, but my computer automatically restarted. So, I had to start over. They’re almost done and will be posted ASAP.
I worked really hard on this tut, so the Diggs are appreciated!
Josiah Jost | Siah Design November 5th
Awesome video. Thanks for sharing. Its always neat to see how others do it.
Just one note for slicing the images in photoshop:
You have the option of just saving selected slices by changing the drop down box in the “Save As Optimized” box from “All Slices” to “Selected Slices”. Saves some time down the road…
Yosi November 5th
THANKS A LOT JEFFREY !!
Jeffrey Way November 5th
@Josiah - Ahh…great tip. I knew there was a way to do it! Thank you.
Daniel November 5th
In CS3 you can select User Slices before you click Save in the Save for Web & Devices dialog.
reddy November 5th
Just viewed the demo in FF3 and its not very clean, there’s some sort of mismatch with the background in the header area.
Aaron Irizarry November 5th
nice article thanks!
ANeuby November 5th
Hey, great video tutorial. I have a question about the ie 6 fixing stuff. Do you know a great site where I can see the different ie 6 fixes with examples and so on ? Sometimes I get crazy because of the rightright and !important stuff for ie 6.
By the way:
Visual Studio is very great and I saw that you are using jquery. on The jquery page there is great plugin for VS to implement IntelliSense for jQuery. There is also a PHP IntelliSense Plugin called VS.PHP. Its very great!
Jeffrey Way November 5th
@ANeuby - Thanks! Yeah, I did know that. It’s going to be built into the future versions of Visual Studio. I wrote about it on the ThemeForest blog.
VS.PHP is a great extension. I have that installed as well and use it on a lot of the screencasts on this site.
Barttos November 5th
Jeffrey Way, very good tutorial! Thx.
Dan Harper November 5th
Nice tutorial. I’m just wondering how many designers use EM’s for padding/margins? Personally I’ve always used pixels for that. I’ve only used EMs for text.
Dugg
Jake November 5th
This is awesome… Keep up the good work. Any chance you could do a complete div myspace overlay, from psd to xhtml, with some java etc… Or even a music myspace. That would be amazing and would love to see the envato network tackle this… I think this would be a very popular tut as well.
Thanks in advance
Ben Griffiths November 5th
Great, thanks
Moksha November 5th
great one thanks for it.
highblood November 5th
Thanks for this very essential tutorial, Jeff! This would be very helpful for newbies like me whose just starting to learn Photoshop. Looking forward to create my own website. Kudos to NETTUTS as well!
Lamin November 5th
Very nice. Thanks
Nate November 5th
This is pretty fantastic stuff. Should be useful to a lot of people.
Brian McCarrie November 5th
Nice work, I’ll be going through this tonight.
Matt November 5th
I’m in the middle of the first video atm, but I wanted to chime in that when you are in the save for web workspace you can shift+select all of the slices that you want to save out then when the save dialog box comes up select “Selected Slices” from the slices pull down menu. This way you won’t get all the crap images that you have to hunt down and trash later on.
Great tut so far, thanks!
Sebastian November 5th
Awesome tut!
Thanks!
Brandon November 5th
Great Tutorial Jeffrey! The screencasts are so much better than text tutorials for me because I learn better visually than I do with text. I learned some cool things in the XHTML while you were going through which is very cool. The rounded corners using moz made my night as i always used to make images to put the text over, to make it look like a rounded cornered border. Also the header icons was something that I also learned which was pretty cool.
Great job again I cant tell you how much this has helped me on alot of things.
Jeffrey November 5th
@Brandon - Thank you! I’m the same way. Videos help so much more - at least for me.
Just remember with the “-moz” and “-webkit” styles…they only work on Firefox and Safari. They will still come out as square on IE7 and below. But it’s really not a big deal.
I’m glad to hear it helped you…makes me feel good.
Brandon November 5th
Yeah it helped a lot. And I will remember that. I use Firefox anyways and so far all my clients that I have worked with use Firefox, and if they do not…I tell them why its better than IE lol. When I do that I rant on. Yeah you spent a lot of time on that video lol. It was worth it though and also worth my time as I learned some new things today. And I greatly appreciate it. The rounded corners now has inspired me to use them in my current client project for Home Depot.
Yizi November 5th
Amazing tutorial!
jfavreau November 5th
@ Dan Harper:
Ems are linked to the size of the default font character. This means that they will scale with your user’s font size (think zooming in etc.)
When the scale changes the relative distances between em-spaced elements will remain the same. Pixels on the other hand are hard coded to the screen/render resolution.
MC.Spring November 5th
very useful,thanks for sharing
Dwayne from Probably Sucks Blog November 5th
I’m literally very impressed and very speechless. Awesome job and awesome tutorial. It’s good to see more of these tutorials coming out, when there was a time not long ago where tutorials like this were non-existent.
Dwayne.
http://probablysucks.com
mr. tunes November 5th
i agree with everything above. this is very useful to me, especially the fact that it’s in video format.
i second the request to tackle myspace theming cause that site is still very popular.
thanks again jeff
Ariyo November 5th
Great job Jeff. As always. I love your screen casts. keep em coming.
Ivor November 5th
Amazing tutorial!! lots of techniques to remember! this is definetly a ‘must have’ guide…! Thanks Jeffrey.
twitter: ipad
Rick November 5th
In the second video at around 12 minutes when you find weird stuff with the list styles… it’s because when you cut part of the selector you still had the comma on the line above, causing the whole thing to be ignored since there was a comma but no second selector… that’s what happened.
Rachel November 5th
You nailed this tutorial!
dronix November 5th
keep them coming. I love psd to xhtml tuts, especially screencasts!!
Kevin November 5th
Thank you so much. I’ve learned something more from your videos.
M.A.Yoosuf November 5th
great, and i was really needed this, coz i have done a layout in Adobe Fireworks and don’t know how to convert, but this lil bit help me, as a developer i was facing a conversion issue, now i dont think, coz TUTS+ Gave me a solution. i mean it u Jeff
hope yo will make some nice articles like this….
Cheers…………………….
M.A.Yoosuf
http://yoosuf.awardspace.com/
insic November 5th
nice tutorial again.
power November 6th
Awesome tutorial, very clean, and Usefull
Tnx Again for Sharing
This ScreenCast is Value Added.
Jeffrey, you Rockz
jbcarey November 6th
Good help for the “new guys”
PissedAtInsic November 6th
@insic, STOP spamming EACH and EVERYONE of the TUTS!
macias November 6th
very useful 4 me ..thx a lot !
Vishal November 6th
very nice article, I was looking for something like this since ages, thanks man
Jefferson Cavalcantye November 6th
Esse tipo de tuturial já está “manjado” na web!
Kim Dolleris November 6th
Very good job! I’ll forward this the apprentices at the firm. This will definitely make my life a little easier
Thanx!
Shunsuke Doi@Kyoto Japan November 6th
great tutorial!
thanks!!
azerty November 6th
Interesting but I wonder when people are going to start using Fireworks because apps like Illustrator or Photoshop are not webdesigner apps.
Once you get used to it Fireworks is a really nice piece of software !
Eduardo November 6th
pretty amazing!
Uriel Katz November 6th
is a input inside a h5 ok?
TommyP November 6th
Props
Khwaja November 6th
The tutorials are really Nice…
Thanks a lot..
Job well done…
Ben G November 6th
Nice, very helpful. Keep up the great posts!
Ilyae November 6th
What a bogus slogan! haha
MK Owens November 6th
While it wasn’t really something I needed, this is the perfect example of how to do a screencast.
Anyone who does a screencast should pay attention to this tutorial to see how it is done. It was very well done.
nick November 6th
Very Awesome! Keep this stuff coming!
Ryan November 6th
Thanks for the tutorial. I agree with everyone else that the screencasts are a great addition! I have used Lynda.com for a while because I, like others have mentioned, am much more of a visual learner and really appreciate video tutorials.
Dan November 6th
Many thanks for this. This is a great starter tutorial and a great refresher as well. Looking forward to the CSS portion!
Scott November 6th
very interesting to watch. I think you should have used label tags instead of small tags on the contact form.
AnDi November 6th
Very interesting tutorial, i finally understood where i was getting stuck. Thanks again….
John T. November 6th
Very, very good but…
You changed the image formats (png and gif into jpgs) when renaming them… I am pretty sure this was a mistake and is not good practice to change the format of an image by simple changing the extension.
Jeffrey Way November 6th
@John - Yeah, I noticed that afterwards. It’s easy to forget things when doing the screencasts. I fixed the error.
Eduardo November 6th
very cool tutorial! think this is the most important part of webdesign.
Chris November 6th
Awesome job, well worth the sit =}
sad dude November 7th
how can i slice single layer without other in the back
any one help?
Jeffrey Way November 7th
@sad dude - Look for an option called “layer-based slice”.
netoxico November 7th
very good screencast!!! thanks its a lot of help,Regards from Mexico City
Fitz November 7th
Hey, Pretty good tutorial.
I have some comments. How come none of the form elements are in Form tags with fieldset, legend and labels for the inputs?
The form could then be used instead of the div for “Have a Question” and the “Login”
Also on the navigation you could have made the a block element and this could have had the arrow on the :hover state rather than the li. This would make the whole area clickable and IE6 would then get the arrow on hover.
David D. November 7th
GREAT tutorial. I really enjoyed the 2nd one. Seeing the CSS slowly take shape was very educational.
Question: I can understand the use of EMS for padding, but why the EMS for the featured image? don’t images scale anyway when you use the browser’s zoom? wouldn’t a width in pixels be easier?
somebody else also mentioned that the use of moz-border and webkit-border for rounded corners will not work with IE. as much as I dislike IE, this rounded corners solution seems…um…not very worthwhile.
Jeffrey Way November 7th
@David - I disagree. It’s not imperative that those boxes are slightly rounded. In such instances, there is absolutely nothing wrong with adding a bit of flare for Firefox and Safari users.
konsehal_14 November 7th
Please give us some more information about fixing ie bugs and showing more tehcniques in making a good site.
Thanks a lot. It is very useful for me
Vinay Vidyasagar November 8th
ah… one nice comprehensive guide.. good for a learner like me.. thanks u have no idea how long ive been waiting for this..
T Pham November 8th
thank, great tut
Vinay Vidyasagar November 8th
brilliant stuff.. im always waiting for psd2html tutorials.. for a learner like me.. this is like gold.. thanks again
Danh ba web 2.0 November 8th
Thanks you very much. It’s great for me
I saved my bookmark. Keep up !
Takumi86 November 8th
Nice tutorial video and an interesting news, thanks, keep up the good work!
Yui November 8th
really helpful
thanks a lot
Nikola November 9th
great tut thanx! is there any way that i could download videos to my computer?
Busby November 9th
Very helpful!
Furqan November 9th
Very Very helpful. good stuff
Andrew November 9th
Very nice tutorial, but am I the only one wondering where the PSD file is? I would have thought that a tutorial about converting a PSD file would include one in the source. Maybe I’m missing something here.
Baz L November 9th
Just one SEO note…
I saw this mentioned somewhere else (maybe here, who knows). It’s about hiding the h1 in the header in favor of the background for the main logo.
It’s been my understanding that display:none; *could* get you punished by search engines and that text-indent: -99999px; is the preferred alternative?
Anyone mind clarifying?
Bill Biwer November 9th
Great to see how others style their sites and pick up on a few tricks.
Thanks!
Sean November 9th
Thanks
Samuel Yu November 10th
Very useful tutorial, thanks so much!
gendale November 10th
I can’t find a site design PSD file anywhere.
leksa November 10th
Nice!
Maybe the next slicing tutorial, could use some CSS framework. Like Blueprint, 960 or 37signal
The Grooby November 11th
Excellent tut! I’m breaking into the world of CSS and Web design and this has helped part the fog in my brain on some aspects. Thank you very much.
Jeffrey Way November 11th
That’s because I didn’t include it. You can get it off ThemeForest in a week or so.
Skyfred November 11th
This tutorial is juste P-E-R-F-E-C-T !
Thx for your help !
Aaron November 11th
I can tell you how to convert a PSD into XHTML … simply write the code yourself from scratch while using your mockup from Photoshop as a reference. Simply the best way to do it.
I was disappointed to see that the DEMO doesn’t look properly in IE 6. I also noticed that the rounded corner effect must have been achieved my using CSS 3…which isn’t supported in many browsers yet, so I wouldn’t recommend using some of those attributes at this time.
Gino November 11th
This tut is just superb. Bookmarked!
gendale November 11th
when u select several elements of code and u move them let and right. how do you do that?
Jeffrey Way November 11th
@gendale - I adjust the positioning of the parent element - meaning the wrapping “div” tag. Think of divs like a bucket. Anything between the div tags are placed in our “bucket”. So, to move everything, we only need to adjust the positioning of the div. Then, everything inside of it will adjust accordingly.
Hope this helps!
Joomlapanel November 12th
Excellent.. already bookmarked!
honour chick November 12th
easy to understand tutorial.
Nindia November 14th
thanks a TON!
Kaloyan Yankulov November 15th
Great screencast, Jeffrey! I’m already working like a XHTML slicer but I’m sure this tutorial is very helpful for everyone new in making the .psd into living file for the browser. Thumbs up for the good work!
Jose Fares November 15th
I’m very thankful! is very easy for each way
Seye November 17th
This is really nice! Is it possible to have this tutorial in the written form?
BobSox November 17th
I can’t seem to view the CSS video over 36 minutes
Filipe Moreira November 18th
Thanks a lot Jeffrey! Very good tutorial. It really helped me.
Nelson November 19th
Very good article, also, if you dont want to mess your hand you can hire professional PSD slicing service to get job done.
Billy T November 19th
Great tutorial.
I don’t know if someone said this already, but when exporting the images in photoshop for web, you can select “user slices” instead of “all slices” in the save to dialog box dropdown menu, to export only the slices you did manually…if you wanna save 10seconds.
Leventhan November 19th
Incredible videos. Great job, Jeffrey.
Hope there’ll be some more videos coming along in the future.
Ionel Florin Patrichi November 20th
Hi all,
I wanted to THANK you for this great tutorial.
I definetely learned more then i’ve expected.
Keep it Up.
Cheers from Spain.
Pete Dooley November 21st
I couldn’t stop watching and loved that you left in the little mistakes and hunted them down… That is a bonus. Sometimes it is a bit intimidating watching tutorials when the tutor is a to ready to impress.. You impressed with your thoroughness. Thanks
Kris November 21st
Best tutorial on this topic i’ve ever seen! Thanks a lot!
Manuel Minino November 22nd
Just watch the first half of the first video,and i have to say congratulations!!! I’m kind of a newbie on this whole html css thing, and never before watched someone actually working it out… and never watched a video tutorial without FALLING ASLEEP after the first 45 secs!! And i don’t have any coffee near…(just fruit smoothie lol) again, CONGRATULATIONS, so far… i’ll post a final comment when i finish the whole stuff. THNX!
David P Crawford November 22nd
Good Stuff. Watched all of them. I appreciate the help!
Manuel Minino November 22nd
well.. well… i have to say… i switched from my mac to my pc (just to check if the thing works on IE) and the DEMO doesn’t look good at all in IE6
I’ll post a screencap later.
MixOughT November 23rd
the video does not loading ….
Jeffrey Way November 23rd
@Manuel- That’s weird. I fixed that issue already. The demo must not be picking up my IE6 stylesheet - maybe a typo in the reference. I’ll get that taken care of today.
Raj November 23rd
Excellent tutorial m8. Thanx a lot!
Charles November 23rd
Wow Good job !
I needed this refresh
One things : Where did you took your icons images ?
Brian November 26th
Does anybody tell you you sound like Steve Carell? Helluva tutorial, man! Kudos to you!
Serge November 26th
Great stuff.
Thank You!
Jeffrey Way November 26th
@Brian - No, never.
He’s twice my age.
But he is the star of my favorite show on television. So maybe it rubbed off.
asdf November 27th
THX
Soeren November 27th
Awesome tutorial! I’m a .NET guy myself, and I almost cried when you opened VS
It’s really a great tool, and as you said, the free VWD is very nice. It can be used by everyone, whether you use asp.net, PHP or create a web site with html pages, CSS, maybe some jQuery, and no server code.
For a future screencast, maybe you could create a small asp.net app, kind’a like this one with the PSD to XHTML, but also with a little asp.net functionality. Maybe a blog, with a wordpress style theme, but with limited functionality ofcourse, since I know it takes time.
My point is to show that .NET isn’t this anti-standards monster. You CAN create the same standards compliant apps, using semantic code, and asp.net let’s you do some awesome stuff.
Note; I don’t want to start a technology geek fight
Happy thanksgiving
mkjones November 27th
The slicing tutorial is a bit backwards.
First of all, you should always name your slices. For example, give your header slice the name “header” and you will end up with “header.jpg” not “image001whatever.jpg”.
Then you really should disable the unused slices by changing the property to “No Image” then you don’t have to worry about deleting unwanted images.
This way you can make periodic changes to the design and output to a source folder without having to worry about doing any extra work.