Blend Candy : Another Blue Glowing Glass Button in the style of Web 2.0


subheading 3 

Does anyone else here like the Windows Media Player UI besides me? I have to admit that I’m a sucker when it comes to rich dark colored UI’s. I love black and I love the glass effect.

windowsmediaplayer

[screen shot of my Windows Media Player 11 - Beautiful and black!]

What really stands out for me are the buttons, the glowing glass buttons. Mesmerizing, elegant and perfectly functional. Hover over a button and it glows blue, or red depending on the type of button.

   windowsmediaplayerbutton         closebutton

I’m going to recreate these beautiful glass buttons in Blend. I’ll do it in such a way that the glow can be controlled programmatically, so you can set it to what ever you want :)

[20 minutes later]

Here’s the result of my Blending, they are just xAML assets that haven’t been animated …

normal

Picture (above): Default button

blue

Picture (above): Blue glowing button

red

Picture (above): Red glowing button

So now begins the fun bit, explaining how I created these!

Step 1: Create the outline for the button as a “black shape” with rounded corners. Duplicate this 4 times and name the layers as follows:

2  

1

darkBackground Layer: This pretty much stays as is, it will provide the dark background for the actual button. [Important: Opacity for this layer is 100% and it sits as the top most layer]

Step 2: glowEffect Layer: This is the eye candy of the whole thing. This layer gives the glowing effect, you can change the color of the glow very easily in this layer. [Important: Opacity for this layer is 100%]

3

4

Step 3: ButtonForeground layer.  This layer gives the actual button it’s look, it has the shading and it allows the glow to shine through it. [Important: Opacity for this layer is 100%]

 5

6

Step 4: GlassEffect layer. This layer is the sugar coating for the button. The result is a white shaded rounded rectangle at the top part of the overall button, this is so web 2.0. [Important: Opacity for this layer is 9% - gives the see through glass effect]

Take the original black rounded rectangle and resize it to half it’s original size. Then set it to a gradient brush with 2 color markers as follows:

7

Now set the gradient direction as follows:

8

Finally: combining all the layers results in the desired glass button

9

Overall this took around 20 minutes to create using blend. The fun bit will be to animate it which will come in some future posting. Or better yet one of you guys do it and send me an email and ill reference your sample from here :)

Source code for the xAML can be found here: GlowingBoard.zip

Link to other cool graphic assets can be found in my “Blend Candy” area.

Enjoy and remember to share what you can, were all still learning SilverLight and Blend!

23 responses to “Blend Candy : Another Blue Glowing Glass Button in the style of Web 2.0

  1. Sweet – Everything seems be going with the black UI – it does look good. Evrything seems to contrast well against it. Im itching to dive into blend but still got other projects i need to finish off first. I will be going back through your examples when I finally do.

    Hey i read this article today and thought of you! –

    http://style.uk.msn.com/wellbeing/mindbodysoul/article.aspx?cp-documentid=6600294

    I dont know how you manage with so little.

  2. wow thanks Omen that is me! I live with my sony vaio right next to my bed. As soon as i wake up i power on my Lappy and start browsing! I need help :)

  3. Very cool!
    I agree with you completely about the niftiness of the WMP 11 look.
    I also think dark colours and (subtle) glassy effects used with discretion are a good way to move away from the VB 6 style UI (which is also part of the reason I’m not that bothered by the lack of tons of pre-baked controls with WPF: we don’t need a new way to do the same old thing…a blank canvas so to speak can be a stimulus for the imagination).

  4. To qualify my last remark…

  5. Oops, sorry, accidental postback.
    As I was saying: To qualify my previous remark…when it comes to Silverlight controls (as opposed to WPF) we still obviously can do with more. Any at all would be nice.
    Although I’ll personally be happy if we get input controls and crucially layout panels, especially StackPanel (databinding would be nice too of course)

  6. Kevin: your points make so much sense! Im glad there are others out there that share my view on the whole pre-built controls thing. I have some fellow silverlight mates that are hanging out for a set of framework controls that basically slot silverlight as a webforms solution that’s cross browser and deployment hassle free! I think that’s such a shame because it can become so much more than that!

    I think you gave me fuel for another blog posting.. :)

  7. Dear LiquidBoy;
    I’ve watched some of your videos on YouTube and did some of your Walkthrough and I want to Thank you very much for giving these inspirations to the developers community. I’m a software developer and your work teaches us how to become creative in the sense of UI design rather than code design.
    I wanted to share this with you that something that may seem very trivial to you can be a big start for someone else across the globe (literally, in US).
    Please keep it coming… Thanks my friend!

  8. Pingback: Silverlight Cream for November 10,2007 -2 -- #122

  9. Ben: Thanks for the kind words. I’ll definetely keep them coming and ill try to make them more often

  10. thanks for the GREAT post! Very useful…

  11. Pingback: Blend Candy - Windows Media Player « Online Advertising, Web Development & General Rantings

  12. Can you show a pure XAML version that can be used as a Silverlight v1.0 button?

  13. Pingback: Michael Sync » Silverlight 2 beta1 - Best of SilverlightCream

  14. Pingback: You had me at "Hello World!" | Two Ways to Create High-Quality Glassy Controls in XAML

  15. Hi. Nice job on the buttons. Something is not clear to me though…. how do I get this xaml to work with a WPF button? Is there some way to attach it as a style?

  16. Hi there,
    Thanks for sharing this great post. Have you ever created the play and pause button? If so, please share with me. Thanks

  17. Sony VAIO VGN-FW510F/B
    We usually purchase the business line of Sony laptops so this was the first retail model we have bought in many years, so far no complaints, it is pretty fast, well as fast as it can be with Windows 7 anyway. Definately like this model for home use and design work, end user is a graphic designer.

  18. THERE ARE SOME GOOD WEBSITES TO WATCH CARTOON AND ANIME VIDEOS ONLINE FOR FREE, I WOULD LIKE TO SHARE METACAFE.COM, CARTOONEXTRA.COM AND ANIMEBOXOFFICE.COM …ENJOY :)

  19. Here is the article that explains about getting glass effect in Silverlight.

    http://codingforpassion.blogspot.com/2011/08/glass-effect-silverlight-charts.html

  20. Appreciate the tips! I’d personally have never gotten this without any help! Is it alright to reference part of this on my own website basically include a backlink to that webpage?

  21. I found this blog post , “Blend Candy : Another Blue Glowing
    Glass Button in the style of Web 2.0 | Silverlight and
    other cool things ”, truly engaging and it was a fantastic read.
    Thank you,Zelda

  22. nice steps to create the glassy controls using the silver light and WPF with the web 2.0 sites. its very attractive post.
    Mobile Application Development Company India

  23. I’m not sure where you are getting your info, but good topic.
    I needs to spend some time learning more or understanding more.
    Thanks for excellent information I was looking for this information for my mission.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s