Working with slices in Photoshop can sometimes be a pain. In this tutorial I’ll show you how to use the slice tool and show you some easy methods of slicing up your designs.

Download the example photoshop file we will be working with: Slices.psd.zip

Using the slice tool

First lets talk about the slice tool. The keyboard shortcut for this tool is ‘K’. Select the slice tool and draw a selection around the type in the middle of the header. When you draw a selection with the slice tool photoshop automatically creates slices around the slice that you draw.

You can select individual slices by using the slice select tool. Click and hold on the slice tool in the tools palette and a pop up menu should appear.

Right clicking on slices with the slice select tool gives you several options:

Slice options include renaming, linking and adding alt text. This is used when converting slices to a table based layout. Wich I dont recomend for a nything but e-newsletters.

Aother handy feature is the divide slice option. No more worrying about getting everything evenly spaced of lined up!

Now that we have learned about some of the options and how to use the slice tool I’m going to show you a super quick and easy way to create slices.

Creating Slices from Guides

Guides in Photoshop can be easily created by clicking in the ruler space to the top and left of the document and dragging a guide onto the document. If you don’t see the rulers go to view>rulers or Apple+R.

Drag your guides to the appropriate places. In this design we are going to slice the design into 6 pieces – so we drag guides to separate the text on the bottom and to separate the red area from the black area.

Next click on the slices tool in the tools pallet.

With the slide tool selected click on slices from guides.

Photoshop crates 6 slices based on the location of your guides. When saving the guides photoshop will number them accordingly with the number and file name.

Go to file>Save for web and save the document as a .gif file. (Not a jpeg like pictured… oops!)

Photoshop saves the images with their corresponding number into a folder in the directly you specified.

Saving Single or Multiple Slices

To save a single slice, or a few selected slices click the select slice tool and click on a slice. The border around the slice should turn from blue to gold. To select multiple slices hold down shift while clicking the other slices.

To save multiple slices go to file>save for web. Select .gif. In the bottom Saved Optimized as box is a dropdown menu that says Slices. Select the selected slices option. This saves out the slices that you selected. If you choose all user slices Photoshop will save only the slices that you drew with the slice tool.

What do you think?

Leave a comment and let us know if you have any questions or if you have any subjects you would like to see covered in this Photoshop 101 series!

Tutorial written by Niki Brown – author of The Design O’Blog and Daily Design Bits. Follow Niki (@nikibrown) on twitter!

  • tom

    is it possible to save just an individual slice, or one or two, as opposed to them all?

  • http://nwds-ak.com Alaska Web Design

    Why do you save the images as gif and not jpg? Does it make a difference?

  • http://www.littleboxofideas.com Sneh Roy

    Very handy! Thanks Niki for this cool tut! :-)

  • Matt

    Not so much “Working With Slices” as “A Couple of Ways to Create Slices.” Good, but expected quite a bit more.

  • http://twitter.com/toucouleur Toucouleur

    The only problem with this method is for all Gif animated design. When you use slide tools, It’s from what I know nearly impossible to save quickly your differents slices in PNG for exemple, and for the part which is animated, to save it in GIF.

  • Sakana

    Yeah, agree with the first comment. This is more like “An Introduction to Slicing”.

  • http://www.seo.blog.br Ronaldo Bitencourt

    Great article,

    Is there any way to export the slies a PSD file to another?

  • Pingback: Photoshop 101 – Working with Slices | Design Reviver « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

  • http://twitter.com/Frozzzt Raphael

    @tom Yes, when u save for web, u can seleced (ctrl+click) each slice and selected images only at window of save file.

    This is a very, very basic about slices. I really wanna see the best ways to go from Photoshop slices to tabless div+css.

  • http://twitter.com/Frozzzt Raphael

    “Why do you save the images as gif and not jpg? Does it make a difference?”

    Hummm… there’s a huge difference betwen JPG and GIF. (Besides PNG).

    Each for a purpose.

  • http://nikibrown.com/designoblog Niki Brown

    Thanks for the comments guys!

    @tom I have added some info about saving single or multiple selected slices.

    Would you like to see a basic PSD to Slices to HTML design tutorial?

  • http://aboutenjay.com Jerico Veloso

    @Alaska Web Design: Yes. GIF is limited to 256 distinct colors and very good images with text like the example in this tutorial. JPG on the other hand is best for photos.

    @Toucouleur: You can export PNG or Animated GIF easily using this method.

  • Pingback: +130 Archivos PSD para descargar gratis | pixelco.us blog

  • dave

    thats weird. my slice tool shortcut is the letter ‘C’

  • http://www.pixmac.com Vitezslav Valka

    Nice. But Pixelmator looks like it solves the issue in nice, faster and cheaper way. Have you guys heard of it?

  • Pingback: Converting a Photoshop PSD File to an XHTML & CSS Web Site - Creating Mockups | Resources for Web Development Students @ Robin's Blog

  • http://www.webfouryou.co.za Nathan

    Hi

    This is very cool tutorial.

    Can anyone please tell what they think about this site?

    website:http://www.webfouryou.co.za

    Thanks,

    Nathan

  • Pingback: Slice your layout and export images using Photoshop | whatever

  • Pingback: Photoshop Slices « What I learned today

  • sarvesh varma

    hi,
    is it possible to save just an individual slice, , as opposed to them all? and“Why do you save the images as gif and not jpg?

    thanks!

  • Fred

    Are you using an ancient version of Photoshop? The “save for web” option is now “save for web or devices” and looks nothing like the screen capture you use above.

  • Fred

    So the answer is not in the “Save for Web and Devices” dialogue box, but the box that appears AFTER you click “Save” from this box (the “Save Optimized As” dialogue box). At the bottom of this new pop-up dialogue box, there is a drop-down marked “slices” where you can select “Selected Slices” for output.

  • http://www.psd-dude.com PSDDude

    Interesting Tutorial ! Useful

  • Pingback: Cogito Ergo Sum » Blog Archive » Slice your layout and export images using Photoshop

  • Shane

    Thanks for the Post! It was very clear, informative and to the point! Much appreciated!

    Best-
    Shane.

  • http://www.pen-and-sword.co.uk Rob

    Simple, quick, easy to use Tutorial.
    Especially grateful for the pointer for converting guides to slices!

    Many thanks!

  • http://www.theaustinvillager.com Thomas

    I want to say thanks for the quick tutorial. I’m very green but study hard. This tutorial really helped the lights come on!

  • http://www.Ravi.co.in Ravi

    Hi,

    Many thanks for posting this tutorial!

    You won’t believe, I was trying to select and copy parts using the Marquee tool… lol! Your tute set me straight!! :)

    ~Ravi

  • http://barefoot-webdesign.com Spencer Barfuss

    Hey Henry, how do you get rid of that last auto slice that Photoshop keeps when you delete slices? I can’t seem to get rid of it…

  • Pingback: Tehnik, Tutorial, dan Alat yang Berguna dari Adobe Photoshop « FOLUSKA

  • Pingback: ???Adobe??Photoshop??????? | Jackchen Design 1984

  • Pingback: Useful Adobe Photoshop Techniques, Tutorials and Tools | LionWebMedia.com

  • Pingback: ??(Into the wild) » Blog Archive » Useful Adobe Photoshop Techniques, Tutorials and Tools

  • http://www.vareen.co.cc Neerav

    Hi Niki,

    Thanks for these simple yet insightful tutorial about Photoshop slices.

    Regards,
    Neerav

  • Pingback: Coding for Everyone – Emre

  • http://adobephotoshopsecrets.blogspot.com/ Bojan Živkovi?

    In newer versions of Photoshop Slice tools are grouped with Crop Tool and keyboard shortcut is C.

  • http://www.ryanscottlee.com Ryan

    Nice tut! I did not know about the guides-to-slices trick. I think that will definitely come in handy!

  • Marie-Cris Betis

    Thank you for this quick tutorial. At least now I know the basic use of slices and guides. :)