Uchimaki Yuuzora
0 comments
A Tutorial on Making a Basic Banner in MS Paint
There will be quite a few links leading to images here, okay? I hope you don't mind.

I'll use this image. The banner I'll make will be 200x40px.

First of all, when I was still using MS Paint, this was one of my most used buttons. It cuts rectangular shapes of your making away from the rest of the picture. Of course, the rest of the picture is still there when you move the cut portion around, so you have to be careful that you don't end up getting some of the extemporaneous picture parts in your banner (unless you happen to want them in there...).

One of the most important things to know about Paint is that it works from left to right, top to bottom. There is no cropping option available (where you choose what portion you want and it cuts and "throws away," so to speak, the rest of the image), so you have to move your selection to the top left corner like so.

The cut that you make doesn't have to be the banner size you want (believe me, there's no ability to tell that you cut enough or cut too much in Paint, so it's best to leave that until you've got exactly the portion of the picture you want). The only reason you cut first is to get the portion of the picture you want (as I just mentioned before).

At the bottom right corner - before the gray - you can resize the canvas you're working on. Bring it up to the edges of the selection you made, so that it's like this and you can't see anymore of the extra image parts.

The Image > Attributes option will show you how close/far you are to/from your banner size goal by giving you this handy-dandy dialogue box.

I'm well aware that you can change the width and height to whatever you want with that dialogue box, but don't do it unless you're prepared to cut away your image like this.

Never fear, though, I have the mystical powers of CTRL+Z! Please note that Paint, unlike other photo editing software, only allows you a certain number of "undo"s, and then once you've maxed out, you're stuck with what's left. Be careful!

Moving on, what you're going to have to do is trim down your image to get it as close to your chosen size as possible - using the "select" option and then checking the "Attributes" dialogue box. You can also use the adjustable left side, bottom, and bottom right to cut away the right side and bottom of the image.

300x109
235x92
229x65
216x65
213x65
208x65
(When you get close like this, please use the Zoom feature (please note that the zoom size I'm looking at in the screen shot is not the highest there is). It makes seeing how many pixels you're moving so much easier because you can see the individual pixels in the image much clearer. Generally, I try to get as close as possible when I'm cutting - 6 or 8 on the Zoom feature.)

Voila - I've hit one of my goals: 200x65. Now I need to focus on getting the 40px height.

200x59
200x50

ALL RIGHT! 200x40!

So now that the image is cut down to my preferred banner size, I need to decide what I'm going to do first. I could make a border (for me - a black line all around the outside of the image) or I could text. ... I think that I'll do a (double) border, that way, if I need to, I can overlap the text over it.

So I'll start with putting a black border around the image. If you decide to do this, you can do it one of two ways:

The easy way - use the line feature. You just click and drag the line (which, by the way, can be any color; I just prefer black most of the time).

Or the hard way - draw it on using the pencil feature. You'll end up doing this pixel by pixel, but it has worked for me in the past when I was in one of my perfectionist moods.

There, now I have the first part of my double border done. The second part involves a white line two pixels "above" the black border.

... Hmm, admittedly, it looks better when done in Photoshop; I'll try changing the color. And, as a note, I can't just use flood fill because some of the pixels in the skin tone (and their eyes - don't even get me started! D:) are too close to white that they might get picked up in the flood fill as well, which is a big no-no.

A gray doesn't work either. I kind of don't want to bother with it anymore (haha, it's really late and I have to get up early tomorrow).

Let's get to text. It\'s the A icon. ALSO: As depicted in the picture, you need to have the bottom option in use so that you don't end up with a white space behind the text you type. THIS IS NECESSARY! Don't forget it, okay? It took me forever to figure out and I was always so frustrated because I couldn't figure out how to make it so that there was no white space behind the text.

Another important thing to note is that you can't use the text option if you're in Zoom. It just won't work. Believe me, it's annoying.

I'm going to go with my personal default when it comes to the text: The NejiHina Guild.

Don\'t forget to save as a .png!

And I'm done; I just have to upload to my Photobucket, and then I'm set:

http://tinyurl.com/rannhgb

Anyway, I hope this helps you some with familiarizing yourself with Paint. It's a really easy application to learn if you practice enough with it. :) I have to go and add this banner to the banners list now, though, and then get to sleep. Gah. dx

, ♥ ♥ ♥ ,
yuuchandesuyo!