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