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;
- Knock up some graphics in Design.
- Either save them as .PNG if that's going to work for me or export them as XAML.
- Maybe bring them into Blend if I want to add animation but, otherwise, not.
- 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.


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.


3) Vectors mean endless opportunity for tweaking.
Taking a marvellous work such as the one that I just produced below;
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;


and I can go back to my pen

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.
Adding a piece of text to my image and sizing it;
I can then play with the stroke for the font and the fill of the text to make it a little fancier.
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;
So, now if I want to really play around with this thing then I can alter the vectors that make it up;
(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.
6) Copying as XAML
Fantastic for working with Silverlight. Draw what you want, hit Copy and XAML and head over to VS! :-)
7) Clipping Paths
Insert a piece of text into the scene such as the word Trees below;
Convert this into a Path;
I think this gives you a group so ungroup it (right mouse menu) and then convert to a compound path
Now insert an image into the scene;
and now use the Trees path to clip the image behind it;
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);
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;
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).
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.
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