Archive

Archive for the ‘Expression’ Category

Expression Studio 4 Released

June 7, 2010 4 comments

Today, Microsoft released Expression 4, a suite of products for designing and building graphics, web sites, video, and WPF/Silverlight applications.  If you’ve ever seen me speak at a Code Camp or User Group, then odds are you’ve heard me talk about Expression.  Most of my use has centered around Blend, but I have done some work with Design and more recently with Encoder.

I’ve been working with Expression since Version 1, and I’ve truly enjoyed it: Expression made me better at what I do: create applications.  I’ve also had my share of complaints, but most of those center around Microsoft’s handling of the Expression Studio in general.  I’m both happy and a little annoyed this time around, so I thought I’d share some of my feelings, complaints, and suggestions.

The Good

First, the good news is in the pricing.  Last time I was a little miffed at the upgrade cost.  I’d like to point out that I was never upset at having to pay for the tool, but the things that really got under my skin were removing Expression Studio from MAPS and then forcing me to upgrade the entire Studio.  With Expression Studio 3 they removed the option to buy the tools individually.

While you could buy a package that included everything BUT Blend, apparently someone at Microsoft thinks I can’t make use of Blend without Web, Design, and Encoder.  So the most valuable tool in the Studio, by far, is the one with the most limited (and least acceptable) purchasing options.  So I was forced to purchase an upgrade of the entire Studio when all I wanted was Blend 3.

So that was my rant last time, and unfortunately some of it is still true: you just can’t get Blend without buying the entire Studio.  The good news, if you already own Studio 3, is that the upgrade is FREE.

If you go to the Upgrade page you’ll see this helpful text:

How To Upgrade

If you purchased Expression 3 from a store, download the trial of Expression Studio 4 Ultimate or Expression Studio 4 Web Professional. Provided you have Expression 3 installed on that computer, the full version will automatically be enabled. Owners of Expression Web 3 can upgrade for free to Expression Studio 4 Web Professional and owners of Expression Studio 3 can upgrade to Expression Studio 4 Ultimate.

Great!  This means I can upgrade for Free.  You cannot purchase any of the packages yet, all the buttons say “Buy Coming Soon”.  They also list the “Estimated Upgrade Price”.  They really shouldn’t call this an upgrade, instead it should be some kind of a discount, because it is not limited to previous ownership of Studio.  Both the main packages allow purchase at the upgrade price to “Any Adobe Creative Suite product”.  That is a great idea! 

Upgrade pricing is also available for Expression 1 and 2 users: the site states “Any Microsoft® Expression product”.

The Changes

The new breakdown of Expression products has been renamed to align with the rest of the Microsoft Universe.

Expression Studio Ultimate – the everything version:

  • Blend
  • SketchFlow
  • Web with SuperPreview
  • Encoder
  • Design

You are also eligible for Upgrade Pricing to Ultimate if you have Visual Studio 2005 or later.  I’m glad they are finally making some step towards developers, but it’s not enough (more on that later.)

Expression Studio 4 Web Professional – for web developers, as long as you don’t include Silverlight in “The Web”:

  • Web with SuperPreview
  • Encoder
  • Design

You are also eligible for Upgrade Pricing to Web Professional if you have Any Microsoft Office product.

Expression Encoder 4 Pro – OK, so I correct myself: you can buy one product by itself, which is great if all you need to do is encode video.   In fact, it’s such a great idea, they should make it available for the rest of the products in the Studio!  Oh, and is Expression Encoder 4 Pro any different than the version included in the previous two versions of Studio?  If not, why isn’t it listed as “Pro” in the previous packages?

And check out the “Which Product is Right For Me?” option on the page.  It’s a Silverlight Application – I’ll bet the designer of this Web site had access to Blend!

The Confusing

There is one particularly confusing thing on the web site at the moment:

The Ultimate Development Resource, including tools for designers

A MSDN Subscription offers you access to virtually all of the Microsoft products you need to design, develop and test your next app. Expression Studio 4 is now available through a MSDN subscription. Expression Studio 4 Ultimate is included in the Ultimate level subscription and the Premium level comes with Expression Studio 4 Premium.

Check out that last statement: “the Premium level comes with Expression Studio 4 Premium.”  What the heck is Expression Studio Premium?  If it’s not more than a typo, then I’d like some clarification please.

My Rant

What gives with requiring MSDN Premium?  Why not include it with Professional?  Why are we still holding developers back from getting their hands on Blend?  I’ll tell you why: Microsoft hasn’t figured out that the long term market for Blend is NOT Designers: it’s Developers.  This incorrect attitude is evident in statements like the one above labeling Expression as “tools for designers”.

I make no bones about my opinion on this matter: I think Blend should be bundled with Visual Studio Professional and higher.  Not the whole Studio, just Blend.  Unwillingness to purchase yet another tool is one of the main obstacles I encounter in my Blend Evangelism.  They think Blend isn’t for them – if it was, Microsoft would give it to them.  If it was for them, it would be built in to Visual Studio, because THAT is for developers.

Instead, we hold it just out of reach for many developers.  There are lots of shops that can’t afford to subscribe to MSDN Premium or Ultimate – mine is one of them.  Fortunately, mine is willing to invest separately in Expression: most aren’t.  And truthfully, the only reason they are willing to pay for it now is because I initially got Studio 1 and 2 as part of MAPS.  This gave me free time to experiment with the tool and prove it’s usefulness.  If we were just starting today it may have been a different story.

For now, the good news is we’ve gotten those developers a little closer: they can buy the Studio at the Upgrade Price.  It’s a good start, but I think if we really want adoption to increase, we need some other options.  If we can’t have Blend as a companion to Visual Studio, then at least have the ability to buy Blend as a stand alone tool, preferably with a stand alone price tag.

Categories: Expression

XAML Formatting in Visual Studio

May 7, 2010 1 comment

A question came up last night at RVNUG about manually editing XAML, something I avoid as much as reasonably possible.  When I have to edit XAML though, I almost always jump over to Visual Studio, so I was asked why I prefer to edit XAML in Visual Studio over the Blend editor.  Besides the fact that I’ve always just done it that way because originally we did not have Intellisense in Blend, I have two other reasons.

The first reason is that I use Blend to write XAML and Visual Studio to code XAML.  It sounds like splitting hairs, but let me explain.  Blend is the best darn XAML Editor ever written, primarily because it allows me to write and edit XAML without actually typing the XAML.  It magically translates the design I have on the screen into it’s XAML representation: that’s what makes it so awesome.  When I find a situation where I actually need to code the XAML and make textual changes to it myself, then I use Visual Studio, because it is the best darn Code Editor ever written.  To sum up: Design = Blend, Code = Visual Studio.

The second reason is far less highbrow: I dislike the default XAML formatting that Blend produces.  Don’t get me wrong, the XAML code itself is wonderful, almost pristine, but it compresses it to as few lines as possible.  That means lots of properties on a single line, which becomes an issue when you have a bunch of properties full of Binding references and more complicated structures.  So my preference is to see one property per line in the XAML.  This makes it much more palatable on those rare moments when I must code the XAML manually.

Setting up Visual Studio

I saw the question today on the Expression Blend forums about how to get Blend or Visual Studio to do exactly that, so I thought I would put up a quick post for the archives.

While Blend cannot format the XAML in this fashion, Visual Studio can:

  1. In VS2008 or VS2010 go to Tools –> Options
  2. Expand Text Editor -> XAML -> Formatting –> Spacing
  3. Under "Attribute Spacing" check "Position each attribute on separate line".
  4. If you prefer, you can also put the first attribute on the same line as the tag by checking the box.  I use this setting because it isn’t offensive and still saves a little space.

Now, whenever you edit XAML in Visual Studio, press "Ctrl+K+D" and Visual Studio will reformat the XAML as desired. 

Enjoy!

Categories: Blend, Visual Studio, XAML

Buying Expression Studio 3

August 6, 2009 Comments off

I think Expression Studio 3 is now available: the website has switched from "pre-order" buttons to "buy" and "upgrade".

Kevin pointed out that MSDN is the way to go, which I agree with if it is an option, but I have Visual Studio Professional with MSDN Professional, which is $1,199: Expression doesn’t become downloadable until you have Visual Studio Professional with MSDN Premium which is $2,499. It’s just not worth it to me to spend an additional $1,300.

Studio Pricing

Expression Studio 3 costs $599 for the full version or $349 for an upgrade.  If you don’t have MSDN or anything like it, they have a good deal going though with "Expression Professional Subscription":

  • Expression Blend + SketchFlow
  • Expression Web
  • Expression Design
  • Expression Encoder + IIS Smooth Streaming
  • Visual Studio® Standard
  • Office Standard
  • Office Visio® Professional
  • Windows® XP
  • Windows Vista® Business Edition

All for only $999. I wonder if they’ll include Windows 7 now that it’s RTM?  And what happened to Expression Media?  It is no longer listed on the site.  No loss for me since I never used it, but I am curious.

Microsoft Action Pack Subscription

Through the Partner program, I was getting Expression Studio 2 via our Microsoft Action Pack (MAPS) subscription (specifically as part of the web solutions toolkit).  With MAPS I have to wait until they ship it to get the software, so I emailed the MAPS team the other day and asked if they knew when it would be available but they said they were not sure when the product would be released.

Today I checked the MAPS information online and they are now only advertising Expression Web, Design, and Encoder.  So it looks like I’ll probably end up buying the upgrade.  I’m a little surprised I can’t just update Blend, but apparently they aren’t selling the pieces individually except for Expression Web.

I’ve said for sometime that Microsoft should be giving Blend away if they really want to promote the adoption of WPF and Silverlight.  I wonder how many developers are sticking with Visual Studio because they don’t have access to Blend?

UPDATE:

The Luddite Developer is talking about this as well.  Seems he is in the same boat as me as far as MSDN goes.

I tried to call the MAPS team yesterday to get clarification on whether or not Expression Studio was going to continue to be part of MAPS, and also an update on when Expression 3 might ship.  The phone number given to me by Microsoft -I had called MSDN earlier and been given the number – had an interesting message:

“The number you have dialed has a new national directory service. For a charge of $3.79 please dial this new number …”

You want what?  You want me to pay to dial a new number?  Wow – if this was a rant I could fill it up… either MSDN gave me a bad number or MAPS is now charging for the privilege of calling them.

Categories: Expression

Is The Blend 3 Trial Worth The Download?

August 4, 2009 2 comments

If you’ve spoken with me at any time over the last year at a technical conference or User Group you’ll know that I can’t go more than a few minutes without mentioning Microsoft Expression Blend. 

I was first introduced to WPF in 2006 and I was stunned by the results.  I couldn’t wait to try it myself, but at the time all I saw was XAML, and frankly I had no desire to develop business apps in markup.  Fortunately, in 2007 I saw Blend 1.0 and the flood gates opened: I had to have it, and I soon did.  Since then I have become a Blend evangelist.  It is my mission to preach the rich chocolaty goodness of Blend to all the people of the land.

OK, that may seem overkill, but in all honesty I cannot see developing WPF or Silverlight apps without Blend.  If I had to code strictly in XAML I would still be a Windows Forms developer.  Don’t get me wrong, plenty of people have done meaningful work without Blend, but I would never be one of them.

Is the Blend 3 trial worth the download?

Naturally, Blend is my current topic of choice for presentations, and I get plenty of questions about Blend from fellow developers.  This morning I received a question that I thought deserved sharing:

Are the blend 3 features worth the trouble of installing the trial version? Or wait for the official release?

This is a great question!  The requestor is currently using Blend 2 and wants to know if the updates from Blend 2 to Blend 3 are so awesome that they must have them now, or can they wait until GA.

My answer is, in typically non-committal fashion, “it depends.”

If you are dabbling with Blend and WPF or Silverlight 2, then you do not need to rush out and try Blend 3.  Don’t get me wrong, you could still benefit from it, but I wouldn’t consider it urgent.  You can wait for the RTM. 

[NOTE: If you are working on Silverlight 2, be sure to read all the warning labels before moving to Silverlight 3: you can’t go backwards once you install the Silverlight Tools for VS 2008.  In your case, you need to wait for VS2010, which is supposed to allow both environments.]

If you are a dedicated WPF or Silverlight developer/designer, by which I mean the bulk of your projects fall into one of these two categories, then by all means you should be using Blend 3 already.  You can install Blend 3 alongside Blend 2 with no ill effects. 

My Favorite Features

I spend a great deal of my time in Blend, and now even more so with Blend 3.  Here are the list of features I use the most in Blend 3:

  • Vastly improved Data tab (including SampleDataSource and easier databinding)
  • VSM for WPF (mostly built in, still need to add a reference to WpfToolkit.dll)
  • Artboard integration is finally usable – you can actually click on
    the element you want to use
  • The BreadCrumb makes working with Templates a lot easier
  • Code Editor – now you can edit C# inside Blend, including Intellisense.  I don’t advocate it for serious coding, but simple changes and events are quite feasible

There are probably more, but these are the ones that seem to most enhance my daily experience.  There are, of course, some bigger fish to fry that I have yet to really take advantage of like Behaviors and SketchFlow.

Conclusion

If you are in a position to do so, I would try Blend 3.  Trial downloads of Expression Studio 3 are available for 60 days, and pre-order purchasing is currently available.

I’ll be writing more about these features in future posts.  I’d like to add some Video Tutorial too, so feel free to leave requests in the comments below.

Categories: Blend

Expression Design for Developers part 4 – Using Layers and Exporting to XAML

June 24, 2009 2 comments

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:

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:

design-layout

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:

DeleteButton

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:

Image2

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:

Image3

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

Image4

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:

ExportToXAML

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:

Final

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.

Categories: Design

Expression Design for Developers part 3 – Editing Your Art

May 28, 2009 2 comments

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:

Logo With Cross

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:

settingguidelines

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:

directselection

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:

pointmoved

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:

crossreshaped

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.

skewedcross

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:

logowithcross1

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.]

borderbeforeeffect

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:

borderafterbevel

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:

finallogo

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!

Categories: Design

Expression Design for Developers part 2 – A Quick Tour

May 1, 2009 1 comment

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.

design-layout

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.

newdocumentwindow

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.

emptyartboard

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.

greenbackground

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):

yellowtext

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:

logowithcross

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.

Categories: Design
Follow

Get every new post delivered to your Inbox.