slicing help plz!

hasnain721 · #1 Aug 22nd, 2006, 15:00

Hello,
After spending a whole week on a template. i have finally finished it!. I am new to slicing and i dont know any thing about it. I need help. Would appreciate it if some one helps me.
I need to slice this urgently as every thing is ready as in webhosting and domain.
This is what i've come up with: -

Thanks a lot
Cheers!

Legacy_Staff · #2 Aug 22nd, 2006, 18:38

Nice design m8 but you haven't told us what software you're using, and the question you're asking covers rather a large topic depending on what you want to achieve from slicing.
I use PhotoShop CS (which includes ImageReady). If you use the same, go to 'Help / Photoshop Help'. In the new window, go to the left hand Nav Bar and select 'index' and the 'S' link. Then look at the 'Slice' entries for more info.

The most basic suggestion I can offer is to have you select the 'Slice Tool' and use it to enclose the areas you wish to slice. You will see them appear as slices. If possible try to get the horizontal and vertical lines to line up. This isn't compulsory in any way but may eliminate optential problems further down the line.

hasnain721 · #3 Aug 22nd, 2006, 18:41

done!!

pretty simple than i thought lolz
Thanks 4 ur help.

Cheers!

*Edit*
So all i hav to do is link up the pages in dreamweaver right?

Legacy_Staff · #4 Aug 22nd, 2006, 19:31

Ahh, now I don't use Dreamweaver to tie 'em all together but, as I recall, there was another question on that topic in here a few days ago (maybe a couple of weeks). That should help ya.

Incidentally, I found slicing becomes much more powerful when you start to consider it in ImageReady. I rarely slice anything in PhotoShop now. If you're prepared to incorporate a little javascript into your pages you can create some surprisingly eye-catching effects.

hasnain721 · #5 Aug 22nd, 2006, 21:54

Quote:

Originally Posted by RedSkwirrell

Ahh, now I don't use Dreamweaver to tie 'em all together but, as I recall, there was another question on that topic in here a few days ago (maybe a couple of weeks). That should help ya.

Incidentally, I found slicing becomes much more powerful when you start to consider it in ImageReady. I rarely slice anything in PhotoShop now. If you're prepared to incorporate a little javascript into your pages you can create some surprisingly eye-catching effects.

Yea...i've sliced in image ready as well.
All i did is that i saved a jpeg image from photoshop and then opened the jpg image; clicked on the edit in image ready button and started slicing!

As for the javascript, which javascript do u recommend me to use for a travel agent's site?

*Edit*
Since we are talking about my site,
this is my contact page: -

i wanna know how to code this so that i can use it (i heard i need a script but i dunno how to use it in it.)

Plz reply
Thanks

Legacy_Staff · #6 Aug 23rd, 2006, 18:30

ImageReady will prepare the javascript you need for you, when you 'save as optimised'. It will create an 'images' file for your slices and a mini html page from where you can cut and paste the bits you need.

hasnain721 · #7 Aug 23rd, 2006, 19:49

I saved my sliced pages in the same way as u mentioned above and every thing got saved as a image. As for the contact page, how do i make it work?

Legacy_Staff · #8 Aug 23rd, 2006, 21:48

What do you mean?

Quote:

As for the contact page, how do i make it work?

Taking the question literally, I would suggest starting a new thread in the php or asp forum as it sounds like you're asking about something which will require some SSI's to make a dynamic page. You won't be able to do that from a Graphics viewpoint.

hasnain721 · #9 Aug 23rd, 2006, 22:55

okie...ic.....
and one more question m8(i knoe that iam bein anoyin) but i dunno y but the sliced html pages dont work very well. The home page works fine but other pages dont. At the moment, only three pages are running out of which two dont load properly: -
http://www.imrastravels.com/hotels.html
and
http://www.imrastravels.com/contact.html
while the homepage works fine.

Plz reply.
Thanks

Legacy_Staff · #10 Aug 24th, 2006, 00:36

Ohhhhhhhhhh dear.
How much do you know about CSS?
lol

You need to position everything.
(If you change something after you've save the optimised images, you'll need to re-save (I find it easier to delete the original html and image files to make sure there are no errant files there that shouldn't be.
Make sure the sizes are correct and agree with your image sizes.

(I reset my IR to save as CSS rather than html and then use an external CSS file linked to each page of the site using the images)

cperkins · #11 Aug 24th, 2006, 03:25

Hasnain,

The SiteGrinder Photoshop plug-in can do email forms and it supports both CGI mail forms as well as PHP. But the way it lays out forms is pretty much center-line vertical, not the flush-left two-column design you have. Here's an example of a form it created (top of page) along with what was typed into a Photoshop text layer to get that form: http://www.medialab.com/PWMenus/form...339/index.html

Anyway, you could use the demo version of SiteGrinder to generate the PHP and general Form HTML/CSS for you, transfer that to your page, and then go into the CSS and modify it to match the two column design you are looking for.

Chris Perkins
http://www.medialab.com/sitegrinder

hasnain721 · #12 Oct 6th, 2006, 19:51

Quote:

Originally Posted by cperkins

Hasnain,

The SiteGrinder Photoshop plug-in can do email forms and it supports both CGI mail forms as well as PHP. But the way it lays out forms is pretty much center-line vertical, not the flush-left two-column design you have. Here's an example of a form it created (top of page) along with what was typed into a Photoshop text layer to get that form: http://www.medialab.com/PWMenus/form...339/index.html

Anyway, you could use the demo version of SiteGrinder to generate the PHP and general Form HTML/CSS for you, transfer that to your page, and then go into the CSS and modify it to match the two column design you are looking for.

Chris Perkins
http://www.medialab.com/sitegrinder

Hi Chris,
This is what i have done: -
firstly, i removed every thing except the text and generated a css document using site grinder. Then i manually sliced every thing (hiding the text layers) and saved it as xhtml.

This is what the xhtml file says: -

Quote:

<!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>home page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">

<table id="Table_01" width="1025" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="27">
<img id="index_01" src="images/index_01.jpg" width="1024" height="113" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="113" alt="" /></td>
</tr>
<tr>
<td rowspan="26">
<img id="index_02" src="images/index_02.jpg" width="62" height="776" alt="" /></td>
<td colspan="11" rowspan="3">
<img id="index_03" src="images/index_03.jpg" width="565" height="133" alt="" /></td>
<td colspan="15">
<img id="index_04" src="images/index_04.jpg" width="397" height="59" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="59" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="3">
<img id="index_05" src="images/index_05.jpg" width="137" height="118" alt="" /></td>
<td colspan="3">
<img id="index_06" src="images/index_06.jpg" width="24" height="18" alt="" /></td>
<td rowspan="8">
<img id="index_07" src="images/index_07.jpg" width="30" height="206" alt="" /></td>
<td>
<img id="index_08" src="images/index_08.jpg" width="27" height="18" alt="" /></td>
<td rowspan="8">
<img id="index_09" src="images/index_09.jpg" width="34" height="206" alt="" /></td>
<td>
<img id="index_10" src="images/index_10.jpg" width="23" height="18" alt="" /></td>
<td colspan="4" rowspan="8">
<img id="index_11" src="images/index_11.jpg" width="122" height="206" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="7">
<img id="index_12" src="images/index_12.jpg" width="24" height="188" alt="" /></td>
<td rowspan="7">
<img id="index_13" src="images/index_13.jpg" width="27" height="188" alt="" /></td>
<td rowspan="7">
<img id="index_14" src="images/index_14.jpg" width="23" height="188" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="56" alt="" /></td>
</tr>
<tr>
<td colspan="11">
<img id="index_15" src="images/index_15.jpg" width="565" height="44" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="44" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img id="index_16" src="images/index_16.jpg" width="332" height="25" alt="" /></td>
<td colspan="9">
<img id="index_17" src="images/index_17.jpg" width="314" height="23" alt="" /></td>
<td colspan="3" rowspan="4">
<img id="index_18" src="images/index_18.jpg" width="56" height="86" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt="" /></td>
</tr>
<tr>
<td colspan="9" rowspan="3">
<img id="index_19" src="images/index_19.jpg" width="314" height="63" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img id="index_20" src="images/index_20.jpg" width="295" height="43" alt="" /></td>
<td rowspan="20">
<img id="index_21" src="images/index_21.jpg" width="37" height="574" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="43" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img id="index_22" src="images/index_22.jpg" width="295" height="36" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="4">
<img id="index_23" src="images/index_23.jpg" width="131" height="87" alt="" /></td>
<td colspan="3" rowspan="7">
<img id="index_24" src="images/index_24.jpg" width="65" height="113" alt="" /></td>
<td colspan="5" rowspan="4">
<img id="index_25" src="images/index_25.jpg" width="131" height="87" alt="" /></td>
<td rowspan="18">
<img id="index_26" src="images/index_26.jpg" width="43" height="513" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td rowspan="17">
<img id="index_27" src="images/index_27.jpg" width="12" height="511" alt="" /></td>
<td colspan="7" rowspan="3">
<img id="index_28" src="images/index_28.jpg" width="133" height="85" alt="" /></td>
<td colspan="3" rowspan="5">
<img id="index_29" src="images/index_29.jpg" width="115" height="109" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="16" alt="" /></td>
</tr>
<tr>
<td>
<img id="index_30" src="images/index_30.jpg" width="294" height="40" alt="" /></td>
<td rowspan="16">
<img id="index_31" src="images/index_31.jpg" width="1" height="495" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="40" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img id="index_32" src="images/index_32.jpg" width="294" height="35" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="29" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img id="index_33" src="images/index_33.jpg" width="131" height="26" alt="" /></td>
<td colspan="5" rowspan="2">
<img id="index_34" src="images/index_34.jpg" width="131" height="24" alt="" /></td>
<td colspan="7" rowspan="2">
<img id="index_35" src="images/index_35.jpg" width="133" height="24" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt="" /></td>
</tr>
<tr>
<td rowspan="3">
<img id="index_36" src="images/index_36.jpg" width="294" height="28" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt="" /></td>
</tr>
<tr>
<td rowspan="8">
<img id="index_37" src="images/index_37.jpg" width="1" height="134" alt="" /></td>
<td colspan="4" rowspan="3">
<img id="index_38" src="images/index_38.jpg" width="130" height="102" alt="" /></td>
<td colspan="8" rowspan="5">
<img id="index_39" src="images/index_39.jpg" width="134" height="105" alt="" /></td>
<td colspan="2" rowspan="7">
<img id="index_40" src="images/index_40.jpg" width="114" height="125" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>

hasnain721 · #13 Oct 6th, 2006, 19:52

Quote:

</tr>
<tr>
<td colspan="4" rowspan="3">
<img id="index_41" src="images/index_41.jpg" width="132" height="102" alt="" /></td>
<td colspan="2" rowspan="7">
<img id="index_42" src="images/index_42.jpg" width="64" height="132" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td rowspan="10">
<img id="index_43" src="images/index_43.jpg" width="294" height="392" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="92" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="5">
<img id="index_44" src="images/index_44.jpg" width="130" height="32" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img id="index_45" src="images/index_45.jpg" width="132" height="19" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="8" rowspan="2">
<img id="index_46" src="images/index_46.jpg" width="134" height="20" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt="" /></td>
</tr>
<tr>
<td rowspan="6">
<img id="index_47" src="images/index_47.jpg" width="1" height="279" alt="" /></td>
<td rowspan="5">
<img id="index_48" src="images/index_48.jpg" width="128" height="104" alt="" /></td>
<td colspan="2" rowspan="6">
<img id="index_49" src="images/index_49.jpg" width="3" height="279" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td rowspan="5">
<img id="index_50" src="images/index_50.jpg" width="3" height="277" alt="" /></td>
<td colspan="8" rowspan="3">
<img id="index_51" src="images/index_51.jpg" width="133" height="100" alt="" /></td>
<td rowspan="5">
<img id="index_52" src="images/index_52.jpg" width="112" height="277" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td rowspan="4">
<img id="index_53" src="images/index_53.jpg" width="62" height="268" alt="" /></td>
<td colspan="5">
<img id="index_54" src="images/index_54.jpg" width="130" height="84" alt="" /></td>
<td rowspan="4">
<img id="index_55" src="images/index_55.jpg" width="3" height="268" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="84" alt="" /></td>
</tr>
<tr>
<td colspan="5" rowspan="3">
<img id="index_56" src="images/index_56.jpg" width="130" height="184" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td colspan="8" rowspan="2">
<img id="index_57" src="images/index_57.jpg" width="133" height="177" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td>
<img id="index_58" src="images/index_58.jpg" width="128" height="175" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="175" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="62" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="294" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="37" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="128" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="62" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="36" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="81" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="43" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="30" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="27" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="34" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="23" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="7" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="112" height="1" alt="" /></td>
<td></td>
</tr>
</table>

</body>
</html>

and this is what the css file of the text layers says: -

Quote:

#grandcanyon p,
#machupicchusouthamerica p,
#channeltunnelfrance p,
#greatwallofchina p,
#statueoflibertyusa p,
#badshahimasjidpakistan p,
#tajmahalindia p,
#burjalarabdubai p {
font: bold 15px/13px Tahoma;
margin: 0px;
color: #008CD2;
text-align: left;
}

#greatwallofchina,
#machupicchusouthamerica {
visibility: visible;
position: absolute;
left: 394px;
z-index: 2;
width: 202px;
}

#burjalarabdubai,
#badshahimasjidpakistan {
visibility: visible;
position: absolute;
left: 591px;
z-index: 2;
width: 202px;
}

#tajmahalindia,
#grandcanyon {
visibility: visible;
position: absolute;
top: 593px;
z-index: 2;
width: 202px;
}

#machupicchusouthamerica {
top: 722px;
}

#badshahimasjidpakistan {
top: 710px;
}

#imrastravelscom2006 p {
font: 13px/13px Tahoma;
margin: 0px;
color: #7A7D81;
text-align: left;
}

#imrastravelscom2006 {
visibility: visible;
position: absolute;
left: 658px;
top: 792px;
z-index: 2;
width: 236px;
}

#channeltunnelfrance {
visibility: visible;
position: absolute;
left: 774px;
top: 470px;
z-index: 2;
width: 202px;
}

#statueoflibertyusa {
visibility: visible;
position: absolute;
left: 779px;
top: 721px;
z-index: 2;
width: 202px;
}

#greatwallofchina {
top: 591px;
}

#burjalarabdubai {
top: 466px;
}

#tajmahalindia {
left: 588px;
}

#grandcanyon {
left: 779px;
}

#homepage {
margin: 0px auto 0px auto;
width: 1024px;
position: relative;
}

#layer43 {
background: url(homepagemedia/layer43.gif) no-repeat;
visibility: visible;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
width: 1024px;
height: 889px;
}

html, body {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
}

Now, how do i link them up together? I have tried importing the css file in dreamweaver but it aint working so i think that there is a problem with the error. Please correct me if iam wrong.

Thanks.
Hasnain

cperkins · #14 Oct 6th, 2006, 21:31

Hasnain,

Did you use SiteGrinder to output a form? That CSS looks like just plain old text layout to me?

You need to name your layer something-form where -form tells SiteGrinder to make that text layer into a form. And the contents of the text layer need to follow a certain format. (see below)

Then, output the form with SiteGrinder. Then you'll pick out the HTML you need (it'll be obvious: <form>.....</form> ) and paste it into your page. Then find the matching CSS from the CSS

		Webforumz.com > Main Forums > Design Your Website > Graphics and 3D
slicing help plz!