I have a layout that is saved as a .psd file how do i convert that to a workable html template.

Well, in very basic terms, you need to cut that design up into pieces, then create an html document that can display the images as you need.

Photoshop/Image Ready can be used to slice up the design, and an HTML editor such as Dreamweaver can be used to create the HTML. And for those of you who would reply that he could use notepad for HTML coding, I am recommending an editor under the assumption he is not familiar with HTML (if you were, I think you would only ask how to cut up the image - but I could be wrong).

Yea, I agree PlaneWalker with that assumption. a1nerd, try reading some tutorials on creating slices and divs with css, especially using background images and positioning. Have fun! The learning curve for this could be kinda big if you do not know anything about html or image maping or slicing, etc...

I would not really recommend image ready for slicing even thought that what it does. I would slice them manually on PS, way easier and simple. Imageready split out a very sloppy code. :/

I would slice them manually on PS, way easier and simple. Imageready split out a very sloppy code. :/

While I agree here, I wanted to point out that I was recommending he use "...an HTML editor such as Dreamweaver can be used to create the HTML...", not Image Ready. There is nothing wrong with using Image Ready or Photoshop a1nerd for slicing (or strategic cropping), but yes, the HTML code it allows you to export at the same time is terrible, hence my referring to Dreamweaver (or another editor) ;)

I've actually found PhotoImpact one of the best for slicing images and producing html. I seem to recall it will also produce css. What I like about it is that the slicing process is intuitive - unlikes Photoshop's system. I've never tried the ImageReady slicing, I guess I should.

yes, imageready can give you some disgusting html, but for a noob, I would recommend nothing more difficult. If you really want to do it right, do as abvex says, go with PS, save the images and write your own html. But I have a feeling, you might not be ready for this.

I am using Adobe photoshop to create the design and ImageReady to slice this. I have never had problems with it, it's one of the best arround and easy to use.

Regards,
Ovi

This is very easy, Take the slice tool and slice the meny, logo and the text area, then save for web. and the pictures will then be saved in a ducument mapp that you have pointed out to be the layout location.

yes, its easy, but the code is nasty, thats the point.

Open the code in DreamWaver, there is an option to clean the code, Withj Image Ready never never never has mess the code.

Ovi

nothing automated can clean the code as good as you can by hand ;)

Originally posted by Blade1941
This is very easy, Take the slice tool and slice the meny, logo and the text area, then save for web. and the pictures will then be saved in a ducument mapp that you have pointed out to be the layout location.
This is one easy way and only Photoshop is required.

Yup, like mentioned, just slice it up, the way you want it of course. Then go to FILE>SAVEFORWEB> and save it in the terms that you need your website to be in, make sure you lower the quality because this WILL be on a webpage and you dont want it take forever to load on 56k users.

Yes like everyone said you will need to slice and code it. Tutorials can be found on sites like goodtutorials . com

Please remember that when you slice it, if you have big huge all white images, replace them with CSS background color. This will help with your bandwidth issues that you will face later because you forgot to do this :)

Josh