The Official Microsoft Expression Design Support Team Blog

This is another one of those “How do you do that in Expression Design?” blogs. Consider the following goo:

It’s green, bubbly, disgusting and was drawn completely in Expression Design using a combination of different live effects. It’s really easy to draw when you know what effects to apply, so all you have to do is learn how to draw yourself a puddle of goo.

There are more than a few ways you can draw puddles of goop – one is to start out with the B-Spline tool on a new document with a stroke color and start drawing the outline of the goo. That can be a bit tedious.

Another way – you can drawn a bunch of differently-sized circles overlapping each other at various points on the artboard, select them all and use the ‘Unite’ path operation to combine them so that only the outline of all of the circles remain.

The way I like to draw puddles is to make use of the Polyline Tool  and draw a polygon with many jagged edges like this one:

 
Then switch to the Convert Anchor Point tool  and start clicking on the anchor points to convert them from jagged to rounded edges.

Finish rounding all of the jagged anchor points and then give the shape a white fill. This is what you should end up with, or something similar in appearance.

Believe it or not, that’s the hard part. Now let’s add the effects. Under Effects on the right side, click the  button and under Surface choose “Craquelure”. On the settings for Craquelure, you want to set “Crack Spacing” to 21, “Crack Depth” to 10 and “Crack Brightness” to 9. Also, set the stroke color for the object to nothing. Your shape now has some texture to it. This should be what you end up with:

Okay, we’re going to add ANOTHER Craquelure effect, so again choose  and “Surface” and “Craquelure”. This time you want to set “Crack Spacing” to 7, “Crack Depth” to 10 and “Crack Brightness” to 8. This should be what you end up with:

The next effect we want to add is the “Plaster” effect, which is also under “Surface”. The plaster settings should be set as follows: “Image Balance” – 20; “Light Position” – Top; “Smoothness” – 2. Set the Foreground Color to #327C13, or R: 50, G: 124, B: 19 and the Background Color to #ABC41F or R: 171, G: 196, B: 31. Your shape should now be a blurry, bubbly greenish-yellow that looks something like this:

One more effect and we’ll be done! Add the “Plastic Wrap” effect. This can be found also under “Surface”. Change the settings to the following: “Highlight Strength” – 20; “Detail” – 10; “Smoothness” – 9; And this should be what you end up with:

You can adjust the length of each of the slime puddle “feet” with the Direct Selection tool. Add a couple of eyes. For a really cool effect, add a filled oval to the slime puddle and select both, then select Path, Back Minus Front. The slime puddle not only has a hole in it, but the edges are correctly adjusted with the “Plastic Wrap” effect to look rounded off. You can do this multiple times to make a makeshift face:

Have fun experimenting with different colors, shapes and effect combinations!

- Will Buffington

I’ve seen a few posts from people saying their colors did not match from Expression Design version 1 or 2 to when they were viewed on the web. And when I say “did not match” I’m talking a fairly significant difference in hue. I happened upon an odd little color “bug” myself a couple of weeks ago that, at first, I thought was Expression Design’s fault. However, all is not as it appears on the surface. Further investigation led to a nasty little bug that not only clears Expression Design of any wrong doing, it is also a well-known problem and apparently not yet fixed.

I first noticed an issue myself when compiling a blog using Expression Design and Windows Live Writer, a very good tool by Microsoft used for writing and composing blogs. The issue came to my attention when I created a small alien entity in  Expression Design that I decided to add to a blog (see image to the left). Instead of exporting the image as a transparent PNG so that the little blue guy would appear over any surface and the black area would be transparent, I decided to color-match the black area to the background of the web page on which my blog would be displayed. The background color is the same as the background color of this page and happens to be the hex color #333333, a dark gray color. Life probably would have been so much easier had I chosen to simply go with a transparent image, but no, I had made the decision to color-match the background with another color and, silly me, I expected the color-matching to be precise.

Now remember, when writing a blog in Windows Live Writer, you have the option to write the blog using the blog’s current theme setting, meaning you can write with the blog theme’s colors imposed so you get an idea of how it’s going to look. So to get the background color of the blog, all I did was take a screen capture using the PrtScn button, then I pasted the contents of the clipboard into a new document in Expression Design 2. To do this, I clicked File > New and the width and height are automatically set to the dimensions of the size of my screenshot, which is also the monitor resolution. From there, I used the eyedropper tool to get the background color’s hex code which is #333333.

Note: Incidentally, you don’t have to go to all this trouble. All you have to do is drag the eye dropper tool off the Expression Design 2 or 3 application it will let you color-match anything you hover the eye dropper over.

So imagine how surprised I was when I color matched the background layer of the alien guy in Expression Design 2, exported the image as a PNG, and then imported the image into Live Writer and found that the background around the alien no longer matched the background of the blog! When I checked the color around the alien, it was now #2A2A2A! That’s still a gray color but the Red, Green and Blue values are all 9 points off from where they should be. I  toggled all of the settings in Expression Design 2 that I could think of that might affect color, exported the image and imported to Live Writer again, to no avail. Publishing the blog also confirmed that the color was off when I viewed the blog in a browser.

So I was pretty sure that Live Writer had a color bug in it and I was about to ping the Live Writer developer team when an idea was thrown at me like a brick – try viewing the blog in another browser. At first I scoffed at the idea but did it just for the sake of galactic peace. But what do you know! Firefox displayed the color correctly! Well, at least MORE correctly. The color was just a hint of a shade off. Not nearly as noticeable as the difference when displayed with Internet Explorer. So then, mind racing, I began to piece it together. Live Writer might be using Internet Explorer to render the blog content for the web, which would explain why the color difference would show up in both Live Writer and Internet Explorer, but not so much in Firefox.

The next business day, I confirmed those suspicions with the Windows Live Writer developer team. They pointed me to the following article: The Sad Story of PNG Gamma "Correction". Apparently Safari suffers from the same gamma correction problem to the extent that IE does.

In short, the article denounces the use of PNG files for color matching when the intent is internet use. And sure enough, when I tested further I found that I could have avoided the problem by exporting the art as a JPG file the whole time. Now if I had wanted to maintain a transparent layer around the blue alien and then color-match the blue alien itself to something else, THEN I might have a legitimate problem. And in that case there are browser gamma test pages like this one from Sourceforge which can help test your browser’s gamma compatibility.

Now that doesn’t mean you should steer clear of PNG usage altogether. When color matching isn’t an issue PNG files remain a highly useful file type, especially when a transparency layer is needed. But when the color of your web artwork must be precise, you might think twice about PNG files.

- Will Buffington

We have recently been able to clarify a confusing topic regarding pressure sensitivity support in Expression Design. The topic has come up in the forums a couple of times and we finally wanted to put this question to rest once and for all: Does Expression Design 2 and above support pressure sensitivity, even on a tablet PC?

The answer is yes, however there is a catch. I’ll explain in just a moment. First let me bring everyone up to speed on just what is pressure sensitivity. You can draw freehand pictures using the paintbrush tool in Expression Design using a mouse. Instead of a mouse, you can also use pen-tablet devices such as Wacom tablets and Tablet PCs which use a stylus to draw freehand. It’s just like drawing with a pen and paper except you’re doing it electronically. So now let’s up the ante with pressure sensitivity. It’s really pretty simple – the harder you press with a stylus on the drawing pad, the thicker the line will be that you are drawing in the application. The lighter you draw with the stylus, barely touching the drawing pad as you sketch, the thinner the line will be on the screen. Nifty huh? Here’s a screenshot of an example of pressure sensitivity use in Expression Design 2. I used a Wacom Bamboo MTE-450A.

I have labeled the areas where I applied minimal, light and heavy pressure to the pad. As expected, Expression Design 2 correctly interprets the pressure sensitivity and renders the strokes accordingly. You can also set the pressure sensitivity by
adjusting the “Pressure scale” setting under under the menu Edit > Options > Stroke, as seen in the screenshot above.

Okay, now that we’re up to speed on pressure sensitivity and we have established that, yes, Expression Design does support pressure sensitivity, I need to talk about the catch I mentioned earlier.

The catch is, pressure sensitivity will not work with the default stroke. It will work with all other strokes in the stroke list, but not the default. What does that mean? Let’s take a look at one more screenshot to explain. Look at the screenshot to the right. The default stroke is the straight black line you see in the drop down box under under the color palette, to the left of the box with the label “width”. If you click the drop down arrow the stroke box expands and allows you to choose from a number of different types of custom strokes (also called “skeletal strokes”) to draw with.

Hovering the mouse over each stroke will produce a tool tip with the strokes official name. The default stroke is officially called “Basic” and is located in the “<General>” category. This is the one stroke with which pressure sensitivity will not work. If you select any of the others then pressure sensitivity will work as intended.

I did check with the developer team on this issue and the behavior of the “Basic” stroke not working with pressure sensitivity is intended, or by design. In other words, it’s not broken.

So, to summarize: Expression Design does support pressure sensitivity, even on Tablet PCs. If you find that pressure sensitivity is not working for you then make sure you are not trying to use it with the “Basic” or default stroke as pressure sensitivity only works with Expression Designs custom (skeletal) strokes.

- Will Buffington

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.