Mike Taulty's Blog
Bits and Bytes from Microsoft UK
Expression Design, Expression Blend & Silverlight V1.1
Mike Taulty's Blog

Mike's Badges

Follow on Twitter
View mike's profile on slideshare
Add to Technorati Favorites
CW Blog Awards

I've been doing a bit of "work" in Silverlight V1.1 as you might have spotted from the posts that I've been making here and I've found myself using Expression Design a lot more than I ever thought I would given that I'm a developer and not a designer (I guess some might argue that I'm not a developer either any more but perhaps I'd like to be sometime again in the future so I still try to think of myself that way :-)).

Expression Design is really cool once you get a little used to it and has a lot of power that's not so obvious when you first run it up. I've been finding that, generally, what I've been doing is;

  1. Knock up some graphics in Design.
  2. Either save them as .PNG if that's going to work for me or export them as XAML.
  3. Maybe bring them into Blend if I want to add animation but, otherwise, not.
  4. Take the XAML/PNG from Design (and/or Blend) and copy-paste it into VS in the XML editor.

I've found that works reasonably well with a bit of manual fixing-up afterward (e.g. perhaps naming something that you didn't know originally needed naming and so on).

To encourage you to give Expression Design a try I thought I'd write up my top 10 favourite things in it right now.

1) Import a Bitmap, Convert it to Vectors

Use File->Import to bring in a .PNG file (e.g.) as on the left image below.

Then, use Object->Image->Auto Trace to produce paths representing your image (you'll need to play with the colours I reckon).

You end up with vectors, as on the right image below. Very cool - you might be needing to simplify those paths though at a later point because those paths get complex very quickly.

imageimage

 

2) Draw in vectors, select lots of fancy brushes to hide your dodgy art-work.

Grab a pen or a brush using the brush/pen icons on the bottom left, here.

Switch over to the properties panel to select a nice colour, width and one of the stroke effects (including images), as shown in the middle below here. 

Now, go for it either using the rather fancy bezier drawing mechanisms that Design offers you with control points for your curve or just going a bit free-form with a brush. Either way you'll get vectors as below right.

imageimageimage

 

3) Vectors mean endless opportunity for tweaking.

Taking a marvellous work such as the one that I just produced below;

image

The fact that I just took a brush and scribbled with it doesn't matter. It's a Path object and I can manipulate it endlessly using the various pen and selection tools. I can use the direct selection tool to manipulate points; 

imageimage

and I can go back to my pen

 

image

and add more and more anchor points (or remove them) until I've got what I want.

4) Playing with Text

The fancy strokes and fills that I can apply to paths and polygons also apply to text.

image

Adding a piece of text to my image and sizing it;

image

I can then play with the stroke for the font and the fill of the text to make it a little fancier.

image

So, sure, I didn't spend a lot of time on it - I just applied a radial gradient fill from red->orange->yellow and then picked a 12px stroke done in black with a reasonably fancy brush but the fact that I can do this at all is good to me :-)

I can then take my text and convert it into a vector path;

image

So, now if I want to really play around with this thing then I can alter the vectors that make it up;

image

(that was meant to be a sort of melting effect).

5) Uniting and Dividing Vectors

I love this stuff. We have the ellipse and the circle and we can unite them, subtract them (in different ways), intersect them and divide them in order to produce new paths quickly. This might seem trivial but if you're looking for odd shapes to place over other visuals in your scene (such as videos) then it's fantastic.

image image image image image image

6) Copying as XAML

Fantastic for working with Silverlight. Draw what you want, hit Copy and XAML and head over to VS! :-)

image

7) Clipping Paths

Insert a piece of text into the scene such as the word Trees below;

image

Convert this into a Path;

image

I think this gives you a group so ungroup it (right mouse menu) and then convert to a compound path

image

Now insert an image into the scene;

image

and now use the Trees path to clip the image behind it;

image

image

Bingo! You can use any path to pretty much clip anything and, yes, you can make this work quite nicely with video whether you start with text or some other odd shape that you happened to draw. (Note - I added a nicer stroke to the text and thickened it up a little as well).

8) Effects

Effects live over over in the effects "palette" (no idea what the right terminology is here but it looks like this);

image

and you click that little Fx button to apply them and you can get some really nice variations (I guess there's about 50 different options over there and once you've applied an effect you can then tweak its various parameters). Some examples of that forest image with some effects applied;

image image image image image

You can have hours of fun with these - I really like the paint effects that you can get here.

9) More Text - Text on a Path

Draw a path. Draw some text. Put the text onto the path (yes, there's a menu option that does just that).

image

10) The Help File

Who wrote this? Can they be paid to write MSDN developer documentation? It's clear. It's concise. I can use it to get stuff done really quickly. It (and Blend) have two of the best help files I've seen in a long time.

image

That's my list of 10 things that I think are good with Expression Design. Hey, I like Blend too but (for Silverlight rather than WPF) I've found that I've spent more time in Design than in Blend.


Posted Mon, Aug 13 2007 5:10 PM by mtaulty

Comments

Jason Haley wrote Interesting Finds: August 14, 2007
on Tue, Aug 14 2007 6:47 AM
WynApse wrote Silverlight Cream for August 17, 2007
on Fri, Aug 17 2007 4:37 PM
Silverlight Cream for August 17, 2007
Mark Johnston's Developer Experiences wrote A little blog redirection
on Tue, Aug 21 2007 12:41 PM
I've been umming and ahhing about what to do with this now that I have changed roles and no longer getting
Noticias externas wrote A little blog redirection
on Tue, Aug 21 2007 1:19 PM
I've been umming and ahhing about what to do with this now that I have changed roles and no longer
(C) Mike Taulty, 2009. All rights reserved. The information in this weblog is provided "AS IS" with no warranties, and confers no rights. This weblog does not represent the thoughts, intentions, plans or strategies of my employer. It is solely my opinion. Inappropriate comments will be deleted at the authors discretion. All code samples are provided "AS IS" without warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability and/or fitness for a particular purpose.
Powered by Community Server (Non-Commercial Edition), by Telligent Systems