In Tutorials Sep 9, 200922
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!
22 Comments
Sep 9, 2009
is it possible to save just an individual slice, or one or two, as opposed to them all?
Sep 9, 2009
Why do you save the images as gif and not jpg? Does it make a difference?
Sep 9, 2009
Very handy! Thanks Niki for this cool tut!
Sep 9, 2009
Not so much “Working With Slices” as “A Couple of Ways to Create Slices.” Good, but expected quite a bit more.
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.
Sep 10, 2009
Yeah, agree with the first comment. This is more like “An Introduction to Slicing”.
Sep 10, 2009
Great article,
Is there any way to export the slies a PSD file to another?
Sep 10, 2009
[...] Photoshop 101 – Working with Slices | Design Reviverdesignreviver.com [...]
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.
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.
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?
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.
Sep 11, 2009
[...] Sitio: designreviver.com/tutorials/photoshop-101-working-with-slices [...]
Sep 11, 2009
thats weird. my slice tool shortcut is the letter ‘C’
Sep 15, 2009
Nice. But Pixelmator looks like it solves the issue in nice, faster and cheaper way. Have you guys heard of it?
Sep 16, 2009
[...] Edit 9/16/09 – Photoshop 101 – Working with Slices [...]
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
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. [...]
Jan 10, 2010
[...] designreviver.coms [...]
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!
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.
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.
Leave a Comment