Quick leson on slicing images ready for the web

wilmec · #1 (**permalink**) 09-14-2009, 10:52 PM

first off just make your template as this is aimed at beginners make it KISS KEEP IT SIMPLE STUPID
that will make things a lot easier for you.
once you have your template slice it like this.

You will see that the image is sliced just horizontally this way you have lots you can do with this.
with PS export for the web and save images and HTML this will be the whole page you need ( remember where you save it as so you know where to find the pictures).
the HTML code you have is this.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>asarcade_default_template</title>
<meta HTTP-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (asarcade_default_template.psd) -->
<table id="Table_01" width="800" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td>
   <img id="asarcade_default_template_01" src="images/asarcade_default_template_0.png" width="800" height="42" alt="" /></td>
 </tr>
 <tr>
  <td>
   <img id="asarcade_default_template_02" src="images/asarcade_default_template-02.png" width="800" height="151" alt="" /></td>
 </tr>
 <tr>
  <td>
   <img id="asarcade_default_template_03" src="images/asarcade_default_template-03.png" width="800" height="339" alt="" /></td>
 </tr>
 <tr>
  <td>
   <img id="asarcade_default_template_04" src="images/asarcade_default_template-04.png" width="800" height="110" alt="" /></td>
 </tr>
 <tr>
  <td>
   <img id="asarcade_default_template_05" src="images/asarcade_default_template-05.png" width="800" height="43" alt="" /></td>
 </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</HTML>

next open the first file in PS you now have this.

not really a lot needs doing to this so i am going to leave this alone.
i am also going to leave the very bottom image alone too so no need for anything on that.

next we open up what will be our header file.
and slice it like this.

Again you will see keep it as simple as you can.
again export this same as above.
You will get this HTML code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>asarcade_default_template-02</title>
<meta HTTP-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (asarcade_default_template-02.psd) -->
<table id="Table_01" width="800" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td colspan="2">
   <img id="header_01" src="images/header_01.png" width="800" height="92" alt="" /></td>
 </tr>
 <tr>
  <td>
   <img id="header_02" src="images/header_02.png" width="380" height="59" alt="" /></td>
  <td>
   <img id="header_03" src="images/header_03.png" width="420" height="59" alt="" /></td>
 </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</HTML>

now all we are intrested in this is the table nothing else is needed so select that and copy it to your clip board ready for the next step
you should have just this

Code:

<table id="Table_01" width="800" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td colspan="2">
   <img id="header_01" src="images/header_01.png" width="800" height="92" alt="" /></td>
 </tr>
 <tr>
  <td>
   <img id="header_02" src="images/header_02.png" width="380" height="59" alt="" /></td>
  <td>
   <img id="header_03" src="images/header_03.png" width="420" height="59" alt="" /></td>
 </tr>
</table>

at the top where it says this

Code:

<table id="Table_01" width="800" border="0" cellpadding="0" cellspacing="0">

rename the id element to header this is so it wont conflict with the first table we made from the original image.
now in the original lot of HTML look for the header picture i find it easier to use design mode for this and just select the image like so.

Then just delete it from the table so you have an empty sell just write header here in that cell for now.
Now go back to the HTML side of it and find where it says header here and delete that including Andy tags that are not <td> or </td> then paste the code you already copied there.
no w see part 2.

wilmec · #2 (**permalink**) 09-14-2009, 11:24 PM

you now have this.

The html should now look like this.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>asarcade_default_template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (asarcade_default_template.psd) -->
<table id="Table_01" width="800" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td>
   <img id="asarcade_default_template_01" src="images/asarcade_default_template_0.png" width="800" height="42" alt="" /></td>
 </tr>
 <tr>
  <td><table id="header" width="800" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td colspan="2">
   <img id="header_01" src="images/header_01.png" width="800" height="92" alt="" /></td>
 </tr>
 <tr>
  <td>
   <img id="header_02" src="images/header_02.png" width="380" height="59" alt="" /></td>
  <td>
   <img id="header_03" src="images/header_03.png" width="420" height="59" alt="" /></td>
 </tr>
</table></td>
 </tr>
 <tr>
  <td>
   <img id="asarcade_default_template_03" src="images/asarcade_default_templat-03.png" width="800" height="339" alt="" /></td>
 </tr>
 <tr>
  <td>
   <img id="asarcade_default_template_04" src="images/asarcade_default_templat-04.png" width="800" height="110" alt="" /></td>
 </tr>
 <tr>
  <td>
   <img id="asarcade_default_template_05" src="images/asarcade_default_templat-05.png" width="800" height="43" alt="" /></td>
 </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Ok hope you are all still with me on this part trying to keep it easy for you all.
right now we move on to the middle part just repeat what you did for the header again same with the footer and thats it as easy as pie.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode