Export web slices
![export web slices export web slices](https://99designs-blog.imgix.net/blog/wp-content/uploads/2013/05/export_slices.png)
I have another course on the online training library around using the Slicing tool. Now, if you're interested in more of the capabilities of the Slicing tool inside of both Photoshop and Illustrator. Each of the graphics was generated from those individual slices that we created. Now, if we go back to the desktop, we'll see that we have three graphics we created from a singe Photoshop file. And then let's come down and choose Save. So any slice that you drew in Photoshop will be saved, all the rest of the slices that Photoshop creates to complete the canvas will be ignored. Then under Slices, let's come down and choose All User Slices. We'll look at these when we start creating high-resolution graphics. Settings, we'll leave these alone for now. Let's come under Format, choose Images Only.
![export web slices export web slices](http://mbsbears.com/teched/webdesign/assign_a/fireworks_creative_works/page14-export_slices/pict104.gif)
Now with all of these in place, let's come down and choose File > Save. And I definitely recommend testing your graphics on different devices before you pick the final compression settings. You can certainly pick your own compression settings. So we can compress the images a little bit more since they're going to show a little bit more detail on those high resolution screens. Press K or Shift + Command + E on your keyboard. Now the reason I prefer to pick different compression settings here is that if somebody is looking at this on a tablet or small-screen device, most of the devices today have higher pixel densities. Choose Tools > Export for Web (from the Tools menu at the top of your screen). And next, for the smallest one, we'll come up to JPEG and we'll set this to about 45%. For this, we'll set the quality around 65%. Let's come over and set this to a JPEG file. We also have a Slice Selection tool here. Hold the Option key to zoom out a little bit. Now, inside of here I'm going to come over and grab the magnifying glass. And next, let's choose File > Save for web. Slices are saved with your Photoshop file so you can go back as many times as you want and modify the artwork inside of the slices. Bring up the slice options, name it banner small. And then lastly, let's come down and create one final slice around the banner small. I'll name this banner medium, this is set to 800 by 200.
![export web slices export web slices](https://help.pixelmator.com/pixelmator-pro/2.0/assets/English/1589105139000.jpeg)
Let's come down and create another slice and run the medium size banner graphic. We'll name this banner large We'll notice down here that the width and height is set to 980 by 275, which matches the size of the clip area. Once we've drawn the slice, we can come in here, double click, bring up the Slice Options Dialogue box. You'll notice that the Slice tool is somewhat sticky, so it'll snap to the nearest art work on any layer. Let's move the cursor to the upper left hand corner of the large clip area. What the Slice tool does is it creates an object above all of the elements on the canvas that can be accessed through the save for Web Dialogue box. Now to get multiple web graphics out of a single Photoshop file, we're going to use the Slicing tool.