paint.net tutorials. not just 1

[BlackHax]

Posted: Fri Mar 24, 2006 6:43 pm Post subject: Making glass buttons I was over at Microsoft's Visual Studio site and saw these cool buttons.



I wanted to see how easy or difficult it would be to recreate them in Paint.NET. After being able to accomplish it in just a few easy steps I figured I'd write a tutorial on it.

Ok, we'll start of with creating a new image (ctrl+n). I chose 200x50 px. Fill it in with a color of your choice. This color will be the main color of your button. Whichever color you choose, avoid having the "Value" of that color set to maximum (100) as we will be using it in the next step for a gradient.

Pick the Rectangle tool (o), make sure you have "Draw Filled Shape" selected (bottom toolbar, next to "Fill style"), and set the value of your color to maximum (100). Go about three quaters down the image and draw a rectangle from that point down, all the way across. Do a Gaussian Blur at a 10px radius.



Add a new layer. On that new layer, from the left, go in about a third of the way and draw a white rectangle all the way across the image, top to bottom. Do a Gaussian Blur at 100px radius.





Add a new layer. Pick the Line/Curve tool (o). Turn off Antialiasing. With the brush width set at a value of 2, go down about half way and draw a line all the way across. Start at -1,25 and finish at 199,25 so the nubs (handles) are pretty much centered. I used a bright red for this. Grab the two center nubs and move each one down about 10 pixels.





Pick the the Magic Wand tool (s) and select the bottom half of the layer (below the line). I used a tolerance level of 69. Once that is selected, hold the Ctrl key down and now select the line itself. While you have this portion selected, switch to the layer below this one (the one with the white gradient). With that layer selected, cut out the selection (ctrl+x). Uncheck the layer with the line so you can no longer see it.



On you white gradient layer, do a motion blur with the angle set at 0.00 degrees and the distance set at 20px. Select the entire image using the Rectangle Select tool (s). Switch to the Move Selected Pixels tool (m). Grab the bottom center nub and move it up about 16 pixels.





Open the properties dialog for that layer by double clicking it in the Layers window or by pressing F4 and adjust the opacity to 150.



Flatten the image (ctrl+shift+f). Add a new layer and select the Rounded Rectangle tool (o). Set the brush width to 4 and make sure you have "Draw shape outline" selected. Turn on antialiasing. From the top left corner, go in 5 pixels and down 5 pixels. From there, draw your rectangle until it is centered in the image.



Pick the Magic Wand again and set the tolerance to 30. Select the rectangle you just made. Switch to the other layer and cut out the selection (ctrl+x). Eraese the remaining outer portion. You may notice that the bottom right corner is not the same as the other three. It's not as round. To get it more rounded, zoom in and add the missing pixels manually.

There you have it!



It's not an exact reproduction but it is pretty close.

As always, experament with the colors, blurs, gradients, and all that good stuff to achieve the look you want.

Additional Comment:
First things first, you'll need Paint.NET open. Since I usually don't create full-page gradients, I always start by creating a new image at a much smaller size. The one for this example was 200 pixels wide by 50 pixels high.
The key to this gradient method is multiple layers. Create as many new layers as you'll need for the individual colors. Each new color needs it's own layer. This example used three total layers, including the "Background" layer.
Fill the background layer with your first color. In this example, the first color was straight red, or hex code #FF0000. This color will be the main background color. It is a good idea to fill the entire layer with the color because you never know how far the fade of the second color will go, and you don't want your supporting color to cut out underneath your fade.
In your second layer, draw a rectangular selection starting at about 1/3 of the way from the top, and continuing on until the bottom. Fill this selection with your second color. In this case, it was orange, hex code #FF8800.
In the third layer, draw a rectangular selection starting at about 2/3 of the way from the top, and continuing on until the bottom. Fill this selection with your third color. In this case, it was yellow, hex code #F6FF00.
After all that, you should have something that looks something like this:

Now, all that's left to do is blur the layers. Under the "Effects" menu, select "Blur..." Set the slider to whatever blur radius you feel is appropriate. In this example, I used a radius of 16 pixels for a smooth gradient. After blurring each layer, your image should resemble this:

And that's a gradient! For this example, I flattened the image and repeated the blur on the now-combined "Background" layer so that each color blended into the next as smoothly as possible.
That's how you can make a basic gradient with Paint.NET! Using the same basic techniques, you can create even more complex gradients, like this one:

[DarkDemon]

nice. helped me make same buttons for my website. I used it on photoshop and came up with the same results.