Blend Candy – traditional "round glass" button


SubHeading 6

Today I quickly walk through creating the infamous “round glass” button.

Untitled-3

Here’s the simple steps to create this

1. Firstly we create a circle with a green radial gradient. This will give the overall lighting effect

– Create a “circle” using the “ellipse” tool and holding down the “shift” key

– Next the “fill” of the circle to a “gradient brush”

– Set the type of the “gradient brush” to a “radial gradient”

– Set the left point of the gradient to “#FF63DF3F”

– Set the right point of the gradient to “#FF055B02”

– Using the “Brush transform” tool move the gradient down so that the light appears to emanate from the bottom of the circle

1

2. We next want to create the top reflection effect

– Create a plane white circle, again holding down the “shift” key. Make the circle roughly the same size as the original circle.

– Position the top of the new white circle just below the top of the green circle created in step 1

– Next change the circle to a “path” object by choosing “object > path > convert to path”

– Using the “direct selection tool” move the bottom point up to a position similar to that in the picture below. You will need to set the left and right dot’s curvature skew to get the desired result. [The curvature skew is the pointers that appear when you select the left or right dots. They let you control the curvature of the line directly connected to the dots]

– Next set the fill to a “gradient brush” of type “radial gradient”

– Set the left point of the gradient to a color of “#68FCFCFC” and an alpha of “41%”. Doing this will allow the images underneath this layer to “shine through”

– Set the right point of the gradient to a color of “#FFF8FCF8”

– Next set the overall opacity for this shape to “10%”

2

3. In the next few steps we create the bottom reflection.

– Create a white sphere roughly the same size as the main circle.

– Overlay it exactly over the main circle

– Convert it to a path “Object > path > convert to path”

– Move the top point half a centimeter above the bottom point. (as per image below)

3

4. Set the top pointer skew as per diagram below. This will give the desired curve for the top part of the reflection.

4

5. Set the left dot’s skew to positions shown in yellow below

5

6. Set the right dot’s skew to positions shown in yellow below

6

7. Set the bottom dot’s skew positions to those seen in yellow below.

7

8. There you have the traditional “circular reflective” button !

8

Source code can be found here!

8 responses to “Blend Candy – traditional "round glass" button

  1. Pingback: MC`s Sandpit » Blog Archive » Drag speed and direction

  2. Hi, I am new with silverlight, and I really like this kind of glass button with content in it.1. How to design it in visual studio? 2. which tool or command should I use, if I wanna each page with same formate, tab, template but shows different content when switch pages? Looking forward to your reply asap, thanks.

  3. Thank you Man for this post!

    Supper job!

  4. Great !!
    thanks a lot!!

  5. Very nice post. I just stumbled upon your blog and wanted to say that I’ve truly enjoyed browsing your blog posts. After all I will be subscribing to your feed and I hope you write again very soon!

  6. If you have dreams but they do not worry you it means they are not big enough for you

  7. Dreaming is the first step that you have to make While the act is the next step that you have to do

  8. Your biggest weakness is when you give up and your greatest power is when you try one more time

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