January 1, 2012:
I've gotten some more CI fanmail that I'll post later. Let's usher in the new year with some good cheer and better graphics! (:
December 3, 2011:
October 29, 2011:
September 10, 2011:
August 16, 2011:
August 14, 2011:
July 29, 2011:
July 28, 2011:
tool referenceThis is for Windows Vista Paint.
You can use these as bases, textures, borders, etc., and no credit is needed. Nienke's Resources is also great for textures. *More resources coming soon!
Shrink a Large Image:
If you have a large image you'd like to shrink down so more of it could fit into the small button space, go to Paint's magnifying glass and reduce the percentage until the image is as small as you want it. Then enlarge the canvas (using those little blue dots at the edges of the white space) to create some white space around the image.
Next, 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!
Now select the border tool and make a border around the edges of the image. Then select the color white and made a padding border just inside the colored border. You can made the white padding 2px thick if you want a "neater" look to your button.
So after you've filled in the text with white again, select the lasso tool and then click on the second option that shows up, which makes your select image "transparent." Select a space around your text, then drag it onto your button wherever you want it. Now select the bucket tool and the color white, and then make your text go back to being white.
Note: If you pull the Saturation all the way to the left, it will make your image black-and-white. (And then you should lighten it up a bit since it gets kind of dark.) If you're planning on adding a gradient, this is a great way to go since now the gradient will be more constant and won't be affected by the image's own colors, since there are none. However, if you add a gradient without making the Saturation monochrome, it will play off the existing colors and may look better. Try it out, see which works for your button.
Note: If the gradient's effect is too "much," you can reduce the opacity (and thus the intensity) of it with the opacity bar just under Mode.
Want to create your own gradient? Once you click the gradient tool, change the foreground color (shown) to one of the colors you want your gradient to have. Then click the background color (the back part of the color rectangle) and pick another color (or leave it white if you only want one color for your gradient). Then click the gradient selection recangle and pick one of the first four "FG" options depending on how you want your gradient.
To apply, simply CTRL + P in your scan line and adjust the opacity until it's just barely visible. You can also set the Mode (right above the opacity bar) to Overlay or something if you'd like a slightly different effect.
For textures you should probably use Overlay or Screen. When you're done with the scan line/texture layer, then right click + anchor layer to make it part of the image itself.
1. To add text, select the Text tool and type up whatever you want. Then go up to "Layer," Alpha to Selection. Next go up to "Select," Grow, and pick the #px of your border (keep it at 1px for this). Then add a new layer (new layer button) and position it just below the text layer with the layer arrows.
2. Then go up to "Edit," Fill with FG (or BG) color and you're done! Just hit CTRL + A to get rid of the moved dashed lines.
Note: If you want a cool kind of "cloud" (for lack of better term) text outline then read closely. This follows the same steps as above, only put 2px (or more if you want the "cloud" stronger) instead of 1px for Grow. Then after you've finished everything listed above (including CTRL + A) and have your outline layer selected, go up to "Filters," Blur, Gaussian Blur, and keep it at 5. Put OK and you've got your lovely "cloud" border!
2. Turn off the visibility of ALL layers except the first one (Background) by clicking the eye next to each layer. Now make sure you have the Background layer selected.
3. Select the bucket tool and pick your animation color by clicking the large color rectangle (indicated). Make sure you select the fill options of "FG Color Fill" under Fill Type and "Fill Similar Colors" under Affected Area. Then simply click on the letter you wish to animate, you it will fill it in for you.
4. Click on the empty space where the eye should be for the next layer (then the eye will appear). Click on this layer then color in the next letter. Repeat this step until all of your letters/layers are colored.
5. When you're done, go up to "Filters," Animation, Playback. Then a little box will pop up and you can see a preview of your animation button! *Now you just have to save your button.
6. Go up to "File," Save As (you have to save it as a .gif file). Change whatever your previous file ending was (.png, .jpeg, etc.) to .gif.
Note: If you want to be able to edit the button at a later date, save a copy as .xcf and your layers and everything will be editable. You should always save a backup copy of your buttons, just in case!
7. When this window pops up, select "Save As Animation" and then click Export.
8. The last thing you have to do is pick your animation speed. I usually do 115-120 if I want it to go a little slower, and 80-90 or 100 if I want it on the fast side. It's up to you, really. Now just click Save and upload your button wherever.
You can now animate your own buttons (and anything at all, really), courtesy of Create Impressions. (:
How do you upload your buttons to start using them?
Try Tinypic or Photobucket; Photobucket requires you to make an account, Tinypic doesn't. Just upload your image and start using the IMG code using the question above.
What fonts do you use in your tutorial?
I used the font 04b03, though there's also fonts like 04b_24, Redensek and Silkscreen. If you want fonts like these, refer to the question below.
I don't have any pixel (bitmap) fonts! What do I do?
You must download them from somewhere off-site like dafont and fontcubes. Search for "bitmap fonts."
What version of Paint do you have?
I used the Windows Vista version of MS Paint in this tutorial. For older versions, the layout and tools might look a little different, but I'm sure they work the same. However, this version is quite different from the Windows 7 version, which I acquired recently. I'll be making a tutorial for that version soon.
How do I make a link out of my button?
Simply copy and paste this code and put your own link and image URL where it applies.
I have different version of Paint. Can you make a tutorial for it?
Until recently, I couldn't help, but I now have the Windows 7 version of Paint so I will try to make a new tutorial for it!
Can you make me a button?
I'm too busy and that's the point of this tutorial - to learn to make your own buttons!
Banner Tutorial: (2)
link backDid Create Impressions help you out? Please link back if it did and spread the word!
AffiliatesRequests are open! (Subj: CI Affies)
directoriesDid you list me?
NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2013.
® denotes Reg. US Pat. & TM Office. All rights reserved.
Use of this site signifies your acceptance of the Terms and Conditions