Thread: How to convert photoshop layout in to HTML and CSS?

How to convert photoshop layout in to HTML and CSS?
I have designed a photoshop layout for my website.
How can I convert it into HTML and CSS?
How can I validate it for contact form?

Hey, just search it on google you will get nice tutorial's on this.

Hello! You just need to know how to slice images up. And code them to HTML/CSS site. For fast learning of slice,you can check out some tutorials on youtube. that will help you a lot. Also about the validation you can always use the w3c validator.Just search on to google for the validator and your good to go.

Good topic,My opinion with this topic.You must separate element to separate images and then you can use HTML and CSS to align the content again, this way you can make links from images and such. Another way to use an image map, but this is not very popular on the Internet.

HI DEAR I have designed a photoshop layout for my website. How can I convert .

It's hard at first especially if your hesistant in learning new things. The first step for me is to create some blank files like an index.html file and attach a style.css with it.
Make sure you already know XHTML and CSS. Start coding the header and first start with the width of the wrapper, add some margins. Then add the necessary elements like the logo. Slice the images you need like the background, the logo and other elements and add it into your html. Make sure to design everything on the external css. Just do some googling on how to do everything in the best manner.

Do the same step for the content area and the footer. After that, validate your XHTML and CSS code. If you find some errors, correct it.

There is a plug-in for Photoshop that is called SiteGrinder ( sitegrinder.com ) . It was written to do what you are asking: convert Photoshop designs to working web sites. And, since you asked, it has support for email contact forms.

You design your pages in Photoshop, you place certain hints on the layer names to tell the plugin how you want the layers output ( like: contact-button and contact-hover) and

I'm one of the programmers, so I am not unbiased. But you should evaluate it for yourself.

Hope this helps,

Chris Perkins
Media Lab, Inc.

www.w3schools.com is a good resource for learning how to do this..

Hi there,

I want you to suggest a guy will translate Photoshop templates into html/css for $15, its really impressive & results are more than your expectations.

You can contact this guy from here:

bstory: I will translate Photoshop templates into html/css for $15- SEOClerks

Hope this would help you all, Good Day!