// Home

Hiya! Welcome to Eris, a somewhat ambitious project run by me, Amina. After a year or two on hiatus, I wanted to create something more permanent that could prove useful without my consistent management. Thus, I've established a graphic tutorial/request fusion site to satisfy these desires! To put it simply, this site hosts tutorials and guides (specifically of the button-making variety!) as its main content, but I occasionally offer requests when my schedule permits.

I used to run a button-request site called Pandora. Unfortunately, I can't access the account on which my old request site's been hosted. So, I have decided to start anew on a new account.

With that said, Pandora is officially closed (if that wasn't obvious).

If you have any questions or concerns, don't hesitate to send me a neomail!


September 7, 2018

  • Hey everyone! I'm just about settled into the new school-year and I have some extra freetime this weekend to get some button requests done, so requests are open! I'll most likely close them on Monday depending on the amount of requests I get :)

August 18, 2018

  • New DEEMO-themed layout! I think I've transferred just about everything over, but do let me know if I've missed anything.
  • I've made a whole new set of button placeholders to accompany the new layout design, which you can check out here!

August 10, 2018

  • Hello! I'm not dead! However, school's starting up for me next week and I've been super busy prepping for it. Requests at both here and Ceres will remain closed for at least a few weeks or so. I am working on a fresh new layout for Eris in the meantime though!

July 25, 2018

  • Requests are now closed.
  • + 1 request received, +3 completed, sorry for the delay!

My other sites

// tutorials

Things to Note

  • All tutorials are written for GIMP. However, much of the same principles apply to most image-editing programs, so feel free to follow each tutorial in the program of your choice!
  • Experiment! I'd say about 70% of the graphic-making process is simple trial-and-error. So I would suggest that you alter any of the techniques I've shown you to suit your specific style or tastes.
  • I am always open to suggestions! If there's anything in particular you'd like for me to demonstrate (it doesn't necessarily have to be button-related!), don't hesitate to tell me.

// the basics

quick jump


Before we begin...

  • This tutorial is meant for beginners. However, it will not go into full detail by showing how to do every particular step. Rather, it'll teach you some general concepts and methods you can apply to your own button.
  • Neomail me if you'd like for me to clarify anything!

part one: the image

Choose an image to use as your button's base! You can find neo-related images on the Neopets Backgrounds page and the Dr. Sloth's Image Emporium fansite. You could also visit the Popsicle Stand to look through sites for other neopets images or swf files.

I strongly suggest that you pick an image that isn't blurry or has a focal point. Keep in mind that we are working with a very small canvas size, so the image should retain some detail when resized.


Here is the image I will be working with throughout this tutorial:



// the basics

quick jump


part two: Scaling & Cropping

Paste (Ctrl+V) your chosen image into GIMP. If you've pasted it onto an existing canvas/layer, delete that layer and go to Image -- Fit Canvas to Layers so that your image is the only thing on the canvas.


Before we start resizing the image, one little trick to make cropping easier is to crop what we want before we resize the image. Essentially, you'll want to crop out a box (using the Crop Tool) that is approximately proportional to the dimensions of an actual button (88px by 31px) but relative to the original size of the image. In my example, I intended to make the space grundo's face the focal point of the image, and thus I alloted about half of the box's length the the grundo's head. This leaves us enough space to add text later. Be mindful of how much text you plan to add to your button and consider that as part of your cropping plan.



After we've cropped the image to our liking, we can now resize the image to approximately 88px by 31px using the Scale Tool. Your image will rarely perfectly scale down to the right dimensions, so I recommend scaling down to 31px height and then cropping along the width so that the width is 88px. **Make sure the chain to the right of the width and height boxes is connected, as this will preserve the original image's proportions.



Now that we've finished cropping and resizing our image, the image will need to be sharpened to restore some of its original quality. Go to Filters -- Enhance -- Sharpen and adjust the sharpness as needed. Be careful not to oversharpen the image; I usually never exceed the 50 threshold.




// the basics

quick jump


part three: Image Editing

Onto the fun part! Now we'll start editing the colors of our freshly created button base. There are soo many ways accomplish this, but for this guide I will simply be showing you a few more straightforward methods. You do not need to use all of these; just mix & match to suit your own vision!

  • Color -- Color Balance: This allows you to change the hues of the image's midtones, shadows, and highlights.
  • Color -- Hue-Saturation: I rarely ever use this option but it is definitely useful if you want to change the hue/saturation/lightness of an existing color in the image.
  • Color -- Brightness-Contrast: Great for self-explanatory reasons.
  • Color -- Levels/Curves: These two are quite similar in what they do, allowing you to heighten or lessen the green, red, and blue hues of your image. Personally, these are my favorite features, as they allow for so many color combinations. I highly encourage that you play around and experiment with these settings!
  • You can create a new layer and fill it with a chosen color (or a gradient using the Blend Tool). Using the different layer modes, you can achieve a wide range of effects. Again, experiment!
  • Finally, you can also manipulate textures to edit your image. Textures come in many flavors, including light, bokeh, grunge, abstract, geometric, fractal, & even button-sized textures! There's a whole motherlode of textures out there on the interwebs, but if you're looking for textures onsite then Details is a great source. You can look through the credits section on this page to see other sources from which I get my textures!
Using textures to their maximum effectiveness is quite the hurdle and will not be touched upon in this tutorial. However, for the time being, I'd recommend just playing around with repositioning/resizing textures and with the layer mode.


If you do opt to use textures, I should briefly mention the concept of overtexturing and how to avoid it. Overtexturing occurs when textures are not properly blended into the image and begin to overpower it. Take a look at this example:


See how the focal point of the image (the grundo) takes a backseat to the harsh purple hues from the texture? Also note that the grundo is extremely bright which results in a washed-out, faded look.

There are a few ways to avoid this, the most obvious being to use a minimal number of textures. Generally, the more textures you apply, the higher you are at risk of overtexturing.

The most effective way to combat this, however, is lowering the opacity of the texture layer. This will lessen the harshness of the textures without completely eliminating the intended effect. Here's the same example as above, but with the opacity of the textures lowered:


Doesn't look so bad now, does it?


Here's what I've done to my button; hover over each image to reveal each step!


**remember to sharpen your image again if it becomes blurry!


RULE OF THUMB: Try to go for a cohesive and unified color scheme. For instance, if the main color of your button is orange, then it's fine to incorporate similar shades of red or yellow. Alternatively, you could even toss in some complementary colors if you can!

// the basics

quick jump


part four: the border

Next, we can add a border to our button. To be completely honest, I am not the most creative with my usage of borders, so I tend to stick with the good ol' fashioned dark outer border & white inner border, but I'll occassionally use others. I personally feel that borders should simply act as frames for the button and should avoid being over-distracting. Of course, do whatever you feel is right for you! Here are some of the ones I use:


to use, simply copy & paste the border on top of your button and delete the gray area.


There are plenty of ways to blend your border into your image, the most popular of which involves setting the layer mode of the dark outer border and white inner border to soft light/overlay. I find that this technique works on most buttons, but with some alterations that I will explain in a future tutorial!

Additionally, you could also change the color of your dark outer border to a dark tone already present in your image. Or you could leave the white border on normal mode but adjust the opacity as necessary. Again, experiment!


To demonstrate how they might look, I've applied a few borders to my button:



// the basics

quick jump


part five: the text

It's time to add the final essential piece to our button: the text! This phase of the button-making process is just as technically diverse as image-editing. There's a plethora of ways to approach text design in your button, and even then your approach should be highly situational based on the colors, brightness, saturation, etc. of your base. Here, I'll simply show you a very standard (yet adaptable) way to add and stylize your text.

In part two, we mentally came up with a rough layout by determining the relative positions of the focal point and/or text. Using the Text Tool, create a text layer and type out your desired text. Then, move the text to its appropriate position, resizing it as necessary. Don't worry about it looking pretty at this point - we're just positioning it. Change the color of the text into one that is visible against the backdrop of your base (for instance, white if your button mostly consists of dark hues).




Now we have to choose a suitable font. Fonts (or typefaces) come in two flavors: pixel and non-pixel. Pixel fonts are typically in the 8-16px range, while non-pixel fonts are typically 20+px. Because pixel fonts take up much less space than non-pixel fonts, you should use a pixel font if a) the text you want to input is very long or b) you didn't leave a lot of room for your text. Here is a list of pixel fonts you can download from dafont:



Also keep in mind that you should always type out pixel font text in all caps, as your text is much less legible when written in lowercase! Compare these two buttons:


Notice how the text on the left button is clearly easier to read than that on the right?



I think there's a lot more variety out there when it comes to non-pixel fonts, so get out there and search for some you like (Dafont is a great source)! For buttons, you'll typically want to use a non-pixel font that is thick so it remains legible at smaller sizes. Compare these two buttons:



I used a very thin font on the left button, while I used a thicker one on the right. While the text on the left is somewhat legible and could be edited to pop out more, the text on the right is clearly readable, hence why thicker fonts are more preferable.



Once you've chosen the right font (and adjusted the size appropriately), it's time to actually stylize our text. I like to start with the text border first, so let's begin by taking the primary shadow hue (i.e. the main dark color) of our base via the Color Picker Tool. Then, right-click the text layer and click Alpha to Selection. Go to Select -- Grow and grow the selection by 1px, then make a new layer and go to Edit -- fill with FG/BG color (depending on what you've assigned your border color to).




We'll leave the border as is for now and come back later to stylize it further. For the actual text, color pick the primary midtone hue (i.e. the main intermediate color in between the darkest and lightest hues) of your base, and adjust the value/saturation to make it slightly whiter. Alpha to Select this layer and fill in the same fashion as before (on a new layer). Make sure you hide or delete your original text layer!




Let's return to the text border. You'll really want to deviate here in order to make it suitable for your particular button. To make the text pop out further, I duplicated the border and went to Filters -- Gaussian Blur and blurred it by around 2-3px. To even further enhance this effect, I added a drop shadow to the border by Alpha to Selecting it and going to Filters -- Light and Shadow -- Drop Shadow (offsets at 0, radius around 7px, and black color). I then moved the drop shadow under my text border layer and changed the mode to soft light (and opacity to 75%).




Back to the actual text again! I wanted to make it stand out more so I added something of a white gloss layer on top of the text, set to soft light. I hope this helped give you a general idea on how to approach text design for your button!




// the basics

quick jump


part six: the animation and finishing touches

After you've basically completed designing your entire button, you can do some post-image/text editing to spruce up certain aspects of your button. I will write up another tutorial on this process in the future! Anyways, I've added a sort of light spot to my button's text.




Finally, you can incorporate some animation into your button (though it's not necessary). Although I won't be explaining how to do animations in this tutorial, I will say that you generally want your animation to be more subtle than distracting. It should complement, not overpower. In addition to the guides I may write up in the future, I highly recommend checking out Bejeweled Tutorials and Impulse's Tutorial for some in-depth animation tutorials! In any case, here's my final product, animation added:




Aaand that's all folks! I sincerely hope you found this tutorial useful in any sort of capacity. I'd love to hear your feedback or any suggestions you have on how I could further refine this tutorial!



Back to tutorial menu?


// animation guides


// shine animation


Examples


Before we begin...

  • This tutorial is intended for those who are decently familiar with GIMP.
  • Although I'm aware that there are already a few tutorials on how to pull off this animation elsewhere, I'd like to add my own take into the mix.
  • Neomail me if you'd like for me to clarify anything!

Here is the button I will be working with throughout this tutorial:


Step #1: Decide whether you want your shine to go over your text or under your text. Neither way is necessarily better than the other, in my opinion, but placing the shine under the text does make the text "pop" out more.

Step #2: Create a new transparent layer. If you want your animation to go over the text, you can place the layer at the very top. Otherwise, move it underneath your text. I'll be placing it underneath my text.

Step #3: Change your foreground color to white and click on the Blend Tool. Select FG to Transparent as your gradient and bi-linear as your shape. Some button-makers prefer using the Flare Radial 1 gradient with a linear shape, but I prefer the former because it just looks smoother to me. Take your pick!

Step #4: Starting at the top midpoint edge of your button, click and drag the Blend Tool like shown:

You, of course, don't have to mimick this exactly. You can make your shine more oblique if you increase the angle, or you can make it thicker by lengthening the dragged line. In any case, your button should look something like this:




Step #5: Set the mode of the shine layer to soft light. You may have to play around with the opacity if you find the shine a bit too harsh still.


Step #6: Drag the shine over the entire button to ensure its effect is relatively uniform all across. If it's too harsh at one particular area, lower the opacity as needed.

Step #7: Now we're ready to start the actual animating! Move the shine layer all the way to the left (or right of the button, if you want the shine to go from right to left) so that it is entirely outside the button.


Step #8: Go to Layer -- New from Visible, move the new layer to the very top, and hide it by clicking on the eyeball. Zoom in until you can comfortably see each pixel (1100%+ should be sufficient).


Step #9: Re-select the shine layer and move to to the right (or left if you started from the right) 3-4 pixels. I usually prefer the slower 3 pixels but you can go 4 pixels if you want a faster shine.

Step #10: Once again, go to Layer -- New from Visible, move the layer to the top and hide it.

Step #11: Repeat Steps 9-10 (ensuring that the number of pixels you move the layer is constant throughout!) until the shine is once again completely out of bounds. This will generally take 30+ new from visible layers.

Step #12: Delete the shine layer and merge all of the visible layers together. Unhide every hidden layer.

Step #13: Copy your bottom-most layer and place the copy at the very top, then duplicate that copy around 10-15 times. This will give the animation some breathing room.

Step #14: Go to Filters -- Animation -- Playback and keep an eye out for any kinks in the animation. If you find any, you can try to find the problematic layer if possible, or you may have to restart the entire animation with some adjustments. This is a time-consuming process so you should always try to be careful that you don't make any mistakes.

Step #15: Export your button as a gif animation, with the following settings:

I usually just leave the delay as is at 100 milliseconds, but you can change this if you want. Anything under makes the animation faster, and anything bigger makes it slower.



Final Product:

Aaand that's all folks! I sincerely hope you found this tutorial useful in any sort of capacity. I'd love to hear your feedback or any suggestions you have on how I could further refine this tutorial!



// miscellaneous guides


// adding text: practice


Before we begin...

  • Try your hand at adding text to a wide variety of premade bases! This is intended to help you develop your text styling skills exclusively.
  • Each challenge is (sort of) ordered by ascending difficulty.
  • Feel free to use these bases for your own personal use. However, please do not use these for requests. Additionally, you must credit this site (/~libermango).
  • Send me your finished buttons! I'd love to see them.
  • Have fun! :)

challenge #1


challenge #2


challenge #3


challenge #4


challenge #5



// tips and tricks


Tip #1: One annoying issue with making buttons in GIMP is that a conspicuous yellow/black dashed border will appear around your button after you've cropped it. This makes it really difficult to view the button with the border whilst working on it. A super easy way to bypass this is to create a new text layer in the gray area surrounding your button. This way, whenever you click on the text layer, that annoying border will only surround the invisible text, and you can see the entire button! Drag the screenshot below into a new tab to see this demonstrated:


Tip #2: Make Layer -- New from Visible your best friend. Seriously, this is super useful for saving time and energy, as it allow you to produce everything you have so far into one neat layer without having to merge everything down. Additionally, you can make multiple new from visible layers to quickly compare effects/colors.

Tip #3: I suggest that you don't merge down your layers until you've finished making your button, reason being that you may find that you need to slightly alter a layer/some colors/whatever as you progress. Use the New from Visible function, as described above, if you really need all your components in one layer for whatever reason.

Tip #4: Prioritize functionality over style. You want to make sure that your text and your image are legible/clear before you pretty them up.

Tip #5: Remember to Zoom into your button if you need to manually pencil/brush/make text/erase anything. A 800%+ zoom will allow you to see every minute detail/pixel. It should something like this:



// request

Rules and Guidelines

  • Please credit back to this site. Provide a link back to /~Libermango.
  • Request one button at a time. After your first button has been completed, I'd be happy to make you another as long as requests are still open.
  • *asterisks indicate required fields on the forms. Please fill these parts out.
  • I'm willing to work with just about anything! However, things like custom animations may be too time-consuming or beyond my capabilities, so I ask that you cooperate with me.
  • I'm kinda slow at making graphics, so please be patient! I'll specify an estimated waiting time on my reply back to your form so you'll have an idea about how long you might have to wait.
  • Resend your form if you do not hear back from me within 5 days.
  • Refer to my portfolio for some examples of my work.

// pickup

Thank you for requesting!

  • If you're dissatisfied with any particular aspect of your button, please neomail me back so I can fix it.
  • Buttons will be moved to the portfolio after one week.
  • Consider giving us a rating at Refresh. Any feedback is greatly appreciated!

Name

Name

Name

Name

Name

Name

Name

Name

Name

Name

Name

Name

// extras

// resources

If you'd like me to recolor a resource, neomail me!

button placeholders




// sitely

partners // open!

listers

Reviews & Proofreads

credits

  • Content & Layout (V.2 Blue Reflections) © piazorro
  • DEEMO © Rayark Inc.
  • Banner textures from ACOR and haeseight
  • Background from Mariposa
  • Button textures © faeriepuffs, backtalking, chaoticroad, and Details
  • Submit form button from Foomanshu
  • Dividers and back & next signs from Bedazzled

NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-2018.