Paint.NET Tutorial

How To Make 3D Looking Bars Using Gradient

Description:

Shows you how to use the tutorial by Crazy Man Dan and nitebyrd on how to make a Gradient image into 3D bars that can be used for stuff like side bars on web pages.

Step 1:

Open Paint.Net and then go to file > New. Make the width 1 and the height 5 (Yes I know that small but it needs to be done this way before we can make it bigger). Click ok and then zoom in all the way (3200%).

Step 2:

Ok we now will color each pixel using the pencil tool. In this tutorial I used shades of grays to make a 3D sliver bar but you may use what colors you like but before you do that you may want to do it this way to get the hang of it. We will be filling in each pixel from top to bottom using the pencil tool.

1st pixel: A light gray that not to light or to dark. To get the same colors as mine use the RPG options in the colors window. RED = 109, BLUE = 109, GREEN = 109 or if you want to use the HEX value it is 6D6D6D.

2nd pixel: A very light color that almost looks white. This color will give the look of a glare from a light hitting of the bar. To get the same colors as mine use the RPG options in the colors window. RED = 186, BLUE = 186, GREEN = 186 or if you want to use the HEX value it is BABABA.

3rd pixel: This pixel is the darkest pixel and most of the time it just black but it could also be the lightest depending on the colors you pick. This pixel is what will make the bend point look in the image. To get the same colors as mine use the RPG options in the colors window. RED = 0, BLUE = 0, GREEN = 0 or if you want to use the HEX value it is 000000.

4th pixel: A bit of the black and will help with the shadow. To get the same colors as mine use the RPG options in the colors window. RED = 38, BLUE = 38, GREEN = 38 or if you want to use the HEX value it is 262626.

5th pixel: A bit lighter then the 4 pixel. To get the same colors as mine use the RPG options in the colors window. RED = 127, BLUE = 127, GREEN = 127 or if you want to use the HEX value it is 7F7F7F.

You should end up with something that looks like this

Step 3:

Now we can resize it and see how it came out. Go to image > Resize. Now we will use a width of 50 and a height 100 (You can play around with the sizes to see what sizes work). Also make sure that Resampling is set to Bilinear, then click OK.

Like So

Now after that you should have a 3D bar. I know my 3D bar does not look the best but that just because of the colors I used. If you set the right colors it will look more 3D.

Others that I made by playing with the pixels.

--------

Tutorial By: HITMAN-X-

Website: www.levelcreators.com

E-Mail: hitman@levelcreators.com

See A better tutorial for making 3D Bars