.PSD to HTML

[Nolund]

A friend of mine use to do this, but since he seems to have disappeared, I thought it would be easier to ask here rather than wait for him to get back.

I'm hoping to make a website, and because I am one who likes to know where he's going, I started by making the general template in Photoshop. What I need to know is, how do I go about turning my .PSD into HTML (yes, I know I have to code it myself, I just need to know the steps required).

I also want to have my navbar change on rollover (button is highlighted). I believe that I need more than basic HTML for that. Is it CSS, or is there something else I would need to do?

 

[Alexander Morou]

Typically, this involves one of two things or both. Normal links can be handled by specifying classes/IDs and assigning them to the appropriate web elements and using a and a:hover to specify style information related to normal/hover appearance. I think you'll also have to specify strict height/width and perhaps change the display type of the link if you're using just the link to specify the full details of the links. Or, you can utilize normal images within anchors and use javascript commands on enter/exit events (I believe, been a while) on the image itself (not the anchor).

That covers how to get hovered images for the links, to get the PSD-> HTML you have to break the PSD image into slices using the slice tool

and segment your image to how you want your website to look (in this example, I'm using a dialog-ish image):

Once you have them how you want them, you then need to export the slices, photoshop will create a small html page for you to get an idea of what picture goes where, but it won't give you code that allows the website to repeat on certain axes and so on. Next, click  ,   (assuming your keyboard shortcuts are the same, you can alternatively press Alt+Shift+Ctrl+S).

This should bring up another dialog box saying 'Save for Web - Powered by ImageReady' To the right is information about the save. Determine how you want the format to be and click the 'Save' button. Here's a series of images saved from the above image:

Edit: Forgot to mention, I'm using Photoshop CS2.