Tutorial How To Draw Glossy Button With Shadow

There are many techniques to draw a glossy button, but I will explain to you the easiest one.

First of all, draw a blue circle with RGB 0, 128, 255.

Blue circle.
RGB 0,128, 255.
Size 90px x 90px.

After that, draw a smaller circle with Linear Gradient from top to bottom with the gradient of RGB 0, 128, 255 and RGB 255, 255, 255.

Gradient circle.
RGB 0, 128, 255 to 255, 255, 255.
Size 60px x 60px.
Gradient angle 90 degree.

Centered both the circles like the below.

Adjust the height of the Gradient circle and push it to further top. See below for example.

Now you have got a glossy button, and it is time to add some shadow to it. Just draw another circle with the same size as the bigger circle with the gradient of RGB 0, 192, 255 to RGB 255, 255, 255. Adjust the location of the gradient angle to have more white color.

Gradient circle.
RGB 0, 128, 255 to RGB 255, 255, 255.
Size 90px x 90px.
Gradient Angle 90px.
Gradient position: Adjust it to have more white.

Move the new gradient to the bottom of the glossy button and this will be the shadow of your glossy button.

Related Posts by Categories