Results 1 to 4 of 4
Thread: Slicing in Photoshop
-
01-19-09, 01:40 PM #1
Slicing in Photoshop
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
-
-
01-19-09, 01:51 PM #3
Re: Slicing in Photoshop
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>
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>
-
01-19-09, 04:37 PM #4
Re: Slicing in Photoshop
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.
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Bookmarks