Making & Using Templates

Difficulty:

Requirements: MS Paint
Writer: Kathrin
Importance: Pretty useful
Special Notes: /

This tutorial will show you how to make and use a cool button or avatar template on.. You guessed it! Paint :). Keep in mind that if you use templates that are not your own that will need to credit properly -- or face getting in a BIG mess the like of which most of us wish to avoid. Also, this tutorial has nothing whatsoever to do with the other Avatar tutorial -- though you may wish to try that style avatar too. Lastly, note that this is a medium level tutorial. That means you need to know how to do simple things such as activate the paint bucket tool etc, while anything that's a little harder will be explained to you. My paint is in German and therefor some of the screenshots may have German on them ;). Also, the tutorial will show you 2 different ways to finish up as you can see by the 2 different results ;). If you use this tutorial I ask that you please link back. If you encounter problems: first re-read the entire tutorial and make sure you did everything 100 pro-cent correctly. Then check our comments to see if anyone else is having the same problem -- that's especially the case went the tutorial just came out. Please don't post in the comments though if you need help. Instead, click on the forum link. There you can find the category

Setting Up
First things first: Open a new window of paint. There. That was easy right? If not just go to Start >> All Programs >> Accessories >> MS Paint :). Now ya got it. If its not there, than your computer might not have paint :(. Go to Start >> Search and run a search on Paint. If it doesn't show up, then sorry you don't have paint :(. For most of ya'all that shouldn't be a problem and you'll be able to move on to the next step. Go to Image >> Attribute. At this point you will need to decide: What do I want to make? An Avatar, a siggy, a link button? I decided upon a link button & I advice you to make either a link button or an avatar because its just easier and faster for the beginner. Depending on what you chose to make you will need to set the image size. An avatar is usually square and either 100 by 100, 60 by 60 or 150 by 150. A Link button tends to be "Hot dog style" or "landscape style" meaning the width is larger than the height. They are often 88 by 15 pixels or 88 by 31 . I am going to make my avatar 88 by 31. Be sure to have "Pixels" and "Color" selected and then press OK :). Now you have a pretty boring screen. Use the paint bucket tool to dump the entire image in any 1 random color. It doesn't matter: you won't see it anymore later anyways. I chose a simple shade of green. The last thing you need to do in this section is pretty easy. Make your color black (or whatever color you want your button to be outlined with in the end -- black usually looks best. Select the line tool and make sure you have the slim-est line selected. Use the square tool (be sure the outline one is highlighted - its on the top). to make a black border around your image.

Cutting
The setting up stuff was really easy and I admit I elaborated a bit too much. Well, this part is a little harder! Why? Because it involves your OWN creativity. Not just a "do this then this then this" kinda deal. That was kindergarten. Now we get to the real stuff! The cutting.. Ohh.. that sounds violent. Its not THAT hard though, no worries. Zoom in on your image. I love things to have a BIG zoom. If you want to zoom more than just with the normal magnifying glass, go to View >> Zoom >> User Defined / custom (my paint is in German therefor I am translating so the words may be slightly different). A popup will come up: select 800% and then OK. That's as large as an image will go in paint and I find it to be quite large enough. Now you see the image that has the number 1-5 on it, right? Sorry that they are kinda small, you'll make it. If you compare the two lines with another (line 2 & 4) you will see that line 2 is "cleaner". In line 4 there are parts were the 2 pixels are not lined diagonally, but next to each other. This looks messy. Make sure that all your diagonal lines look like line 2. Now lets look at numbers 1, 3 and 5. Later, you will see images through number 1 & 5. Number 3 will have a white line area that makes the image look "Cut". If both lines were properly done (line 4 replaced by a line more like line 2) then it would appear that the corner were "cut off". Its somewhat complex to explain -- just look at my final result to understand it. Begin to cut different shapes into your button using the shape tool. Remember to remove the outline (cover it with green or whatever color you used) were it is cut into. This next part is very important. Read it twice and make sure you understand it:
Everything that will later be see through or transparent needs to be white. Everything that will later be white, now needs to be your "other" color.
Below is an enlarged picture of what my image looks like now. Note that there are several different cut outs but none are so large that they cover up the entire image. Its important that at least 75% of the image is white in the end -- else you have too much other stuff going on. Note how I have 3 different types of cutouts (The boxes, the triangle corner and the 2 deep cuts on the top). I also have a "clear" area which is were I plan to later put the text.

Finishing Up (with image) Now you can choose: either put an image into your template or leave it 1-colored. I prefer to leave it 1-colored but heres what you need to do to get this kind of result:

First thing you need to do is find an appropriate image. You can look anywhere from the TCG to the shopkeepers.. Anything that strikes your fancy will do. Open a new window of paint. Select the eye dropper tool. Right click on the white canvas. Go to Image >> uncheck draw opaque. Got that? Good :). Flip back to your other window of paint. Use the selection too to select the entire template. Press ctrl-c to copy (or go to edit >> copy). Then go to your other window and paste (ctrl-v or Edit >> Paste) the template into it. You can now position it as you like. Once you are done positioning, press the zoom tool and zoom in (normal zoom should do), then the selection tool. Use the selection tool to select the outlines of the button or whatever it was. Be sure not to select any extra parts of the picture! Copy (ctrl-c or Edit >> copy) this. Then go to image >> Attribute and change the size of your image to 1 pixel by 1 pixel. Press OK. Now go to Edit >> Paste. I strongly advice changing the green to another color, preferably white :).

Now all you need to do is add final touches such as a text etc :).

Finishing up (1 color)

If you did not want to use an image onto your button or whatever and just want it to be 1 colored then try this method :). Its somewhat easier and you won't even need to open another window. Just fill all the White with any color of your choice (I chose purple) and replace the green with white. Then work with some simple text effects -- I used a lighter shade of purple & then a white to create a simple font effect which gives the image a bit more flair. If you have an animation program you can also animate it :D

~Kathrin