slice photoshop template for website

Question

faisyshah 0 Light Poster

18 Years Ago

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

multimedia web-design

6 Contributors
9 Replies
192 Views
3 Years Discussion Span
Latest Post 14 Years Ago Latest Post by Wrams

All 9 Replies

peter_budo 2,532 Code tags enforcer

15 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 2,532 Code tags enforcer

15 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

Reliable 1 Junior Poster

15 Years Ago

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

img
{  border-style: none;
}

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

bkendall 0 Junior Poster in Training · Answer 1 · 2005-09-08T22:01:03+00:00

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.

faisyshah 0 Light Poster · Answer 2 · 2005-09-09T12:35:00+00:00

very very thanks

i have completed my task

thanks again bkendall

alfator 0 Newbie Poster · Answer 3 · 2008-10-31T05:17:31+00:00

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 0 Newbie Poster · Answer 4 · 2008-11-01T04:59:49+00:00

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 0 Newbie Poster · Answer 5 · 2008-11-01T18:04:46+00:00

alfator 0 Newbie Poster

15 Years Ago

thank you so much!

Wrams 18 Newbie Poster · Answer 6 · 2009-06-29T19:22:36+00:00

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 <div> tags in your HTML and controling your <div> tags in CSS firstly. Forget slicing my friend your no where near ready to code templates together even a simple template.

Whats this rubbish?

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

All this can be done in CSS and only people who no nothing about coding us the <body bgcolor="#fff"> 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 <html> 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.

slice photoshop template for website

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers