Different Strokes

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!

Skip to main content