Jump to content

I made a Template In Photoshop and i sliced it but How Can i Write Ontop of Imag


scheols

Recommended Posts

Alright i got a Template made in Photoshop CS 2 it has a HTML page and a image files now the templace is located here: http://xizionz.vectoredhost.com/Untitled-1.html

alright now as you can see it has images how can i write text ontop of the images VIA the .HTML file?

file:
[code]<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Untitled-1) -->
<center>
<table id="Table_01" width="701" height="801" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="14">
<img src="images/Untitled-1_01.gif" width="700" height="16" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td rowspan="11">
<img src="images/Untitled-1_02.gif" width="26" height="784" alt=""></td>
<td colspan="11">
<img src="images/Untitled-1_03.gif" width="650" height="81" alt=""></td>
<td colspan="2">
<img src="images/Untitled-1_04.gif" width="24" height="81" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="81" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<a href="http://xizionz.vectoredhost.com">
<img src="images/Untitled-1_05.gif" width="128" height="72" border="0" alt=""></a></td>
<td colspan="7">
<img src="images/Untitled-1_06.gif" width="430" height="9" alt=""></td>
<td colspan="3" rowspan="3">
<a href="http://xizionz.vectoredhost.com/blogz">
<img src="images/Untitled-1_07.gif" width="108" height="94" border="0" alt=""></a></td>
<td rowspan="10">
<img src="images/Untitled-1_08.gif" width="8" height="703" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="images/Untitled-1_09.gif" width="155" height="125" alt=""></td>
<td rowspan="3">
<a href="http://xizionz.vectoredhost.com/board">
<img src="images/Untitled-1_10.gif" width="117" height="125" border="0" alt=""></a></td>
<td colspan="3" rowspan="3">
<img src="images/Untitled-1_11.gif" width="158" height="125" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="63" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/Untitled-1_12.gif" width="128" height="62" alt="" value="Yo"></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/Untitled-1_13.gif" width="108" height="40" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/Untitled-1_14.gif" width="23" height="569" alt=""></td>
<td colspan="2" rowspan="5">
<img src="images/Untitled-1_15.gif" width="119" height="530" alt=""></td>
<td colspan="5">
<img src="images/Untitled-1_16.gif" width="366" height="13" alt=""></td>
<td colspan="2" rowspan="5">
<img src="images/Untitled-1_17.gif" width="133" height="530" alt=""></td>
<td colspan="2" rowspan="6">
<img src="images/Untitled-1_18.gif" width="25" height="569" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/Untitled-1_19.gif" width="366" height="64" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="64" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/Untitled-1_20.gif" width="366" height="59" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/Untitled-1_21.gif" width="34" height="433" alt=""></td>
<td colspan="3">
<img src="images/Untitled-1_22.gif" width="296" height="342" alt=""></td>
<td rowspan="3">
<img src="images/Untitled-1_23.gif" width="36" height="433" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="342" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/Untitled-1_24.gif" width="296" height="91" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="52" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/Untitled-1_25.gif" width="119" height="39" alt=""></td>
<td colspan="2">
<img src="images/Untitled-1_26.gif" width="133" height="39" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="26" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="23" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="105" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="14" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="34" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="107" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="117" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="72" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="36" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="50" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="83" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt=""></td>
<td></td>
</tr>
</table>
</center>
<!-- End ImageReady Slices -->
</body>
</html>[/code]
Use CSS to put most of the images as background images. You should now be able to put text on top of the image.

ALso I would recommend you to not use the generated code made by Photoshop/Imageready, however I would recommend you to code the page layout from scratch. As from looking at the HTML there is a lot of uneeded code.
if you slice it in photoshop, you gotta set the image as background. This is just an example

Change this
[code]
<td colspan="5">
<img src="images/Untitled-1_20.gif" width="366" height="59" alt=""></td>
[/code]
to
[code]
<td colspan="5" background="images/Untitled-1_20.gif" width="366" height="59">
Your text goes here
</td>
[/code]

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.