Archive

Archive for the ‘Expression’ Category

Expression Design for Developers part 1 – First Impressions.

April 17, 2009 1 comment

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.

Advertisements
Categories: Design

Must have Expression Add-ins

February 11, 2009 Comments off

Josh Holmes recently posted a list of Three Essential Expression Add-ins.  I didn’t even know there were such things, although I can’t say I’m surprised.  One of the Add-ins is XAML Intellisense for Blend, which I was recenlty told by a friend is supposed to be part of Blend 3.  Another one is called “Colorful Expression”, which provides access to Color Swatches available on the Internet.  I don’t know if they have it yet, but wouldn’t it be great to be able to export an entire swatch to a Resource Dictionary?

Apparently the Blend Add-in utility is not very user friendly, something I hope changes with Blend 3, but Josh does a great job of walking us through the nasty bits.  I can’t wait to try it myself.

— Hat tip to @adkinn on Twitter for posting this link.

Categories: Expression

Simple Image cropping in Expression Design

February 9, 2009 4 comments

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.

Categories: Design

WPF Visual State Manager

November 7, 2008 3 comments

Last night at RVNUG, a friend of mine pointed me to The WPF Toolkit. The toolkit is a collection of controls and features that extend the current WPF offering from Microsoft. Chief among these is the DataGrid control, but something more appealing caught my eye: Visual State Manager.

Basically, the VSM is a very easy to use feature of Blend 2 SP1 that supports Silverlight 2. It allows the developer to easily set the visual state of user controls and control templates based on the current state of the control, such as MouseOver and Pressed. I had seen this when I was exploring Silverlight 2 in Blend 2, but I’ve been focusing on WPF and was curious as to why I didn’t have the same functionality I had seen in Silverlight. Of course, now I know: VSM is currently only included as part of Blend 2 for Silverlight 2 development. But, if you install the WPF Toolkit and follow the instructions in the link above to update your Registry, you can gain access to the same basic functionality for WPF Applications.

Using VSM in WPF

Previously, these state changes could be accomplished using Storyboards and Timelines, and then assigning their beginning and ending to Triggers. The Timeline tool in Blend is robust and feature rich, but I think for a non-graphically oriented developer it can be more than a little daunting. And it seems to be overkill for simple animations. That’s where VSM comes in: it greatly simplifies the task of adding small animations to element states.

The Silverlight implementation is very nice and intuitive right out of the box: the states are already defined and all you have to do is activate one and make your changes to the art board. Unfortunately, the current version for WPF is not as straightforward. In WPF, once you have the State manager visible, you have to create the State Groups and define the Visual States you wish to modify. Once I figured out what was going on, this is not painful by any means, but it took some trial and error to get it working right. Don’t forget to add a reference to %Program Files%\WPF\WPF Toolkit\…\WPFToolkit.dll to each project in which you wish to use VSM.  Trust me, it will save you a lot of heartache!

So first things first, we need something that VSM can interact with. Since VSM cannot be applied to the default template of a control, we need to create our own. For this article, I created a button and then created an empty template. Once you create the template, either by ‘edit a copy’ or ‘create empty’, the States Manager will appear under the Triggers Manager on the left hand pane. At this point, the only item visible in the States Manager is Base. You can go ahead and create the default look of your template at this point.

Set up the State Manager pane

To begin with we need a Visual State Group to hold our Visual States. In the Top Border of the States Manager pane on the far right side is a small icon with a plus sign on it. Hovering over it will reveal that this is the “Add state group tool. Pushing it will create a new Visual State Group header under Base. Click on the title (VisualStateGroup) and rename it as you see fit. I’m not sure that the group names matter, but to be on the safe side I followed the same scheme that Silverlight reveals and called my first one “CommonStates”.

Now that we have a group to hold our collection of Visual States, we can start adding states. On the CommonStates header bar is another icon with a plus symbol: this is the “Add state” button, so press it to add a new state. Rename VisualState to the desired state. The state names do matter if we are to get the desired result, so I added three typical states: Normal, MouseOver, and Pressed.

Altered States

Now that we have all the missing pieces defined, we can use them just as we do in Silverlight 2. Clicking on the desired state in the State Manager pane will turn on State Recording [as indicated by the red border around the art board and the header message “State recording is on”]. Now you can easily adjust the display elements of the content to whatever you want them to be at that particular state. A classic example would be brightening a button on MouseOver.

When you are done editing the visual elements, click on Base in the State Manager pane to exit state recording mode. It is important that you do this, because otherwise you could easily alter just a given state when you think you are altering the control template itself. Take it from me, this is very frustrating when you do not receive the results you expect. And then, of course, to correct it you need to back all of your changes out and reapply them outside of state recording mode.

Adding transitions

If you have done all of the above, your button should be changing its visual appearance when you mouse over or press the button. You may think this is the end, but wait, there’s more! Leaving it as above will force the change from one state to another to happen immediately. While we have become accustomed to such UI, it is not the most pleasing effect. Instead, users react much better to very slight, more realistic animations. In other words our users will find our software more appealing if it takes a little time to change from one state to another. These quick, smooth changes from one state to another are very short and simple animations called “Transitions”.

To add a Transition, find the Visual State (such as “MouseOver”) in the State Manager pane and look to the right side of the header bar. There you will find an arrow icon adorned with a plus symbol (notice a pattern developing here?) Click on that and a helper window will appear with a collection of Transitions you can modify. In my case, I chose the two with the ‘*’. The one with the * on the left side indicates the transition from any other state to the selected state, and the one with the * on the right indicates the transition from the selected state to any other state.

Clicking on the desired Transition will add it beneath the selected state. On the Transition you will find a text box that lets you enter the desired amount of time you wish the particular Transition to take. The available range is 0 to 1 second. It doesn’t take much for our Transition to have the desired effect, so try .1 or .2s at first to get the feel for it, then adjust as you desire.

Conclusions

Now when you run your project, you should detect the pleasing effects of Transitions. Overall, I find this much much easier than Storyboards and traditional animations. I’m sure that eventually the tooling for WPF Applications will improve to match what is in Silverlight, but overall it is a minor complaint. I want to thank the CodePlex guys for letting us in on this great secret!

Categories: Blend, WPF

My first real WPF and Blend 2 application

October 21, 2008 Comments off

I’ve been familiar with WPF since December 2006 and the release of C# 3.0, and I’ve had Expression Suite installed for almost a year. While I’ve toyed with it here and there, I have never devoted the time and effort necessary to really begin to become proficient.

However, since last week’s Silverlight 2.0 release, I have been burying myself again in learning new technologies. I finally decided to take the plunge, so I installed Silverlight 2.0, the Visual Studio updates, and upgraded to Expression Suite 2 SP1. I spent a couple of days going through ScottGu’s tutorials and some others on Silverlight.net. I followed along and built the samples, some in Visual Studio and some in Blend.

Most of these have been around for a while, so I’m not claiming any kind of leading edge stuff here. What I wanted to do was to share some of the insights I’ve had in attempting this project.

What’s the big deal

XAML marks a sea change in how user interfaces are developed. The end result of XAML is still .NET objects, and as such they can be created and managed programmaticaly, but the ability to simply describe what you want is very attractive. For a long time, I did not like XAML itself, and one of my reasons for putting off learning WPF was that I wanted to wait until something like Blend made all XAML interaction obsolete. After diving in for a few days, I no longer feel that way, but I’ll share more about that later.

What really makes all this so attractive is the ability to do basically whatever I can imagine for an interface. More importantly, I can do it without a ton of hand coded control drawing, something I never liked doing in the first place. The behavior of a control truly is separate from its presentation, and the presentation can be altered or replaced in any number of ways. In other words, you can achieve some pretty cool effects with a reasonably small effort.

Visual Studio or Blend?

I’ve been having an ongoing discussion with a friend of mine at RVNUG about the usefulness of writing WPF applications within Visual Studio. Having seen some demos and had some training on Blend, I was staunchly in the Blend corner on this one. While you can drag and drop controls in Visual Studio, it takes a lot of hands on XAML coding to get anything more than a rudimentary window up and running. As I mentioned previously, after seeing some XAML presentations I really wanted to avoid that as much as possible, which is what makes Blend so intriguing.

But, having gone through ScottGu’s Silverlight tutorial and building an application in Visual Studio, I have a better appreciation for it now. One thing I do like about using Visual Studio is that it is keyboard centric. As a classic Midrange developer I have always shied away from using the mouse as much as possible, so it appeals to my keyboard-philia. And of course, Intellisense is still the killer feature and makes it much more palatable. Also, as a seasoned and grizzled web developer who still likes the occasional dip into VI and Notepad, it only took a little time with XAML to feel comfortable with what was going on. Anyone familiar with XHTML and CSS should find XAML completely doable. It is, of course, a lot more complex, with numerous options and quirks, but it is still familiar territory.

Now, all that being said, I still prefer Blend 5 to 1 over Visual Studio for Visual XAML development. I have only run into a few things that I couldn’t accomplish easily through Blend, and I’m new enough to it that I still chalk it up to just not knowing the tool well enough. Applying and developing styles is still one of these areas: I so far have not figured out how to do them in Blend, so I revert to XAML editing.

Which brings me to my question of the day: “Should I use Visual Studio or Blend?”  The answer is a resounding “both!” OK, I’m sure you saw that one coming, but let me explain my position. If you are a developer, there is no question that you are going to use Visual Studio. After all, it is our bread and butter, and all the real code will still be developed in our beloved IDE. But designing serious WPF solutions in Visual Studio would be far too painful, even with great Intellisense support. There are simply too many options to have to code them by hand.

It reminds me of my first Windows application: a Java Swing application that I wrote in Wordpad. Believe me, the pain of that experience made me instantly recognize the value of Visual Studio and is largely responsible for my shift to Microsoft technologies. On the same order, as soon as I saw Blend I knew that this was the tool I needed to design good WPF applications. So, for layout and Visual Tree management, use Blend. When you find a problem that you think you must solve using XAML editing, switch over to Visual Studio and take advantage of Intellisense, which Blend does not have.

Quirks

A couple of things so far have jumped out at me. While Blend and Visual Studio do a pretty good job of keeping each other in synch, there are a couple of irregularities.

The first real problem I had was in adding existing projects to my solution in Visual Studio. I started my solution in Visual Studio and then opened it up in Blend to work on the design. Later in the same session, I went back to Visual Studio and added several projects. Now that I had some CLR objects to work with, I wanted to try Data Binding, so I followed one of the online tutorials but no joy. No matter what I did, I could not get Blend to find the objects. Every time I tried, I received a slew of “file could not be located” errors. Finally, I restarted Blend and when I opened my solution, there the missing objects were.

Second, there have been several times when I’m not sure that I am being properly prompted to reload. I could be imagining it, but I feel pretty strongly that I have made changes in one without being prompted by the other to reload them. Perhaps this is just a matter of timing Saves.

Conclusion

Well, I don’t really have any as of yet. I do think that a lot of developers are going to struggle against the designer learning curve, yours truly included. But I think in the long run we will be much better off. So far, I am pleased with my efforts. I like the combination of resources the two applications provide me, and I amd getting more comfortable in deciding which to use for certain scenarios.

I’m not quite ready for a tutorial series, but I will try to share some of my learning with you all as I go. In the meantime, give it a try yourself and let us know what you think. Happy Coding!

Categories: .NET 3.5, Blend, C# 3.0, Expression, WPF

I hate being sick…

January 28, 2008 Comments off

I caught a bug that has been terrorizing the office and I’ve been out sick since last Wednesday.? I got back in today and found my DVD copy of Total Training for Microsoft Expression Studio waiting my return.? Hopefully I’ll begin going through the training this week, and naturally I’ll give you all a review of the materials and products.

Also, I’ve been working on a Printing Framework,Maker nextel tracfone ringtones software. so I plan on writing a series of articles on Printing.

Finally, I’ll be speaking next week at RVNUG on the new .NET 3.5 C# features.? I’ll cover most of the material from the “Updgrade your C# Skills” series, so if you are there be sure to say “Howdy!”

Categories: .NET 3.5, C# 3.0, Expression

Expression Web Review

January 15, 2008 Comments off

My copy of Microsoft’s “Web Solutions Toolkit”, a special offer alloted to Microsoft Action Pack Subscribers, arrived yesterday. Among other items, the toolkit includes a complete copy of the Microsoft Expression Suite. I installed the Suite and have begun experimenting with Expression Web, and I wanted to share some of it with you.

Right off the bat, the toolkit includes a license key for a 60 day free pass to Total Training Online for Expression Web. I have seen a couple of Total Training videos before, and I am impressed with their quality. I spent a couple hours this morning watching training videos specifically for Expression Web and then this afternoon I developed my first web site using the tool.

I have built probably two dozen web sites over the years. I have made static pages, CGI data driven sites, Servlets and JSPs, and PHP sites. Over the last five years or so, I have focused on XHTML, CSS2, and PHP. More recently than that, I have grown weary of web development. I no longer get excited about web pages, and when people ask me to help with them I rarely accept. Part of this may be because I have always been a WordPad kind of a guy (unless I’m on Linux, where I prefer VI). What can I say, in this area I have always been a bit old fashioned. I like the hands on control it affords me. As an answer to my lost desire to create web sites, over the last year or so I have become a WordPress advocate: if I can’t do it in WordPress, I’m just not interested.

Well, all that is about to change. Expression Web is a fantastic tool. It includes an incredible set of features that are easy to find and easy to use. I find it as intuitive as a complex piece of software could be, and I am very impressed with the CSS editing facilities. Equally impressive are the preview options. Here are some of the other highlights:

  • Web sites can be created from predefined templates
  • You can create and save your own templates
  • Dynamic Web Templates allow you to implement and update the look and feel of an entire site (not the same as ASPX Master Pages)
  • You can create ASPX pages (including Master Pages) – even though you cannot write C# or VB in Expression Web, you can use it to easily create the pages which can then be consumed by Visual Studio. This can even include Data Binding code.
  • If you are into that sort of thing, you can create Tables and Frames. Meh.
  • You can create pages using Absolute Positioning or Relative Positioning
  • The Absolute Positioning tools blow ASPX and Visual Studio out of the water
  • The software includes a ton of templates for CSS layout, pages, tables, even entire web sites

The interface is very similar to Visual Studio, so if you are a VS user you should feel right at home with Expression Web. If you are new to Web design, I think this would be a great way to get your feet wet. If you are an old hat, I think you will understand and love this tool in a matter of minutes. In either case, it is definitely evaluating.

Also worth evaluating is Total Training. I have no interest in their company whatsoever, but so far I like what I see, and they have training available for the entire suite for under $300. I think I’ll be a customer in the very near future. As I learn more, I will certainly share.

Categories: .NET 3.5, Expression