I Fell from the Moon

I'm using special formatting on text to make understanding it easier. I'm using italic text for actions like clicking a button or selecting a menu item. I'm using bold text to decribe where you're doing things. Values you're supposed to "write" or "change" are enclosed in double quotes.

Create a new document by clicking New... on the toolbar. "300" by "200" might be a good resolution to work with for this project. Click OK when you've decided. Click the Add new layer button in the Layers toolbox. In order to keep track of our layers, we're going to give them names after their functions. Double-click the new layer to open the Layer Properties dialog and change the name to "Button". Click OK.

Now we're going to create the shape of our button. We're going to use a basic colored shape without an outline. I used the Rounded Rectangle tool.

Using the Draw Shape button on the toolbar, set it to Draw Filled Shape. And click the color you want for your button in the Colors toolbox. Drag out a shape similar to one in the image below.

Use Duplicate Layer in the Layers toolbox. Double-click the lower layer and rename it to "Shadow". Use Adjustments -> Brightness / Contrast... to adjust the contrast to "max" and brightness to "minimum" for the Shadow layer, like in the image below.

Add Effects -> Blurs -> Gaussian Blur... effect to the Shadow layer. I'd recommend using a value of "5" and set the layer opacity to "50%" in the Layer Properties. You might be tempted to go all out with your effects, but keep things subtle, and your design will look better when you're done.

Duplicate the Button layer. Rename the top-most of your duplicates to "Highlight" using the Layer Properties. Use the tool Rectangle Select to select the bottom half of the Highlight layer. Remove the bottom part of the layer by pressing the delete key on your keyboard. If you're more experimental you could use a curved line to create a specific shape for your highlight. This is especially useful for odd-shaped buttons.

Adjust brightness and contrast to "max" for the Highlight layer using Adjustments -> Brightness / Contrast...

Set the layer opacity for the Highlight layer to "50%" or less in the Layer Properties.

Duplicate your Button layer. Move it to the top using the arrows in the Layers toolbox. Name the layer "Gradient overlay". Select Overlay as the layer blending mode. Tip: Install and use the Alpha Mask plugin to avoid rough edges.

Select the Magic Wand tool. Set the tolerance to "0%" from the toolbar. Use it to select the area around the shape in the Gradient overlay layer. Click Edit -> Invert Selection. Select Black and White in the Colors toolbox. Now hold down the Shift key on your keyboard and drag a gradient from the bottom edge of the selection to the top edge of the selection.

Duplicate your Button layer and move it to the top. Name the layer "Stroke". And set its blend mode to multiply. We're going to use it as a outline around the button.

Apply Effects -> Artistic -> Pencil Sketch. Keep things subtle. Use "2" as your Pencil tip value and "-6" as the "Range" value.

There might be some rough edges around the button now. This is because we used the selection tool on the Gradient overlay layer. You'll have to erase these edges manually. Hide the Background layer by unticking the checkbox for the layer. Select the Eraser tool. Set the Brush width to approximately "10px" from the toolbar. Select the Gradient overlay layer. Zoom in on the rough edges and start erasing gently by moving the eraser near the rough edges and clicking once, then move your eraser and repeat.

If you want to change the appearance of your button, you can edit the layer opacity for different layers. You can change the blend mode. If you want to change the color, use Adjustments -> Hue / Saturation... and adjust the levers. Or use Adjustments -> Curves and adjust the curves for the RGB values.

The button is ready. Save your project as a Paint.NET file. If you want to use the button on your site, you have a number of choices. The most compatible one is to Fill the Background layer with your site color and save your button as a JPEG file. This also ensures your button loads faster in your visitors browser. The most flexible one is to hide the background layer and save your file as a PNG with transparency. Make sure you set bit depth to 32-bit. You could also hide the Shadow layer as well and save your file as a GIF with transparency. The last method works in Internet Explorer 6 and lower as well.

In order to save the image you're using on your website in the correct size, select the shadow layer. Enable the Magic Wand and set tolerance to "0%". Click in the area outside the shadow. Click Edit -> Select Inverse. And click Image -> Crop to Selection.