slice photoshop template for website

Question

faisyshah 0 Light Poster

21 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

adobe graphics:image web-design

6 Contributors
9 Replies
215 Views
3 Years Discussion Span
Latest Post 17 Years Ago Latest Post by Wrams

Dani AI

Generated 7 Months Ago

Quick recap and a practical path forward: as noted, early workflows sliced whole PSDs into lots of image files. That works, but it’s fragile and outdated. The cleaner, more maintainable approach is to export only the actual image assets (logos, photos, complex decorations) and build the page layout with semantic HTML and CSS (Grid/Flexbox). That also answers and ’ criticism: avoid table-based layout, use a valid DOCTYPE, and separate structure (HTML) from presentation (CSS).

A simple, safe workflow:

Audit the PSD: recreate text, gradients, and simple shapes in HTML/CSS where possible; export only true images. Use SVG for logos/icons, optimized raster (WebP/PNG/JPEG) for photos.
Export named assets from your design tool, then create a semantic skeleton (header/nav/main/footer) and style with Grid/Flexbox instead of tables.
Validate and test in browsers; use developer tools to inspect spacing and responsive behavior.

Example skeleton (replace the old table layout):

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Site</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header><img src="assets/logo.svg" alt="Site logo"><nav>…</nav></header>
  <main>…</main>
  <footer>…</footer>
</body>
</html>

Replace the table with a simple grid:

.wrapper { display: grid; grid-template-columns: 110px 1fr 150px; gap: 0; }
a:focus { outline: 3px solid #0a84ff; outline-offset: 2px; } /* keep a visible focus style */

About the blue line around linked images (): that’s the browser’s focus indicator (important for keyboard users). Don’t simply hide it — either remove image borders and provide a deliberate focus style for links, or keep the default. For performance, combine small UI images into sprites or use inline SVGs and serve responsive images with srcset.

If you’re new, follow ’s advice: learn modern HTML/CSS first, validate your pages, and avoid Flash—focus on semantic markup and responsive layout.

All 9 Replies

peter_budo 2,532 Code tags enforcer

17 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

17 Years Ago

Flash tutorial basics from w3schools.com, Adobe official tutorials on 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

17 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 )

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=""> 
		      <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="" 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

17 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 )

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=""> 
		      <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="" 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

Dani AI

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers