Let’s slice a clean .psd layout in 12 easy steps
Today I will show you how to slice a clean .psd layout in 12 easy steps. This tutorial has many pictures, hence it’s a piece of cake to follow it, even for the beginners!
First of all, we need to download the .psd layout that we are going to slice. (If you want to learn how to create this layout, you can follow the tutorial on sixrevisions.com)
Let’s slice the layout!
- First thing first, create a folder called “layout” somewhere on your computer.
- Open the .psd file with photoshop.
- Use the Rectangular Marquee Tool (M) to select the area shown on the next picture. Use the Copy Merged function (Ctrl + Shift + C) to copy the selected area. Create a new document and paste (Ctrl + V) the copied selection into the new document. Save this inside the layout folder under the name top-bg.png.
- We are going to do the same thing again and again… don’t falter!Use the Rectangular Marquee Tool (M) to select the horizontal bar shown on the next picture. Use the Copy Merged function (Ctrl + Shift + C) to copy the selected area.Create a new document and paste (Ctrl + V) the copied selection into the new document. Save this inside the layout folder under the name middle-hr.png.
- Now hide the text of the sidebar box. And do as before with the top of the sidebar box. (Please be careful and don’t select the whole sidebar box.). Do NOT save it yet.
Before saving this picture, we need to do a few changes. Use the canvas tool (images > canvas size) and use the following settings:
Then, use the Rectangular Marquee Tool (M) to select the bottom part of the picture. Transform the selection (ctrl+T) and drag in order to fill all the canvas:
Save the picture under the name sidebar-box-top.png
- Do the same as for step 3 or 4 with the bottom of the sidebar box. Save it under the name sidebar-box-bottom.png.
- Next one is the footer. Hide the copyright and repeat the same actions as before. Save the picture under the name footer-bg.png.
- We are almost done. Hang in there!Hide everything but the background. Be sure to select all the visible background (but NOT the transparent part) . Use the copy merged function, create a new document and paste the copied selection into the new document. Save this inside the layout folder under the name main-highlight-bg.jpg.(You can save it at around 80% .jpg quality. It’ll still weight less than a .png)
- Next thing to slice is the navigation arrow. So… slice it and save it under the name top-nav-focus.png.
- Now slice the list circle as shown below. Save it under the name list-unordered.png.
- Last… yes, last! Hide everything except the (screenshot-ish) photos. Slice and save them under the name right-pics.png
- If everything is okay, you should have the following pictures in your “layout” folder: top-bg.png, middle-hr.png, sidebar-box-top.png, sidebar-box-bottom.png, footer-bg.png, main-highlight-bg.jpg, top-nav-focus.png, list-unordered.png, right-pics.png.
We could have made a hover-ready state for the navigation menu, and other small changes to make all this a little better but I wanted to keep it as easy as possible.
What now?
Slicing a .psd file is not really fun, is it? But it’s useful! In the next article, I’ll show you how to use the sliced pictures in order to code the layout in XHTML/CSS. And, I’ll teach you many CSS tricks!
I hope you enjoyed this little tutorial. The next one will be even more interesting (but harder to follow)!
Related Posts
You may want to check out the following related posts:
Nate Pihnhert
November 3rd
I think this is an unorthodox method of “slicing” a website layout…. why not use photoshop slice tool?
Like or Dislike:
0 
0
Tsedaka
November 3rd
Well, using the slice tool in Photoshop isn’t always that great.
I’ll just list 3 situations in which the slice tool falls clearly behind the method I used in this article:
- When you need to make a slice of a place of your .psd, save this slice, edit the very same part of the .psd, slice again and save. (for instance in step 5)
- When you need to make slices of different states of your .psd file (for example, in step 11 you need to hide all the other layers)
- When two or more slice ares one on another.
I sometimes use the slice tool for simple layouts, but I often think that marquee tool + new document is faster.
But… that doesn’t mean that I’m right :) (maybe you are! Everyone is different. What is important is to find what works for you)
Like or Dislike:
0 
0
designfollow
November 3rd
thanks for this post
Like or Dislike:
0 
0
Amber Weinberg
November 3rd
Why do you copy and paste into a new document and save instead of just cropping and saving? Would save a lot of time.
Like or Dislike:
0 
0
Jesse
November 3rd
This is old school. Did this before the slice tool came out and still prefer do slice like this. Good post
Like or Dislike:
0 
0
Andrew
November 3rd
I’d also vote for the slice tool. generally what I end up doing is just save one other PSD for slicing, and move everything around in it. It keeps me from having too many files down the road, and keeps all of my images in one place.
My method for getting around the issues described is usually just modifying the shape before using the slice tool. Like step 5, I would have used a shape layer so I could grab the points and make the rectangle taller. That way I don’t have to go back to a different file and copy merged if I need to make any changes.
To each their own though.
Like or Dislike:
0 
0
Nadia
November 3rd
I’m working exactly like you :) Great tutorial !
Like or Dislike:
0 
0
Paul D
November 3rd
Hello Samuel,
Nice tutorial and easy to follow. I have always struggled with slicing tools but found your approach to be relatively pain free. I look forward to the next installment. Keep up the great work. Many thanks and kind regards. Paul D
Like or Dislike:
0 
0
Tsedaka
November 3rd
@Amber Weinberg
Well actually, sometimes I do crop + save… but it’s a bad habit of mine and a big “no no”.
When you have styles and effect applied to your layer (blending, soft bevel & emboss, drop shadow, etc.) and you crop, it sometimes cause changes to the item you crop. Specially for its borders.
I know that it’s faster, but… sometimes wrong ^^ And I wanted to show a good all-around solution for beginners.
Cheers :)
@Jesse
“This is old school. Did this before the slice tool came out and still prefer do slice like this.”
Lol! I’m 27 and already old school…? Well I really started design with Photoshop 7, so I guess I am ^__^
Like or Dislike:
0 
0
Jon
November 4th
After years and years of using Photoshop I finally feel validated! I’ve never used the Photoshop slice tool – and I don’t ever plan to either. Nice tutorial! This is exactly how I’ve done things – albeit I usually slice things up more than once and make a terrible mess of things before it all comes together properly!
Like or Dislike:
0 
0
Tsedaka
November 4th
@Jon
It’s good to know that other people like -and use- this method. ^___^ The first comment scared me a little but now I feel better too!
Like or Dislike:
0 
0
Jarek
November 4th
Erm…
I’ve been doing this way since photoshop 6 ;-) Never used slice tool for my projects. I prefer to do this in old school way.
As an addition i would suggest to use Actions.
I always bind for one of my FX (f1,f2 etc) keys action:
-> copy all
-> new document
-> paste
Wish i could record: “save for web” with file name input window. If its possible, then i don’t know how to do this.
Thanks to this im saving a lot of time with not pressing all this combinations. Just one key and then onlyt save.
Like or Dislike:
0 
0
Jarek
November 4th
EDIT: by copy all i ment “copy merged” to copy all layers within selection area.
Like or Dislike:
0 
0
Tsedaka
November 5th
You can use AutoIt (or other similar software) to automatize the process. With these softs, you can bind complex actions to 1 or 2 keys if needed.
Like or Dislike:
0 
0
Steven Trotter
November 5th
Awesome post! I’m with ya! I’ve been doing it this way for almost a decade. I have tried and tried to use slices, but I need something more dynamic. Old school is almost always the best way. More control. :)
Like or Dislike:
0 
0
Tweeter
November 5th
Who created this tutorial first? I found it here:
http://sixrevisions.com/tutorials/web-development-tutorials/minimal-and-modern-layout-psd-to-xhtmlcss-conversion/#comments
No mention of Woobzine. Who created it first? Somebody’s ripping someone off!
Like or Dislike:
0 
0
Tweeter
November 5th
Sorry! Didn’t see you mentioned Six Revisions up at the top of the post. I feel stupid now.
Like or Dislike:
0 
0
Victor Duwon Jackson
November 5th
Why does the screenshot say “copyright SixRevisions”?
Like or Dislike:
0 
0
Victor Duwon Jackson
November 5th
My apologies, I see the link to the site.
Like or Dislike:
0 
0
Tsedaka
November 6th
Ah! No problem :)
They made the design. I used their design to write a slice tutorial.
I should have made it stand out more. My bad ^^
Like or Dislike:
0 
0
Lucian
November 6th
I used crop + save (+undo to get back to original layout to crop next one) in all of my projects and the quality was very good including drop shadows images. That method is very fast for sure. Sometimes I use slice tool but is not enough flexible for me. I will take a look in marquee + copy merged to see if I can improve my speed.
Like or Dislike:
0 
0
Dan
November 8th
hello,
I slice psds exactly like an author.
I agree that slice tool is not handy at all and cropping mess up with layer effects.
Well done!
Like or Dislike:
0 
0
Roland
November 10th
Hey, nice tutorial. Somebody may say it’s not a good method of selecting and creating new psd documents, pasting and saving…yep – it takes time, but it is much better than photoshop slicer tool. And sometimes it is many times easier to use the old copy/paste ;)
Like or Dislike:
0 
0
Beto G.
December 8th
I use the the same method, more control and I hide the layers including the back-ground layer except for the one I want to save with no back-ground pixels I choose Image>Trim>Transparent Pixels and does all the croping and slicing for me. Then I Revert or undo (Ctrl+Alt+Z)…I thought I was the only one using the “old school way” =0).
Like or Dislike:
0 
0