In this tutorial I am going to show on how to slice .psd web-layout, slice means to chop the whole image into little parts to be used for web sites, slicing is the easy part but coding is the hardest.

Items you need:

• Adobe Photoshop
• A layout you wish to slice

So start up Adobe Photoshop, load up the template file you wish to slice, and choose the slicing tool:

Now after you have loaded the template/layout you wish to slice, here’s an tip, always start from top and continue your way down.

Also for accuracy I recommend you use rules to activate rules View>Rules or CTRL+R, now to position rules click on the ruler on the top and drag it down position it on the top of the object, on the bottom, and on the sides. Now to make the slice click the slice tool and inside positioned rulers click and hold down until the slice covers the area which would be the banner as show below:

Do the same thing to the parts of the layout such as Navigation,headers,footers, you can leave out the content areas, because those are done using colors in CSS (Cascading Style Sheets).

Now when you’re done you should get the following result or at least a similar one depends on the layout you’re slicing:


After you’re done with this, you do not have slice the whole page you have to slice the main things the Banner, Navigation bar, the header, and the footer however you can slice the boxes if they are custom color not standard web colors or a mix of colors. Now double click the slices such as banner and rename it from anything that Photoshop named it to Banner or to its corresponding name such for navigation the name will be navigation this to be organized later on when we’re coding it up:


Now when you’re done save it optimized for this will be done this way File>Save for web>Save> save to any folder that you wish. This is it for this tutorial the next coming up tutorial featuring this will show how to code it so you can display it on the web, I hope this tutorial helped anyone who wanted to know how to prepare their layouts for web.

Thank you for reading, the Coding tutorial will be up as soon as possible.