Join Chris Converse for an in-depth discussion in this video Slicing and exporting multiple images, part of Design the Web: Multiple Graphic Sizes.
Now to get multiple web graphics out of a single Photoshop file, we're going to use the Slicing tool. So come over to the Toolbar. Let's come down to the Cropping tool. Let's click and hold. Come down and choose the Slice Tool. 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. So first, let's create our slices. Let's move the cursor to the upper left hand corner of the large clip area. Let's click and hold. You'll notice that the Slice tool is somewhat sticky, so it'll snap to the nearest art work on any layer. Once we've drawn the slice, we can come in here, double click, bring up the Slice Options Dialogue box.
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. Let's click OK. Let's come down and create another slice and run the medium size banner graphic. I'll name this banner medium, this is set to 800 by 200. Click OK. And then lastly, let's come down and create one final slice around the banner small. Bring up the slice options, name it banner small.
Check that it's 500 by 86 and click OK. Next, choose File > Save. 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. And next, let's choose File > Save for web. Now, inside of here I'm going to come over and grab the magnifying glass. Hold the Option key to zoom out a little bit. We also have a Slice Selection tool here. So let's grab the Slice Selection tool. Let's select the first slice. Let's come over and set this to a JPEG file. Set the quality to around 72%. Next, we'll select a medium slice.
Let's come down to JPEG. For this, we'll set the quality around 65%. And next, for the smallest one, we'll come up to JPEG and we'll set this to about 45%. 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. 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. You can certainly pick your own compression settings. And I definitely recommend testing your graphics on different devices before you pick the final compression settings.
Now with all of these in place, let's come down and choose File > Save. Next, we'll choose the Desktop. Let's come under Format, choose Images Only. Settings, we'll leave these alone for now. We'll look at these when we start creating high-resolution graphics. Then under Slices, let's come down and choose All User Slices. 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. And then let's come down and choose Save. Now, if we go back to the desktop, we'll see that we have three graphics we created from a singe Photoshop file.
Each of the graphics was generated from those individual slices that we created. Now, if you're interested in more of the capabilities of the Slicing tool inside of both Photoshop and Illustrator. I have another course on the lynda.com online training library around using the Slicing tool. And now that we have all of our graphics created, next we're going to take a look at creating high resolution graphics for high pixel density displays using the same smart object and the same slices from this file.
This course was created and produced by Chris Converse. We are honored to host this content in our library.