Making Gradients in Paint Tutorial

17 Sep 2006 > 13 Comments

These days, if I want to create a gradient, I just slap two hex colour codes together, and let a more powerful graphics program do the rest, but back in the early days I was stuck with this method. Even so, It’s worth checking out, and I believe this taught me something about using colours.

Gradients bring colours to life and can also be used to create a three-dimentional look to your website or forum. However, creating gradients in Paint can be painfully slow going. It’s ok for smaller images such as icons and buttons, but for banner’s and such, it’s really going to be time consuming.

Another option would be to use an Online gradient generator.

All versions of Paint are basically the same, and relatively simple to use. Save images in .png format, if possible. Never try saving them as .jpg’s or .gif’s. In Paint, these formats will destroy your graphics. To save Your images as gif’s and jpegs (The best formats for web graphics), a good option would be to download a free Image Editor such as IrfanView.

Enough JibberJabber. Here’s the Tutorial…

Open a new image

Go to Attributes (Ctrl+E) and set the width to 65 and the height to 25 pixels.

Go to View > Zoom > Custom > 800%.

Show Grid (Ctrl+G)

Select the Line Tool and go to colours > Edit Colours > Define custom Colours, and select a colour.

You can change the hue and saturation of your colour using the colour swatch.

When you have found the colour you like add it to custom colours.

Next, go to the colour gradient (Below).

You can drag the colour slider up and down the Colour Gradient to change the luminescence of the colour. For this grad I’m going to start off with a light colour

Now draw a line across the top of the image like this.

Go back to the colour gradient and move the slider down three steps.

And that’s it. Just repeat the process…

until you reach the bottom.

You should now have an image that looks something like this:

If you want you can buttonize it. To do this pick a very light shade in the colour gradient and make a line down the left hand side and across the top of your grad, and then choose a dark shade and draw a line down the right hand side and across the bottom of the grad, like this:

You should now have a button looking something like this.

Related Posts

• Making a title bar gradient and navi button (ProBoards Tutorial)
• Creating folder icons using Microsoft’s Paint
• Creating a glassy effect on smilies in MS paint
• Mini Banner tutorial for Microsoft Paint
• Easy pixel background tutorial