How to Slice a PSD

Written By Mohd Ameenuddin Atif

http://www.mygeekpal.com

Copyright 2009 by mygeekpal.com. All Rights Reserved.

TABLE OF CONTENTS

Introduction..

Slicing a PSD..

Introduction
This book has been written by Mohd Ameenuddin Atif, write
of web development blog called MyGeekPal. Mohd
Ameenuddin Atif has over 3 years of experience in
freelancing. The tips shared in this book are intellectual
property of Mohd Ameenuddin Atif and copyrighted by
MyGeekPal.
This ebook depicts a tutorial on how to slice a PSD web
layout for creating a web page. The tutorial in this book is at
modal level, so any questions regarding the information in
this can be asked directly to Mohd Ameenuddin Atif on email
atif089@mygeekpal.com
This tutorial has been written based on the following
software
Microsoft Windows XP
Adobe Photoshop CS2
Adobe ImageReady CS2

Slicing a PSD
This ebook 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
Step 1:
Duplicate the original PSD file and keep it as a back up. You
dont 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 a
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 dont 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:

(skip this and read an alternative way)

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.

Alternative Way

Step 9:

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.
Dont save the PSD as we dont require it to be saved.

*** THE END ***