Hey folks, I have seen a lot of posts of people asking for ways to convert PSD to HTML Well, its very easy and I have compiled a step by step tutorial on how to do it. Requirements: Photoshop STEP1:Open up the PSD file which you want to make HTML. http://img3.imageshack.us/img3/4201/96266191.jpg STEP2:Slice it up. Press K and drag boxes around different things you would want as buttons, sidebar, the header etc., LIKE THIS: http://img228.imageshack.us/img228/4364/36777274.jpg TIP:I would recommended making slices of large images even if you dont want then as the buttons etc. That is because browsers take less time to load multiple small images rather then a sing large image, LIKE THIS: http://img511.imageshack.us/img511/7606/11009467.jpg STEP3:Assign the links alt etc to your images, LIKE THIS: http://img191.imageshack.us/img191/2721/67932307.jpg http://img687.imageshack.us/img687/320/96149401.jpg STEP4:Leave space for text, LIKE THIS: http://img41.imageshack.us/img41/9859/86429603.jpg Then: http://img692.imageshack.us/img692/9624/66588849.jpg Now you will see a text box Add text to this if you want to do it now or do it later if you can edit HTML http://img13.imageshack.us/img13/909/72821984.jpg NOW THAT YOU HAVE COMPLETELY CUSTOMIZED YOUR PSD ITS TIME TO ACTUALLY MAKE IT AN HTML STEP5:Go To File>Save for Web & Devices http://img717.imageshack.us/img717/6139/41331337.jpg STEP6:A box like this will appear http://img705.imageshack.us/img705/1934/17896700.jpg Just click Save STEP7:Now choose the location of the HTML, its name and what you want to save(HTML+Images OR HTML OR images) http://img208.imageshack.us/img208/9458/57999208.jpg and just press SAVE AND YOUR DONE Just check your stuff and do save the PSD so that you can easily make changes when needed I would be very happy if this thread was made sticky because everyday there are people asking about this and this is a very comprehensive tutorial leaving no room for questions
Can you please direct me to an html document that has been created with CS3 or 4. I would like to examine the html code that it generates.
Please keep in mind that the HTML that is generated by the program is table-based, thus bringing over all the problems associated with it, such as inflexibility, lack of accessibility and you'll have to edit every single page if you want to change something related to design. So you better stick to doing it the proper way using external CSS stylesheet.
here you are james: http://www.e-webtemplates.com/html/PRO-templates/1/1.htm Code (markup): if you want to download this template: http://www.e-webtemplates.com/html/PRO-templates/1/1.rar Code (markup):
well sunshine if you actually think that this is an improper or wrong way of web development then why is there a market full of people selling even you work for people who BUY(or download) them and i also said i my post to save PSDs web editing in photoshop is object oriented and no coding of objects is required that means that you require no knowledge or experience of CSS or HTML etc only a good imagination
You didn't get my point. You'll suffer in the long run if you don't do it the proper way. Once your site grows to 100+ pages, editing the design will be a pain in the ass since you'll have to edit every single page to do that.
I wish it was a choice. Using CS3 is much easier I am sure, but I build websites for businesses. The code generated by CS3 is not ideal for search engines. A business website with limited search ranking capabilities will limit the online marketing coverage, or even ruin it all together, making the website all but useless to the business. So, until I find something that generates cleaner code, I'm stuck hand-coding.
I see what you mean now after having tried it. I shall be doing it the good old fashioned hard-coding way in future.