This tutorial can teach you how to properly slice a PSD file for coding a layout. If you already know this part you can skip this book and move to How to Code a WordPress Theme.

This is a large posts with lots of images. It may take some time to load. You can download the same ebook at the bottom of this post


Step 1:

Duplicate the original PSD file and keep it as a back up. You don’t want to mess up with the file original file right? Now open the file.

Step 2:

Merge all the layers by pressing Ctrl+Shift+E

Step 3:

Now we have a one single image, make selections and save them based on the layout. This is because in some layout we can get all the images in slices because the slices may overlap.

Step 4:

In this theme we are selecting out logo and saving it separately before we start up slicing the layout.

Using the Rectangular Marquee select the logo area. After the selection is loaded copy the merged area.

Step 5:

Create a new file by pressing Ctrl+N. The dimensions of this file are already entered as per our copied area.

Step 6:

Once the new file is created, in the new file go to Edit>Paste or press Ctrl+V

Step 7:

Press Ctrl+Shift+S to pop up Save As menu to save the logo. I saved it in a .jpg format.

Step 8:

In this step we need to slice the image as per our requirements, like I have done below. Slicing is done using the slice tool found on the left side tool bar. All we need to do is create boxes around the things that we need. Before slicing make sure you the all those text layers that we don’t need.

The above image represents the slices I have made on my layout. Let me explain you what I did here

In the above image only the parts which have a red border are needed. The rest are not required. Each box is marked with an alphabet.

a. The top rounded corners of the wrapper box. We need this for the rounded corners on top

b. This is the website header with the green background and the burger picture.

c. This would be the background image of each post title

d. It might be harder to see this one as this is not marked with red border. This is actually the white part which when repeated on y-axis will create the white box for us.

e. This is the background image for the sidebar header.

f. Background image for comments.

g. Background image for subscription/RSS.

h. The bottom rounded corners of the wrapper box.

i. And on the extreme left we will take a piece of image for our blue background.

Step 9:

Once we are done with the slicing, its time now to create a mockup HTML file with sliced images. To do this click on “Jump to Imageready” button on the toolbar.

You will see Adobe ImageReady application open up with our document.

Step 10:

Now we need to save the file in HTML format along with our images. Click on File > Save Optimized As

Choose the folder that you may want to save you files in. Then type the filename in the field.

Now this is what you get in the output folder where you have saved all your files in.

Step 9: (Alternative way)

Using the rectangular marquee tool, select each of the slice that we need (i.e. a, b, c, d, e, f, g, h and i) and copy it merged like we did for the logo and create a new file.

Then save the file using File>Save or Web or pressing Ctrl+Alt+Shift+S, one after another. Save each image as gif format as this is the most common image format for web layouts. Repeat it for all the images.

In this layout we required 9 images + 1 logo that we saved separately. This is just to give you a basic idea. Based on the complexity, the design may require any number of sliced images like 5 or 10 or 15, 20, 30 etc.

Don’t save the PSD as we don’t require it to be saved.

You can download the same tutorial in an ebook here

Related posts:

1. CSS Quick Tip: Using Faux Column
2. Over 10+ Keyboard Shortcuts for Windows XP (Some You Probably Might Not Know)
3. How to make complexion fair in Adobe Photoshop – Tutorial
4. How to create Rounded Corners using CSS
5. How to increase your computers performance by simple RAM Tweak