|
|
Want to make your very own button? Well, here is a simple tutorial that I, Emma, have made to help you do so using GIMP. As you read this guide, keep in mind that each button maker has their own techniques. Creativity is key, so I encourage all of you to experiment. Who knows, maybe your way will be better than mine!
Over 6,000 views? Whaaat? Thank you all so much! :*
I guess I'll stop visiting newer sites, since they don't believe credit is necessary. Just so everyone knows, I made up the names of the animations. Oh, and I made up and was the first to use some of the borders too. Remember when people would credit everything, even a site that inspired them? I miss those days. (Sorry for how regular my rants are becoming. I'm just annoyed.)
Revamp Update: Still busy, so I'm trying to make little changes first. I'm planning on replacing the placeholders, textures, and some link back buttons. I'm also thinking about making the premade borders black and white. I originally made them grey so that people could see how an inner border should be outlined, but I think that makes them harder to use. I'm also having so much trouble with the layout. You know the one I made and loved a week ago? I don't like it anymore. I think I have a problem, this is probably the tenth layout I've thrown away. *sigh* I'll figure something out eventually.
The first step in creating a button is choosing an image, of course! For this tutorial, I will be using the one located to the left of this text. The most obvious place to find images is from Neopets Backgrounds, but I also suggest looking through the Caption Competition, Background Bonanza, game images, TCG cards, and plots. Dr. Sloth's Image Emporium is a great site for finding images too.
After you paste your image into GIMP, you can begin editing! However, I size down my image beforehand. I'm sure there is an easier way, but this is how I do it: I begin by changing the percentage in the bottom left corner of GIMP. Next, I take a screenie by pressing the print screen/sysRq button on my keyboard. I paste the screenie into MS Paint and use the Select tool to cut away everything but the image. Lastly, I paste a border (just like the green one seen to the left) onto my image and drag it around. After I have chosen which part I want to use, I simply select that part then copy and paste it back into GIMP.
My image is pretty clear, but if you notice that yours has become blurrier because it was sized down, go to the drop down menu under filters, then select enhance and sharpen. Since there is a preview, play around with the sharpness. Looking back at the original to see that you haven't sharpened it too much is a good idea as well.
All you really have to do to edit an image is play around with the layers. I begin by right clicking on the pasted layer in the layers box and selecting duplicate layer. I then set the mode to overlay and changed the opacity, which can be adjusted right beneath the mode.
Some images look a bit plain. One thing you can do to fix this is add scanlines. You can do this by creating a transparent layer, then using the bucket Fill tool (make sure you have chosen pattern fill and scanlines in the tool options box). Then change the mode to either overlay or grain merge and adjust the opacity. You can also add textures, which is the same process, except you paste a texture on top of your image instead of using the bucket fill tool.
Something else you can do to make your image stand out is change the colors. You do this simply by creating a white layer on top of your image, filling it with a color, and changing the mode. Doing this a couple of times with different modes creates different results. For my button, I chose the colors directly from the image using the color picker tool.
Begin by creating a transparent layer on top of your image and pasting your border on top. Make sure to paste only your border with no extra space around it. Also, don't forget to right click on the floating selection and select anchor layer. After this, choose the fuzzy select tool. Click on all of the white areas around your border and press the delete button on your keyboard.
Now it's time to make the border colorful! Right click on the new layer and choose alpha to selection. Then, go to the drop down menu under edit and select either fill with FG color or fill with BG color. This is assuming that you have already selected a color for your border.
Of course, you can be a little more fancy and make your border have two colors. Fill your foreground and background boxes in the toolbox with different colors and select the blend tool. Again, right click on the new layer and select alpha to selection. All you have to do now is drag your cursor across the image.
Next, add a white "inner border." Select the pencil tool and change the scale in the tool options box to 0.01 px. Make sure that your FG color is set to white. Create a transparent layer on top of your image and draw in the border (to do this, I usually change the percentage at the bottom of GIMP to 400%). If your border curves, I suggest that the pixels of the inner border don't touch (drag and drop the image to the left to see what I mean). Finally, change the mode of the layer with the inner border to either screen, overlay, or grain merge, and adjust the opacity.
To finish the border, merge the layers and choose the fuzzy select tool. Cut away all parts of your image that are outside of the border. As you do this, the parts that you delete should become grey. If they become white, right click on the pasted layer in the layers box (this is after you have merged the layers) and select add alpha channel. This will make it so your button has a transparent background.
Now that that's done, let's start by changing the foreground color to white and clicking on the text tool. Choose a font, change the size, and then click on your button. You may notice that GIMP does not allow you to make these fonts bold. If you wish to do so, you can type the text in bold in MS Paint and then paste it back into GIMP.
As you can see, without a border the text is much more difficult to read. To add one, first change either the FG or BG color. I usually choose the same color as the image, only I make it a bit darker. Right click on your text layer and select alpha to selection. Go to the drop down menu under select, and choose grow. Then, change the number to 1, click on OK, and duplicate the text layer. Finally, click on the text layer closest to the image, go to the drop down menu under edit, and choose either fill with FG Color or fill with BG Color.
If you want your text to stand out even more, you can add a drop shadow. Right click on the layer with your text's border and choose alpha to selection. Go to the drop down menu under filters, choose light and shadow, followed by drop shadow. Change both offsets to 0 px. I usually make the blur radius between 5 and 10 px. Now all you have to do is select a color and click OK (I often go with the same color I used for the text's border). In your Layers box, drag the drop shadow layer so it is between the image and text's border.
NEW! I didn't include this part before because I thought 'There must be a simpler way.' Well, I've come to the conclusion that there isn't. Sadly, GIMP does not make text look very good, and if you want it to be high-quality you have to do it on your own. This is where you have to use the eraser tool. The brush should be set to circle (11). Make the scale to be 0.01 and the opacity to about 50. Change the percentage at the bottom of GIMP to about 800 % and erase any part of the border that does not touch your text. Here's what I mean (the blue parts represent where I would click once to erase):
Something you can do to make your text stand out more is create a stripe. There are different ways to do this, but I will show you what I think is best. Start off by creating text with a white border, as is shown to the left.
Next make a transparent layer and put it between the image and text. Use the rectangle select tool to create a box around your text on that layer. Go to edit and fill with BG color (assuming that your BG color is white). Adjust the opacity of this layer to your liking.
There are three ways to cut off a stripe so that it doesn't cover up your image. The first is to use the rectangle select tool and cut away the part you don't want. You can also use the ellipse select tool. Make sure that the box for feather edges has a check mark and that the radius is at 100. Select a part of your stripe and press ctrl and x on your keyboard at the same time. The bigger the circle, the more will be deleted. The more times you press ctrl and x, the less your stripe will be visible. If you're like me and have an object in your image that is covered up, you can even make the stripe look like it's going behind that object. All you have to do is use the eraser tool.
The last thing that I always do is create a drop shadow. Right click on the layer with your stripe and choose alpha to selection. Go to the drop down menu under filters and select light and shadow followed by drop shadow. The offsets should be at 0. I usually use a blur radius of 10 and keep the color as black. Move the drop shadow layer so that it's beneath your stripe. You'll notice that the shadow extends to the sides. To fix this, use the rectangle select tool. Create a box around the shadows on the sides and delete them. The last step is to change the the mode of the drop shadow.
Change the FG color to whatever you want your animation's color to be (try to choose a light color). Select the bucket fill tool and the layer at the very bottom of your layers box. Fill in the first letter, then click on the second layer and fill in the second letter. Keep going until you have done this for all letters.
If you duplicated the layers correctly before, you will notice that you have an extra one left. Duplicate this layer a few times (I duplicate at least 7 times), as it will give your animation a pause at the end. Go to the drop down menu under filters, click on animation and then playback. This way you can see if you have made any mistakes or if there's anything you would like to change.
The last part is saving your button. Go to file and save As (I suggest that you make your button a GIF). After you have clicked OK, choose save as animation, and click on export. Make sure there is a check mark by loop forever and change the delay to around 130.
Next choose a FG color. Use the bucket fill tool to fill in the first letter on your first layer, the second letter on your second layer, and so on.
After you are done, select a lighter shade of the color you used before. Go back to the second layer of your button and fill in the first letter, then go to the third layer and fill in the second letter. When you come to the last letter, use the first extra layer you made before. Now repeat the process with an even lighter shade. This one should be very close to the color of your font.
Once you have finished, duplicate the last extra layer about 7 times. Playback the animation before saving to make sure it looks good. Lastly, save your image the same way as for the last animation.
Now click on the top layer and select your text's border. Duplicate and fill it with a white color, then change the opacity to about 40. After making sure that only the border is selected, go to the drop down menu under filters and click on light and shadow, followed by drop shadow. Adjust both offsets to 0, the blur radius to about 5, the color to white, and the opacity to 100. Place the drop shadow beneath your text, but on top of the image, and duplicate it a few times if needed.
Once you have merged everything so that only the three layers are in your layers box, click on animations and blend under the drop down menu for filters. Change the immediate frames to 10, the max. blur radius to 0, make sure that looped is check-marked, and click on OK. A new window will pop up, and this will be the one you should use. After you check that the animation looks good, all that's left is to save!
Go to the drop down menu under filters and select animation, followed by blend. Once again, change the intermediate frames to 10, the max. blur radius to 0, make it looped, and click on OK. Now go to the new window that has popped up. Find the layer in which the text is not faded, duplicate it about 10 times, and save. Yup, that's it!
There really is no way to explain what a sparkle is supposed to look like, so I'll be using the image below to explain. Start by changing the foreground color in the toolbox to whichever color you want your sparkle to be. This is usually white, but I've chosen black as an example. Then, select the pencil tool. In the tool options box, the brush should be set to circle (11). Change the scale to 0.01 and change the percentage at the bottom of GIMP to about 800%. Duplicate your image five times for a single sparkle. On each layer, draw the sparkle as it is shown below. The numbers above the examples correspond to layers. When you're done, don't forget to add a few layers of your image to give the animation a break. The end product should look somewhat like the button to the left.
Of course few people choose to go with only one sparkle. If you want multiple sparkles, here's how to do it: whenever a sparkle you've made is on step four (according to the image above), start a new sparkle. That means that when your new sparkle is on step two, your old one is on step five and disappears completely when your new sparkle is on step three. It might seem complicated, but it's pretty simple once you get the hang of it!
|
 |
 |
 |
 |
 |
NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2013.
® 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