The Official Microsoft Expression Design Support Team Blog

Lately we are seeing more setup issues with Expression Design on the Expression Design forum than we normally do. The intention of this article is to assist you as much as possible if you do have a setup issue. If the issue cannot be resolved  here on the blog, then this article will help you collect the information needed by the Expression Design forum moderators or the Microsoft Expression Design support staff to troubleshoot and solve your setup issue.

Let’s start with the basics. Assuming you received some kind of error message or a failure code or an error number during setup, the first thing you need to do is make note of the text of the error or error number. Write it down, take a screenshot or you can gather a log file. The log file will be written to the TEMP directory on your machine. The location of that directory may vary depending on your operating system, so the surest way to find it is to do the following:

Click the START button or on Vista or Windows 7 click the button. In the run command line (on Windows XP click Run and in the command line) type the following:

%TEMP%

and hit ENTER

This will open the Temp folder. Now, I recommend that you view the files in a details view. On Windows XP click View > Details to switch or on Vista click Views > Details.

The file you are looking for will have a .LOG extension (you may or may not have file extensions turned on, so don’t fret if you don’t see any files with a .LOG extension). The name of the file will always start with “XSetup_Design” followed by a date and some random numbers. An example of a log file name would be “XSetup_Design_2009_7_8_16_4_13.LOG”.

Now if you email the log file to the forum moderator who asks for it or if you post the error message and/or error number on the forums in your post, then you can stop reading here. What I’m about to go into is a bit more advanced and involves reading the log file in depth. So continue reading if you dare; stop here if you are faint of technical heart.

Return Value 3

To get more information from the log file itself, open it up. Usually a .LOG file opens in either Notepad or Wordpad by default. Click on Edit, Find and do a search on the following without the quotes - “Return Value 3”. And upper/lower case doesn’t matter here. Click the Find Next button.

If “Return Value 3” is in the log file then your view will jump down to where that text is located and it will be highlighted. Return Value 3, in Windows Installer terms, is a fatal error. That means something bad enough happened during the install that the setup process needed to stop. So when you find the first line that says “Return Value 3” you typically look one or two lines up from that to find the cause. Here’s an example:

4:31:53 PM Monday, December 29, 2008: MSI(ERROR): 'Error 2203. An internal error has occurred.  (C:\Windows\Installer\4d6650a.ipi   -2147287035               ) Contact Microsoft Product Support Services (PSS) for assistance.  For information about how to contact PSS, see C:\Users\Marie\AppData\Local\Temp\Setup0000170c\PSS10R.CHM.'
4:31:53 PM Monday, December 29, 2008: Log level changed from: Standard to: Verbose
4:31:53 PM Monday, December 29, 2008: MSI(INFO): 'Action ended 16:31:52: InstallInitialize. Return value 3.'

As you can see, the “Return Value 3” above, highlighted in pink, comes 2 lines after the actual error line. So if you were looking for the cause of an error, in this case you can see that the problem comes from the first line shown. We are given an error (2203), a path (C:\Windows\Installer), a filename (4d6650a.ipi) and a return code (-2147287035). You could do a search on the internet on all of these to find possible solutions or you could copy and paste the three lines from the log file into a post on the forums so that a moderator or one of the support professionals can assist you further.

When No Return Value 3 is Found

If you do a search for “Return Value 3” in your log file and come up empty, don’t worry. On the log files I analyze, I don’t find return value 3 in about 50% of them. Here is what to do next.

Scroll down to the end of the log file. Usually there is some clue there at or near the end as to why the failure occurred. After the time and date stamp (for example 6:25:17 PM Friday, May 01, 2009) you will see words like “Info” and “Error”. Pay attention to the ones that say “Error” and make note of them. Here is an example of such a line from a log file:

6:25:17 PM Friday, May 01, 2009: Error: Config_Products_Install: Installation of Product Microsoft Expression Web 2 (failed): Installation of the "Microsoft Expression Web 2" product has reported the following error: The system cannot find the file specified. Stack:    at XSetup.OfficePackage.ConfigureNewInstall(Product product)       at XSetup.Product.ConfigureNewProduct()

The word “Error” is highlighted in pink. In this case it’s best to search the internet for the text that follows “Installation of the <Product Name> product has reported the following error:” to see what you can find.

There are also times when a log file just cuts off mid-stream and ends with no error or explanation. Here’s an example of the end of one such log:

12:08:47 PM Wednesday, October 22, 2008: Info: Successfully downloaded the file file:///c:/6fe06f08b88fff90dbc132963ca7c04e/Setup/WebXWeb_WW.cab to C:\Documents and Settings\Owner\Local Settings\Temp\XSetup_Web_2008_10_22_12_4_59\438d1ac8_d88e_46eb_ba69_11fef34cce74\WebXWeb_WW.cab.
12:10:27 PM Wednesday, October 22, 2008: Info: Successfully downloaded the file file:///c:/6fe06f08b88fff90dbc132963ca7c04e/Setup/WebXWEBWWCab.cab to C:\Documents and Settings\Owner\Local Settings\Temp\XSetup_Web_2008_10_22_12_4_59\438d1ac8_d88e_46eb_ba69_11fef34cce74\WebXWEBWWCab.cab.
12:22:57 PM Wednesday, October 22, 2008: Info: Config_Products_InstallNew: Begin installation of new product: Microsoft Expression Web 2

That last line was the end of the log file. That’s because the installation crashed with an exception error. In those cases the very last line of the log may be of some help. In the case of this log, it isn’t because all it’s doing is telling us that the installation of Expression Web 2 is beginning and then – Crash! However, when an exception is generated it is important to get most of the information contained in the exception dialog, if you can. If you see a “Show problem details” arrow on the exception dialog, click that and then copy and paste the text you see in the window to a notepad file. You can then copy and paste to a forum posting or an email when requested by someone.

Hopefully this blog post will be of some help in troubleshooting Expression Design installation problems and at the very least gathering a log file that you can send to us on the forums. But if you have a Design Installation issue that you need help with please post on the Microsoft Expression Design forums.

- Will Buffington

Recently I wrote an article which describes in detail troubleshooting steps to resolve problems one may encounter when attempting to launch Microsoft Expression Design. I'm also publishing here on the support blog to make people more aware of how to troubleshoot Expression Design startup issues.

Problem: Expression Design locks up, hangs or crashes while in the process of starting up. During this time, the user may see the Expression Design splash screen remain on the screen, the splash screen may disappear and Expression Design never launches or the user may see an exception error the application will shut down or fail to launch.

Steps to Troubleshoot

A) Start the machine in Safe Mode:

1.Click the START button, and in the run line (or command line) type MSCONFIG and hit ENTER.

2.The System Configuration utility should launch. Click the Boot tab. Under "Boot Options" click to check the box for "Safe boot", then click Apply. The OK button will read "Close". Click close and click 'Yes' to restart the machine when prompted.

3. After the machine has booted into safe mode, try launching Expression Design again.

Note: If Expression Design launches successfully in Safe Mode, then the problem most likely is related to video drivers. If Expression Design still locks up in safe mode, this may be indicative of a bad install of the .NET Framework 3.0 (for Expression Design version 1) or .NET Framework 3.5 (for Expression Design version 2). See the section on "Reinstalling the Microsoft .NET Framework 3.0 and 3.5" in this article. Failure to launch in safe mode could also be indicative of a hardware problem on the machine or a bad install of Expression Design - see the section on "Reinstalling Expression Design". If all of those steps to resolve do not fix the problem, contact Microsoft Technical Support (http://support.microsoft.com/ ).

4.Then Click START and in the run (command) line type MSCONFIG and click on the Boot tab again. Under Boot options, uncheck the box for Safe Boot and click Apply, Close and click 'Yes' to restart the machine when prompted.

B)If Expression Design launches successfully in Safe Mode:

This may indicate a problem with the video driver on the machine. To check, try reducing or disabling hardware acceleration on the video card by doing the following:

1. Right click on the Desktop > Properties > Settings tab > Advanced button > Troubleshooting tab.

2. Click and drag the Hardware Acceleration slider from its original maximum position to the lowest possible. Then try launching Expression Design again.
Note: If Expression Design launches with the Hardware Acceleration settings turned off or reduced, you will want to check the web site for your video card manufacturer for the latest driver update. You can also check the Microsoft Windows Update site and do a Custom search instead of the Express search, as the Custom search lists available hardware updates.

C) Reinstalling the Microsoft .NET Framework 3.0 or 3.5

A Corrupt or missing install of the Microsoft .NET Framework 3.0 or 3.5 can cause Expression Design to crash or hang when launched. To reinstall the .NET Framework 3.0 (For Expression Design version 1) or 3.5 (for Expression Design version 2), follow these steps:

1. Click START and launch the Control Panel.

2. Open Add or Remove Programs (in Vista open Programs and Features).

3. Look for Microsoft .NET Framework 3.0 or 3.5 in the list of currently installed programs. If you do not see Microsoft .NET Framework 3.0 or 3.5 listed, this may be the cause of your startup issue with Expression Design as the .NET Framework 3.0 is required to run Expression Design 1 (Framework 3.5 for Expression Design 2).

4. If the .NET Framework 3.0 or 3.5 is listed, click it and then click Add or Remove. If you encounter an error while uninstalling the .NET Framework, please refer to the following Microsoft Knowledge Base article for in-depth troubleshooting help specific to the .NET Framework install and uninstall: http://support.microsoft.com/kb/908077

5. Reinstall the .NET Framework 3.0 or 3.5. The .NET Framework is included on the Expression Studio disc and is also available for download from the Microsoft web site:
Microsoft .NET Framework 3.0 Redistributable Package
http://www.microsoft.com/downloads/details.aspx?FamilyID=10CC340B-F857-4A14-83F5-25634C3BF043&displaylang=en
Microsoft .NET Framework 3.5 Redistributable Package
http://www.microsoft.com/downloads/details.aspx?FamilyID=333325fd-ae52-4e35-b531-508d977d32a6&DisplayLang=en

6. Launch Expression Design 1 or 2 again. If Expression Design still fails to launch, contact Microsoft Technical Support (http://support.microsoft.com/ ).

The question has been asked several times on the forums as to how you can take an existing bitmap image, bring it into Expression Design, and designate the areas or colors that you want to be transparent, then export as a web-safe file. So let's talk about transparencies and how you accomplish this. Annie Ford has already written up a great blog on how you can take images and merge them together. What I'll be showing you specifically is, step by step, how to render a part of a bitmap image transparent. Then, just for good measure, we'll apply a bitmap effect and I'll show you how to do that also and what the end result looks like on a web page.

So the initial question was - "Can I use Expression Design to make part of my image transparent?" The answer is - "Yes you can." The methodology will differ a bit, depending on the version of Expression you are running (either 1 or 2 at the time of this writing), and that is covered below. So without further ado, let's get started.

1. First, import an image to which you want to add a transparent section from the File > Import ... menu. In the photo below, the antique lamp is set against a white background with a drop shadow to the back left. Now suppose I really like the lamp but I want to add it to a different color background or I want to create a logo out of it that will sit somewhere on my web page.

2. Next, I'm going to zoom in and then select the Pen tool . The idea is to use the pen tool to draw a complete line around the outside of the image I want to be included in the final product. You can also use the Polyline or BSpline tool to draw your line - whichever works for you. In the image below, you can see that I have started the process of outlining the part of the image I want to be included. I just want the lamp and not the background shadow, so my outline will include just the outside of the lamp. I've also set my stroke color to red so it's easy to see where I am drawing my lines.

3. When I'm finished outlining the lamp, this is what my workspace looks like, below. It doesn't take that long to outline even a semi-complex object like the lamp. The tightness of the fit to the curves of course will depend on the number of points that you use to connect your lines. And of course the more you zoom in, the more points you can fit in for a finer fit.

4. Next, still using the Pen tool, we need to define an outline of the outer parameter of the image. The reason we do this is because we want everything between the outline of the lamp and the outer parameter to be transparent. This is pretty easy to do and can be done with as few as four points.

You can see in the image above that we now have two line objects - the rectangle surrounding the image and the outline around the lamp. I suppose you can use the rectangle tool to create a rectangle with no fill to accomplish the second line object. Remember, it's the area between the two line objects that we will be converting to transparency. And don't worry about the rest of the image past the second line object, we will cover that a bit later.

5. Now expand the layer that these line objects exist on and use the SHIFT key to select them both. The below image is what you would see.

6. With both line objects selected, from the menu at the top click Object > Path Operations > Front Minus Back. What you have done is combined the two line objects with the front most object taking precedent.

7. Now apply a fill color, like blue to the already-selected object and set the stroke color to none. The image below is what we end up with.

8. The blue area represents the area that will become transparent.

9. On the right side of the work area, click the down arrow under the Opacity setting. This will reveal the Object sub-dialog with Blend Mode and Fill Rule settings available.

With our combined line object still selected as in the picture of the lamp above (with the blue fill), set the Blend Mode setting to Eraser. Your color fill should turn from blue (or the color you selected) to white, as in the image below.

But also notice that the drop shadow on the lamp has disappeared. This is because we have specified a transparency area and set it accordingly.

10. Now we need to export our image. If you are using Expression Design version 1 there is really only one way I would recommend doing this, and that is by using crop marks. Setting crop marks allows us to tell Expression Design precisely where we want the edges of our image to be when it is exported. Crop marks will export an image to a square or rectangular shape.

To set crop marks, click in the main menu on File > Crop Marks > Set ... The way you set crop marks is you position the mouse at the top left corner of where you want the edge of your image to be, click and hold the left mouse button, then drag down and right to the bottom right corner of where you want the edge of your image to be. When you set your crop marks, they will look like the image below.

Now all you need to do is Export. Click File > Export. On the Save As dialog that appears (Remember this is for Expression Design version 1 users) choose PNG from the file type selector and give the file a name. When you click the Save button, another dialog will appear. Click OK to accept the default values and the file will be saved.

11. Before I move on, I'm going to show another way to export the image, this time for Expression Design version 2 users. In version 2, you have the option to use crop marks, but you can also use the Slicing Tool . To use, click the slicing tool, select it and then draw a rectangle around the image where you want the edges of your image to be. When finished, you  should have a light blue slice over the image like the image below. You will also see a preview of the image in the upper right corner in the Edit Slice palette.

To export from a slice, right click on the slice and left click Export. In the Selected Slice Properties dialog, select PNG as the Format and make sure Slice Contents is set and Color Mode is set to RGB. Also, make sure the Transparency check box is selected. Give the image a name in the Slice Name area. Click the Export All button to export the image.

12. Okay! Now we have an exported PNG file that is transparent where we wanted it to be. At this point you can drop the image onto an HTML page that has a colored or textured background to see the transparency. But I'm going to take this a step further and show you how you can apply a bitmap effect to the exported PNG file and still maintain it's transparency!

13. Open a new Design document and from the main menu at the top, click File > Import. Navigate to where you saved the PNG file, select it and import it.

14. With the image selected, you can click in the Effects palette and add a new effect. In the image below, left you can see I added the drop shadow effect and below, right I added the outer glow effect. You might be asking what's the point of adding another drop shadow since I just got rid of another one by using transparencies. Well, the drop shadow in the picture below is different. If you look closely, you can see it's offset to the bottom right of all surfaces of the lamp. But the drop shadow is only one of several effects you can apply. Try playing around with multiple effects to see what they look like.

15. So to export the image after you have applied a drop shadow effect or another effect, follow the same instructions given in steps 10 and 11. Use either crop marks or the slice tool. When you export the image, the transparency is automatically maintained, as is the special effect! So now when I apply the image to an HTML page, it looks crisp and clean.

I know it's been a while since the last blog post and I apologize. I've been writing another round of training and tending to some studies for another product that I will be supporting. I will still be supporting Expression Design and producing blogs and podcasts on this most excellent application, however. I've got some nice tutorials lined up for Expression Design that I'll be posting shortly and some podcasts in the works.

For now, I have a nice ZIP file that includes some vector art all done in Expression Design 2. I did create all of these myself. We'll call this the Industrial Signage pack as the artwork is stuff you would see on signs out in the industrial workplace, but they also have many uses and applications on websites. Feel free to use them however you wish, just be sure to reference this Microsoft blog page when you do use them.

Click Here to download the ZIP file.

Here's what we've got - in order from left to right:

(first row) - Oil (or chemical) barrel, Warning triangle, flammable liquid diamond, danger sign

(second row) - Electric shock hazard, Warning exclamation, Explosion danger, Flammable, Acidic

(third row) - Gas mask required, Respiratory warning, Danger (standard skull & crossbones), No smoking

(fourth row) - Bio-hazard, Safety goggles required, Laser light warning

(fifth row) -  Radiation warning, Safety gloves required, Face mask required

In this Microsoft Expression Podcast we'll be taking a look at one of the new features in Expression Design 2, the Slice tool! This podcast covers general usage of the slicing tool and how it can be beneficial to the graphic designer.

Podcast 4 - Design 2: The Slice Tool
Total Time (minutes/seconds): 10:23
File Size: 15.6 MB

Click the image Below

It's just as easy to work with your hand-drawn art in Expression Design as it is any other well-established vector drawing program. Perhaps more so with Expression Design because of the simplicity of the user interface. In this blog entry I'll go through a step by step process of bringing a piece of my hand drawn art into Expression Design 2, then flesh it out using Design's tools.

To start, I scanned in a piece of art I drew. The art started out as pencil art and then was fleshed out in black pen. I then imported the art into Expression Design from the File, Import ... menu.

There are a couple of ways to go about the next part. One way is to auto-trace the image (Object, Image, Auto Trace Image) and then convert the auto-trace to a guide (Object, Guide, Make). With Snap to Guides turned on (View, Snap to Guides) you can use a tool such as the B-Spline tool to easily trace the guide paths and make your lines. But that's not what I did and here's why. When the auto-trace is made, you wind up with two lines, one outside, one inside, of the originally drawn line, as shown in the picture below. 

Because the auto-trace represents one contiguous line, it would be difficult to break it apart and then rejoin only the sections that I need so that I can apply fills. In this case, it seems like a much easier way would just be to manually trace the scanned image, which is what I ended up doing. I put the scanned image into its own layer and set the opacity to 10%, then locked the layer. Then I created a new layer on top of that one and using the B-Spline tool , I began tracing.

Note that I traced areas that I could close-in. This is because I am going to assign color fills to them later.

Until we finally end up with a collection of shapes that make up our image, which is the true definition of vector art. Each shape can then be applied a fill.

And what we wind up with is the final image, shown below. The only tool I used for tracing was the B-Spline tool. I used 3 point strokes for the art outline and I used one gradient fill at then end of the beak.

Here is the final file, available for download.

This is a sort of different post - this one contains content. Digital numbers in a .Design file free to download and use as you see fit. Enjoy!

Click to download digital_numbers.zip

File Size: 14.58 KB

Preview:

Hello, all! I have been out of pocket writing internal support training for version 2 of Expression Design these last 3 months and also taking some training. Regular posting to the blog will now resume, in earnest! :)

In this Microsoft Expression Podcast we'll be taking a look at some simple animation, starting with Expression Design and taking our art into Expression Blend, then using Blend's robust timeline to animate our artwork for web page use. In this second part, we'll also be using JavaScript to wire up mouse events to our animation.

Podcast 3 - Animation in Microsoft Expression (Part 2) 
Total Time (minutes/seconds): 15:10
File Size: 16.9 MB

Click the image Below

In the last regular blog I mentioned that we would examine some pathing operations in Expression Design. As you probably already know, pathing is just a means of combining, transforming, negating, spindling and mutilating vector objects. You can end up with some pretty interesting designs by using a path or combining a number of paths to your vector objects. Let's take a look at the basic path operations available in Design and then get creative.

Remember, in order to create a path you need two or more objects selected. When selected you will see the Path drop down control appear at the bottom of the user interface as shown in the image to the left.

There they are, but what do they mean? What do they do? What will my pathed image look like? That's what I'm here to show you. In the examples below, I'll be using two different colored rectangle objects. The blue object is stacked in front of the red object. Let's path these objects and see what they look like!

Compound - When applying the compound path, the properties of the image in the back overtakes the image in the front to become one solid image. Where the two images intersect is "cancelled out" so that the object behind the red and blue objects becomes visible. In this case there is no object behind the red and blue objects aside from the artboard. Though it may not look like it, the merged object is a single path object.

Unite - Nope, this isn't the name of an old football hero. This path operation takes the front object in your selection and merges it with the rest of the selected objects. Think two drops of water merging into a bigger drop and you get the idea. The merged object becomes a single path object.

Front Minus Back - You got it. The object in the front remains while the rest of the objects go away. However, where the objects intersect also disappears. In this case, the blue object is all that's left and it is a single-path object.

Back Minus Front - If you understood the concept behind Front Minus Back then Back Minus Front should be a no-brainer. The object in the very back remains and any place the objects intersected becomes electron vapor. The remaining object is a single-path object.

Intersect - When objects collide at this intersection, only the space where they overlap remains. To illustrate the point, the first image below shows our red and blue objects. The green rectangle in the middle depicts the area where the two overlap. When you apply the intersect path, the area of overlap relative to the object in front is all that's left, thus the second image below. The remaining object is a single-path object.

Divide - Our last path divides our objects along their selections. What does that mean? Well, when you first apply the divide path to your selections it may look like nothing happens. But click on the Direct Selection arrow and move the objects apart. They are now individual objects, including the area of overlap. Think of this path operation as making jigsaw puzzle pieces from your selections. Nothing goes away and each of the created objects are single-path objects. The area of overlap remains and takes on the properties of the object in front.

So there you have it. Pathing operations in Expression Design demystified. You can make some really interesting shapes when you get creative.

The below picture on the left is our red and blue object with the Divide path applied; the outer red and blue shapes switched places and intersected the middle blue object and then the Compound path was applied. The resulting object is a single, selectable object.

The below middle pic is a simple crescent created with two identically sized circles, slightly offset from one another yet still overlapping, with the Front Minus Back path operation applied.

The below right pic is also a single object, believe it or not! It started out as two hexagons and involved multiple Compound and Unite paths along with rotating the resultant shapes and copying them. I don't remember the sequence exactly and it gave me a headache when I tried to remember it so you will just have to take my word for it. Until next time! :)

In this Microsoft Expression Podcast we'll be taking a look at some simple animation, starting with Expression Design and taking our art into Expression Blend, then using Blend's robust timeline to animate our artwork for web page use.

Podcast 2 - Animation in Microsoft Expression (Part 1) 
Total Time (minutes/seconds): 13:33
File Size: 24 MB

Click the image Below

I need to post this because I've gotten this question in email a few times. The information here was gathered from the MSDN Product Comparison page located here.

Here's a table which should help identify which Expression products are available for each MSDN subscription level. If you want to change your MSDN subscription level or have other questions about your MSDN account you can contact MSDN customer service at 1-800-759-5474.

One of the first things that frustrated me about Expression Design was the (seemingly) lack of ability to align my objects and text blocks where I wanted them. After all, this seems a fairly rudimentary expectation, right? So I drew a rectangle - a nice blue rectangle. Now to align this thing to the center of my artboard. At first, I looked to the Arrange menu. Okay, there's 'Align', but it's sub-options are grayed out. There didn't seem to be a way to do this without manually clicking and dragging the rectangle to the middle of the canvas and eyeballing it. But then, after some playing around with the product I can say that all of the alignment options you need are there in the program.

There are a couple of alignment options that aren't part of the UI that I would like to see. One is how to align an object to the center of the artboard. You select your object(s), Edit, Copy (or CTRL+C) and then Edit, Paste (or CTRL+P) and the objects appear in the center of the canvas. But I can't select a single object and go to the Arrange menu and select Align, Center Vertically & Horizontally to Canvas, because that menu option doesn't exist. Neither does there appear to be an option to center horizontally or center vertically to the canvas. If you've got a really smooth hand you can use the copy, paste tick to align to the center of the artboard and then drag the object horizontally or vertically to align it, but since my hand isn't quite that steady I accomplish a single-axis artboard center by using the copy, paste trick then hold the Shift key and tap the arrow keys until the edge of the object is flush with the artboard. I've filed a bug (a suggestion really) to have a menu option to align an object to the center, top, bottom, left, right of the canvas. Aligning to the left and right is easy - all you do is click and drag the object and it snaps into place (by default the View, Snap to Guides option is enabled. If you aren't seeing the object snap to the edge of the artboard, check this option).

So let's now examine our other alignment requirements. Consider the following image below:

Pretty basic. We have a blue rectangle and an orange stop sign. Okay, it's a hexagon. There are no orange stop signs here in the states are there? Anyway, not to zip off on another tangent ... let's say I want the hexagon centered inside the rectangle. If you're used to using Adobe products like Flash or Illustrator then you know about the Alignment window under the Window menu item. In this window are many options for allowing you to align your objects to each other or the artboard.

In Expression Design, the alignment options don't actually appear as part of the UI until you have two or more objects selected. In order to center the hexagon in the rectangle both horizontally and vertically I need to select both the hexagon and rectangle (shift click or click drag). Now look at the bottom of the screen. No, not that low. Look to the right of the Skew Angle and Rotate Angle adjustment boxes. You now have alignment, stack and path options available. Let's take a look at what each of these do for us. I'll use our blue rectangle and orange stop sign, er ... hexagon, as an example of each.

Centers - Objects selected are centered inside the object underneath it. What!? Think about it as if you were to set a plate on a tray and then a cup on the plate. You have a stack with three objects - tray, plate cup. Looking down on it, the tray is under the plate and the cup on the bottom of your stack. Using the centering option the cup is centered on the plate and the plate is centered on the tray.

Top Edges - Each object on our stack from the top down is aligned so that the 'top' (don't think in 3D anymore) of the object is aligned to the inner-top of the object underneath it.

Bottom Edges - Each object on our stack from the top down is aligned so that the 'bottom' of the object is aligned to the inner-bottom of the object underneath it.

Left Edges - Each object on our stack from the top down is aligned so that the 'left' most point of the object is aligned to the inner-left of the object underneath it.
                                                       

Right Edges - Each object on our stack from the top down is aligned so that the 'right' most point of the object is aligned to the inner-right of the object underneath it.

Vertical Centers - Each object on our stack from the top down is aligned so that the center of the object on top is centered along the Y-Axis of the object underneath it.

Horizontal Centers - Each object on our stack from the top down is aligned so that the center of the object on top is centered along the X-Axis of the object underneath it.

That's pretty much all there is to it, with regard to alignment options. Let me know if you have any questions. Next time we'll examine the different pathing options in Expression Design and how they look when used.

This is the first Microsoft Expression Design video podcast. This is a re-rendered and re-worked podcast that makes use of zoom points for improved viewing on a mobile device. The content of this article is about taking your work from Expression Design to Expression Blend.

Podcast 1 - Workflow: From Expression Design to Expression Blend
Total Time (minutes/seconds): 5:28
File Size: 8.5 MB

Click the image Below

I was going through the help files for Expression Design recently. They contain a lot of great information on how to get around the product and how to accomplish certain tasks. And then I read the help topic on creating custom strokes. Hrm. Kind of vague. There were several things I had to do in that weren't mentioned in the help to get a custom stroke looking the way I wanted. So let this week's blog be a supplement to the help files on creating custom strokes in Expression Design.

First the basics about custom strokes. There are two types - line art and bitmap strokes. Line art strokes are just what it says, line art, which by default it black white and shades of gray. Bitmap strokes are color strokes made from a complete color bitmap or a portion of a color bitmap. For now, we'll focus on line art strokes.

So how to get started - Create a design you want to see as a stroke. Click and drag the selection pointer over all of the objects that make up the image so that they are all selected. Then Click the Object menu from the top, Stroke, then New Stroke Definition. Something the help files don't mention - when creating line art strokes it's best to create them using black lines and/or fill. The reason is if you create line art strokes using color, Expression Design will render the stroke as a shade of gray. What's a bit misleading is when you click in the Stroke drop down box on the Properties menu, the stroke picture in the menu will retain the color you chose, but the actual stroke art applied to your stroke will show up as a shade of gray.

Notice that a new tab called "NoName" has appeared at the top of the workspace. You also see your line art in a big red box that has an arrow in it. Also, you have three new icons at the bottom of the screen. What's all this about? This new workspace is exclusively for your new stroke. The red box around the line art is called the 'Stroke Definition Box'. Basically whatever is in this box will be your new strokes entire being. Remember, strokes are applied to a single line and take the place of that line. The red arrow in the stroke definition box shows what direction your stroke will be applied from the from the beginning point of your line to the end point.

With the selection arrow, click and drag around all of your line art again. You should now see a blue square with adorners inside the red square. In the example above, I'm going to make make this custom stroke repeating. What that means is the image is applied in its entirety and in its original form to a line. Huh? What? You'll see in a minute. Right click anywhere inside the blue square and click 'make repeating'. The blue square is gone and now you have two gray lines on either end of the stroke definition box also known as the red square with the pointy arrow. These gray lines are going to tell Expression Design where to begin and end your custom stroke. For perfect accuracy, you might want to zoom way in so you can get the gray lines perfectly matched with the line art. What you do with these gray lines is drag them inward so they don't leave any gaps between the end of your line art and the red box. In the picture below, notice the gray line it set slightly inward past the end of my line art; it's not flush with the line art cut-off. If you don't do this you may notice a white gap going down the middle of your line art, showing an obvious separation when you want it to be continuous. 

Now all that's left is to save the stroke. Click File, Save. Give your stroke a name in the 'Name' box. The 'Folder' box refers to the categories in your stroke drop-down list in the properties panel. You can set this this to any of the categories, but for something like this, 'Graphics' might be the most appropriate location. The 'Default Width' is an important setting - don't just blow past it. By default, I've noticed that Expression Design tends to make the line art stroke very large, like over 200. For mine, I'm changing this number to 40. The larger you make this number, the larger your line art will be on the line which you are applying your custom stroke. Click Save. Time to test it out!

You can go back to your original line art workspace or create a new one. I'm going to use the B-Spline tool to make a nice, curvy line. Now just apply your custom stroke from the Stroke drop down box. Remember, it will be located under the category you saved it to during the save process and will appear listed in alphabetical order according to what you named it. Here's a look at the finished product!

Now for bitmap strokes, you need to remember that Expression Design is a vector drawing program, so any bitmaps you want to make strokes out of need to be imported into your workspace. You will not be able to import a bitmap image and then use a tool in Expression Design to crop out the piece you want to add as a stroke. You can use Windows Paint which comes with every Microsoft operating system to accomplish this task. An easy way to launch Windows Paint is to click Start, Run and just type paint and hit Enter or click OK.

In the image below you can see that I've copied a bitmap of a Zune, Microsoft's own portable music player, and cropped it and turned it sideways. I imported the Zune bitmap to my workspace. Using the selection arrow I selected the image and then clicked Object, Stroke, Define Image Stroke. Give it a name and select the folder in the stroke drop-down list that you want it to appear. Also, set your default width. On this dialog I notice that ED sets the size a bit small. The default on this image was 10, but I''' change it to 40.

The Alpha Channel window has three settings - no alpha, use original alpha value and grayscale. Alpha is the amount of transparency you want applied to your image. Setting no alpha will cancel any imported alpha effect on the BMP image; use original alpha value will retain this alpha value for any image that is brought into ED with an alpha value applied. Grayscale will convert the image to a black, white and shades of gray image. I will leave this set to 'No Alpha'.
The Body Section settings are important to understand. In our case, if we set 'do not repeat' in this section, the image would be stretched out the entire length of the line that we want to apply it to. If the line is longer than the image or curved in any way, the stroke will look badly distorted as in the image below. It's not really what I had in mind.

I've chosen a simple repeat for the body section, meaning the image is not stretched, but repeated seamlessly along the length of the line to which I'm applying the stroke. The number of parts repeated that you select for the 'Body Section' window indicates the number of times you will see the image repeated within one section of itself.

The anchor head section length and anchor tail section length values indicate whether or not you want your stroke to overlap itself on the head (the left) of the image or the tail (the right) of the image. The number specified indicates a value in pixels, the amount you want overlapped from the left or right. One last thing to note about setting these values - you may notice that when you try to set a value, it may default to a much lower number. ED will only allow a certain percentage of the image to be anchored, so don't think you're going crazy. It's intentional.

Now click OK to save the stroke. Try drawing a line and applying the stroke to it. Here's a shot of the finished product below.

Oh, one more thing I almost forgot to mention. If you want to experiment around with the settings and making your strokes, both BMP and line art, you can edit the stroke you're working on by clicking the drop down stroke list (see image below), click the stroke in the list, then click the little gear icon at the bottom of the window and then click Edit Stroke. When you save your settings, you will be prompted to overwrite the previously saved stroke. Also, if you have the stroke you just edited applied to a line on the workspace you should see it change automatically. Have fun with all them different strokes!