Mini Banner tutorial for Microsoft Paint

24 Nov 2006 > 8 Comments

Learn how to create a 88 X 31px
affiliate button in MS Paint.

Go to Image > Attributes (Ctrl+E), and make the following settings:

1. Width: 88
2. Height: 31
3. Units: Pixels
4. Colours: Colours

Colour Scheme

The trouble with MS Paint is that it doesn’t support hex colour codes. However, there is a wonderful tool called Color Cop, that you can use to convert color values.

The banner should match the site’s design, so open up color cop, and use the dropper tool to pick your site colours.

To enter the colour values into Paint, go to Colours > Edit Colours > Define Custom Colours, and enter the R G B values from Color Cop into Paint, and press Add to Custom Colours.

Text

It’s a good idea to know where to place the text for your site name. Because the canvas is limited, you might want to use an abbreviation, for example if your site is called Final Fantasy: Espers of Ivalice, you’ll need to shorten it down to something like FF:EOI. Or, perhaps leave the text out altogether.

Firstly, choose your text colour. Go to Colours > Edit Colours, and select a colour from the palette.

Selecting a good font is important. Becasue the text size needs to be scaled down to a minimum, you’ll need something that works well at a smaller size. A good sans-serif font like Verdana would do the job.

To open up the Text Tool, first you need to make sure the image is at normal size (Ctrl+Page Up). Click the Text Tool (The A icon), and make a selection on the image, where you want to place the site name.

View the Text Toolbar by going to View > Text Toolbar (You need to make a texta selection before the Text Toolbar can be opened).

If you don’t have enough room for your text, grab one of the tiny square nodes, and drag the selection box.

It doesn’t have to be perfect, as you can use the Select Tool (The Dotted Rectangle Icon) to move the text around, afterwards.

You can also pixel the text yourself. Check out my Pixel text tutorial for more information.

Now that the text is added, we can use the magnifier to enlarge the size of the image, making it much easier to work on.

Go to View > Zoom > Custom > 800% (or click the magnify icon in the tools palette and click 8x)

You can also activate the thumbnail (View > Zoom > Show Thumbnail), to view a live preview of the image at its actual size.

Image

To paste an image onto the mini-banner, go to Edit > Paste From…, and select your image. I’m using my snail Icon.

You can use the Select Tool to make a selection around the image and reposition it.

Background Colour

Select a colour from the colour palette, and select the Fill With Colour Tool, and fill the background. (Paintbucket Icon)

Some Extra additions to my banner. You can Skip This bit

Alternate Background Colour

I want to add a lighter bg colour on the right hand side of the image, so I choose my custom colour, and select the Line Tool (Diagonal Line Icon), and holding down the mouse button, I draw a vertical line to divide the two background colours. I then select the Fill With Colour Tool, and floodfill the right hand side background.

Some Drop shaddow

Select the Pick Colour Tool (Colour Dropper Icon) and click on the black outline of the Snail. Then go to Colours > Edit Colours > Define Custom Colours.

Drag the Colour Slider (The arrow) about midway on the Colour Gradient (See Image). Press OK.

Select the Line Tool and draw a 1px solid dropshadow on the right and bottom of the image.

Add a Glassy-shiny effect to the Text

Again, select the Pick Colour Tool (Colour Dropper Icon) and click on the text Colour. Then go to Colours > Edit Colours > Define Custom Colours.

Drag the Colour Slider (The arrow) until you have a lighter shade of pink, and using the line tool, repaint over the top half of the text.

Add a Border, and Highlight

Select the Line Tool and simple draw a 1px solid border around the edge of the image.

for the highlight click on the background colour using the Pick Colour Tool (Colour Dropper Icon), and go to Colours > Edit Colours > Define Custom Colours. Drag the Colour Slider (The arrow) until you have a lighter shade of background. It doesn’t need to be too extreme to have an effect, so my tip is: Be subtle

Again, select the Line Tool, and draw another 1px solid line on the inside of the border across the top left hand side of the mini-banner.

That about wraps it up for this tutorial. You might also want to try using gradients too, to give the banner a nice shiny look. To learn how to whip up a gradient in Microsoft Paint, check out my Making Gradients in Paint Tutorial.

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 all round formats for web graphics until png is fully supported), a good option would be to download a free Image Editor such as IrfanView.

Related Posts

• Mini Banners
• Blend the text with banner background in Paint Shop Pro
• Screen capture, and Avatar making tutorial for Microsoft Paint
• Mini Web Icons (Download)
• Isometric Pixel Art