Welcome to Magnifique
, a button tutorial site. I'm Delightful
, and I'm here to serve you with in-depth
tutorials on creating a quality button! All tutorials are completed in GIMP, a free image editing program. Magnifique used to be a graphics and resources site, but transformed into a button tutorial site due to the lack of interest in premades. I encourage you to look around and learn about the making of a button!
Choosing an Image
First of all, you're going to have to find an image for your button. Great places to find images include Neopets Backgrounds
, CC Images
, and Charly's SWF Collection
. As a beginner, you should find images that aren't complex
. Here are some examples of more simpler images:
I will be using this image throughout the entire tutorial:
Now that you have chosen an image, let's move onto the next section!
Choosing a focal point
A focal point
is the key image of your button. Take this button for an example:
The focal point
in this button is the knight
at the right. Remember, the focal point can be anywhere
! The focal point that I will be using in my image is the water faerie.
Some buttons do not have focal points. Instead, the image acts as a background for the text. The lack of a focal point makes it rather easy to place text.
Open up GIMP. Paste your in your image. Now using the Scale tool, scale your image down to a desired size. Make sure you don't make the image too small
or else no one will be able to make out any details in the image.
Now here's the trickier part: cropping. Now that you've scaled down your image, you can begin cropping. The usual size for a button is 88px by 31px
, so crop down the button to that size using the Crop tool. Make sure you include your focal point somewhere and leave a little space for the text. You may have to experiment with the sizes in order to get the focal point to fit in the button.
The image might look a bit blurry after scaling it down. Sharpening the image can easily fix this problem. You can find the Sharpen option under Filters to Enhance. Play around with the setting a bit until the image looks sharp enough. Make sure you don't sharpen the image too much
, as it will make the image look low quality. Here's what I have so far:
Now you may begin editing the colors and adding textures! You can change the colors of the image by selecting the Color Balance option under Colors. Experiment
with the colors! You can also play around with the other options under Colors and see the outcomes!
I also usually create gradient overlays
on top of my images. Select the Gradient tool in the toolbox, and then change the gradient setting to: FG to BG(RGB). Make sure the shape is linear. Change the FG and BG colors to some colors of your choice(preferably from the image). On a new transparent layer, create a "line" going across the entire button. Then set the mode of the new layer to overlay. Lower the opacity if necessary.
You may also add textures
to make your button look even spiffier! You can get wonderful textures at Details
. To apply a texture, copy and paste the texture on top of your image. Scale the texture down to an appropriate size. Then move the texture around and place a suitable part of the texture directly over the button. Remember: if you're using a bokeh texture, don't have the shapes cover the focal point!
Afterwards, you can set the mode of the layer to overlay or some other mode. Change the opacity as necessary. You can add more textures, but make sure you don't overdo it
! Here is what I have so far:
See the significant difference after editing the colors? Now merge all of the layers down.
Now you can apply a border
to your button! The border acts as the button's "frame". For the sake of this tutorial, I'll be using the simplest border for my button. It's not very difficult to make. First, create a new transparent layer. On the new layer, using the Pencil tool, create a black "outline" of the button along the edges. Make sure you go around the entire button!
Now you should make a white "inner border". Just repeat what you did in the last step on a new layer, except with the color white. It should be inside the black border.
There are several ways to go about with the border. You can fill in the black border with a dark color from the image. You can also use a dark gradient for the outer border. But I usually like to set the two border layers' modes to Overlay. Keep in mind that this will not work on all buttons. Here is what I have at this point:
Make sure you merge all of the layers down after you're finished!
This is probably the most difficult part: applying text. Now let me make one thing clear: the text must be legible and easy to read
. Nobody wants to have to squint just to read the text on your button.
There are many different ways to go about applying text. But since this is a beginner tutorial, I'm going to show you the easiest method. First, select the Text tool and click on a pixel font of your choice. Good choices for pixel fonts include 04b03(8px), Wendy(10px), and Bangalore(8px). You can download these fonts offsite. Change the size accordingly and make sure the color is white.
Now click on an empty area on the button and start typing out your text. Change the size of the text box is the text is cut off. Then place the text at a suitable spot. Whatever you do, don't have the text overlap with the focal point!
Obviously, you're not going to stop here. The text is illegible. Fix this by adding a border around the text. Take a dark color from the button's background as your FG color. On the text layer, click on "Layers" in the top left and then hover over "Transparency". Click "Alpha to Selection". Create a new transparent layer and move it beneath the text layer. Under "Select" click "Grow". On the new layer, click on "Fill with FG Color" which is under "Edit". Now the text should look a lot more legible.
You can have a finished button at this point. You've got the base, the border, and the text. But you can take a step further with the text to make it seem less bland. I like to blur the text border sometimes to make the text blend in more with the image. To do this, click on "Filters" and select "Gaussian Blur" which is under "Blur". Both settings should set between 2-5px, depending on the button. The text should look a lot better now!
Now click on "File" and select "Export...". Save the button as a PNG.
That's about it! You now know how to make a simple button! Feel free to look at the other tutorials if you're up to it. If you have any questions or concerns, please contact me