Slicing in Photoshop

**Xplodr!** · 01-19-09, 01:40 PM

I'll start off by saying i'm stuck.

I've designed a grunge layout website in photoshop, and now I don't know where to go from here.

I think what I need to do next, is slice it up, and export to HTML. I have dreamweaver, and the cs4 design premium. Here's what I have so far:

http://img140.imageshack.us/img140/1338/31969786wy9.jpg

The little squigglies around the links, I want to pop up when you mouse over the individual links. The body target I want to have some navigation on the individual pages (i.e., clickable player names on the roster page, to show a bio in the main body section)

I just don't know what to do. I'm gonna continue to dick around w/ it until I figure it out, or until someone helps me out

**RudyTheRocka** · 01-19-09, 01:46 PM

Adobe Fireworks?
From what I understand you import your template from photoshop to FireWorks and it will code the CSS for you.

**IRON MAN 2142** · 01-19-09, 01:51 PM

The only thing i can help you with is the buttons

to make them rollovers to have to put them in a table that will replace the image with another when the mouse event happens

Insert the following "script" tag in your head section:

Code:

   <script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Use the following BODY attribute to enable rollovers for your 5 buttons (notice image names):

Code:

<body onLoad="MM_preloadImages('button1-o.gif','button2-o.gif','button3-o.gif','button4-o.gif','button5-o.gif')">

Use the following TABLE example to implement your rollovers with Javascript in your 1 x 5 table:

Code:

      <table width=50% align=center border=0>
          <tr>
             <td width=100><a href="http://www.tvguide.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','button1-o.gif',1)"><img src="button1.gif" name="Image1" width="100" height="75" border="0"></a></td>
             <td width=100><a href="http://www.movieguide.org/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','button2-o.gif',1)"><img src="button2.gif" name="Image2" width="100" height="75" border="0"></a></td>
             <td width=100><a href="http://www.emmys.org/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','button3-o.gif',1)"><img src="button3.gif" name="Image3" width="100" height="75" border="0"></a></td>
             <td width=100><a href="http://www.oscar.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','button4-o.gif',1)"><img src="button4.gif" name="Image4" width="100" height="75" border="0"></a></td>
             <td width=100><a href="http://www.eentertainment.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','button5-o.gif',1)"><img src="button5.gif" name="Image5" width="100" height="75" border="0"></a></td>
         </tr>     


      </table>

**DOMINATOR** · 01-19-09, 04:37 PM

yes you would use slices. slices actually break up your image into many smaller images. use image ready to do the rollover buttons. dunno if that is in photoshop now but i have to use image ready since im on an older version. save for web images and html code.
you dont need to use dreamweaver. (i hate that program)

you will want to make a border or something to go around that image or else it'll look like shit since people use bigger resolutions than that pic.