Jaa

Slicing Images in Expression Design 2

  • Artikkeli

You've just downloaded the new release of Expression Design 2 and you're anxious to try the new slicing feature. This article will guide you through the process of creating slices which will then be exported to an HTML document. To follow along with the steps outlined below, please download the frog.zip file. Let's get started.

Positioning

Expression Design uses absolute positioning in CSS to position objects in HTML documents. Where the objects are positioned in the artboard is where they will appear in a web browser after exporting the slices to an HTML document. (Remember that the artboard is the area within the Document Frame.) For example, if you want your design to be positioned beginning in the upper left corner of the browser window, position your objects starting in the upper left corner of the artboard. Once your layout is exported to an HTML document, you may alter the positioning in Expression Web.

Another important consideration is the order in which your slices appear in the Slice Layer, which is created after you create your first slice. Just like the stacking order of objects in Design, the order in which your objects appear in the Slice Layer determines whether the objects are above or below other objects in the HTML document; more on this in the next section.

Creating Slices

There are two methods of creating slices in Expression Design. The first method is to choose the Slice tool in the Toolbox and drag around the area you want to define as a slice. Let's do that now. Choose the Slice tool, the 7th tool from the top in the Toolbox (shortcut letter k), and drag from the upper left corner of the frog image to the botton right corner past the drop shadow on the bottom and right sides of the image. When you release the mouse a light blue, transparent object appears over the image. This is the slice.

When you create the first slice you'll see that a new layer is created in the Layers panel, named Slice Layer. Expand this layer and you'll see an object named Slice1 followed by a file type extension. This is a good time to rename the slice because the slice name will be the name of the exported image and of the CSS class by which the image is referenced in the HTML document. To rename the slice, double click on the slice name in the Slice layer and then type the new name FrogImage and press the Enter key to accept the new name. There's no need to type the file extension as Design will add this for you.

The second method of creating a slice is to right click on a selected object and choose Create Slice from Selection from the context menu. You can right click on a selected object using the slice tool or any other tool in the Toolbox. Once you choose the Create Slice from Selection option from the context menu, that slice will appear at the top of the slice layer, above previously created slices.

Regardless of which method you choose to create your slice, it's important to know that the slice will include anything that is visible on top of the object you're creating the slice from. If we were to right click on the gradient filled object at the top of the artboard, the slice would not only include the gradient filled object but also the Green Team text object and the part of the frog image that overlaps the gradient filled object. To eliminate these items from the slice, we'll hide those objects before creating the slice. Let's create a slice using right click method next.

Expand the layer named Layout in the Layers panel. A new feature in Design 2 allows us to hide individual objects within a layer. Click on the eye icon to the right of the text object named Green Team to hide the Green Team text on the artboard. Locate and click the Eye icon next to the grouped objects named Frog Image to hide the image. Now click on the gradient filled object at the top of the artboard, and then right click on the selected object and choose Create Slice from Selection. Notice that a new slice is added to the slice layer, above the FrogImage.png object, named Slice2. Mouse over the newly created object and notice from the popup preview that the slice includes only the gradient filled object.

Now click on the eye icons to the right of the Frog Image group and the Green Team text objects to make those objects visible again, mouse over the newly created slice again and notice that these previously hidden objects still do not become part of the new slice.

Rename your new slice GradHeader.png. Your Layers panel should now look like this:

Before we move on the adjusting the slice properties we've made so far, go ahead and create slices for the remaining objects which include the Green Team text above the gradient header (remember to hide the gradient filled object first), the navigation bar (hide the buttons and frog image first) and the buttons on the navigation bar (hide the buttons first). Remember to rename the slices as you want them to appear in the final HTML export.

If you expand the Layout layer in the Layers panel you'll see that the buttons are grouped objects. There is no real advantage to grouping these objects because as long as the text on the buttons aren't hidden first, the text will be included when you create a slice of the button. I simply grouped the objects to make a more organized layout; either way, the results are the same.

Adjusting Slice Properties

Click on a slice in the Slice Layer and notice that the Appearance panel is replaced with an Edit Slice panel. Here you can make adjustments to the selected slice properties. A slice will default to a .png file extension but if your slice is a photo you would probably prefer to export the slice as a .jpg file. If this is the case, you would locate the Format value box and, using the arrow to the right you would select the .jpg format. Expand the drop down list now and see what options you have to choose from. When you change a file extension the slice in the Slice Layer will change to reflect the new chosen format file extension and the options in the Edit Slice panel change to the options available for your chosen format. The value box containing Slice contents allows you to see what is included in the slice so you can check or uncheck the objects you wish to include in the slice.

A large preview window also appears in the Edit Slice panel giving you a visual of the expected output of the slice. You can experiment with changing the values of the various value boxes and checking and unchecking other options to see the results of your adjustments.You also have the ability to change the dimensions of the slice in the Width and Height value boxes in the Edit Slice panel. For the GreenTeam.design file we can accept the default .png file format and the values set by default for our slices. Let's move on the exporting and viewing the compiled HTML file.

Exporting to HTML & Slices

Choose File > Export from the menu bar. In the resulting dialog box, choose Slices in the Items to Export section. You'll see each individual slice in the preview window. Clicking each slice will highlight the slice in the preview. When you're satisfied with the slices, choose HTML & Images in the value box to the right of the Container Name value box and type a name in the Container Name value box. Again, it's not necessary to add the .html file extension as Design will do this for you. Accept or change the Location where the HTML file will be saved and then click the Export All button to create the HTML document and image slices.

Navigate to the HTML file in Windows Explorer where you saved the document. Notice that the image slices were saved in a separate folder using the name you gave the document in the steps above followed by _files. This makes it easy to change the location of your images if you choose to do so at a later time. Double click on the HTML file to launch Internet Explorer and view your masterpiece. If all went well, you're done and ready to pass the files along to the web designer who will open the and work on the file in Expression Web.

Before wrapping it up, you might explore the different export container options. In additions to HTML & Images, you can export to XAML WPF Canvas, XAML Silverlight Canvas and XAML Resource Dictionary.

- Annie Ford

Comments

  • Anonymous
    March 05, 2008
    You've just downloaded the new release of Expression Design 2 and you're anxious to try the new

  • Anonymous
    March 05, 2008
    You've just downloaded the new release of Expression Design 2 and you're anxious to try the new slicing