Expression Blend and Design

The team blog of the Expression Blend and Design products.

Creating a Vista Style Button Template

Creating a Vista Style Button Template

  • Comments 21

Vista UI designs for buttons have a very distinct look.  With the gradient and shine effects that compose this style it would be useful to be able to create buttons with this style and provide an easy way to change just the base background color so that you can create different colored buttons such as:

This walkthrough will give a complete guide to creating a generic template for this type of button design.  Start with the shipping version of Microsoft Expression Design and follow along!

1.    Create a new document with dimensions of 200 x 200 points.   Set your zoom level to something large like 400 or 800%.

2.    Double click on the name of the initial layer in the Layers palette (Layer 1) and rename it to Base Color.  This is used as the layer for holding the base color.  Later to change the color of the button you just need to change the color of this layer to change the background of the button

3.    Draw a rectangle button outline with a rounded corner.    Make it approximately 51 pt Width x 41 Pt Height.  These are optional dimensions.  If at first you are not able to enter exact dimensions then you need to click on the small chain icon in the center:

That will then let you unlink the dimension sliders and you can now enter the dimensions you want:

4.    Give it a rounded corner of 4pt.

5.    Give it a solid fill color like a Red (#5F1907)

6.    Add a solid black stroke border with 2px width

The rectangle should look like this:

Note:

If you find the rectangle looks too small to see and work on comfortably you can easily zoom in on it.  To do this click on the Zoom button which looks like a magnifier in the toolbox:

Then simply drag a tight lasso around the rectangle:

          Let go and the artbox fully zooms in based on your previous selection

7.    Copy the rectangle (button to the clipboard).  To do this highlight the rectangle in the layer and press Ctrl C to copy it to the clipboard.

8.    Add a new layer for the Vista effects.  This is stacked on top of the base color layer.   Use the new layer button at the bottom right of the layer palette:

9.    Rename the layer to Vista Button Effects.  Hit Enter to complete the Rename.

10. While the Vista Button Effects layer is highlighted press Ctrl F to paste the rectangle in front of this layer (100% Opacity)

11. Give its stroke a thickness of 1px and Stroke Opacity = 83%

If both the Opacity and Stroke Opacity change then unlink them and then set the Stroke Opacity = 83%:

12. Now click on the Fill tab

13. Click the Gradient color in the color palette (bottom lower left):

At this point you should add a gradient fill of White (255,255,255) background with the stops shown below.

When you first click the Gradient fill button you will see this setting:

14. Create a stop at 0% (71% Stop Alpha) with an RGB color of 255, 255, 255.  Simply change the default Stop mark on the far left:

15. Now click in the middle, around the 48% mark to add a new Stop with a 0% Stop Alpha:

16. Change the Stop at the far right (100%) to 67% Stop Alpha also using White (255,255,255):

17. Now the midpoint (the tick mark on top between the left and middle Stops needs to be dragged to the Center:

18. Drag the 2nd midpoint at the top right over to about the 57% mark:

At this point the gradient looks like this below:

Now the button should look like this:

The gradient is pointed the wrong way so let’s change this to a vertical gradient. 

19. Click on the Gradient Transform tool from the toolbox palette:

20. Drag the mouse from the top of the button in the middle towards the bottom while holding the Shift key down to get a straight line:

When you let go the gradient will complete its new direction:

21. Time to copy the rectangle again.   Click on the newest rectangle in the Vista Button Effects layer to highlight it:

22. Press Ctrl C to copy the rectangle to the clipboard and then Ctrl F to paste a new copy in front:

23. Make sure before doing the resize you have the selection tool selected:

24. Size the new rectangle a bit smaller while keeping its rounded corners in perspective.  To do this hold down the Alt key and the Shift key while dragging the lower right corner until the inner rectangle looks about like this:

25. The inner rectangle needs to have proper relative size for its corner radius.  You can try 3 pt:

26. Set the rectangle to have no Fill to it

27. Now switch to the Stroke tab and give it a thickness of 2px and Stroke Opacity = 53% (color = 255,255,255)

28. First unlink the fill and the stroke opacity sliders:

29. Then set their opacities to 53%:

30. Now set the color of the stroke to White (255,255,255):

The button now looks like this:

31. Select both of the Vista effect rectangles and Group them together

And you end up with:

32. At this point if you have a graphic you want to add to the button, create a new layer and add that image.  Make sure that layer is at the top of the layer stack:

It might look like this:

Let’s create a glyph for such a button base such as a simple Stop button for a media player.

33. Create a new layer and drag it to the top of the layer stack.  Then rename it to Stop Button – White:

34. After clicking on that layer to select it, draw a rectangle with rounded corners of 2 pt:

35. Give the stroke a white (255,255,255) fill and a thickness of 1pt:

36. Change to the Fill tab and give it a fill of White (255,255,255) at 100% Opacity:

     The Stop button glyph should look like this:

We need to center the Stop glyph on the button base so it’s time for a little trick. 

37. Drag the rectangle (16 points) from the Stop Button - White layer to just below the base color rectangle:

Ending up with:

38. Now select both the base color rectangle and the Stop button rectangle by SHIFT clicking on both layer slices:

39. And now align the centers of both objects by doing this:

Now you will see this:

The Stop glyph is now perfectly centered.

40. You need to drag the Stop rectangle back up into its layer again:

Ending up with:

The final look after centering:

Now for the final effect, once you have a nice button created in order to change the color of the button all you need to do is change the color of the base color rectangle to change the color for the Vista button

41.                Just select the rectangle in the color layer:

42.                Select the fill tab for the rectangle:

43.                And pick a new color such as #0D1D36:

And just like that you have a new button which would represent the Normal state for a Vista like button:

I hope this was useful.    I will have a follow-up tutorial which will show you how to:

·         Add an effect for:

o   Rollover

o   Pressed

·         How to duplicate those 3 buttons to create additional sets of state buttons to house other glyphs

·         Export the project as a XAML Resource library for use in Expression Blend

·         Utilize those buttons by modifying a button template to hook up the triggers for a Default, Rollover and Pressed action

(Thanks to Rick Engle for the great tutorial!)

Leave a Comment
  • Please add 5 and 1 and type the answer here:
  • Post
  • PingBack from http://blogs.msdn.com/expression/pages/samples-and-tutorials-gallery-expression-design.aspx

  • A new tutorial by Rick Engle shows you how to create a Vista-style button template using Expression Design.

  • Great tutorial. May I ask when will the follow-ups arrive?

  • Very nice tutorial.  But I had trouble following it using Expression Blend.  Some of the commands you refer to don't exist in Blend (or at least I can't find them).  For example, the Ctrl-F shortcut did nothing.  Also, you lost me at step 17 because I don't see the tick marks you refer to.  I also did not find the gradient transform functionality.  It might be helpful for someone like me if you were to post the resulting xaml for download.  Thanks so much!

  • I think there's something wrong with either the blogging system or the image files, because i can't see any image in this article..

  • Yes, is possible to fix the broken image links? Thanks for the tutorial, I am looking forward to trying it.

  • It wouth be nice if the images are not broken. Can you fixe the images?

    Greets Bjorn Schmitz

  • I can not see the images on this page, why? There are just red cross.

  • All pics refer to a location - http://www.wildetravels.com/ricke/expression/tut01/images2/image*.jpg

    which is not available now. Please fix the images, it sounds like this is what I am looking for but can try out blindly to check the output. Thanks.

  • Sorry folks, that server was recently rebuilt, the images are up now, sorry for the inconvenience!

  • Great tutorial, though it doesn't appear to map very well to the version of Expression Blend I got from the Microsoft website. (Like Martin Witters said, midpoint adjustment seems to be missing from linear gradients.) But I think I got it figured out.

    When can we expect the next part, particularly with the rollover and pressed effects? (And can you add a disabled effect, as well?)

  • This tutorial was for Expression Design not Blend, that's why some people are finding some shortcuts / features are missing.

  • thanks, great tutorial. feed me more!

  • Can't see the pics.

    I'll try it out anyway, but if you can fix it, it'd be a lot better! ;-)

    Tks for the Tutorial!

  • Can we get our hands on the resultant XAML?

Page 1 of 2 (21 items) 12