In Tutorials Sep 9, 200937

Photoshop 101 – Working with Slices

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!

37 Comments

  • tom
    Sep 9, 2009
    is it possible to save just an individual slice, or one or two, as opposed to them all?
  • Alaska Web Design
    Sep 9, 2009
    Why do you save the images as gif and not jpg? Does it make a difference?
  • Sneh Roy
    Sep 9, 2009
    Very handy! Thanks Niki for this cool tut! :-)
  • Matt
    Sep 9, 2009
    Not so much “Working With Slices” as “A Couple of Ways to Create Slices.” Good, but expected quite a bit more.
  • Toucouleur
    Sep 9, 2009
    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
    Sep 10, 2009
    Yeah, agree with the first comment. This is more like “An Introduction to Slicing”.
  • Ronaldo Bitencourt
    Sep 10, 2009
    Great article,

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

  • Photoshop 101 – Working with Slices | Design Reviver « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit
    Sep 10, 2009
    [...] Photoshop 101 – Working with Slices | Design Reviverdesignreviver.com [...]
  • Raphael
    Sep 10, 2009
    @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.

  • Raphael
    Sep 10, 2009
    “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.

  • Niki Brown
    Sep 10, 2009
    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?

  • Jerico Veloso
    Sep 10, 2009
    @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.

  • +130 Archivos PSD para descargar gratis | pixelco.us blog
    Sep 11, 2009
    [...] Sitio: designreviver.com/tutorials/photoshop-101-working-with-slices [...]
  • dave
    Sep 11, 2009
    thats weird. my slice tool shortcut is the letter ‘C’
  • Vitezslav Valka
    Sep 15, 2009
    Nice. But Pixelmator looks like it solves the issue in nice, faster and cheaper way. Have you guys heard of it?
  • Converting a Photoshop PSD File to an XHTML & CSS Web Site - Creating Mockups | Resources for Web Development Students @ Robin's Blog
    Sep 16, 2009
    [...] Edit 9/16/09 – Photoshop 101 – Working with Slices [...]
  • Nathan
    Sep 30, 2009
    Hi

    This is very cool tutorial.

    Can anyone please tell what they think about this site?

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

    Thanks,

    Nathan

  • Slice your layout and export images using Photoshop | whatever
    Oct 13, 2009
    [...] I don’t work often with photoshop in terms of webdesign, but as Snow Leopard has cracked something in Fireworks, i might have to stick to photoshop. Of course there is an easier way to get images out of photoshop (hide unwanted layers and crop to guides), but what if i want to move back and change the layer exported. This is why i found at least quick tutorial to remind of how to use slicing in photoshop. [...]
  • Photoshop Slices « What I learned today
    Jan 10, 2010
    [...] designreviver.coms [...]
  • sarvesh varma
    Feb 4, 2010
    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
    Feb 12, 2010
    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
    Feb 12, 2010
    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.
  • PSDDude
    Apr 7, 2010
    Interesting Tutorial ! Useful
  • Cogito Ergo Sum » Blog Archive » Slice your layout and export images using Photoshop
    Apr 12, 2010
    [...] I don’t work often with Photoshop in terms of web design, but as Snow Leopard has cracked something in Fireworks and also for my great pity seems like Adobe bought Macromedia to let some great products for natural extinction, i might have to stick to Photoshop. Of course there is an easier way to get images out of photoshop (hide unwanted layers and crop to guides), but what if i want to move back and change the layer exported. This is why i found at least quick tutorial to remind of how to use slicing in photoshop. [...]
  • Shane
    Apr 29, 2010
    Thanks for the Post! It was very clear, informative and to the point! Much appreciated!

    Best-
    Shane.

  • Rob
    May 27, 2010
    Simple, quick, easy to use Tutorial.
    Especially grateful for the pointer for converting guides to slices!

    Many thanks!

  • Thomas
    Jun 14, 2010
    I want to say thanks for the quick tutorial. I’m very green but study hard. This tutorial really helped the lights come on!
  • Ravi
    Jun 18, 2010
    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

  • Spencer Barfuss
    Aug 7, 2010
    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…
  • Tehnik, Tutorial, dan Alat yang Berguna dari Adobe Photoshop « FOLUSKA
    Sep 22, 2010
    [...] Photoshop 101 – Bekerja dengan Slice [...]
  • ???Adobe??Photoshop??????? | Jackchen Design 1984
    Sep 22, 2010
    [...] Photoshop?101 – ????? ???????????????????????????????????? [...]
  • Useful Adobe Photoshop Techniques, Tutorials and Tools | LionWebMedia.com
    Sep 23, 2010
    [...] Photoshop 101 – Working with Slices In this tutorial you’ll learn how to use the slice tool and show you some easy methods of slicing up your designs. [...]
  • ??(Into the wild) » Blog Archive » Useful Adobe Photoshop Techniques, Tutorials and Tools
    Sep 23, 2010
    [...] Photoshop 101 – Working with Slices In this tutorial you’ll learn how to use the slice tool and show you some easy methods of slicing up your designs. [...]
  • Neerav
    Nov 4, 2010
    Hi Niki,

    Thanks for these simple yet insightful tutorial about Photoshop slices.

    Regards,
    Neerav

  • Coding for Everyone – Emre
    Dec 29, 2010
    [...] Photoshop 101 – Working with Slices In this tutorial you’ll learn how to use the slice tool and show you some easy methods of slicing up your designs. [...]
  • Bojan Živkovi?
    Jun 12, 2011
    In newer versions of Photoshop Slice tools are grouped with Crop Tool and keyboard shortcut is C.
  • Ryan
    Sep 7, 2011
    Nice tut! I did not know about the guides-to-slices trick. I think that will definitely come in handy!

Leave a Comment

Ask a Question on Design Reviver Answers