welcome to Create Impressions

Create Impressions by Cass [evileh] is a button and banner tutorial that will help you create great first impressions of your site! Here you can learn how to make an awesome button using only Microsoft Paint (including extra goodies with GIMP's capabilities) as well as a lovely banner in GIMP. I've also provided plenty of extra resources to help you create the perfect graphic! Got any questions? I would love to answer them!

updates

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:
Got some more fanmail. ^-^ I'm extremely glad people find CI so helpful after all these years!

October 29, 2011:
Got two new awesome fanmails! (The newest fanmails are at the bottom of their sections.)
Did an affiliate sweep. Affiliate requests are still open, so request now!

September 10, 2011:
When are the new content revamps coming? Well, in between new layouts for my other sites and school, probably not for a while...:3 Sorry, y'all!
Gah! A bunch of my affies closed. Request? c:
Got a lovely gift button from Utopia! Thank you!

August 16, 2011:
Now affiliated with Brilliant Secrets!

August 14, 2011:
I completely revamped the banner tutorial section, which I moved to /~mochiieth so it can use up the entire page instead of being confined to one scrollbox. Enjoy!
Tomorrow or Tuesday I'll revise the GIMP Animation section, and after that I'll have to tackle the GIMP Button Tutorial section!
I added another bit of fanmail and reorganized the fanmail section a bit.
Check out A9's new layout? C:

July 29, 2011:
Huzzah! I revised the Paint Button Tutorial. (:

July 28, 2011:
Introducing Create Impressions v.7 Airship Down! Finally, something fresh for CI!
Affiliate requests are wide open, so request now!
I feel energized by this new layout! Expect content and layout organization revamps very soon, as well as a bunch of new resources.
Cleared updates.

tool reference

This is for Windows Vista Paint.

button resources

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!

what programs are we using?

Microsoft Paint (aka MS Paint or just Paint) is a program all PCs come with, and you can use it for basic buttons. GIMP is a completely free program you have to download from the internet. With it, you can animate your buttons, add textures, make banners, and do all kinds of cool and crazy stuff. If you run an internet search for it, you'll find it. GIMP opens up new possibilities for button-making, but if you don't feel comfortable downloading a program, that's why the first part of this tutorial is for Paint only (though you're out of luck for banners, sorry.)

paint button tutorial

Either drag and drop the resized images to the address bar or right click + view image to view them in full size.

step 1: select

Take a look at the following sections for a great selection of potential images for your button: Backgrounds, Collectable Card Backgrounds, Tiled Backgrounds, MSN Buddy Icons, Background Bonanza, Caption Contests, New Features, and TCG Images.

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!

step 2: crop

CTRL + P (paste) your image into Paint and select the magnifying glass tool. Magnify the image to the maximum in the area you want to crop for your button, and then select the lasso tool. Stretch it 88px in width and 31px in length (the numbers at the bottom right of your screen tell you what number you're at), right click on your selected part, and select crop.

step 3: border

For a solid-lined border, first choose the eyedropper tool and select a dominant color from your image. Then go to "Colors" (at the top) Edit Colors Define Custom Colors, and then use the little black arrow on the left to make the color a little bit darker. Click Add to Custom Colors and then click OK.

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.

step 4: text

Usually I hand-pixel the letters of a button because I don't want to bother with pixel fonts, but I'd imagine most of you don't have pixel font letters memorized like I do (lol). But pixel fonts are never just a solid color (which is icky), so to actually get them to be mostly one color, first make some room under your button and fill that space in with pink. Type your site name on the pink with white, and then pick the lasso tool, select a space around your text, right click, and "Invert Colors". Finally, use the bucket tool to clear away the pick and green. Voila! Your text is now mostly black.

step 5: outline text

To outline your text quickly, select a space around your text, right click, and "Invert Colors." Then, using the pencil tool, clear away all pixels that aren't directly next to or diagonal from the text itself. You can hand-pixel the outline if you want, but this is much faster. Then, using the same color as your border, use the bucket tool to fill in your outline as that color.

step 6: position text

Before you can move your text to your button, you should fill in the (presumably) white text with a different color before putting it on the button. This is because when you put it on, the white will be transparent and become filled with the button image below it, so you'll have to go back in and hand-pixel the white back into it. If you color it a different color first, then you can easily use the bucket tool to fill it back to white.

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.

step 7: Save & Upload

The clearest setting to save your images in is .png, though some may choose .bmp or .jpeg. To upload your images, the easiest and quickest to use is Tinypic (making an account is optional) and Photobucket (must make an account).

gimp button tutorial

Coming soon! (Will replace the GIMP Effects section below.)

gimp effects

These are shown with buttons but they are, of course, applicable to both buttons and banners.

recoloring

Go up to "Colors," Hue, Saturation...Editing the hue, lightness, and/or saturation can get a nice, funky effect on your image without adding gradients just yet. Toggle with the options and see what makes your specific image look the best.

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.

Adding gradients

To add gradients to your image, select the gradient tool, set your mode to Overlay (or Screen if you want a lighter and more dominant gradient effect), and stretch the pointer over your image.

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.

Applying scan lines & textures

Note: Scan lines/textures should, of course, go in before text (unless you want the effects on the text as well...)

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.

Outlining text

Instead of bothering with adding and outlining your text in Paint, you can do it quickly and easily with GIMP. But first make sure you've added all the effects you want to before beginning to add text.

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!

Transparency

After you upload your image and magnify it to a comfortable size, go up to "Layer," Transparency, Add Alpha Channel. (It may already be selected.) Then select the magic wand tool and click on the area you wish to make transparent. Now hit Del on your keyboard and voila, you now have a transparent image. Just save it regularly and you're good to go.

text drop shadow

Coming soon!

adding an image to text

Coming soon!

gimp animation

You should add in all GIMP effects (transparency, scan lines/textures, etc.) and generally finish your button before you start to animate. Otherwise each of your frames won't, of course, be the same.

1. Open up your image and magnify it so it's at a comfortable size to edit the pixels. Now right click on your Background layer and click "Duplicate Layer." Add as many duplicate layers as you need (each layer is a 'frame'). For example, if you want a 5-letter word animated with just one animation per letter, you will have 5 frames. If you want additional animations, you would add more frames.

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. (:

Finished product!

gimp banner tutorial

extraneous

Frequently asked questions | ask?

How do you provide the code for buttons?
You use the textarea. Change the brackets [ ] to these (I've just offered images here because there's no other way I could show you the symbols needed for the code.)
textareatexthere /textarea

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!

additional resources

Click here to submit a site for any of these categories! The only other banner tutorial I know of is Aurora Tutorials.
Button Tutorials:
Button Bases:
Banner Bases:
Textures:

fanmail

*Newest fanmail is at the bottom.

Button Tutorial: (53)

Banner Tutorial: (2)

sitely

link back

Did Create Impressions help you out? Please link back if it did and spread the word!


Affiliates

Requests are open! (Subj: CI Affies)

directories

Did you list me?

Create Impressions © evileh 2008-2012 | Textures from Nienke's Resources | Bullets from Flamboyance


Since October 27, 2008



Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions