cool, and first!

Nice little, simple tut. Excellent for beginners, I’ve already emailed it some newbies.

Thnx for the tut, great resource.

A bit rudimentary if you ask me.

it was a bit laggy, but i finally finished it. very well done mate!

Well explained

Great as always Jeffrey!

Because the world cant get enough paper airplanes.

very nice, thanks as always for all videos, resources and time spended

The video ends right at the point where you are styling the HTML tag… where can I see the rest of the video? Watching you code is the most help I’ve found since I started learning how to build sites.

thank you, i needed this

Hey guys. I’m so sorry. Camtasia must have not exported the video properly. I’m taking care of it as I write this. An updated video should be on the site within the next hour.

So sorry!

The whole video isnt loading for me. Like most of it is cut off, and the video is really choppy, i say stick with the blip.

Ok forget my last comment hehe. I didnt read Jeff’s comment. Hopefully it get up before my eyes close fully, im so tired and gotta get up early, but i like watching this sort of stuff.

Thanks, i’m somewhat of a beginner. I am pretty good at css but I always have problems with my code when I try to build from the ground up.

Okay – I’ve updated the video.

Very useful for me !
Thanks you very much !

great this was originally on psdtuts and it’s very interesting.. learning those things..

Well done Jeffry.

nice tutorial.

Nice tutorial for beginners!

But, a little addition for beginners:
h1 should not always be used for “Your Logo”, but in many cases you use it in your content (in this case: “How we Work”) for SEO related thingies

Thanks for this but I’m wondering when people are gonna start using Fireworks on a regular basis. I’m probably gonna sound like an Adobe sales man but Photoshop was never meant for web design.

Been using Fireworks for a long long time and strongly suggest people working a lot with web design mock-ups to check it out.

This is a great tutorial. Though, If I had the money I would buy you a new computer for Christmas, Are you running 95 or just the old school theme in XP, Anyways, Thanks for the help.

is it my mistake or is the “small” text next to the Logo not showing up in the IE 6?

also I would like to know: did you line-up the transparent menu background with the html background? because that’s a big deal for me. For example, if you re size the screen, is it still lining-up?
Great tutorial and a great layout!

what kind of editor are you using? it looks nice, and would like to know where to buy or to download

Good job. Even though I’m confident with my HTML/CSS, I learned a few things that will help me later.

Aptana > Netbeans

I actually love Aptana for editing my rails stuff. It’s a bit buggy in 64 bit Vista but I’ve been told that’s because Eclipse lacks 64 bit support.

Now back to the video, not to bad on showing us the jist of it. It’s amazing how long it takes when your creating a video of the process versus just running with the flow.

P.S You don’t like the new CS4 look? It looks as if you defaulted to the CS3 look.

This may be a stupid question but…. How does the design look in IE6? I mean.. does the tutorial cover the lame IE-fight?

Very useful tut, thanks!

greetz
http://www.opensourcehunter.com

Nice article, thanks.
But again, what about Fireworks ? Why still use Photoshop if there is already software designed for such a task ?
Whatever, thanks for the article anyway and go on !

Since you’ve changed video format my itunes is not showing new screencast episodes anymore. Can you check this to see what’s wrong?

Nice screencast, some helpfull info here, was wondering how did you find the lineheight of 21px in photoshop for the paragrafs

thanks for the tut… very useful…

you misses one thing Jeff, that’s in the Top navigation you missed a small line, pls solve that in net tut

Really useful for those who pays for PSD 2 HTML conversion !!

Good Tutorial.

Aptana is a pretty swell editor – I love the on the fly validation. The video player is a shade annoying though…it took me a minute to figure out how to pause the video. :/

really great tut ! one of the best I ever seen ! Thanks a lot !

@Simon – Yahoo makes a site builder for creating websites also but that doesn’t mean you should use it.

Helpful Tutorial

Good tutorial, I would probably do a few things different, like what “Ewout Winkelman” said.. h1 is better used for your content’s title. Search engines, and people, are not usually looking for “The Name of Your site”, they are looking for “A page about this great topic”. Since your head title, and your h1 are the two places that search engines look first, they should contain the most valid information about the content coming up on the resulting page.

I’m a newbie here, so I’m probably beating a dead horse, right?

Nice basic tutorial.

Awesome show of how to convert PSD to HTML. Always looked for something like this. No need to pay designers to do the converting anymore :]

yes ! i’m doing the first “converting screencast” right now…
it’s very helpful 4 me
more more more !!!!!!!!!!!!

Thank you for this tutorial, very nice to see the step by step process.

Couple of things.
1. don’t apologize for the video being long, take the time you need, us newbies like to see it step by step. If something we just skip ahead

2. As mentioned here above the small tag next to the logo doesn’t appear in IE6 (not sure with the IE7)

3. The main menu doesn’t line up with the secondary container, you talked about adding an id to the first in it and you even made the css code for it and said you would go back to the HTML code and add it later on, but I presume you forgot about that

@Hjortur -

1) Okay. Thanks!

2) Oh yeah. I never noticed that the small tag didn’t show up in IE6. Sorry about that. I’m sure it’s a quick fix. I’ll take a look.

3) Good point. I got sidetracked. If anyone was following along, they simply need to return to their HTML and add the “first” class to the first anchor tag. I did that on my original, but got sidetracked when recording the screencast.

Thanks everybody for the comments/suggestions.

I really like the new NetTuts video format.
Anyhow, excellent tut!
Is there any way to download and save your video tutorials? I love to use them as references.

Having this presented in a video format is great for visual learners. Though I know these steps, I love seeing new work flows that people use.

Thank you very much for taking the time to produce this tutorial, and a PLUS for having it be video!

Nice screencast!

I never thought of using web developer toolbar to actually code my entire css in it but it seems to be a good way of working.

Maybe next time you could do a screencast on optimizing code for IE cuz there don’t seem to be alot of resources regarding this topic.

Thanks.

Really enjoyed this screencast thanks very much – particularly liked you doing the CSS by hand and explaining it.

how about a basic tutorials on CSS layouts?

Nice for learning more html and css. This is in fact a crucial step in webdesign

what’s up with the Community Link Feed? I used to check it out often but it doesn’t seem to get updated much anymore.

@Chad – Yeah, the system changed a bit. It’s easy to forget sometimes. I just updated it. I’ll do better from now on.

Hi, just wanted to say thanks for taking for the screencast! I’ve been doing ad-hoc design on my own sites, and it was great seeing your techniques in action. Definitely learned new tricks about how to position background images, etc.

One tip which helps me — put a “border: 1px solid red” style when working on an element. That way it’s easy to look up and see which item is being pushed around by margins, padding, etc. Then you can delete it out afterwards.

Anyway, thanks again.

@Kalid – Thanks so much.

In reference to your tip, I would recommend that you use a background color rather than a border. Sometimes, the simple addition of a 1px border can throw off your layout.

sweet deal

thanks!

Thank you very much!

Why are you still teaching people to set sizes in pixels? EVERYTHING should be set in ems.

@Chris – That’s not necessarily true. I can tell you a few well known developers that prefer to use pixels.

@Jeffrey – That well known developers use pixels doesn’t make it better I also use ems instead of pixels, because of text resizing in the browser and cross-browser compatibility. When pixels are used, some (older) browsers don’t support resizing.

Great tut … really nice results

Thank you. Very useful. Nice presentation.

direct link.. 104 mb.. enjoy ppl..
h–p://www.viddyou.com/get/49204.flv

Great Screencast. gave me a great perspective on going from PSD to Html. Keep upthe good work
Mike
Kurve Media

@chad
[quote=zamson]Thanks for this but I’m wondering when people are gonna start using Fireworks on a regular basis. I’m probably gonna sound like an Adobe sales man but Photoshop was never meant for web design.

Been using Fireworks for a long long time and strongly suggest people working a lot with web design mock-ups to check it out.[/quote]
Seems like I’m not the only one thinking this way. And you’re right, never use useless software ! But Fireworks isn’t useless. Have you ever tried to work on a whole project using only Fireworks (for designing, obviously) ? I already know the answer, because if you had, you wouldn’t be using Photoshop anymore

Umm aren’t this have been posted before? because i think i have seen this like 2 – 3 times already

Your hard work is appreciated Jeff – fantastic screencast!

Thanks a lot.

Great tut thnx

This was a great tut. What I learned is that I can use the web developer add-on for FF to code the CSS in real time. I am glad I spent almost an hour watching it.

Thanks Jeffrey.

Awesome! And yea – take your time. I could care less if the video was 3 hours long. If it helps me cut my web development time in half – I can wait all day.

Always fun to watch someone else’s flow. Good work and Thanks!

Woa, you make it look easier than I thought it was, now gotta go try it i spose, hopefully still easier than what i thought it would be

great video! keep up the great work

This was a great tutorial like everyone else said. Well most of everyone.

Really good tutorial, help alot

Cool, Thanx.

P.S. The “Using a single layout to create several different looks” line has dissapeared in IE.

Great tutorial. Keep up the good work. Thanks a ton.

I’ve always wanted to understand the process of PSD to HTML/CSS…this was a great help. Thanks!

Jeff

something is wrong with ie 6 when you refresh it the text inside the tag are not visible but on the other the tutorial is truly a lot of help
it’s amazingly cool.
thanks

sorry for that what i mean is the text inside the tag “small” are not visible
but like i’ve said before your tutorial is really cool, thanks and Godbless

Very interesting – I’ve been looking for exactly this sort of resource to help me learn a bit more about css. Thanks

excellent, great job of going into detail about i-explorer.

ya um or you could slice it and go to save for web and select images and html, under that you should set that to other than go to html in the second menu within the pop up and go to slices and instead of html table select generate CSS. AND BOOM YOURE DONE!!!

@Patrick – Please don’t say that. Would you really be proud of the markup?

great work for us newbie, jeff!
i’ll try it now..

thx a lot

peace

This was great! As someone who has just started learning this stuff, this was extremely helpful. Thank you!

Very nice and helpful, helps me a lot.Thank you very much keep it going

Clean, that’s the word, simply perfect, keep it up please! I’ve really enjoyed this one!

Great tutorial.

Maybe someone could do a similar tutorial using GIMP. I would love to have some transitional tuts because not everyone can afford the full-blown Photoshop.

Maybe I am just a minority on this site, though….=)

Awesome awesome tutorial. Thanks so much!

Will this be available for download soon?

Thanks again!!

Very good tutorial!

Very good tutorial!

Just a comment , you forgot to fix the tag in IE 6. It not appear.

Awesome tut! Very informative. Thank you.

Great! Thanks Jeffrey.

Very nice tutorial! and beautiful site too!
Thanks a lot!

This really helped me out – thank you so much! Great site with numerous tutorials and whatnot.

VERY HELPFUL! Thank you!

Jeffrey,

Awesome!!!

Quick and clear, in and out.

Thanks for sharing, it will make the web a bit better again!

I learned today some stuff i had to assume lol… Great tutorial THANKS!

You are a very good teacher.,

I have to say, i saw your first slice to xhtml tuto and this one, and im having no trouble at all .. i learn a lot from you.,

Thanks.,

An excellent tutorial!

I enjoyed the video! I have random question. When is it considered best practice to use ems over px when it comes to margins, paddings, line-heights, fonts, etcs?

A really great tutorial and very useful. I really like how your work flow flows

Great tut. answered a lot of questions I had..
cheers

Great video, learned alot from it!

This was a great tutorial, a lot of helpful tips, especially that png fix – oh how I hate IE6. It’s always interesting seeing how other devs work

this one was fantastic.
i saw the first psd to html tutorial today and couldnt help myself and saw this one as well.

Jeffrey, this was a fantastic tutorial. I learnt more from it than 6 months of design college! To be kind, the course probably gave me the grounding to understand what you talking about.

Anyway, could you please do a tutorial on the Mootools accordian plug-in. I’m not technical so I’m finding it really difficult to understand how to use it, despite numerous searches.

Thank you for such a great site!
Tracey

Awesome tutorial with lots of great info, Jeffrey!

One suggestion I would make, however, is a practice I’ve adapted; using a font-size of 62.5% in the body selector, then setting all font-size and line-heights in em. By doing this, you’re essentially setting them in pixels, except the text will actually scale properly in all browsers.

Thanks!

Got a question:
When you use float:left, dont you have to insert a float:none or clear:both to display it correctly?

useful tutorial, thanks mate!,, from méxico

Great tut. Its good to see someone’s ealse workflow .

this is amazing. good work jeff. we are waiting other great tutorials from you…

Tip for copying lines in Aptana:
Keep the marker on the line you want to copy, hold in alt+ctrl and hit up or down arrow, depending if you want the new line above or below.

Just great!

WOW very COOOL good work man

Make a tutorial how to make a panel of administration of a site
,ar fi foarte frumos,Thanks so much

Awesome tutorial!

Practically after i saw the tutorial i had the experience of designing it It was a great & very very helpful experience thanks a million!!!!

Awesome Tut

Great skill !!! awesome works!

Useful tutorial

Nice one.

Great, Thanks…

Thank you so much!

Great video. Easy to follow tips!

Can this method be used when making a theme or template for Wordpress?

Nice tuts by the way.

Chris

@Chris – yes absolutely you could use the same method for a WordPress theme. But this would only be part of the larger process.

Once you have your design all sliced up into valid XHTML/CSS templates, you would then need to break that XHTML into the respective WordPress template files. This includes replacing chunks of code with php-based WordPress template tags (overly simplified but that’s the gist of it).

You can find lots of tuts online for doing this… perhaps right here on nettuts (Jeffrey?). Of course, the WordPress.org codex has lots of info, too.

Love the tut!
But why doesn’t my img show , ref. to your tag html {background: url(images/bgImg.jpg) }. Aren’t you supposed to specify the tag to background-image, in order to make the “magic” appear? I can’t seemed to make it happen.

Danke für dieses tolle Videotutorial!
Super verständlich und interessant gemacht.

Danke!

thanks for this nice tutorial ^^ I really enjoyed it.

太牛了 呵呵 厉害

That was extremely helpful. I never thought of building pages CSS in browser before. You were extremely thorough and helpful. I look forward to customizing this design myself!

Nice job man. This is VERY helpful to beginners. Helped me loads. Thanks!

Hey, its really nice!
but huge size, my internet speed would not allow me to watch this tutorial again and again.

From where and how can i download this tutorial?

its downloaded in my cache but there is nothing in my cache! (using Firefox)

Please help me to download this tutorial, so that i use it for my practice!

Waiting for reply!
GFX

its nice

ITS NICE ONE

you forgot the a.selected class?

btw nice tut!

nice tutts, detail and aplicable.
thanks pal.

excellent tutorial, but recently I am learning and I do not like the images in the psd: aboutHeading.png, clear.gif, mainBG.png, yourLogoHeading.png.
Thank you.

very cool, thanks

nice screencast u taught some stuff about adding hacks to compensate for IE nice

Wow, this tutorial was nice and easy to understand.

Very nice !

I made a similar PSD comp and tried to code it but it turned out sloppy.

I used a lot of margin tags to position the images.

There has to be a better way to position the images?

Can someone have a look at my code and let me know where I went wrong?

wisam dot ca /indextest.html

email me at: help at wisam.ca

Any help is much appreciated!

Wow! Very good example!

You have a talent to make things easy for understanding

Create job.

No one covers the simple stuff like this. And to see the nuts and bolts of how day to day websites are built. AND how people can do it on their own and implement it to their own sites. fantastic job.

Thanks.

Tim

Awesome!

But you forgot one small thing. The simple “selected” feature, where the anchor tag you select, gets bold, so you know what page you are on.

You said you were gonna add this to your html, but I guess you forgot.

Otherwise great screencast – helped me a lot!

54 minutes well spent! I am a regular user over at themeforest and found my way over here. Now I can do something with the psd files too!

Dugg, Stumbled and Subscribed.

Cheers

Very informative, thanks a lot

very nice tutorial i really learnt more about css design. btw a hard cut at the end

Thats a genious tutorial Jeffrey !! I thought it was very very helpful, especially for me, who has only been designing and coding for about a month. I would really love to see more tutorials like that one.

@Patrick – Please don’t say that. Would you really be proud of the markup?

I have learned a lot here, I wanted to code my simple website, well atleast code it simply, and still have some problems but my friend wanted to code it with me so now I did a lot of work. Thank you very much!

Although I do this type of thing every day, it is still nice to watch someone else’s methods.

Took me back to when I first started out.

Well a Simple and great way to do the thing ! thanks

For the css part:

#container {
margin: auto;
width: 921px
text-align: left;

when I enter this it has no effect what so ever. What mistake could i have made on the main html? as it dosn’t recognise and “#container/header {” statements.

many thanks.

Hey Jeffrey,

Just wanted to say thanks heaps for your work and it actually did made me get registered with Tuts+ site. So keep up the good work and looking forward to more of these sort of tuts.

Cheers

So many comments… This is really a good beginners tutorial…

that is a great attempt for all designers, i really like this and requesting to you for stuff like this…

Thanks
Casper

The video is not playing…

nice keep up the good work its really good for me as a beginner

There’s some disagreement among SEO firms about whether the H1 should be your logo or the actual title of the page. FYI.

i absolutely love your tuts

thanks a lot

I’m curious, when you first started web developing how long did it take you to finish a psd to html website?

I didn’t enjoy it:/ I freaking Loved it!!

Thanks for the really nice tute!

Quick question:

How would you go about reusing common areas across different pages (such as the header, nav, footer)?

I come from a programming background so modularity and reusability is really important. If I was to just duplicate the main page and modify its content, that feels very counter-intuitive and will likely cause problems when I have to change one of these common areas.

I know you could do this with frames but apparently they’re bad news nowadays so what is the best way to go about this?

WOW Really helpful!!
muchas gracias saludos desde Aguascalientes, Mexico

Loved it! Really simple and the best things are the IE hacks

Great explanation, simply great, a lot of helpful tips and information! Yet, keeping it simple and straightforward.

Good ! I like it, very nice!

hi
this link have problame

plz re link

plain n simple! great tuts

how to
i download this tut
beacuse i canot download this tut
thnx

i cant watch this video in this site，who can help me please，im in Beijing china,
i hope webmaster can slove it ，thankyou~

so easy to follow thx. my goal is to splice and mark up my first psd (which I designed) by the end of the summer!

Very nice, thank you

great video-tut thx!

thanks, helped me alot

Everything is fantastic, but i didn’t understand how to cut the banner to be transparent, from the .psd file. I’ve been having so much trouble with that and just can’t understand it.

Thanks for all you hard work!!!!!

Love you long time Jeff! Great Tutorial.

thank you! always been intrigued by psd to html, this one nails it. now, i need to get to know psd to html to wordpress/drupal!

cheers!

very nice and good looking

I very new to this, and This site is awesome… I got what I need
brilliant work Jeff.
now I’m always hanging around here
valuable content

Beautiful, but if it was on dreamweaver will be best.

Great! Love this kind of screencast.

A tip: Name the css id after what information they contain, instead of primary and secondary.

If, someone later on, moves the primary to the right of the secondary it wont be logical anymore.

But if the primary had a name like ’subnav’ it still makes sense.

You are just great bro love your work watched all the screencast’s and loved it
Great stuff and tips you got all tips are great

Thank you very much for this. Here in Macedonia, almost every HTML designer is using the old style with tables which aggravates me, me as PHP developer used to rarely put focus on html design, but you have given me so many ideas with your tutorials about “From PSD to HTML”, actually there is not tutorial anywhere else like this one or the others similar you have made, of course there are written ones, but this is very very helpful, don’t mind the nasty comments, those are people who don’t want to share so thank you very much Jeffrey, it’s been pleasure watching you slicing the PSD and writing the CSS.

Great Tutorial, thank you!!

I’m sure it’s me bt i c no tutorial here there’s no css and html apart from the psd witten div header and smthng it seems to be gr8 coz everyone s tolkin abt it but..i just dnt c a thng

Gosh, I love the tutorial and everything but I always just find it strange how you pronounce “tuts” , I was thinking it would be more like “toots” (haha pardon me), as in tutorial=”too-tor-ee-al”… no?