Converting PSD to HTML part 2

[tech3]

Hi, I m back with the second version of the tutorial I posted yesterday. If you have missed it, here is the link for it.

Converting PSD to HTML

Now, in this tutorial, we would be dealing with the slicing and initial PSD handling in detail because it is the most important part for the design of the final web page. After that, we would be discussing the XHTML programming, and how this conversion can be implemented in XHTML.

HANDLING THE PSD

The PSD was initially loaded into Photoshop as shown below.



Now, we are supposed to first slice the PSD and then store these slices individually into a folder, which would then be handled by our XHTML code.

For Slicing, after selecting the Slice tool as shown in the previous tutorial, we decide the areas which would be sliced from the PSD. A slice is basically a division of Source into functional parts. In this case, we can slice out the Home, Contact Us etc icons because they would be used as links in our web-page as shown below.



For making these individual slices, cut them using the slice tool by clicking and dragging around the area which you would like to cut. Now, right click and select Edit Slice Options and give it a name. For example, the Home icon has been cut below, and been given a name using the above procedure.



Now comes another important step, that of saving these individual slices into a folder. For that, we use the option of File> Save for Web or Devices. On clicking this option, a dialog box, as shown in last tutorial, appears. Select images(.gif) format, and settings to be XHTML ( the default being HTML 4.01), and all user slices. Browse to a location in your PC, and save the file. This would produce all the individual slices as images which can be used in our HTML/XHTML code.

XHTML

The basic code, which would be used in rendering this sliced PSD, and inserting images is shown below. The below code inserts the Home image into the web page.



The CSS code



I hope its clear now, and you can move forward to slicing and dicing your PSD to functional interfaces now. Cheers!

By iGuides' Tutorial Writer: Jitesh Banga

Source: iGuides.org Webmasters Talk

[smub]

it doesn't seem clear to me because i can't scroll your css codes and if i was to be a beginner i wouldn't know what you did with the rest of the css file, so i would be lost.

perhaps posting a text file would be nice.

[iGuides]

That's nice effort, effective guide for beginners.