slice photoshop template for website

Assalam alaikum

i have a template in photoshop i want to use this template for my website problem is that how i can cut or slice template in the form of images. if your answer is adobe photoshop , firework or image ready then please describe in detail how i can cut template.

Thanks in advance

faisyshah

Light Poster

27 posts since Dec 2004

Reputation Points: 10

Solved Threads: 0

6 Years Ago

You can use photoshop, imageready or fireworks to slice images. depending on the version of photoshop that you have, there is a slice icon in the main toolbar and there is two option one for slicing and the other for editing a slice.

You simply draw boxes around the sections of the images to create your slices. It will probably take some practice to get the slices the way you want them but you can also use the edit slice tool to clean them up. once you get the image sliced the way you want it, choose export for the web (assuming you are using a recent version of photoshop) you will need to cutomize the output options to make sure you are exporting the slices the way you want and then just add them to an html page.

The best advice I can give you is to locate the slice tool and play with it. the best way I have found to learn new features in software is to explore and play. Let us know how you make out.

bkendall

Junior Poster in Training

69 posts since Jul 2005

Reputation Points: 10

Solved Threads: 0

6 Years Ago

very very thanks

i have completed my task

thanks again bkendall

faisyshah

Light Poster

27 posts since Dec 2004

Reputation Points: 10

Solved Threads: 0

3 Years Ago

thank you for help aswell. now i have just little problem : when i export and save it and then load it in Adobe Dreamweaver latest version and want to insert link into an image button that i sliced it doesnt show any errors in dream* but when i upload to website ftp and try to use the button "click " around the sliced image that ive done link POP'S out a blue line around the image . How can i prevent that from happening !?

and help would be much apricated :)

alfator

Newbie Poster

3 posts since Oct 2008

Reputation Points: 10

Solved Threads: 0

3 Years Ago

thank you for help aswell. now i have just little problem : when i export and save it and then load it in Adobe Dreamweaver latest version and want to insert link into an image button that i sliced it doesnt show any errors in dream* but when i upload to website ftp and try to use the button "click " around the sliced image that ive done link POP'S out a blue line around the image . How can i prevent that from happening !?

and help would be much apricated :)

Please post the code of the relevant section.

peter_budo

Code tags enforcer

Moderator

15,436 posts since Dec 2004

Reputation Points: 2,806

Solved Threads: 902

3 Years Ago

Right don't worry about slicing Ive figured that part out already :)

now i have another question :

here is what turned out from what ive sliced up from photoshop and uploaded to my ftp

Im looking for some tutorials how to make this page flash ( flash website )

www.alfator.com/index3.html

the links like About / Gallery / Community/ Vip / and Conact will be looking to be done in the same whay as ive done Home page .

Im new to flash ( dummy ) :(

Huge thank you in advance

Also here is a code of Below website link ive posted:

<html> 
<head> 
<title>Alfator Remake</title> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<style type="text/css"> 
<!--
body {
	background-image: url(../../333.jpg);
}
--> 
</style></head> 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
<center> 
  <!-- ImageReady Slices (layout2.psd) --> 
  <table id="Table_01" width="1200" height="828" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
      <td rowspan="7"> 
        <img src="images/layout2_01.jpg" width="111" height="828" alt=""></td> 
	    <td colspan="7"> 
		    <img src="images/layout2_02.jpg" width="937" height="118" alt=""></td> 
	    <td rowspan="7"> 
		    <img src="images/layout2_03.jpg" width="152" height="828" alt=""></td> 
	  </tr> 
    <tr> 
      <td rowspan="2"> 
        <a href="http://alfator.com"> 
          <img src="images/layout2_04.jpg" width="370" height="98" border="0" alt=""></a></td> 
	    <td> 
		    <a href="http://alfator.com/about.html"> 
		      <img src="images/layout2_05.jpg" width="95" height="43" border="0" alt=""></a></td> 
	    <td> 
		    <img src="images/layout2_06.jpg" width="1" height="43" alt=""></td> 
	    <td> 
		    <a href="http://www.alfator.com/vip/gallery/main.php"> 
		      <img src="images/layout2_07.jpg" width="97" height="43" border="0" alt=""></a></td> 
	    <td> 
		    <a href="http://alfator.com/forums/index.php"> 
		      <img src="images/layout2_08.jpg" width="143" height="43" border="0" alt=""></a></td> 
	    <td> 
		    <a href="http://alfator.com/forums/forumdisplay.php?f=14"> 
		      <img src="images/layout2_09.jpg" width="140" height="43" border="0" alt=""></a></td> 
	    <td> 
		    <img src="images/layout2_10.jpg" width="91" height="43" alt=""></td> 
	  </tr> 
    <tr> 
      <td colspan="6"> 
        <img src="images/layout2_11.jpg" width="567" height="55" alt=""></td> 
	  </tr> 
    <tr> 
      <td colspan="7"> 
        <img src="images/layout2_12.jpg" width="937" height="271" alt=""></td> 
	  </tr> 
    <tr> 
      <td colspan="7"> 
        <img src="images/layout2_13.jpg" width="937" height="271" alt=""></td> 
	  </tr> 
    <tr> 
      <td colspan="7"> 
        <img src="images/layout2_14.jpg" width="937" height="31" alt=""></td> 
	  </tr> 
    <tr> 
      <td colspan="7"> 
        <img src="images/layout2_15.jpg" width="937" height="39" alt=""></td> 
	  </tr> 
  </table> 
  <!-- End ImageReady Slices --> 
</center> 
</body> 
</html><!-- text below generated by server. PLEASE REMOVE --><!-- Counter/Statistics data collection code --><script language="JavaScript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/smb/js/hosting/cp/js_source/whv2_001.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1225493994" alt="setstats" border="0" width="1" height="1"></noscript>

alfator

Newbie Poster

3 posts since Oct 2008

Reputation Points: 10

Solved Threads: 0

3 Years Ago

Flash tutorial basics from w3schools.com , Adobe official tutorials on Flash or perhaps their Designer community .
I would suggest to start with w3schools basic tutorials to get to know the Flash environment and then search for topics of your interest. Over there years Flash accumulated huge numbers of website specifically targeting Flash

peter_budo

Code tags enforcer

Moderator

15,436 posts since Dec 2004

Reputation Points: 2,806

Solved Threads: 902

3 Years Ago

thank you so much!

alfator

Newbie Poster

3 posts since Oct 2008

Reputation Points: 10

Solved Threads: 0

3 Years Ago

I would use CSS to eliminate the blue line around the images. The code is short and sweet

img
{  border-style: none;
}

Reliable

Junior Poster

152 posts since Jul 2007

Reputation Points: 11

Solved Threads: 3

2 Years Ago

Right don't worry about slicing Ive figured that part out already :)

now i have another question :

here is what turned out from what ive sliced up from photoshop and uploaded to my ftp

Im looking for some tutorials how to make this page flash ( flash website )

www.alfator.com/index3.html

the links like About / Gallery / Community/ Vip / and Conact will be looking to be done in the same whay as ive done Home page .

Im new to flash ( dummy ) :(

Huge thank you in advance

Also here is a code of Below website link ive posted:

<html> 
<head> 
<title>Alfator Remake</title> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<style type="text/css"> 
<!--
body {
	background-image: url(../../333.jpg);
}
--> 
</style></head> 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
<center> 
  <!-- ImageReady Slices (layout2.psd) --> 
  <table id="Table_01" width="1200" height="828" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
      <td rowspan="7"> 
        <img src="images/layout2_01.jpg" width="111" height="828" alt=""></td> 
	    <td colspan="7"> 
		    <img src="images/layout2_02.jpg" width="937" height="118" alt=""></td> 
	    <td rowspan="7"> 
		    <img src="images/layout2_03.jpg" width="152" height="828" alt=""></td> 
	  </tr> 
    <tr> 
      <td rowspan="2"> 
        <a href="http://alfator.com"> 
          <img src="images/layout2_04.jpg" width="370" height="98" border="0" alt=""></a></td> 
	    <td> 
		    <a href="http://alfator.com/about.html"> 
		      <img src="images/layout2_05.jpg" width="95" height="43" border="0" alt=""></a></td> 
	    <td> 
		    <img src="images/layout2_06.jpg" width="1" height="43" alt=""></td> 
	    <td> 
		    <a href="http://www.alfator.com/vip/gallery/main.php"> 
		      <img src="images/layout2_07.jpg" width="97" height="43" border="0" alt=""></a></td> 
	    <td> 
		    <a href="http://alfator.com/forums/index.php"> 
		      <img src="images/layout2_08.jpg" width="143" height="43" border="0" alt=""></a></td> 
	    <td> 
		    <a href="http://alfator.com/forums/forum14.html"> 
		      <img src="images/layout2_09.jpg" width="140" height="43" border="0" alt=""></a></td> 
	    <td> 
		    <img src="images/layout2_10.jpg" width="91" height="43" alt=""></td> 
	  </tr> 
    <tr> 
      <td colspan="6"> 
        <img src="images/layout2_11.jpg" width="567" height="55" alt=""></td> 
	  </tr> 
    <tr> 
      <td colspan="7"> 
        <img src="images/layout2_12.jpg" width="937" height="271" alt=""></td> 
	  </tr> 
    <tr> 
      <td colspan="7"> 
        <img src="images/layout2_13.jpg" width="937" height="271" alt=""></td> 
	  </tr> 
    <tr> 
      <td colspan="7"> 
        <img src="images/layout2_14.jpg" width="937" height="31" alt=""></td> 
	  </tr> 
    <tr> 
      <td colspan="7"> 
        <img src="images/layout2_15.jpg" width="937" height="39" alt=""></td> 
	  </tr> 
  </table> 
  <!-- End ImageReady Slices --> 
</center> 
</body> 
</html><!-- text below generated by server. PLEASE REMOVE --><!-- Counter/Statistics data collection code --><script language="JavaScript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/smb/js/hosting/cp/js_source/whv2_001.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1225493994" alt="setstats" border="0" width="1" height="1"></noscript>

Wow, that is the "Worst" coding i have seen in a long long time. Wheres your Semantics what are you actually doing making a website completely out of tables? Buddy before you learn to slice you need to learn to code.

Also you have 1 img in the CSS then everything else as far as i can see is tables....

Learn coding first and validate your (X)HTML and CSS and try using more CSS and less HTML. Try using more tags in your HTML and controling your tags in CSS firstly. Forget slicing my friend your no where near ready to code templates together even a simple template.

Whats this rubbish?
All this can be done in CSS and only people who no nothing about coding us the its been "Depricated" which means is no longer semantic and is out with the romans.

Sorry to be harsh but images are your last thing... Learning coding first would make much more sense!!

Take the quiz on both HTML and CSS and see how you do here ok. http://www.w3schools.com then like i said take both quiz then ask yourself are you ready to slice....I think not!!

Also wheres your DOCTYPE ? that goes above if you don't have this it puts the broswers into quirks mode then anything can happen to your website. Looks ok in 1 Browser but look completely wrong in another.

Wrams

Newbie Poster

22 posts since Nov 2008

Reputation Points: 28

Solved Threads: 1

This article has been dead for over three months

You