Paint.NET/Simple Round Glass Buttons

This tutorial demonstrates how to create simple round web-browser buttons using Paint.NET. To complete this tutorial you will need to download and install the Drop Shadow plugin. Download and install the Drop Shadow plugin from http://users.telenet.be/krisvandermotten/Downloads/PaintDotNetEffects.html. Open the zip file and run the Install.exe program. Begin with an 800 x 600 (default) canvas. Use the Ellipse Select tool and (holding the SHIFT key) drag a circle that has a Bounding Rectangle size of 400 x 400 pixels. Image:GlassButtonsTut00 CircleSize.png IMAGE > Crop to Selection Set your Secondary Colour to completely transparent. Image:GlassButtonsTut 01 SetTransparentColour.png IMAGE > Canvas Size: Select By Percentage with a setting of 125% (ensure the Anchor is set to 'Middle') You should now have a circle that is perfectly centred on your canvas. Image:GlassButtonsTut02 CentredCircle.png Set your Primary Colour to Dark Green - I used Hex: 00660A - and your Secondary Colour to White. Use the Magic Wand tool to select your white circle and use the Gradient tool, set on Radial, and use the right-mouse button to draw a gradient starting about 1/3 from the bottom of the circle up to the top. Image:GlassButtonsTut03 RadialGradient.png Duplicate the Background layer twice. Call the top layer 'Top' and the middle layer 'Middle'. Start with the 'Top' layer and choose the Move Selection tool (your circle should still be selected) and grab the top of your circle selection and begin dragging down until the height of the elipse is 350px. Image:GlassButtonsTut04 Ellipse1.png Press Delete. Go to the 'Middle' Layer and use the Magic Wand to select the area outside the circle and CTRL+I to invert selection. Choose the Move Selection tool again and grab the top of the circle and drag down until the height of the elipse is 250px. Delete. Go back to the 'Top' layer and EFFECTS > BLURS > Median Blur: Radius 10, Percentile 0. EDIT1 In never versions of Paint.Net: EFFECTS > NOISE > Median. Use the Magic Wand to select the outside area and CTRL+I to invert. Set your Primary Colour to White and Secondary Colour to Dark Grey. Fill the crescent White. Press CTRL+D to deselect then EFFECTS > BLURS > Radial Blur: Amount 2. Go to the 'Middle' layer and EFFECTS > BLURS > Median Blur: Radius 10, Percentile 0. On the 'Top' layer set the blending mode to Screen and adjust the Opacity to 100 (F4 to access Layer Image:GlassButtonsTut06 LayerBlendMode.png Repeat this on the 'Middle' layer. Create a new layer and call it 'Control'. Move the 'Control' layer down to above the background and below the 'Middle' layers. This is where you are going to put the text or image that relates to your button. I am going to make this a 'Refresh' button and will be using the "Webdings" font - letter 'q'. Select the Text tool and change the font to 'Webdings'. Increase the font size to 200 (you can do this by typing directly into the font size control). Click onto your image and type the letter 'q'. This should give you a 'Refresh' symbol. Use the control arrow to position the symbol in the centre of your button. Image:GlassButtonsTut07 Control.png EFFECTS > Drop Shadow: Offset-X 0, Offset-y 10, Blur Radius 10. EDIT2 For Drop Shadow: EFFECTS > OBJECT > Drop Shadow Flatten the image and EFFECTS > Drop Shadow: same settings again. Image:GlassButtonTut08 Buttons.png