DH Templates

Convert a photoshop website design (psd) to css + html?

I have seen many free website templates that have PSD (Photoshop templates) and the css file with them. I have made a design in photoshop, so i was wondering if there is a trick to convert the photoshop file to css or html.. because if I open the css file, the layers are exactly the same in pixels, example: a div layer with these caracteristics: height 25px width 50px top 512px left 450 px, with the same font and font size, etc, etc. Is there a way to convert the photoshop website design i have designed to css, instead of calculating the top, left, right, bottom dimensions of the page?

Public Comments

1. When you have sliced your webpage as you want it, go to FILE > Export As... Then export that design as an HTML. Good Luck! If you need further assistance/advice, feel freet to contact me.
2. Slice all the layout to your requirement then press CTRL+SHIFT+S which will bring up save for web option then when pressed save instead of any image type choose HTML and it will save the HTML layout for you. Important this is photo-shop will create tables for you and a put those sliced images on your layout style, next thing to do is start with dream-weaver link a css and work on the html page. When you are working with you will probebly need to calcualte the float of images if not using table which is very good if you want your website to be more SEO compatible.
3. Well there's much more to it if you want to do it properly , first you have to put your design in a standard resolution , like 800*600 or 1024*768 etc which can be converted properly to html and css , you have to slice the parts you want to be a separated image and the part that you want to remain html you have to right click on that slice and select image , then you have to "Save for web or devices". It's really takes pages to explain so i recommend this tutorial which will help to convert psd to html and flash from scratch http://net.tutsplus.com/tutorials/design-tutorials/design-and-code-a-slick-website-from-scratch-%E2%80%93-part-i/ http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-a-slick-website-from-scratch-%E2%80%93-part-ii/ Another great thing that can help you is tutsplus video podcast on itunes , search for tutsplus in itunes video podcast and you will find a whole series on converting psd to html and css, the videos are free for download . good luck .