How to Use the Slicing Feature of Microsoft Expression Design 2

This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Video Transcript

Now let's talk about one of the new and exciting features of Expression Design 2, the Slicing feature. It's great for slicing up the images and optimizing them for the Internet or other tools like Expression Web or Expression Blend. I am going to go ahead and switch to the sm_web.design, and this is just a small website markup that I have here and you can find this in your Project Files folder in the Chapter 01 section.

What we are going to do here is we are just going to start making some slices of this image and optimizing them really quick for the web. So for instance, if I wanted to create a slice of this logo here, I could simply come over and grab the Slice tool or hit the letter K on my keyboard.

Now with the Slice tool all you have to do is, define the area that you want to turn into a slice by clicking and dragging around it like so. Now once I have all the area encompassed that I want, I will just let go the mouse and I instantly have a slice. Now once we have a slice over here, we will check this Current Slice Properties panel, which gives me a full preview of exactly what the slice is going to look like optimized.

Underneath all that we have the ability to change multiple attributes of the slice, including the Slice name, the Slice contents, which encompasses everything that is on that particular layer that you are working on inside of that slice. So you can turn actual objects On and Off.

For instance, if I didn't want certain text to be included in this logo, I could go in here, Undo that and I could simply turn On and Off, anything I did not want in there. So let's say I didn't want the Y on the logo here. Simply turn that Off like so and automatically in my Preview window, if I scroll back up here, you see the Y has disappeared. So this gives you unprecedented and creative control over every image that you are optimizing for the web and gives the ability to change each individual aspect to suit your needs.

Now also in the Slices panel you have the ability to change the formatting of the image that you are working on. For instance, you can select from multiple web friendly formats such as PNG, JPEG, GIF, TIFF, BMP, and WDP (HD Photo). Now you also have the ability to Export these as XAML code for Silverlight projects or projects in Expression Blend. Finally, at the bottom you also have the ability to create a PSD, that's native Photoshop file, or a PDF of this particular image that you are working on.

One of the other great things about the Slice tool is the ability to overlap slices without having to worry about creating multiple instances of a certain image. For instance, let's say that I wanted to create a slice from this background here. I could simply click and drag around just like that to encompass that area. Now you will notice that it also has included the logo that we had before. I can simply come up here as we shin I can take a look at what this preview has given me. Then I can simply come down into the Slice Properties panel. I could open up this and I could select exactly what I wanted in there.

So if I only wanted that background there I could simply come in here and turn Off all of those different aspects of the media that I didn't want to use. So this allows you to have multiple overlapping objects and still maintain transparency properties and individual image aspects such as file format and web optimization settings like anti-aliasing and so forth.

So after you have done working with the Slice tool, if you are ready to export your images, all you have to do is simply come up to the File menu and choose Export. Upon export you will be able to select multiple slices in here to work with. You will also be able to optimize those slices the same way you would inside of the Slice Properties panel, adjust their size, their anti-aliasing, also adjust their ICC Profiles, Color mode as well as the Image Format.

Now at the bottom here you have the ability to change where this file is stored. You also have the ability to select if you wanted to export all, export selected slices or save your settings and simply close out of the Export dialog box. And the best thing about these slices is they are completely compatible with Expression Blend and Expression Web. Once you are done with these settings, you can simply export these if you are ready to go to another tool or simply to go to the web, or you can come back and simply click Cancel and you are right back working in Expression Design.

This is just a brief overview of the Slice tool and how it can help you in your workflow. We will be covering more about the Slice tool later on in this series.