welcome to the tutorial making gorgeous buttons w/ ms Paint Has this ever happened to you? You: I wish I could make buttons. *Shakes fists at sky* Isn't there anyone who could teach me?! Well despair no further, since you've stumbled upon Ashyaruu's Button Tutorial, one of the few places in Neopia that'll show you, step by step, how to make a button in different styles! Then, when you're done, you can take home a head full of knowledge and hopefully, a shiny button made by you and recommend this page to your friends! ABT has been teaching you how to make buttons since October 27, 2008! WOW! :D Animation I am very sorry that I do not have a section for animation, but since I do not have a program for it, I obviously can't have tutorial section on it. If you would like a tutorial on animation, check out the section "GIF Animator" @ Microsoft Paint Guide. for a beginner's reference here are the toolbar buttons i mention: here are the colors i mention: Templates for your convenience! Just copy & paste into Paint! No, you don't need to credit me, that's just silly. Anyone can make these. :) *Sorry, the rounded one isn't transparent. 88x31 back to navigation? step one Picking your image If you've already got one, just skip this step. If you haven't, then here we goooooo! A good way of picking an image is searching an image in the Neopets Searchbar that pertains to the site! (That's pretty obvious, eh?) If you don't find anything that you like, then try Neopets': Backgrounds, Collectable Card Backgrounds, Tiled Backgrounds, MSN Buddy Icons, New Features, and TCG Images. You want to pick an image that has a bit of "meat" on it; don't pick a really spindly or skinny one, pick a well-rounded one so that when you go to crop it, you have some background to work with. Example: NOT GOOD: VS GOOD: shrinking a big image Firstly, pick your image;; doesn't matter how large. Then go to Paint's magnifying glass and shrink down the image as until the image is as small as you want it. Then enlarge the canvas to create some white space around the image: Then hit the PrtSc (print screen) key on your keyboard (it's usually in the top right of your keyboard) and then return the image to its original size. Lastly, paste in your print screen, pull the contours of the canvas around the now-shrunken image, and then proceed to the next section to crop your actual button image! *You would want to shrink a very large image so you could incorporate more of the image into your button! back to navigation? step two Cropping your image *Don't think you have Paint? (It's only for PCs, not Macs, for one.) Go to the start menu of your computer and type in "Paint" in the searchbar. Once you've picked your image, copy & paste it into Microsoft Paint. Now, if your image is a Neopets item or something of that size, it's probably not 88px in width. So elongate the width a good bit so you have extra room while cropping. Now; how to crop 1) Pick the "lasso" icon on the top right of your MS Paint toolbar 2) Stretch it out to cover exactly 88x31 pixels (that's 88 pixels OUTWARD, width, and 31 pixels UP AND DOWN, height), then right click on it and put "crop." It'll immediately eliminate the rest of the image and space, and focus only on the cropped section. back to navigation? step three borders Choose the "border" tool (the second-to-last on the left column of the toolbar) and make a black border on the very outside of your button. Then, select the color white and do another border just on the inside of the black one for padding. Alternate borders I always use the solid border, but you can use a dashed or dotted border, or even go without one if you'd like. Here are some examples: You don't even have to do these standard borders. Use your own style!! *Remember, any solid lines you see in my tutorial pics can always be swapped for dotted/dashed (or something else) lines! I just use solid ones to make it quick. the "threaded" effect This SHOULD go in before text! So the "threaded" effect is just dashes inside of the padding that look nice and to me look like they were sewn (hence the name "threaded"). Like this: And hopefully, it'll make your button look pretty like this one: back to navigation? step four Text Only applies if you're using a pixel font And this may not even apply to everyone. See, I find that when I use a pixel font, it gets all nasty and isn't just black, but has a ton of different colors mixed in, like this: So if this applies to you, here's my quick strategy of getting my pixel text ALL (or mostly) black, no-sweat! First, make the area you're going to first put your text in pink (see color reference for which color pink!) Then select white as your color and type in your text over the pink, like this: Then highlight a section around your text, right click, and select Invert Colors Next, clear away all pink AND dark green, so you end up with this: (for beginners: to "Clear away" the unwanted colors, select the color-filling bucket tool [see reference toolbar if you don't know which that is] and select the color white and erase away!) back to navigation? step five positioning your text There are tons of ways to position your text! While it's easier to center your text to the best of your ability (or, if you want, you can measure out the exact pixels to make it perfectly centered -__- Your choice), there are some other ways to position your text. Take a look: back to navigation? step six *optional outlining your text In some button cases, the black really isn't showing up well or it's clashing with another color or SOMETHING. So the easiest remedy for this is what I call outlining the text in white. Just select the pencil tool, the color white, and after positioning your text, put a white dot next to everywhere the black text touches the button image, like this: heavy duty outlining Sometimes the regular outlining isn't enough. This "heavy duty" outlining is also much quicker & easier than the regular one. It's the regular outlining with some more dots included. You put a dot not only where the text touches the image, but also diagonally so the text is not in contact with the image whatsoever. This is quicker because you can outline the entire image in one pencil stroke. Observe: Ok, yeah, on THIS button it doesn't look nice, but I just picked some random image to demonstrate. inverted outlining Sometimes a white outline is too light compared to the colors around it, and you need a darker color. Well have no fear, "inverted" outlining is here! So how does this thing work? You just switch the colors of your outlining. Now, the text is white and the outlining black. (You always use "heavy duty" outlining for this.) And it looks like this: No doubt you see a ton of buttons using this! Well, you should too, it's amazing. =] back to navigation? step seven *optional colored background Sometimes there's overwhelming white, or it just looks out of place, or you just aren't digging a whole lot of white background. So here's how to get a background nicely matched to your button's image! Firstly, select the color-sampling tool (the eyedropper thing). Then magnify your button and pick which color of your button image that you want (pick a niiiice light color!) Just take the eyedropper thing and click on the color pixel, and automatically you will have that color selected! Then select the color-filling bucket tool and drop the color onto the white space of your button: Lastly, replace the white padding border, which had been previously lost: back to navigation? step eight *optional outlining your image This is just a make-it-look-better sort of effect, and one I really like ;) Ok, so this won't work with all images (obviously); only when the image you're using doesn't take up all the space of the button. Here's what I mean: Not able: VS Able: (These buttons are ones I made over at Button Requests.) All right, so, basically, outlining your image is just the same as with outlining your text, only now it's around the exact contours of the image instead of text. (I recently got this idea of outlining the image!) So you end up with this: And if need be, get rid of all the rest of the white space by pulling in the canvas to conform to the edges of your button perfectly! Go upload it at your favorite uploader and voila! That is your beautiful, spectacular, finished button! Courtesy of Ashyaruu's Button Tutorial! =D back to navigation? pretty picnik style Ok, so just before Button Requests closed, I had discovered a new, awesome way of making buttons that people really seemed to love! So here are some examples, and hopefully you'll be able to make them yourself! background Picnik*com is a great, clean image editing site that's free and that I like to use since I cannot and do not want to download a real program for it (and I don't know how to use my Photoshop CS4). It's quick, it's easy, it's free, and most functions are accessible without being a Premium Member (which costs money). (Yes, the site does take a BIT of time to load. But what can you do?) image editing First, upload your image onto Picnik. (To upload, it's fairly simple. You should find a big green button that says as much. Just upload the desired image and let's get going.) Go to the "Create" tab. Scroll through the sidebar to find the right effects; I'll go in order. Now, I don't usually toggle too much with the settings; sometimes I just click & apply, or edit the settings a tiny bit so it's not too light or whatever. I go for the following; Soften Matte Orton-ish Film grain (light) Snow Sometimes I might use; 1960's Tint Cross Process Boost Okay. Lastly, I might add some overlaid text in the background of the image, like a couple of the examples. You just go to the "Text" tab thing (which is still under "Create"), write something in the box, pick a font, and click add. Then make the font color black (using the window that popped up) and make it small enough to fit on the button. Then, under the Advanced Blend Modes, click "Overlay." finishing up with picnik If you like, you can add stickers or frames, but I never do. (Those links are on the same line as "Text.") Just click up on the "Save & Share" tab and save your image to your computer. You're done editing! text I always use the font 04b_24 in this style; this is the same font that I used in the regular Ashyaruu's Button Tutorial button. I pick a color that matches with the image itself (and darken it a little) for the text and make that color the same (or a little darker/lighter) for the border. I outline the text In the "Heavy Duty" style demonstrated under step six. That's it, folks! Done! back to navigation? others Saving && Uploading I've found that saving in .jpg makes my image messed up and gross, and .bmp isn't much better. So I save my images in .png, and it's crystal clear all the time. That's my suggestion for saving ;) For uploading, I advise you not to use the uploader at neoextreme*com, since that crashes a lot and renders your images broken. The easiest and quickest to use is tinypic*com, but if you want a database of all your images and image editing, there's photobucket*com. :D Are you just not getting the tutorial? need help? I would be happy to take your questions (and comments, suggestions - anything!!) Just neomail me anytime with anything!! animation suggestion Well, even though I don't have animation, I still have a tip: don't make the animated color totally light; make it a few shades off the regular color or gray or something; not white or a totally weird color (it looks bad that way). back to navigation? FAQ how do you provide the code for buttons? You use the textarea. Be sure to remove ALL spaces! < TEXTAREA > texthere </ TEXTAREA > What fonts do you use in your tutorial? I used the font 04b_24. I also used Sevenet (on the Impulse button) and Silkscreen (on the Ashyaruu button). Redensek was also shown for Step 8 in the buttons for the examples. If you want these fonts, refer to the question below. What version of Paint do you have? I use the Windows Vista version of MS Paint, if it's any different o_0 If not, I guess the layout will be different, but the tools and functions should be the same, right? -__- I don't have any pixel fonts! What do I do? Firstly, look if you have SmallFonts. That's pretty common. Then, if not, and you really want pixel fonts, why don't you download some off the internet? I'd like to suggest dafont*com & fontcubes*com. How do I make a link out of my button? Like this! (I'm sorry I can't provide the actual code for you, it won't let me.) back to navigation? button bases Please credit me if you use these!! Of course, more coming ASAP. Button base by ABT. Button base by <a href=/~ashyaruu>ABT</a>. (The second one is of Hilary Duff and Michael Chad Murray in A Cinderella Story; the third is of Michael Chad Murray; the sixth is of Bella & Jacob (Kirsten Stewart & Taylor Lautner); the ninth is of Megan Fox; and the tenth is of Harry, Ron, & Hermione. I just picked images for how nice they were, not particularly because I support the people in them.) back to navigation? fanmail & awards the success stories ^.^ Send me some? :3 drag & drop the following w00t w00t! Drag & drop! back to navigation?

Navigation reference/templates 1. selecting 2. cropping 3. borders 4. text 5. positioning 6. outlining text* 7. colored background* 8. outlining image* pretty picnik style!! others FAQ button bases fanmail & awards The asterisk (*) indicates that the step is optional. updates November 14: It's been over 2 weeks and I haven't even thought about updating ABT! :O Since I am in a very GIMP-y mood, I made a new banner! (The old one, as you can see, is terrible. D:) I'll get listed at more places and see what else I can do around ABT. ^-^ link back Did Ashyaruu's Button Tutorial help you out? Please link back if it did - spread the word! <a href=/~Ashyaruu target="_blank"><img src=http://i42.tinypic.com/2qxm686.png border=0></a> <a href=/~Ashyaruu target="_blank"><img src=http://i44.tinypic.com/212y4x.png border=0></a> Button help by Ashyaruu's Button Tutorial. Button help by <a href=/~ashyaruu>Ashyaruu's Button Tutorial</a>.<br> Button base by ABT. Button base by <a href=/~ashyaruu>ABT</a>. My other Sites Affies If you'd like to be an affie and have an 88x31 button, please neomail me! Good quality sites only, please. (I deleted my inactive affies.) listed at contact me Anytime for anything! I'd love to hear from you – feedback, suggestions, your own button stories, for help, anything you want! ;) Just use the image below! PLEASE read the FAQ before you neomail me! Every single neomail I get nowdays for this site is always a question covered in my FAQ. =__= Rankings Ranked #4 guide! Voted #4 guide =0 Ranked #3 guide! Credits Entire layout and all content by me, Cass (shroudedwalk1870). Please don't steal anything. Thanks to eewitsbree for all of your support & help on this site. ^^ All images (of course, including the button bases, which I just cropped) used on this site are © Neopets or their respective owners, NOT me. Started October 27, 2008 July 1, 2009 -- 10,000+ views! :D