Developing For .NET

This is the fourth entry in a series of articles intended to teach developers how to use Expression Design.  You can find the previous articles here:

• Expression Design for Developers part 1 – First Impressions
• Expression Design for Developers part 2 – A Quick Tour
• Expression Design for Developers part 3 – Editing Your Art

In the previous installments we covered the basics of Expression Design, learned how to draw, and even added some nice Effects to our art.  If you’ve been following along so far, though, you may begin to wonder about the Developer part of the series title.  Certainly the entry level nature of the series does apply to developers, who are presumed to have little or no design experience.  So far, however, we haven’t seen anything that would really prompt a WPF developer (or designer for that matter) to use Design over Blend for these tasks.  Today’s article will, hopefully, fill in that void.

Layers

Blend has very functional graphic design capabilities, including path manipulation and Effects (with Blend 3), but at its core it is still an application design tool.  As such, it is missing some typical graphic design software features.  First and foremost is the lack of Layers.  I find layers to be an invaluable tool for organizing my art. It’s also great to logically group things together, which means you can do thigns like mass selection and toggle visibility.  For WPF developers, though, it ties in to another great feature: XAML Export.  I’ll get into this later, but using layers adds some cool functionality when it comes time to move your art to Blend.

Working with the Layers panel

Open Design and let’s get started. If you look at this image from part 2 you’ll see the Layers panel is located at the bottom right of the window:

Create a new project: the size doesn’t really matter, just make it big enough to give you some breathing room.  Before you begin drawing anything, check out the Layer panel and see what’s been added.  You should see a Layer cleverly called “Layer 1” and outlined in Red.  The outline means that this is the currently selected layer, and since this is the only layer we have it makes sense that it is selected.  To see some stuff in action, let’s go ahead and add some art.  We are going to create several buttons, so let’s start with a Delete button:

Using the techiques from the previous articles, I’ve created art for a custom Delete button.  I’ve expanded the Layer (click the white arrow next to the Layer name) and you can see I have two elements to my drawing.  You’ll also see I renamed the Layer to “DeleteButtonImage”, which I did by double clicking the Layer name and editing it.  This will become important when we export to XAML, so name your layers well.  You can do the same thing for the element names if you wish, a practice I would definitely recommend once your art becomes more complex.  Trying to find a particular element can be tricky otherwise.

You’ll notice each element has an eyeball and a lock. The eyeball is a visibility toggle, which allows you to hide elements and focus on a particular element or a particular aspect of a layer.  It also lets you easily experiement with different options. The lock will lock the element so it cannot be accidently edited.  It can be pretty easy to lose track of which item is selected and before you know it you’ve changed the wrong element!  In our example above, you’ll also see that the “12 points” element has an “fx” label: this indicates that this element has an Effect applied to it, in this case a Drop Shadow.

The layer itself also has the eyeball and lock features.  Next to them is a box, which when clicked will select the entire layer, at which time the box will fill with the Layer color (Red above).  The Layer colors are a way of visually distinguishing between multiple layers.  You can control the color assigned to a layer as you’ll see in the next section.

At the bottom of the Layers Panel are three buttons: the one on the left is the Layer Options button which we’ll cover in the next section.  The two on the right are the “New Layer”  and the “Delete Layer” buttons.  They are pretty self explanatory, but it is worth noting that you cannot delete a layer when it is the only layer on the artboard, so at this stage the button should be disabled.

Layer Options

There are several options for controlling the Layers Panel. Click on the Layer options button at the lower left corner of the Layers Panel. Doing so reveals a context menu where you can Create a New Layer, Duplicate a Layer, Delete a Layer (when enabled), and change the Layer and Thumbnail Options.  Explore these a little and you’ll find that they are all pretty straight forward.  For now, click on “Duplicate Layer”, which will create a copy of the DeleteButtonImage we just drew.  One annoying aspect of this feature is that it also copied the layer color: click on either layer and you’ll see they are both the same.  If you create a new layer otherwise, it will be assigned a different color.  To correct this, select the newly copied layer and go back to Layer Options -> Layer Color… and assign it a new color.  Now that layer and it’s objects will use the new color.

Using Multiple Layers

One way to make use of multiple layers is to have them, well, layered on top of one another.  You would do this with a more complex example to better organize and manipulate the image.  This is of course an optional approach since you can have all your art in a single layer, but I like the flexibility discussed above.

For XAML export, though, we use multiple layers to represent multiple XAML Elements.  In our case, we are creating background images for a series of buttons, so each layer will represent each seperate image.  I want them all to have the same size, shape, and background gradient, so I am going to use the DeleteButtonImage Copy we just created to serve as my template for future buttons.  First, I want to rename the new layer to “ButtonTemplate”.  Next, I want to select the “X” art and delete it by selecting it and pressing the delete key.

All should look well right now, but it really isn’t: I want to be able to see all my buttons at once, but it appears I can only see the selected Layer.  In reality, I can only see the TOP layer: when we used the Duplicate Layer function the new layer was positioned immediately over the old layer and so all I can see is the topmost layer.  Let’s move the DeleteButtonImage layer so we can see both side by side.  Click the box on the DeleteButtonImage layer to the left of the eyeball: this should select the entire layer.  Now grab it on the artboard and move it to the side, which should reposition the entire contents of the layer. You may need to zoom out to get all the layers visible.

It’s good to mention at this point that you can also rearrange things in the Layers Panel by dragging and dropping them in the Tree.  This would not have addressed our particular concern because all it would have done was adjust the Z-Index, but this can come in handy for moving items and layers frontwards and backwards on the artboard.

If you’ve been playing along, you should now have something like this:

We need two more buttons, an Add button and a Copy/Add button.  I’ll start by copying the template 2 more times, renaming my new layers, fixing their colors, and moving them so I can see them all on the artboard at once:

Now I’ll add some art to the Add and CopyAdd button layers:

I used the same techniques from before to create the art, but as you can probably guess I copied the Add art and reused it to create the CopyAdd art.  One easy way to copy an element in Design is to hold down the Alt key and drag the element: this will create a copy of the element and drop it where you let off the mouse.  Be careful though: in this case, if you copy it over to the blank template for the CopyAdd button it will appear to be part of the button when in fact it is not!  Looking at the Layers Panel will show you that the newly created element is still within the AddButtonImage layer!  To correct this, in the Layers Panel drag it from its new home and drop it in the CopyAddButtonImage layer.  If you drop it below the “4 points” element it will be behind the background, so be sure to drop it above. And don’t worry if you miss, you can do this as often as you like.

Export to XAML

Now that we have some useful art in well named layers, let’s export them to XAML so we can use them in Blend.  In this case, we do not want to export the ButtonTemplate, so first go to the Layers Panel and click the eyeball on that layer to toggle its visibility off.  Go to File -> Export: this will popup the Export window.  On the right hand side, change the Format type to XAML WPF Resource Dictionary:

Leave the Group By selection as “Layers” and change the Live Effects option to “Convert to XAML Effects”.  Change the file name and location to whatever you want them to be and press Export All.  Your XAML file is now created and ready to go.  If you open the file in a text editor, you will see that each layer was converted to a DrawingBrush resource with the same name as the Layer which is why we want to use good names for our layers.

That was pretty simple, wasn’t it?  Now let’s put them in action!

Consuming the Resources in Blend

Open Blend and create a new project.  On the Project Tab, right-click the Project and add an existing item: navigate to the XAML file we exported from Design and add it to your project. If you go to the Resources Tab now, you should see the XAML file listed. Expanding it should show the three background images we created.  Now drop three buttons onto your artboard.  I made them squares since my art is square.

Create a Template

There are two easy ways to make the images the backgrounds for our buttons. The first way, and my preference, is to create a new template and make the image the Background of its Grid property:

1. Right-click the button (or use the Breadcrumb trail above the artboard).
2. Select “Edit Control Parts (Template)” -> Create New.
3. Name the ControlTemplate appropriately.
4. The Template will contain only an empty Grid.  Drag the Image from the Resources Tab and drop it onto the Grid: select “Background” from the popup menu. (You can also use the Brush Resources button on the Grid’s Background property and select the Image that way.)

Set the Button Background directly

Alternatively, you can use step 4 from above and drag the image directly from the Resources Tab to the Button and set its Background property to the Image.  Try both ways on the buttons we’ve created and run the application to see the differences.

I Recommend Templates

The Template approach appears to be more work: you’ll notice that you no longer have any of the typical button behaviors for IsMouseOver, IsPressed, etc.  You will need to implement these yourself.  This is easy enough to do, but beyond the scope of this article.  The good news is that you have complete control over the effects, so I would definitely prefer this method.

Setting the Background image of the Button is faster and easier, but leaves several things to be desired: first is the word “Button” in the center of the art.  Second is that the default IsMouseOver and IsPressed behaviors are still present, which means we lose our image in these states.  In order to take care of these issues, we are still going to edit templates, and I find starting from scratch much better than trying to work within the default Button template.

Here is what our application looks like with all three buttons applied:

Conclusion

I hope you can see how well Design and Blend can perform as a team.  If I was creating a suite of applications, I could now easily get a standard look and feel to all my buttons. I also now have one place to maintain them: my Design file.

I hope you’ve enjoyed this series.  Time and schedule permitting, I hope to cover more advanced drawing techniques in a future article.  If you have any questions or would like to see anything else covered, please leave your suggestions in the comments below.

At the end of part 2 of this series we had the beginnings of a new logo.  In this article we are going to learn how to edit existing art on the artboard using Guidelines and Shape editing.  We’ll also explore adding Visual Interest by using Gradients and Effects.  Here is the image we left off with:

Using Guidelines

As you can see, our cross shape is pretty rough and leaves a little to be desired.  Let’s start by cleaning that up.  First, I want to make the edges straight.  Doing this by sight requires much keener vision than I have, so I’m going to get a little help in the form of Guidelines.  Guidelines are helper objects that provide straight references, like the row and column delimiters of a grid.  They only show up during design and are not visible on the final image.  To view a guideline, you must have “View Guides” turned on.  Right click on the artboard and make sure “Show Guides” is checked.  You can also find this in “View->Show->Guides” or use the Ctrl-; shortcut as a toggle.  After making sure they are turned on, you can drag a horizontal guide from the top ruler or a vertical one from the left ruler: just click and drag out of the ruler and drop it on the artboard.  To move a guide that has already been added, use Alt-click to grab the guide.  To delete a guide grab it and move it off the artboard.  Try it out by drawing a few guides over the cross sections:

Guidelines are visually useful, but in a scenario like this we can make them even more useful by enabling “Snap To Guides”.  This will allow us to drag points and elements near a guideline and their position will automatically snap in place.   This is going to be incredibly useful for making our cross sections straight and parallel.  To turn this on, right-click the artboard and make sure “Snap to Guides” is checked.  Or, like before, you can go to the View menu and check “Snap to Guides” (Ctrl-Shift-; shortcut).  Now that the guides are all ready to go, let’s edit the cross shape.

Shape Editing

We can edit any shape by altering it’s individual points, adding points, or removing points.  To control individual points, we need to select them using the “Direct Selection” tool.  You will find it represented by the white arrowhead in the second tool group from the top of the toolbar.  You can also activate it by the shortcut key ‘A’.  Go ahead and select the tool and then click anywhere on the cross:

You will see that the shape is outlined (probably in Red since this is layer 1 – but more about this in the next article) and all the points are visible as colored dots.  You may have also noticed that somewhere on the line is also an arrow pointing the direction of the path: that is not important for our purposes, for now I just want you to know why it is there.

To manipulate a point, click it with the Direct Selection tool activated.  All the other points will change to white filled while the selected point will remain solid.  You can now move the point, wither with the mouse or the arrow keys on the keyboard.  Do this with one of the points close to the center of the cross, and when you drag it near the intersection of the guidelines you will see it jump to that point.  It should look something like this:

You can go ahead and do this with the rest of the points: drag them to the logical locations on the guidelines.  Actually, in showing this to the client (my wife), she wanted the top and bottom ends of the cross canted in the opposite direction, so you can go ahead and drag them around until they look something like this:

Skews and Rotations

So, not bad, but the cross is perfectly plumb and level while the rest of the text is italicized. To fix this, we’ll skew the cross.  Skews and rotations are easily done right on the artboard.  First, switch back to the Selection tool (the black arrow) and select the shape.  A bounding box should appear around the shape with 8 grab points (each corner and each center).  Now move your mouse over the grab points and you should see the mouse cursor change.  Over the corners you will get the rotation cursor, and over the centers you will see the skew cursor.  To affect either one of these, grab and move the cursor.  For this exercise, grab the top cursor and skew it to the right until it appears to be at the same angle as the italicized text.

For the official version, there is one other change I made to the cross. Compare the foot of the cross to the foot of the “n” next to it and you’ll see they do not match.  I want the cross to look like it fits in, so I used the Bezier tool to alter the shape of the foot of the cross to match the others.  This is beyond today’s scope, but I will cover some more advanced drawing techniques in a later article.  For now, remove (or hide) the guidelines, zoom back out and see where we are:

Adding Visual Depth

Now it is time to start adding some visual interest to our art.  There are lots of ways to do this, but Visual Depth is one of the more effective ways.  To give something the illusion of depth, we will add a few lighting tricks.  An easy way to add lighting to something is to use a gradient fill.

Apply a Gradient

Select the Ellipse background shape.  In the color manager, make sure you have the background fill button selected.  Now select the Gradient Fill button in the Appearance tab (the one with the black and white stripes).  This will probably turn your background to a black and white gradient, but we’ll fix that momentarily.  You should now see the Gradient Stop bar beneath the color pallete, and it should have a black box on the left end and a white box on the right.  When you select one of those boxes, that is the color fill you will be working with.  Select the black box and move around the color pallete until you get back to our original background color (or reset it manually to RGB 71-135-103).  Now select the White gradient stop and do the same, only this time select a lighter version of the same shade.  The trick here is to be subtle: the effect we want is of light and shadow.

Now for something cool: once the gradient fill colors are selected, you can alter how they are applied by using the Gradient Transform tool.  It looks like a big arrow and should be 2 tools beneath the text tool on the toolbar.  Select it, and then click and drag inside your artboard to apply the gradient.  Try it a few times and you’ll see that the angle, length, and placement of the gradient transform all affect how the gradient is applied.  Drag it until you have a pleasing effect of lighter green in the upper left and darker green in the lower right.

Bevel Effect

We are going to give the art some depth by adding a beveled border around the ellipse.  To do so, we first need to have a border: select the ellipse and click on the Stroke button above the color palette.  Select a golden color (I used RBG 167-167-17) and a stroke width of 25.  This will give some nice heft to the border. [Note: if you do this but still see no border, check the Stroke Style drop down under the color palette.  It is probably set to None, so try changing it to a simple line.]

At this point, we can start to play with some pretty powerful stuff called Effects.  Effects are like little built in routines that can add all sorts of goodies to our art.  Full coverage of effects is well beyond my experience, but suffice it to say that a little experimentation will be worth your while.  In this exercise we are going to use a few simple effects to really make our art shine.

With the border of the ellipse selected, you should see an Effects panel beneath the Appearance panel on the right.  In the bottom border of the panel are several icons: Click “fx->Effects->Bevel” and watch as Design applies the effect to the art.  Effects are drawn live (and in other software I have seen them called ‘Live Effects’) so it may take a second for the changes to complete.  The more effects and more complicated the art, the longer they will take to redraw: don’t panic, all is well!  Once added, you will see some options available for tweaking the bevel effect.  To match my settings, do the following: Width = 2; Contrast = .3; Softness = .6; Profile = Bulge Up; Light Angle = 142.  You will see that every time you change an effect setting, the art redraws.  If you’ve entered my settings, you should have something like this:

Drop Shadow Effect

One last thing we’ll do to add some depth is include a drop shadow on the text.  Select one of the text objects.  Go to the Effects panel and select “fx->Drop Shadow”.  Again, you can play around with the settings, but to match mine enter these values: Softness = 1; Offset = 1.5; Opacity = .6; Light Angle = 315.  Now apply the same Effect to the other Text element and the Cross shape.

Conclusion

If you’ve been following along, we should now have a pretty decent logo with some nice visual depth:

Now, I recommend that you go and play with some of these cool features!  Make some art, be wild, and have fun.  In the next installment we’ll discuss Layers and Exporting to XAML.  Until then, happy drawing!

In the first article of this series I laid out my initial impression of Expression Design.  In the intervening weeks I have spent a lot more time with Adobe InDesign which is a very impressive tool.  InDesign seems to be the easiest of all the tools to produce something real (and real fast).  InDesign is a magazine and publication layout tool, not a graphic design tool, but I thought I’d mention it because I still view all these pieces as being in the same category. To sum up my limited experience, InDesign just seems to work.  It does share a lot of the functional approach of Illustrator and PhotoShop, and so I also feel it has some of the same faults.  The most interesting thing about InDesign is that it uses file links for displaying images rather than embedding the actual link in the InDesign file itself.  This makes it easy to change art content without replacing them on the artboard.  And since it can use both Adobe files and regular image types, you can develop your images in Expression Design if you prefer.

A Quick Tour

We’ll take a quick tour of Design for starters and then begin working on a real project.  The Design experience is very similar to Blend, so if you already work in Blend then you can skim through this section.

Design has many features, and like Blend they are not always easy to find, but there are four main sections we are going to talk about today.  Here is a screenshot of Design with the main parts labeled.  And just for the record, I edited all the images for this article using Design.

The Toolbar

On the left is the Toolbar.  This is where you will find the tools used to draw on and manipulate graphics.  Unlike the Toolbox in Visual Studio, you will not see all the tools listed here at one time, and as far as I know you cannot control the layout and configuration of the Toolbar.  Some of the tools are hidden: take a look at the Pen button (4th one down) and you will see a small white triangle in the lower right hand corner.  This indicates that are more tools available in this grouping.  To see and select them, either click and hold or right click on the button.  A small pop out will appear with all the options for that tool group.  Selecting one will make it the active tool in that group and update the button on the toolbar.  You can return to the previous tool by reselecting it from the list, or if the tool has a hot key (like ‘P’ for Pen) you can select the tool using the hot key and it will automatically become the active tool in that group again.

The Artboard

The large area in the middle with nothing on it is the Artboard.  This is where you can see and manipulate the graphics.  More on this later, but suffice it to say for now that you will become intimately familiar with it.

The Properties Panel

On the right, much like Visual Studio, is a panel that holds multiple panels.  The first and most prominent of these is the Properties panel.  Like Winforms in Visual Studio, this is where you set the properties of the selected item.  The first thing you will notice is the Color Manager: this is a first rate tool that is intuitive and easy to use.  Beneath that, options and panels will appear based on the type of the selected item.  For instance, if you select a Text element a panel will appear with options like Font, Size, Alignment, etc.

The Layers Panel

I find layers to be an invaluable tool when developing graphics.  Some tools rely on them more heavily than others: for instance, in Illustrator they are largely unnecessary, but in PhotoShop they are essential (and mostly unavoidable.)  Design makes them completely optional, meaning that you can create your entire graphic on the single default layer.  You will find, however, that not only are layers great for organization, but they make experimentation a lot easier.  Also, they are essential when exporting to XAML in certain scenarios.  We’ll cover Layers in more detail in a future post, but for now you can just start chanting my Layers Mantra: “Layers are right. Layers are good. I love Layers.”  Three times an hour should suffice for now. 🙂

Doing Something Real

OK, so enough of the boring stuff, let’s use Design to actually design something.  We are going to create a logo for a new company called “Gracepoint Woodworks.”  The requirements are that it use the free video poker how to play backgammon no deposit bonus online casino 888 no download casino play roulette craps game black jack download american roulette play video poker baccarat free casino game no download online casino free money on line casino wagering roulette online online casino betting free online casino slots free craps best casino roulette gambling internet casino gambling uk best casino online full pay video poker no deposit casino code best craps game black jack tournament best online casino site craps online game newest online casino free slots no download play blackjack online free dueces wild video poker black jack gambling online video poker game free casino cash no deposit video poker tutorial play free video poker how to win at black jack casino roulette casino guide how to win at roulette rules of craps casino game online real money backgammon baccarat casino online free video poker game play free video poker video poker odds video poker tournaments Vivaldi font, two specific colors (RGB 71-135-103 for the background and 229-229-22 for the Foreground), stack the two names on top of one another, and use a cross to represent the “t” in “Gracepoint”. Let’s get started!

Create a new document in Design (File -> New) and name the file appropriately. The size isn’t all that important: since these are Vector Graphics we can scale it as needed later.  Our logo will be used in both Print and Web media, so we want the Resolution to be 300, which is the max available in Design.  Press OK to create the file and begin designing.

The black outline you see are the outer bounds of the document size.  You can always adjust your document size and resolution by going to File -> Document Size.  Just remember that the art you want to save or export should be defined within these borders.

Adding Shapes to the Artboard

We are going to give our logo an oval shape and fill it with the required Background color mentioned above.  To do this, right-click the Rectangle icon on the Toolbar and change the selection to Ellipse.  Now drag an ellipse onto the screen.  You’ll be able to see the ellipse being drawn as you drag, so you can easily control the shape and size.  Size and location don’t matter that much, but make it big enough you can place a couple of lines of text inside.  In the color manager, click on the Fill tab on the top left of the color palette. Enter the correct RGB values from above and the ellipse will now be filled with that color.

Adding Text to the Artboard

To place the Text inside, select the Text tool from the Toolbar.  Unlike Adobe, we do not draw TextBoxes: simply click where you want to type and start typing.  Since we have two lines of text, I would recommend putting each one in its own text element. Go ahead and type them anywhere on the screen.  You can then use the Selection tool to drag and drop them to the desired location.  You even get a preview outline of the text which helps with locating the object.  You can also use the arrow keys to fine tune the location one pixel at a time.

The default color for the text should be black, so let’s change that by highlighting the text and setting the Fill color of the text to the RGB value listed above.  While we have the text highlighted, go ahead and select the correct Font from the list in the Text pane of the Properties panel.  Adjust the font size in the same pane until it fits pleasingly within the ellipse.  Now we should have something like this):

For the final requirement, we need to replace the “t” with a cross.  Double click the “Gracepoint” text object: this will put you in text edit mode.  Delete the “t” and click somewhere outside the graphic.  Ha ha!  I tricked you!  You should now have a new text object where you clicked.  This happens to me a lot, so I wanted you to see it.  Since the Text tool is still highlighted it created a new Text object.  Ctrl-Z for undo will remove it.  You could select the Selection tool first to avoid this, but a quicker way many times is to temporarily override the existing tool.  You can do so by pressing Ctrl: you will see the mouse cursor change to the black arrow, so you can click outside the graphic without creating a new text instance.  This is another handy feature inspired by Illustrator.

Drawing on the Artboard

Since this is a vector graphic drawing tool, let’s do some drawing!  Click on the Pen tool to activate it, then use it to draw a cross shape near where the “t” was.  Before you do so, let me explain the Pen tool. No wait, there is too much… let me sum up. (My apologies to fellow TPB fans)

The Pen Tool

The pen tool and its related group are enourmously functional, but it would take an entire post of it’s own to give it fair treatment.  For now, I will say that there are two basic ways to use the Pen tool.  The first way is to click and release a point, then move the mouse and do it again.  This will create a straight line between the two points.  Click somewhere else and a new line gets created between the last two points.  It will also start to try and fill the as of yet nonexistent polygon: don’t let this freak you out, it will correct itself when you finish the polygon.  Keep adding points to finish your shape: when you are ready to close the polygon, place the cursor over the first point and click, which will close the polygon and correct the fill.  This is by far the simplest and will work for what we are doing in this project because our cross has all straight edges.

The second way, and the one most graphic designers will use, is the Bezier way.  Bezier Curves are curved lines between points that you manipulate with graphical handles.  They take some getting used to, but once you get a little comfortable with them you can use them to quickly and easily create virtually any 2-D shape.  To try them out, click, drag and release each point.  Your results should be … interesting … the first few times you try this.  I’ll cover more complex drawing in a future post.  For now, use whichever method you are comfortable with to create the shape.

The Eyedropper(s)

If you have created the cross it will probably have a black fill.  We could enter the same RGB values we did previously in the same manner to get the same color, but instead we’ll use this as an introduction to the eyedropper tool.  Actually, there are two eyedroppers we can use.  There is an Eyedropper Tool on the Toolbar.  Activate it and hover the mouse cursor over any color on the artboard.  When you are over the color you want, drag the color to the object you want to apply it to and drop it on the object.  This is pretty cool and easy, but undo that and let’s look at something even cooler.

With your object selected, find the small eyedropper icon in the lower right hand corner of the Color Pallette.  Click on it and drag your mouse around the screen.  Watch in amazement as your object fill immediately takes on the color of whatever object you hover over.  In fact, one huge difference between the two is that with this tool you can hover over anything on the entire screen, including the desktop and other applications!  To apply a color, click where ever the mouse happens to be at the time.  This will also revert your tool back to the previous selection.

Where We Are

If you’ve been following along, you should have something similar to this (I’ve zoomed in on mine – notice there is no pixelation or loss of clarity:

Not bad for only a few minutes work.  Of course, it isn’t ready for delivery just yet: there are lots of improvements left to make to our logo.  Next time we will clean our logo up some and see if we can’t add a little graphical goodness.  In the meantime, dive in a little and see what you can do, but I warn you: it can be seriously fun and addictive.

This is the first in a series of articles intended to introduce Expression Design to fellow Developers.  If you are a professional Designer or Graphic Artist, then I humbly ask that you keep your snickers and chortles to a modest volume, and guffaws are right out.

I’ve had Expression Design for over a year now, and short of a few simple tasks, like cropping an image, I really haven’t spent much time using it.  One reason is that I am not a graphic designer, so I didn’t really understand what I was seeing our how to use most of the tools.  To remedy that, I have been taking a Computer Graphics class, which I have really enjoyed and has taken me a long way down the road of understanding graphic design and graphics software.  (But I am still not a graphic designer.)

Now that the class is drawing to a close (and because I promised the professor I would give a presentation to the class on Expression Studio and software design as a career option), I am ready to start diving a little deeper into Expression Design.  In the class we have learned and used barely scratched the surface of Adobe Illustrator, Adobe Photoshop, and Adobe InDesign: the short experience I have had with these is the only frame of reference I can provide, so take any and all judgements and comparisons with a large grain of sea-salt.

First Impressions

My first impressions are a little tainted because I have used Expression Blend heavily for the last year or so.  This makes the interface for Design a little more intuitive for me than it will someone who is new to Expression Studio.  The Design interface is very similar to Blend, with tools on the left and properties on the right.  If all you have ever used is Visual Studio, then the good news is that the property manager will come to you quickly: select an element and use the property editor on the right hand side of the screen to make changes.  As you might expect, the available properties change based on the type of the selected element.  The bad news is that unlike Visual Studio, you cannot collapse this panel.  You can make it smaller or larger by changing the “Workplace Zoom” (Edit -> Options -> Workspace), but once rendered on the screen you can only make it wider by dragging the splitter.  The good news is that, unless you are working on a severely limited monitor resolution, you really don’t need to change it.  The thing to remember here is that, like Illustrator and Xara Xtreme, Design is a Vector Graphics tool, so you can easily scale your artboard down to a visible size, or up to incredible detail, with no loss of resolution.

NOTE: Design is a Vector Graphics tool, like Illustrator.  I will mention Photoshop below, but really only for UI and tooling preferences, and not as an attempt to equivocate Design with Photoshop.

Things I like

The interface is consistent with Blend.  While Adobe has tried to maintain consistency between its products, I keep finding nagging things between Illustrator and Photoshop that don’t really work the same.  One simple example is Font selection: in Illustrator, if you install a new font it is immediately available to you, but in Photoshop you have to close and reopen your project to see the new font.  This sort of issue isn’t a deal breaker by any means, but it seems that Microsoft has done a better job of maintaining consistency between the two products.

The Color Manager is easy to find (read “unmissable”) and easy to use.  Applying colors to anything is done directly on the main window and the effects are immediately visible – no “preview” checkbox or waiting for rendering.  All of the Adobe products pale in comparison in this area, one that I think is kind of important to Graphic Designers.  In fact, they seem to go out of their way to make coloring difficult.

The Gradient capabilities are slick.  They are part of the above Color Manager, so the same benefits apply.  If you think dealing with Color in Adobe is a pain, try handling gradients!  Both Blend and Design absolutely humiliate Adobe’s products in Color and Gradient management.

Design has a very clean appearance.  The dark meme actually has a purpose: it provides a very nice visual frame for the art board and prevents it from getting washed out.  All of the Adobe products have way too many visible tools, buttons, and options.  The top area constantly changes based on the tool you select, which can be frustrating when you expect to find an option on the screen and can’t. Overall, Adobe products just feel cluttered.

Right-click on the Tool buttons to see the optional selections.  I know it sounds trivial, but in Adobe you have to click and hold to reveal the selection list.  Expression’s method is faster and requires less effort.  You can still press and hold in Expression, but the wait time is much smaller, so it is still better.

Draggable value elements.  You can simply drag any numeric value and drag it left/right, up/down to change it.  And again, the result is immediately shown in the artboard.  And since all the properties are shown right on the main window, there are no secondary pop ups to manage.  Overall, it makes changes much faster and more intuitive, especially for rough work. You’ll probably want to use the keyboard for fine control.

Keyboard shortcuts.  If you use any of these products then you must master keyboard shortcuts.  They save an enormous amount of time and just make your life a lot easier.  I was pleased to find that Microsoft stole borrowed many of the most popular shortcuts from Adobe.  I’ll be introducing the most valuable shortcuts to you in the next article.

Mouse Transforms.  And by this I mean resizing, skewing, rotating, etc.  For anything beyond resizing, Illustrator just feels more cumbersome.  And it’s a lot worse in Photoshop, where you have to turn on the Transform tool, make your changes, and then press Enter to accept the changes.  In Expression, you select the object and then use the mouse to do these actions right on the artboard.

Layers.  I really prefer the way Design handles layers: the manager is simpler and always visible.  Like Illustrator, creating and using Layers in Design is an active choice, and one I whole heartedly recommend (for either product).  Design does offer a few more options for Layer management, but nothing earth shattering.

Things I don’t like

I love every thing!  OK, just kidding: even I’m not that much of a Fanboy … or am I?  I actually did have trouble coming up with stuff I didn’t like.  I know familiarity with Blend has a lot to do with it: if you don’t have that, then you are likely to feel just as confused in Design as you would in Illustrator, I know I was at first.  But even taking that into account, I just find things easier to do and less complicated in Design.  Let me reiterate though that this is no replacement for Photoshop, which is an awesome product.  It would be nice to see Microsoft deliver a Photoshop competitor, but for now I guess they’d rather give Paint a facelift.  I’m sure as I get more familiar with Design I will find stuff to harp on, but for now the list is short.

Illustrator is a very mature product.  There are a great many features and capabilities in Illustrator that are not available in Design.  I won’t list them here or even pretend to understand them all, but I can tell that a seasoned Graphic Artist will probably find some items missing.  Since we are Developers, though, we don’t *really* care that much 😉 .  I’m sure that future releases will continue to add functionality.

When you drag an Image into Design, the artboard zooms in until the new image is full size.  This is not the same behavior as Importing an Image, which leaves the artboard alone and displays the image in its relative size.  I greatly prefer the latter.

I’m sure there are other things, but my limited knowledge of Illustrator is preventing me from really seeing them.  I’d love to hear your thoughts in the comments.

Until next time

With the limited training I’ve had, and the exposure to Blend, I do think I’m ready to start using Design to produce art for my applications.  Complex gradients, irregular shapes, awesome buttons, and pleasing backgrounds here I come!  Join me next time when we’ll start learning how to go about doing something productive in Design.

I had a case today where I wanted to crop an image, something I haven’t needed to do in some time.  In fact, the last time I had to do it was on my previous computer which had several graphics programs installed.  This time, however, the only application I have installed on this machine is Expression Design 2.  I remember seeing the feature I was after in some training videos, so I thought I should be able to figure out quickly enough.  Unfortunately, it didn’t work as I remembered.  On the other hand, I found a pretty quick way to do simple cropping so I thought I’d share that.

First things first

Obviously, we need an image on our artboard, so I opened an image in Design:

I want to cut this down to just a head shot, but I can’t find a simple crop tool.  In my graphics class I’ve noticed that Illustrator suffers from this deficiency as well.  I’m sure it is because eof the vector orientation of these tools, but it seems to me it would be a standard feature.

What I remember from the videos is that I should be able to draw a rectangle over the image, denoting the crop location, select both objects, and perform an Intersection (or something like that), leaving only the cropped image behind.  Unfortunately, when I tried that the “Path Operations” options were disabled, so I must have been doing something wrong.  I stumbled around for a couple of minutes when I found something that worked: “Create Image Object.”

Create Image Object

Under the Object menu is a popout menu called “Image”.  This is where you’ll find the “Create Image Object” option:

Now drag a rectangle around the area you wish to retain.  Here’s the bad news: you only get one shot at this.  You can’t drop the rectangle and then tweak it, it has to be right immediately.  When you drop the rectangle, you will be prompted for the DPI of the new object.  The default is 96, which is the default WPF resolution (for lack of better terminology), so I just left it at that.  If you plan to print or need to retain really high quality, bump this up to around 300 DPI.

Save the Cropped Image

At this point you should see a rectangle on the image outlining the new Image object:

In fact, it IS the new Image object.  To prove this, just drag it to another part of the artboard:

Now, to save the cropped version of the Image, make sure just the new Image object is selected and go to File -> Export:

“Selected Objects” will be checked by default, so we are only dealing with the new Image object.  Change the Format, File Name, and Location to your desired parameters and press “Export All”.

Now you should have a quick and dirty cropped image.  I won’t use this all the time, because I can’t adjust the crop area, but for simple work like this it gets the job done quickly and easily.  Oh, and for the record, I did all the screen shots in this post using Design as well.