Jaa

Creating a Vista Style Button Template

  • Artikkeli

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

Comments

  • Anonymous
    October 17, 2007
    PingBack from http://blogs.msdn.com/expression/pages/samples-and-tutorials-gallery-expression-design.aspx

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

  • Anonymous
    November 27, 2007
    Great tutorial. May I ask when will the follow-ups arrive?

  • Anonymous
    December 24, 2007
    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!

  • Anonymous
    January 13, 2008
    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..

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

  • Anonymous
    January 21, 2008
    It wouth be nice if the images are not broken. Can you fixe the images? Greets Bjorn Schmitz

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

  • Anonymous
    February 11, 2008
    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.

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

  • Anonymous
    March 05, 2008
    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?)

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

  • Anonymous
    September 04, 2008
    thanks, great tutorial. feed me more!

  • Anonymous
    October 09, 2008
    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!

  • Anonymous
    December 31, 2008
    Can we get our hands on the resultant XAML?

  • Anonymous
    March 02, 2009
    Thank you very much for the tutorial.

  • Anonymous
    June 10, 2009
    Hello, available to download the tutorial please. Mass that, but I failed.

  • Anonymous
    October 03, 2009
    Great tutorial, takes some getting used to in expression design. Those people with problems, well the tutorial is spot on review your steps. I have had some difficultly finding the following on tutorials...are they ready to go??? Can you please let me know where to find... thanks heaps. very nice result in the end but need to port into xaml and get things cranking in my project.

  • Anonymous
    June 24, 2010
    WOW I got the same vista button as in the tutorial.. thank u so much for the awesome tutorial.. i gained a lot.

  • Anonymous
    September 01, 2010
    Nice tutorial. You mention a follow-up tutorial for additional button states and exporting to Blend. Has this tutorial been posted?

  • Anonymous
    March 29, 2012
    Great resources.Thank you so much for sharing this creative tutorial ...http://www.webdesignbizz.com

  • Anonymous
    September 06, 2015
    I really like reading through an article that can make people thin !

  • Anonymous
    September 26, 2015
    It¡¦s in reality a nice and helpful piece of info. I¡¦m happy that you shared this useful info with us. Please keep us up to date like this. Thank you for sharing.<a href="pakshoma.com/.../a>

  • Anonymous
    September 26, 2015
    Thanks for another great post. Where else could anybody get that kind of information in such a perfect way of writing? I have a presentation next week, and I am on the look for such information.

  • Anonymous
    October 08, 2015
    Hi there! Would you mind if I share your blog with my myspace group? There’s a lot of folks that I think would really appreciate your content. Please let me know. Cheers <a href="pakshoma.com/1-washing-machine">%D9%85%D8%A7%D8%B4%DB%8C%D9%86 لباسشویی</a>

  • Anonymous
    October 12, 2015
    Excellent post. I was checking continuously this blog and I am impressed! Very helpful info specifically the last part :) I care for such info a lot. I was looking for this certain info for a very long time. Thank you and best of luck.

  • Anonymous
    October 13, 2015
    It،¦s in reality a nice and helpful piece of info. I،¦m happy that you shared this useful info with us. Please keep us up to date like this. Thank you for sharing.

  • Anonymous
    October 25, 2015
    You did a good job for sharing it to all people. Thanks for posting.<a href="http://khoshtinatstone.ir">سنگ ساختمان</a>

  • Anonymous
    November 05, 2015
    write-up to him. Pretty sure he will have a good read.<a href="http://rose-factory.ir">رز گاز</a>

  • Anonymous
    November 07, 2015
    Thanks for another great post. Where else could anybody get that kind of information in such a perfect way of writing? I have a presentation next week, and I am on the look for such information.

  • Anonymous
    November 12, 2015
    You are so awesome! I don’t think I have read a single thing like that <a href="  buyex.ir/.../women-overcoats ">پالتو</a>

  • Anonymous
    November 20, 2015
    Really.. thank you for starting this up. This website is something that is needed on the web, someone with a bit of originality!

  • Anonymous
    December 10, 2015
    I enjoy what you guys tend to be up too. This type of clever work and exposure! <a href="   http://dubaitarintour.com "> تور دبی </a>

  • Anonymous
    December 17, 2015
    The comment has been removed

  • Anonymous
    January 23, 2016
    Your viewpoint is truly applicable to my life currently. taranehalvandi.com/hatch-eyebrows