Skeletorscorpse - Photoshop Exported Sites

you are here: Home

HTML/CSS

Photoshop Exported Sites

Tuesday, 30 May 2006

Photoshop Exported Sites

This tutorial shows you how bad the Photoshop automated HTML code is when you export your page.

For someone who doesn't know a lot of HTML the exports you get from Photoshop can be very daunting. Especially if you have a complex design. In some cases you will not want to use the HTML code that Photoshop gives you as in a lot of cases the coding is poor at best. The overuse of tables makes it a hassle to work with properly.

If you want to help yourself, follow these steps:

Don't make what you want your website to finally be.
Make lots of simple sites gradually nearing to what you want to end with. This way you can train yourself to change the layouts starting from an empty page to a complex page exported from Photoshop.

Edit Photoshops HTML
I find that editing Photoshops code first then making my own code is a lot better as I am able to see where I want to end at. Alternatively you could do a good job of editing the HTML and want to stick to it. If so, first make sure there are no compatiability issues with the site in different browsers and try to make use of CSS as much as you can. By using CSS the size of code that the user has to download can shrink dramatically.

Change as much of the code to HTML
Well the title says it all, try to make use of CSS, virtually all browsers are getting more compatiable with the different CSS styles. There will be a few differences in how some things are displayed but they may not break your page but perhaps improve it.

Here is some code exported from Photoshop:

As you can see it is pretty long and with images in all the cells, no where to add content to the page.

With a few code changes it is now editable but the code is still extremely messy.

<table id="Table_01" width="800" height="551" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="15" bgcolor="#AAAAAA">
<img xsrc="images/ff_image_01.jpg" width="28" height="17" alt=""></td>
<td rowspan="3">
<img xsrc="images/ff_image_04.jpg" width="105" height="86" alt=""></td>
<td colspan="2" rowspan="3" bgcolor="#AAAAAA"> </td>
</tr>
<tr>
<td colspan="3">
<img xsrc="images/ff_image_06.jpg" width="28" height="46" alt=""></td>
<td colspan="7">
<img xsrc="images/ff_image_07.jpg" width="194" height="46" alt=""></td>
<td colspan="5" background="images/ff_image_08.jpg"> </td>
</tr>
<tr>
<td colspan="15" bgcolor="#AAAAAA"> </td>
</tr>
<tr>
<td colspan="15" class="buttonback">Home | Links | Forum | Downloads </td>
<td>
<img xsrc="images/ff_image_24.jpg" width="105" height="21" alt=""></td>
<td colspan="2">
<img xsrc="images/ff_image_25.jpg" width="15" height="21" alt=""></td>
</tr>
<tr>
<td colspan="18">
<img xsrc="images/ff_image_26.jpg" width="800" height="2" alt=""></td>
</tr>
<tr>
<td>
<img xsrc="images/ff_image_27.jpg" width="3" height="425" alt=""></td>
<td height="425" colspan="16" background="images/ff_image_28.jpg"> </td>
<td>
<img xsrc="images/ff_image_29.jpg" width="2" height="425" alt=""></td>
</tr>
<tr>
<td colspan="18">
<img xsrc="images/ff_image_30.jpg" width="800" height="2" alt=""></td>
</tr>
<tr>
<td colspan="18" bgcolor="#AAAAAA"> </td>
</tr>
<tr>
<td>
<img xsrc="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="7" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="18" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="51" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="97" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="42" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="56" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="384" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="105" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img xsrc="images/spacer.gif" width="2" height="1" alt=""></td>
</tr>
</table>

With this CSS code, for the back of the buttons.:

.buttonback{
background: #ABABAB url(images/ff_image_12.jpg) top left repeat-x;
font-size:12px;
color:#FFFFFF;
vertical-align: middle;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 4px;
padding-left: 10px;
}

So if this is so bad, how do I export my site?

Export it like you would with or without the HTML. I do it with so I can see what image is what number. Then make your own code. Large layouts that have lots of slices generally come out very complex, and once you start editing the layout will get messed up completely, just because you deleted one spacer.

Next >

[ Back ]

HTML/CSS Categories

HTML/CSS Categories

Latest HTML/CSS Tutorials