How to cut a Photoshop CS3 document into HTML…

Give a man a fish and he’ll eat for a day, teach a man to fish and he’ll eat for life.

This is a very simple tutorial for graphic designers who cannot seem to wrap their minds around the “slice” tool in Photoshop.  This will allow you to create table-based HTML doc ready for web publication or for an e-mail newsletter.

1. Create your psd file
2. Create one folder (let’s call it “BOB“) where you would like to have your html page / images.
3. If you have a button or a specific area that you would like to add a link to, surround it with guides or repères (in French).
4. Select the slice tool (or the tranche outil) in the tool bar on left.
5. In the tool’s menu (on top), you will see a button that says in English something like “Create slices after the guides” or in French “tranches d’après les repères.” Click it.
   
6. Now that your document is all sliced up, go to
   “File > Save for the Web” or “Ficher > Enregistrer pour le web et peripheriques.”
7. In the menu, select your file-type…this will only be applied to the selected slice !
   Make sure all of your slices are selected (shift+click / majuscule+clic) or change the parameters slice by slice.
8. Click “Save” (enregistrer)
9. Now here’s the important part : in your save options, target your destination at your “BOB” folder.
   At the bottom of the “save” window, you have three drop-down menus :
   Format (format), Parameters (parametres), and Slices (tranches)…
10. In Format, select HTML AND IMAGES
11. In Parameters, select XHTML.
    There is a second window of options in “Parameters.”  If you open it (by selecting “other”) you can create a destination folder called “images.”  This is optional…
12. In Slices, select ALL SLICES (TOUTES LES TRANCHES)
13. Save.
    Your html document and your images should appear in BOB.

The HTML (the nitty gritty) :

Okay, so your table is not centered (do you really care?) and there is no link attached to your button.  Let’s fix that…

1. Open your html doc in a text editor, whether it be dreamweaver or something else (I use Smultron).
2. To center your table, look at the following code just under </head> :
   <table id=”Tableau_01″ width=”500″ border=”0″ cellpadding=”0″ cellspacing=”0″>
   change this to
   <table id=”Tableau_01″ width=”500″ border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center”>
3. Find the image of your button in the table, it will probably be named after some variation of the title of your document. The tag will be something like this (since I named my psd “newsletter”) :
   <img id=”newsletter_07″ src=”images/newsletter_07.jpg” width=”292″ height=”40″ alt=”" />
   If you did not put all of your slices in an “images” folder, it will just be “src=”newsletter_07.jpg”.
   For accessability purposes, it is nice to add an “alt” tag.  Like, alt=”red button”.
4. Create a link around the image tag.  Add :
   <a href=”http://www.yoursite.com” title=”Go to My Site”><img id=”newsletter_07″ src=”images/newsletter_07.jpg” width=”292″ height=”40″ alt=”red button” /> </a>
   If you want to be fancy, add a “title.”
5. There will be an ugly border around your linked image.  Erase it :
   <a href=”http://www.yoursite.com” title=”Go to My Site”><img id=”newsletter_07″ src=”images/newsletter_07.jpg” width=”292″ height=”40″ alt=”red button” border=”0″/> </a>
6. Et voila, your psd is now functional, on the web !