Jump to content


Photo

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


  • Please log in to reply
3 replies to this topic

#1 scheols

scheols
  • Members
  • PipPipPip
  • Advanced Member
  • 113 posts

Posted 11 July 2006 - 05:36 AM

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.vecto...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:
<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>

Dont Piss me Off today

#2 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 11 July 2006 - 09:05 AM

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.

#3 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 11 July 2006 - 02:37 PM

You could use div's to put text on top of images.

#4 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 11 July 2006 - 03:56 PM

if you slice it in photoshop, you gotta set the image as background. This is just an example

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

NoGray.com





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users