A comprehensive tutorial explaining step by step of how to effectively slice a PSD to be used in PSD to xHTML conversion.

This tutorial is a detailed step by step guide to slice a PSD into images that can be used to build the xHTML web page.

The PSD file that I have chosen is downloaded from a free web templates web site and is shown below.

Click here to download the PSD file.

Before you continue you must have Adobe PhotoShop installed on your system. I have used Adobe PhotoShop CS4, so if you have the CS4 version, it is more than good. Lets start by opening the PSD file in PhotoShop. Once opened, it will look like:

PhotoShop have a “Slice” tool, specially designed to slice images. You can select the “Slice” tool by right clicking the tools box on the left, starting from top to the tool number 5. This is shown below:

With the “Slice” tool selected, we can now move to slice the PSD.  But first, uncheck the “Snap” option in the “View” menu at the top as shown:

If the “Snap” option is checked, any selection you make using Slice tool, the PhotoShop will try to bind the selection to the boundary of the object layer and we do not want this.

Now starting from the logo on the top right. Drag mouse around the logo and make a selection as shown:

Next, to get the background image for the menu under the logo, we need to slice the background red gradient image. As you can see, the menu text is on the top of the background gradient. We need to hide this text otherwise once we save the images, it will get merged with the gradient. This is to ensure that the menu is a text based not using images for the text. So click on the text “Home Page” on the first menu item. It will select the layer containing this text. Open the layers tab on the right by clicking on it and scroll through the layers’ list until you get a layer highlighted in blue color. This is the layer of the selected text. You can see an “Eye” icon left to the layer “Home Page”, click on this icon to hide the layer and you get the result like:

For high precision, you can zoom the view. Click the “Zoom” icon at the bottom of the tools to zoom it to 200% as shown:

Now you can either use the scroll bars or you can use the “Hand” (the hand icon in the left tool bars) tool to bring the desired portion of the image to the screen.  The menu portion, zoomed to 200%, and brought to the main screen:

We now slice the menu background in a similar way as for the logo. This is shown below:

You can see two images under each of the headings “Welcome to our company!” and “Our services”. We slice them too:

Next to the above images, on the right, the three dots arranged in a triangle, is an image and need to be sliced similarly as shown:

The last images that needs to be sliced is the footer gradient image. We just need a vertical bar image, extended to full height of the footer background image and having a width of round about 5 to 10px. The reason that we are only taking a strip out of the whole image is that in xHTML, we can use this image as a background and can make it to repeat horizontally. This will give the same result with reduced image size. The sliced strip is shown:

Once, we have set up all the slices, it is now time to save these slices as individual images so they can be used to make the equivalent xHTML web page. In Adobe PhotoShop CS4, there is an option “Save for Web & Devices…” under the “File” menu. This is shown as:

Click on the “Save for Web & Devices…” and it will bring a window as depicted below:

Here too, you can use the “Hand” tool to grab the image area you want to focus on main screen as shown:

Using the “Hand” tool, the logo section is made visible which otherwise is hidden to the right.

Now select the “Slice Select” tool under the hand tool as shown below:

With the “Slice Select” tool selected, click on the logo image “BUSINESS COMPANY”. A border appears around the image as soon as you click. This means the the current slice is now selected and you can change the options given at the right of the window.

While, other options are used seldom, the image type option needs customization. As you can see in the image below, there are image type options in the drop down list as GIF, JPEG, PNG-8, PNG-24 and WBMP. the common formats are JPEG and PNG-8. The choice of using any of the formats given depends on the color depth and the image size of the sliced image. Try to select different image formats given and at the same time check the image quality and its size (image size is given at the bottom left of the window). After hit and trial between the options JPEG, PNG-8 and PNG-24, I selected JPEG, since it produced the most reduced slice image size and good image quality as well.

As you can see the, the image size is 1.042K when JPEG is selected and is higher for all other options. You can see the image size at the bottom left corner of the window:

Now do the same for the the menu background image, the two images under the headings “Welcome to our company!” and “Our services” and the three dots triangle image.

The last image is that of the footer gradient image as shown below:

Use PNG-24 option as it gives the best result.

Now click the “Save” button at the bottom right left to the “Cancel” button. This is show below:

A “Save File” dialogue will appear. Make sure you select the “XHTML” option for the “Settings” and “All User Slices” for the “Slices” options. Provide “File name” of whatever you like or the name of your web site. I have put “mywebsite” so images will be stored as “mywebsite_1” and “mywebsite_2” etc.

Click the “Save” button after providing the directory where you want to store the images. The resulting images are shown below:

One last image remains, the image with the big red gradient and the pictures of two women and two men. There are several ways to slice these images, one way is to save the two men and two women image as a transparent background image and the red gradient image as another separate image. I have followed the other way. First remove all the other images, i.e. the logo image and the menu images/text from screen. You can removed these images either by selecting each image and hiding it through the layers panel as discussed earlier or you can simple select an image and press “Delete” on your keyboard. Please make sure that the arrow shaped icon is selected before you click on an image. This icon is the first in the tool bar at left. In case, you accidently delete the background gradient image press “CTRL + ALT + Z” on your keyboard to undo the action. The final product is shown below:

To get the image, we use the “Crop” tool. You can select the “Crop” tool from the same location as you did for the “Slice” tool. Right click the place from where you selected the “Slice” tool and select the “Crop” tool as shown:

With the “Crop” tool selected, mark a rectangle around the image starting from the top and extending downwards, till the gradient image ends as shown:

The other areas of the image will fadeout. Click the “Check” sign on the top right to crop the image:

The result is shown:

Now save this image using the same procedure, click “Save for Web & Devices…” in the “File” menu and choose the appropriate file format as done for the slices and click save.

The above image can be used as a background image while the logo and the menu can be put in an absolutely positioned DIV.

I next tutorial, I will create the xHTML web page out of those images. So keep visiting for the next tutorial. If you have any comments/suggestions/questions, please write them in the comment box.