Windows Media Player 11 Button - How did they do it

IzzyWebsite - CMS - The Easiest to Manage, Content Management System!

To begin this tutorial, I simply created a few rectangles with different shades of blue.

Windows Media Player Button - How did they do it

Now select the “Elipse Tool” and draw a circle as I have done below with 121212 as your foreground color. Hold in the shift key to draw a perfect circle.

Windows Media Player Button - How did they do it

Now that you have your circle, you can now right click on the layer in the Layers Palette and select, “Blending Options…“. Now click on “Stroke“. Use the settings below :

Windows Media Player Button - How did they do it

You should now have the following :

Windows Media Player Button - How did they do it

Select the “Elipse Tool” again and draw another circle this time using 0023a4 as your foreground color. Hold in the shift key to draw a perfect circle.

Windows Media Player Button - How did they do it

Select the “Elipse Tool” again and draw yet another circle this time using White as your foreground color. This circle need not be perfect.

Windows Media Player Button - How did they do it

Next we will need to move the bottom anchor point. To do this, select the “Direct Selection Tool” and select the anchor point on the bottom. Now, using the up arrow key on your keyboard, move that anchor point as I have done below. Then turn the “Fill” down to 28%.

Windows Media Player Button - How did they do it

Note : The direct selection tool is : Windows Media Player Button - How did they do it

Now “Ctrl” click the blue circle layer to create a selection around it and grab the “Brush Tool” with the diameter at 50% and the hardness at 17%. Create a new layer, change the blending mode to “Color Dodge” and change the color to 70e2ff. Now click only once toward the bottom of the selection as I have illustrated below. Deselect and go to next step.

Windows Media Player Button - How did they do it

Select the “Rounded Rectangle Tool” set at 100 pixels, with the color d4d9e0, and draw the shape illustrated below.

Windows Media Player Button - How did they do it

Now that you have your shape, you can now right click on the layer in the Layers Palette and select, “Blending Options…“. Now click on “Outer Glow“. Use the settings below :

Windows Media Player Button - How did they do it

The results. I then duplicated the gray shape and moved to the appropriate space. I hope you enjoyed this tutorial.

Windows Media Player Button - How did they do it

Tutorial by Empire Design.

IzzyWebsite - CMS - The Easiest to Manage, Content Management System!

Related articles

  • Adobe Media Player Announced
  • Freebies: A Social Media Icon Set Just For You!
  • Featured Designer #2 - Saizen Media
  • Good old Windows 98
  • Social Media Networking And Your Blog!
  • If you enjoyed this post, please consider leaving a comment or subscribe to the RSS feed and get future articles delivered to your feed reader or directly in your email inbox.
    Comments

    Great tutorial, i was kinda amazed of that button too a while ago, and i tried to make it myself.

    Glad we could help.

    Great Tutorial. I tried similar thing here http://enchantedvoyages.blogspot.com/2007/11/tutorial-creating-windows-vista-taskbar.html but yours is most definitely better :)

    Leave a comment

    (required)

    (required)


    zaBox - Design News, Tutorials and Resources Web Design blogs Top Blogs TopOfBlogs BlogCatalog Web Design & CSS (Themes) - TOP.ORG