Comments on: From PSD to HTML

By: Bill K

Bill K — Thu, 15 Sep 2011 18:15:50 +0000

Great tutorial. I really learned a lot.

There were a few issues I ran into. They’re simple mistakes I’d imagine were made while transcribing the steps into tutorial format. (I could be wrong, of course. And I only bring them up because I think others may have had these issues as well. Certainly nothing personal.):

1. – For Part Five, in the HTML under the , you have the title as portfolio… but in the CSS, you only have .portfolio-menu h1 … there isn’t any specifications for .portfolio-menu h2. This is easily fixed by changing the tags in the HTML to tags.

2. – For Part Seven, in the HTML on line 05 and 06 you have an extra , I think. The two panels in the “right-wrapper” weren’t displaying correctly, but they did when I removed the extra

Anyway, thanks again for the tutorial. I actually learned even more having to troubleshoot these parts.

-Bill

By: Lisa Austin

Lisa Austin — Sat, 16 Jul 2011 20:53:55 +0000

The step by step tutorial just worked great for me. Each and every step is explained very well. I was not clear about slicing the design before. But this tutorial made it quite clear. I am done with my design and I have sliced it accordingly. Now I am going to move to the second part for coding. But I just wanted to stop by and let you know that your hard work is really appreciated. Thanks for sharing.

By: Kannabiksen Siemeniä

Kannabiksen Siemeniä — Mon, 28 Mar 2011 05:40:10 +0000

Thanks! i was looking for step-by-step psd2html guide and found it I’m industrial designer and i’m familiar with photoshop so i have been crawing for doing website based on some crazy doodle i made with PS.

Cheers mate!

By: admin

admin — Fri, 25 Mar 2011 00:01:51 +0000

Hello Ahmad, could you tell me which errors you are referring to? Thanks!

By: Sicko

Sicko — Mon, 11 Oct 2010 10:26:08 +0000

Thanks! I also added “.content-wrapper .panel_content” style with min-height:451px.

By: steven smith

steven smith — Fri, 03 Sep 2010 06:57:14 +0000

This was very good and solid information.I enjoyed reading it and hopefully you will write more soon.

By: Duc Thai

Duc Thai — Fri, 20 Aug 2010 09:04:54 +0000

Really nice tutorial. I have a question. From Photoshop, how do i get all styles to build the stylesheet file?

By: John

John — Sun, 15 Aug 2010 22:30:52 +0000

Absolutely excellent! For a long time I’ve known HTML and CSS, but have never quite gotten the hang of doing both from scratch on a PSD design.

Thank You!

By: Hannelore Gonazlez

Hannelore Gonazlez — Fri, 28 May 2010 13:22:55 +0000

When I design a sight I design first and code second. I find that using pure CSS layout , like an obnoxious backseat driver, often ends up stearing the design a little bit in the end. This is most often a problem when floating elements inside a centered div – the darn footer elements colapse upwards; don’t float use positining and margins? Crossbrowser catastrophe! Usually one simple table takes care of so many things.

By: 38 Great Tutorials To Convert PSD To HTML/CSS |

38 Great Tutorials To Convert PSD To HTML/CSS | — Sat, 08 May 2010 10:56:47 +0000

[...] 35.How To Slice Up Design, Use CSS&HTML To Turn It Into a Powerful Web Interface. [...]