tutorials

We have a selection of button and banner tutorials on this page. If you have a suggestion for a tutorial, neomail me!

Helpful Pages

• Button Making TIPS
• Coloring a Graphic Tutorial

Button Tutorials

• Basic Button Tutorial
• Creating Text
• Animation Tutorial: Sparkle Effect
• Animation Tutorial: Glow Effect

Banner Tutorials

• Vintage Banner Tutorial

Button Making TIPS

Here are some tips to make high-quality buttons! I also use Gimp for my buttons. :)

Fonts

• If you have a busy button, use a simple font like '04b03' or 'Skinny'.
• Always capitalize your pixel font letters! (ex: WHIRLIGIG)
• If you want a cursive font, try 'La Belle Aurore' or 'Never Let Go'.
• If you decide to use a cursive font, make the fonts size about 13 pixels to 15 pixels.
• Always have a 1 pixel border around your fonts
• If you are new to putting text on a button, see our tutorial!

Textures

• I use Nienke's Premades for my textures.
• You can also use Whirligig's premade button textures for your buttons.
• Try to have textures of the same color family (all warm or all cold colors).
• Never use more than 3-4 textures on one button or it can get too busy.
• I always overlay (layers-mode-overlay in Gimp) my textures and adjust their opacity (beneath layers-mode) until it looks just right.
• Blur any textures with lines or sharp corners. This creates a softer hue on the button instead of jagged lines.

Animation

• Go with a simple animation; less is always more. :)
• For simple letter animations, see Gimp Animation section.
• For a sparkle effect or a glow effect, use Whirligig's tutorials.
• Try to make the animation as conspicuous as possible (pretend like it isn't even there).
• Save the button base before doing any animations on it. You never know how the animation will turn out...
• Also, save your animated button as a .gif!

TO THE TOP

Coloring a Graphic Tutorial

This is a tutorial that will show you how to make an image have a color scheme using textures. To view the images, drag them to your tool bar and drop where you can make a new tab.

What I will be making:

Resources used (all from Whirligig's Resources page):

TO THE TOP

basic button tutorial

Use this button tutorial to create a basic button; no previous button making knowledge needed. To view the images, drag them to your tool bar and drop where you can make a new tab. The button I will be making is below, as well as the border (which you can use in your button if you would like).

If you want to have any animations, view the animations tutorials on the tutorial page.

tutorial: creating text

Use this tutorial to create simple text on a button. To view the images, drag them to your tool bar and drop where you can make a new tab. The button I will be making is below.

TO THE TOP

animation tutorial: sparkle effect

Use this animation tutorial to create the sparkle effect on a button. To view the images, drag them to your tool bar and drop where you can make a new tab. The button I will be making is below.

Some good examples of this animation are the following buttons that I made:

TO THE TOP

animation tutorial: glow effect

Use this animation tutorial to create the glow effect on a button. To view the images, drag them to your tool bar and drop where you can make a new tab. The button I will be making is below.

Some good examples of this animation are the following buttons that I made:

TO THE TOP

Vintage Banner Tutorial

Use this banner tutorial to create a vintage-inspired banner. To view the images, drag them to your tool bar and drop where you can make a new tab.

Original Banner:

What I will be making:

Resources used (all from Whirligig's Resources page):

TO THE TOP