Expression Blend and Design

The team blog of the Expression Blend and Design products.

February, 2008

  • Expression Blend and Design

    The Big Jasinski!

    • 5 Comments

    I figured you could all use a break from the tips and tricks my colleagues have been posting for the past few days! At one time, the Expression team was fortunate to have incredibly talented artist (illustrator, musician) Aaron Jasinski on board as a product designer. Among his contributions were the style guides which define the visual specifications of each part of the products' UI, the design of the Welcome Screen, teaming up with feature Program Managers on UI and user experience design, looking into the future of the Expression products, and generally making his office a cool and ambient place to be. To emphasize the last point, here are the shots of his whiteboard:

    Whiteboard1_sm

    ( larger version )

     

    Whiteboard2_sm

    ( larger version )

     

    Whiteboard3_sm

    ( larger version )

     

    You can see more of his work at http://www.aaronjasinski.com.

    Steve White

  • Expression Blend and Design

    Creating your Own Vista "Chrome" Style Button

    • 18 Comments

    In this blog post I’d like to show a way to create your own “chrome” like button template that can be easily modified and used over and over again using Expression Design.  This post is targeted for the absolute beginner, so if you've never tried using Expression Design before, this post should help you become familiar with it. What you should get by the end of this exercise is a button that looks like this:

     

    Slice 6 

    So let’s begin:

    Lets start by creating a rectangle on the art board, setting its width to 150 pixels and its height to 50 pixels:

    Slice 1 

    While you could use the adorners, you can more precisely use the Action Bar to set the width and height instead:

    action

    If you look at the final button shown above, you will notice that it has rounded corners. That means we need to make our rectangle have rounded corners also. Select your rectangle and modify its corner radius on the Properties Panel to 10px:

    radius

    Once you have made your changes, your rectangle will now have curved corners:

    Slice 2

    Now we’ll add a gradient to our button.  For the sake of simplifying things, we will use the default gradient swatch and make this button a silver (grayscale) button:

    gradient

    When you apply your gradient, your button will now look as follows:

    Slice 8

    As you can see, we have quite a bit of work to do before we have it looking nice! First, we’ll remove the stroke from the button by clicking on the stroke tab and setting it to none:

    nostroke

    Setting the Stroke to none has the effect of removing the black outlines you see in your curved rectangle:

    Slice 3

    With the stroke gone, let's focus our attention on the fill. Notice that the gradient on the button pans from Left to Right.  We want to change this so it pans from Top to Bottom.  Using the gradient rotation angle tool, change the rotation angle to 270 degrees or -90 degrees as shown below:

    rotate

    Once you change the rotation angle for your gradient, your button will now look like what is shown in the following image:

    Slice 4

    Now that we have our smooth gradient, we’re ready to move on to the next step.  The shine! Or what some might call the light layer, or what I like to call it, the Bling!

    Copy your button object to the clipboard and use the PASTE IN FRONT feature from the EDIT MENU to place another copy on top. While on top we’ll make some adjustments to give it that look that we want.

    Select your new button object and do the following:

    1. Return to the ACTION BAR and change your new objects width and height to (146x25).  Your second button object becomes centered on top of the original. 
       
    2. Also change the corner radius of your new shape to eight (8) pixels to give your new object smaller corner roundness.
       
    3. Nudge your object upwards to the top of your underlying object until it’s about 4 pixels away from the top of your underlying object.  You might want to zoom in a bit to do this more precisely.
       
    4. Change the gradient rotation angle to 90 degrees.  It should have been set to -90 degrees from copying and pasting from your underlying object.
       
    5. Return to the properties panel.  Replace the black gradient stop with the color white so that you have white on both ends of the gradient.

    At this point, your button will look a lot different:

    Slice 5

    While still on the same gradient stop, change the Stop Alpha to 0%:

    stop alpha

    Boo-yah!  Your button is now complete and should look like this:

    Slice 6

    Here is the trick.  Click on the bottom object and try replacing the black gradient stop with any color you’d like and watch your button color Scheme change as you browse through the spectrum.  You can even go further and experiment with more than two gradient stops.

    Hint:  You can make your button darker by increasing the midpoint of the gradient.

    Here is the expression design file with some of the assets used in this tutorial: Download Chrome Style Button Design File

    Have fun!
    Sam Paye

  • Expression Blend and Design

    Using Brush Strokes to Create a Design

    • 9 Comments

    Design has an extensive library of  brushes that can be used to create artwork. In the spirit of upcoming elections, I created this stars & stripes piece:

    kimPost

    Download Design File (33k)

    All of the elements you see can be found in Design’s default brush strokes:

    brushStrokes

    To create similar brush effects, simply draw strokes and increase the width until you get the desired effect. Then to manipulate further, select Object/Convert Stroke to Path. For example, I didn’t want as many large stars as the brush gave me so after converting to path I just deleted the extras. This works great for adding abstract elements to a background or creating wallpapers.

    Hope you like it, and if you have any questions, feel free to leave a comment below!

    - Kim

  • Expression Blend and Design

    A Small InkCanvas Sample

    • 5 Comments

    One of my favorite controls in WPF is the InkCanvas control. As a child, I've always enjoyed simple line drawings, but I started to draw less and less as I got older because I now had to clean up all of the paper and pencils myself! Recently, I began to get back into line drawings, and unlike using physical mediums like pencils and paper, I began playing with the InkCanvas control in WPF instead. This control is very elegant. You have a working application once you simply insert a InkCanvas control. The InkCanvas becomes your paper, and your mouse cursor becomes your pen or pencil.

    Behind its elegance, there is actually a lot of great functionality that you can expose, and I created a simple application (with source) that showcases some of the common things you would want to do with an ink canvas:

    inkcanvasExample 

    ( Click here to download the Blend 2 / Visual Studio 2008 Source Files )

    In the above application, the code shows you how to change your pencil's stroke size, color, and how to use the eraser functionality. Behind the scenes, when you close your application, everything you draw gets saved to your AppData folder. The next time you run your application again, any doodles you made earlier are displayed again - allowing you to pick up from where you left off. There are also more features that I simply haven't had time to implement, but I may revisit this at a later time and improve what is shown above.

    Anyway, I hope this helps. If you have any suggestions on examples you would like to see covered in this blog, feel free to drop a line in the comments and I or the other friendly bloggers might use it to guide the content of our future posts.

    Oh, and before I forget, the really cool icons used in the above sample are from Mark James's Silk Icons collection.

    Update
    There was a bug in the version of the code I posted initially. Thanks to fellow colleague Sam Paye for pointing it out. The version posted now is the revised version.

    Cheers!
    Kirupa =)

Page 1 of 1 (4 items)