Along with the buzzword web 2.0 came a new style of graphic design. This style is defined by its generally large, bubbly, shiny, and bright graphics that have been brought to our screens.

The following tutorial will describe how to create the above icons. These icons are large and in charge. They offer you a bright and reflective button that can easily inform your users what you are trying to do.

We will start the tutorial first by looking at the color of the buttons. Color is a very important part of any design and should be considered very heavily before you start drawing. I always create a color scheme to start before my pencil hits paper, or in this case mouse touches the screen. For this tutorial I am providing you with the colors that I have used to create the icons that you see and some that you haven’t seen. In an entry in the future I will try to inform you of how to create a good color scheme and show you some tools that are available to help.
But for now we will use the following colors.




Now for the fun stuff drawing the icons. This tutorial is made for user you have Adobe Illustrator. Sorry if the removes you from making these icons, but I try to draw all of my graphics in vector format so that they are scalable to any size.


In your document draw a new circle by holding the shift key and dragging your cursor. I made the circle 128 x 128 px.




From our color pallet fill you circle with the second darkest shade of red.




From our color pallet give you’re circle a 10pt stroke with the darkest shade of red.



Draw another circle. This time making it 100 x 100 px then place it at the top and center of the original circle.




Now we are going to create a gradient to fill the circle. Select the gradients tab giving your icon a black to white gradient fill.




Replace the black and white gradients with the two lightest reds from our color pallet.




This will fill the circle with our new colors.



Now we will adjust the angle and location of the gradient to make it look as though it is a light reflection. Set the angle to -33 and the location to 40. Which will modified the strength and direction of the gradient.



Now we will adjust the transparency of the layer to make the reflection look perfect. Set the transparency of the small circle to 75%.



Now we will add a drop shadow the larger circle creating a 3d effect. Set your x offset to 0px and your y offset to 0px, and you blur to 5. This will create a shadow around your new button.



Now your button is complete and all web2.0ified simply add whatever you want to the button and you are good to go.